Geek Answers Handbook

CSS: Start pagination with 2 instead of 1

In CSS with

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

My page numbers may appear at the top of each page when printing a page. This works great. But now, how can I make the page number start with 2 instead of 1? Can I do this by changing the CSS rule above?

+4
source share
5 answers

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

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

It works like a charm. And the flying saucers rocks :). Highly recommended.

+3
source

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. The default is 0 .

+3
source

After playing with the Flying Saucer a bit, I think there is no way to do this with CSS (or it is very complicated), since the "page" / "pages" are apparently CSS internal variables. Perhaps with CSS 3 it improves, it seems that the calc () function might work counter (calc (page + 1)).

But there is another way to get a PDF starting on 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 print only 2 -... PDF pages when using a printer, or delete the first page from a PDF using a PDF editor.

+2
source

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

+2
source

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

-1
source

More articles:


All Articles