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

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