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?

回答1:

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.

回答2:

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.

回答3:

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.

回答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.

回答5:

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