I am trying to create a page footer containing a disclaimer (bottom centre) and a page number (bottom right, underneath the disclaimer). I cant use @bottom and @bottom-right-corner because I want the page number underneath the disclaimer (right justified).

I have managed to get close to doing this using the following html (simplified):

<div class=footer>
<div class=disclaimer>some text</div>
<div class=page_ref>page </div>
</div>

with the css below. However its seems that I am not able to combined a flow() and a counter() element within a singhe content: attribute in the @page rule. Here is my css - the important section is the @bottom rule:

@page hypo {
size: A4 landscape;
margin: 15%;
padding: 8mm 0 5mm;
border-bottom: none;

@top-left {
font: 24pt "Georgia", serif;
content: flow(snplogo);
vertical-align: bottom;
margin: 0.3em 0;
}

@top-right {
font: 24pt "Georgia", serif;
content: "Illustration of Hypothetical Investment";
vertical-align: bottom;
margin: 0.3em 0;
}

@bottom {
border: none;
content: flow(footer_section) counter(page);
padding-top: 0em;
margin-top: 0em;
}
}

.footer {
border: none;
margin: 0em;
padding: 0.4em;
text-align: justify;
page-break-inside: avoid;
flow: static(footer_section);
}

.disclaimer {
border: thin solid black;
margin: 0em;
padding: 0.4em;
text-align: justify;
page-break-inside: avoid;
}

.page_ref {
border: none;
text-align: right;
page-break-inside: avoid;
}

Prince converts this into a pdf but it fails to display anyfooter at all. if I remove the "counter(page)" element from the @bottom rule then the footer is displayed - but without a page number.

Do you know if this is a bug in prince or perhaps its not allowed in css3 (but I cant see why not)?

I could have removed this ticket but I thought a solution report might help someone else - I see that others have attacked similar problems.

All I needed to do was to change the @bottom rule and the definition of the .page_ref element as follows:

@bottom {
border: none;
content: flow(footer_section);
padding-top: 0em;
margin-top: 0em;
}

.page_ref {
border: none;
text-align: right;
page-break-inside: avoid;
content: "Page " counter(page);
}

This did the trick. So now my page footers contain some "disclaimer text" and below that it contains a page number (right justified). I like css (I now have 2 days "hacking" experience) and I also like prince. We may be purchasing a server licence for this in the near future.