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);
    }
    

上記の CSS セレクタルールを詳細に分析します:

  • #pageNum ルールは、指定した「pageNum」ID を値として持つ HTML 要素、つまりヘッダーやフッター用に作成した span 要素を選択します。
  • セレクターの :before 部分は、span 要素が処理される前にコンテンツを挿入できるようにする疑似クラスです。
  • counter(page) は、現在のページ番号をコンテンツとして返す関数です。
  • The content property tells the CSS processor that dynamic content (that is, an incrementing page number) is to be inserted before the span tag.
  • ラベルなし