_PDF_PageNumber_Example

To add page numbering to your documentation, you need to combine some customised HTML in the header or footer with some customised CSS in the PDF stylesheet.

1. Create a header or footer with an empty span element and give it a unique ID, for example pageNum. This is a place holder for the page number in your PDF document.

   <span id="pageNum"/>
   

2. Create the following CSS selector rule for the empty span and add it to the 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 before the span tag.