Page numbers can be added with the CSS content() property and counter() function.
Default Counters
Unlike browsers and browser-based HTML-to-PDF libraries, which require explicit counter creation, DocRaptor has two predefined counters for you:
The
pagecounter is the current page.The
pagescounter is the total page count for the document.
Using Counters
Here’s a basic example that adds the current page number to the bottom of every page:
@page {
@bottom {
content: counter(page);
}
}You could also add, say, “Page 1 of 20” with code like:
@page {
@bottom {
content: "Page " counter(page) " of " counter(pages);
}
}Creating New Counters
You can also define new counters, such as a chapter or section counter, with the counter-reset property:
h1 { counter-reset: chapter; }Then, you could add the chapter counter to the footer with the content property like:
@page {
@bottom {
content: "Chapter #" counter(chapter);
}
}Resetting Counters
Occasionally, you may want to reset a counter. For example, you count the introduction section differently from the primary content section. Here’s how to reset the counter:
.primary-content {
counter-reset: page;
}You can also explicitly alter the count with:
.primary-content {
counter-reset: page 13;
}Changing Counter Style
The page counter is styled with decimals by default, but it can be changed to any of the following:
decimal(1, 2, 3, ...)decimal-leading-zero(01, 02, 03, ... 09, 10, 11, ...)lower-alphalower-latin(a, b, c, ... z, aa, ab, ...)upper-alphaupper-latin(A, B, C, ... Z, AA, AB, ...)lower-roman(i, ii, iii, iv, v, vi, ...)upper-roman(I, II, III, IV, V, VI, ...)asterisks(*, **, ***, ...)
To change the style, simply pass any of the above as a second argument to the counter() function:
@page {
@bottom {
content: counter(page, lower-roman);
}
}