I'm working on producing a report using Prince and I have almost all of the formatting working except I'm having an issue with generating a footer with all the information I need. I had been using a simple footer with a Copyright statement in bottom-center and a page counter in bottom-right. This worked fine. A subsequent change in the design, however, has changed the information I need to display in a footer. At the bottom of each page I need to display something like this (some text on the left, some vertical space, copyright info in the center of the page and page information on the right):

____________________________________
Source: ... blah blah blah ...


                                                                 © XXXXX, Inc.                                              Page n of m

I've tried putting the text content to bottom-left, the copyright in bottom-center and the page to bottom-right, but that puts it all on one line and I need the text to appear higher than the copyright and page information. I'm not quite sure how to accomplish this and I'm hoping someone can help me out.

What I'm currently using is this in a @page section of my CSS:
...
@bottom-left {
content: flow(footer)
}
@bottom-center {
content: '© XXXX, Inc.';
font-size: 8pt;
margin-bottom: 20pt;
}
@bottom-right {
content: "Page " counter(page) " of " counter(pages);
color:#101C6B;
font-size:8pt;
margin-bottom: 20pt;
}
...

Where I have a div with a class of 'footer' which contains my footer text.

Any help would be appreciated.

Thanks!

Page margin boxes behave a bit like table cells, and you can use the vertical-align property to shift the content vertically. By default they will have "vertical-align: middle", which you could replace with top or bottom. Adding vertical padding is another way to adjust their position.

The content of the left box will probably run past the center of the page. I don't want the left content to wrap, but rather to be on top of the center and right footer boxes. This is sort of like a footnote, but I don't have any footnotes on the page and every page needs to have the same message on the bottom after the content. It sounds like the vertical align would move the content of each box up and down, but, like a table, the left side would be as tall as the center and the right, is that correct? If I were doing this with a real table I would have something like this:

<table>
<tr>
<td colspan="3">The content which appears at the bottom of the page and might span across the center and right boxes ...</td>
</tr>
<tr>
<td></td>
<td>© XXXX, Inc</td>
<td>Page n of m</td>
</tr>
<table>

Conceptually, of course.

If I can't do this, is there a way to use a footnote such that there is no footnote reference in the main part of the report but just shows up in the footnote area of the footer?

Thanks!

Jim

What you can do is use the "flow" property to take a table element from the document and move it down into the footer, making it easier to create complex footer layouts directly using HTML. Try this:

table.footer { flow: static(footer) }

@page { @bottom { content: flow(footer) } }

Right, I've done that sort of thing before. How would I get the page number information into this area as well? So, I know how to use the flow statement to take content from my document, but I'm not sure how I could also incorporate the page counters as well.

Thanks.

You can use something like this:

<span style="content: counter(page)"></span>

Thanks, I'll give that a try.

BTW, I've been very impressed with how easy it is to get Prince XML to produce a PDF formatted the way I want it to appear. Great product!