CSS: Start numbering pages with 2 instead of 1

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?

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.

Try:

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

using page 1 will reset the starting point of the counter. You can use any integer to start counting from. The default is 0.

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.

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.

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

来源：https://stackoverflow.com/questions/264685/css-start-numbering-pages-with-2-instead-of-1

标签

css

counter