_PDF_PageNumber_Example

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.