CSS: Start numbering pages with 2 instead of 1

Question

In CSS, with:

@page { @top-right { content: "Page " counter(page) " of " counter(pages); } }

I can have page numbers displayed at the top of every page when the page is printed. This works great. But now, how can I make it so the page number starts with 2 instead of 1? Can I do that by modifying the CSS rule above?

Answer 1

Don't know if this works, but why don't you try counter(page+1)?

Answer 2

After playing with Flying Saucer a bit, I guess there's no way to do this with CSS (or it's a very complicated one), as "page"/"pages" seem to be internal CSS variables. Perhaps it gets better with CSS 3, there seems to be a calc() function, so counter(calc(page+1)) could perhaps work...

But there is another way to get the PDF starting with page 2. You can add a blank first page to the PDF by adding this line to the xhtml file:

<h1 style="page-break-before:always"></h1>

Then you can either print only pages 2-... of the PDF when using a printer or remove the first page from the PDF with some PDF editor.

Answer 3

If you are using Flying Saucer (which was my case), use the following CSS:

table { -fs-table-paginate: paginate; }

It works like a charm. And Flying Saucer rocks :). Really highly recommended.

Answer 4

Have you seen the CSS documentation about counters? see here It seems to me that you can call the counter-reset. By default counters are set to 0. If in your Body tag you did a "content-reset: page 1;" then it should force the first page to start at 2 instead of 1.