Commit a6d369e3 authored by Julie Blanc's avatar Julie Blanc

example reset page counter

parent 89c41b57
......@@ -89,11 +89,36 @@ To tally the total number of pages in your document, write this:
**Reset the page counter**
Don't work correctly in paged.js for now. [Issue #31](
For reset the page number, you need to target the reset on a specific element that appears only in one page (for example, the title of your chapter one).
#elem { counter-reset: page 1; }
It's common that the first pages of the book, called frontmatter, use roman counter page and the rest of the book use decimal counter reset on the first page of this content.
Here's a simple way to do it (it's an example, you can adapt it):
- create a `<section id="frontmatter">` with all the content of the frontmatter
- create a `<section id="body-content">` with all the rest of the content
- target the first element of the `body-content` which only appears on the first page of this section (the `<h1 id="h1-chap-1">`element in this example)
Use this CSS:
#frontmatter { page: frontmatter; }
#body-content { page: body-content; }
#body-content h1#h1-chap-1 { counter-reset: page 1; }
@page frontmatter {
@bottom-center{ content: counter(page, upper-roman); }
@page body-content {
@bottom-center{ content: counter(page); }
Note: If you reset the counter page on a section that runs over several pages, it will not work because the counter will be repeated each time a new sectino element appears, i. e. on each page.
## Named String: classical running headers/footers
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment