Page numbering is achieved by using the page counter, a pre-defined counter that represents the current page number.
The page counter starts at 1 and increments automatically at each new page. (Note that the page counter cannot be incremented manually using the counter-increment property).
The page counter can be reset using the counter-reset property at any block-level element within a non-floating element in the normal flow. This is useful for restarting page numbering at a new section of the document.
XML
<mybook>
<front> cover page, etc, ... </front>
<contents>
table of contents, ...
</contents>
<body>
body of the book, ...
</body>
<appendix> appendices, ... </appendix>
</mybook>
CSS
contents {
display: block;
page: table-of-contents;
counter-reset: page 1
}
@page table-of-contents {
@top { content: "Table of Contents" }
@bottom {
content: counter(page, lower-alpha)
}
}
The rule for the contents element names the pages that it appears on as "table-of-contents" and resets the page counter to 1 at the start of the element.
The @page rule for the "table-of-contents" pages generates a page footer that contains the current page number in "lower-alpha" style.
CSS
body {
display: block;
page: main;
counter-reset: page 1
}
@page main {
@top { content: string(chapter-title) }
@bottom {
content: counter(page)
}
}
chapter title { string-set: chapter-title content() }
The rule for the body element names the pages that it appears on as "main" and resets the page counter to 1 at the start of the element.
The @page rule for the "main" pages generates a page footer that contains the current page number in the default decimal style.
Total number of pages
The total number of pages in the document can be accessed using the pages counter, a pre-defined counter that is automatically fixed to the number of pages in the document.
CSS
@page {
@bottom {
content: "Page " counter(page) " of " counter(pages)
}
}
This rule will generate page footers such as "Page 1 of 89".