Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.
like image 761
Aaron Avatar asked Oct 30 '25 04:10

Aaron


1 Answers

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.

like image 180
Thomas E Avatar answered Nov 01 '25 17:11

Thomas E



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!