javascriptpdf-generationcss-paged-media

CSS paged media total number of pages minus cover pages

With converting HTML to PDF using paged-media CSS, I need to place the total number of pages excluding the cover pages (front and back) in the page footer.

The below CSS is fine for counting all pages.

content: "Page " counter(page) " of " counter(pages);

But what I need is something along the lines of:

content: "Page " counter(page) " of " counter(pages) - 2;

According to W3.org the 'pages' counter cannot be manipulated (1) and the calc() function does not support the use of counters (2).

Using a custom counter will not work as it returns the current counter value and not the final counter value. So I would get page 1 of 1, page 2 of 2, page 3 of 3...

As an workaround I've used form fields with the below JavaScript:

var x = this.getField('pageTotal'); 
if (x.readonly == false){
    x.value = this.numPages - 2;
    x.readonly = true; 
}

Is there a better alternative?

EDIT: One alternative which can be done without CSS and does not require form fields is to do a 'double publish'. I.e.

  1. Publish the document once.
  2. Get the total number of pages and subtract 2.
  3. Republish passing the page count as a parameter.
Solution

  • The discussion on https://www.princexml.com/forum/topic/504/reset-the-pages-plural-counter takes another approach using something like target-counter(url(#end), page) instead of "pages" to get the total pages number.

    Use counter-reset: page 1; on the the first real page, and then add a <div id="end"> </div> on the last real page.

    content: "Page " counter(page) " of " target-counter(url(#end), page); should return the with the values you want, excluding the back cover.