To add page numbering, you need to combine customised HTML in the PDF Layout with customised CSS in the PDF Stylesheet.

  1. PDF Layout HTML: In the Footer section (or the Header section), use an empty span element with a unique ID, for example pageNum, to act as a place holder for the page number.

    HTML - PDF Layout: Footer Section
    <span id="pageNum"/>

  2. PDF Stylesheet CSS: Create the following CSS selector rule for the empty span:

    CSS - PDF Stylesheet
    #pageNum:before
{
content: counter(page);
}

Analysing the above CSS selector rule in more detail:

  • The #pageNum rule selects the HTML element with the specified ID of "pageNum", which is the span element we created for the header or footer.
  • The :before part of the selector is a pseudo class that allows the insertion of content before the span element is processed.
  • The counter(page) is a function that returns the current page number as its content.
  • The content property tells the CSS processor that dynamic content (that is, an incrementing page number) is to be inserted at the span tag.
  • No labels