I am generating a document using Paged.js. As per company policy, the document must have a footer on each page as follows:
QFxxx ' |
VERIFY REVISION BEFORE USE Page x / x |
MM/dd/yyyy ' |
---|
I am having difficulty putting the "verify revision..." and page numbers in the same margin box. My first attempt at this was to use running-elements, since the "verify..." needs to bold and italic:
<style>
@page {
@bottom-center {
content: element(footRunning);
}
}
.foot-center {
position: running(footRunning);
font-style: italic;
font-weight: bold;
}
</style>
<!-- ... -->
<span class="foot-center">VERIFY REVISION BEFORE USE</span>
This works insofar as positioning and styling is concerned, but I cannot figure out how to add the page numbers. I wanted to see if using content
alone could at least achieve the line break (inspiration):
@bottom-center {
content: "VERIFY REVISION BEFORE USE\APage " counter(page) " of " counter(pages);
}
Instead of line-breaking, however, this only replaced \A
with a space.
Is there a way for me add line-breaks in the content
property OR to list the page numbers in a running-element?
So for anyone out there with the same issue, I found that it worked well to use a container and adding a child with the
after
pseudo element for the generated content (e.i. page numbers):Make sure to test your margins or the page numbers will go off the bottom of the page.