Page Numbers

It's easy to add automatic page numbers to your PDFs using CSS

Tony Dewan avatar
Written by Tony Dewan
Updated over a week ago

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 page counter is the current page.

  • The pages counter 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);
}
}
Did this answer your question?