How can I count CSS page breaks for printed HTML?

Question

I am generating reports using HTML and I am using CSS to control the page breaking using page-break-after, etc. I have given the user the option to print multiple reports at onc

Answer 1

The following snippet will produce; a print page break before each h2 on the page.

extracted from here

<style type="text/css">
  h2 {
    page-break-before: always;
  }
</style>

Answer 2

Ive been able to implement page breaks whilst creating PDFs for print, using wkhtmltopdf. though im not sure if my solution is compatible with non webkit browsers but im sure you can get a vendor prefix for all the broswers if needs be.

Heres what i did, using page-break-inside: avoid; & page-break-after: always;

Then using jquery I worked out the heights of my sections and calculated (if the page size is going to be a4) how many times a break occured, and numbered the pages dynamically using jquery and pdf footers (before creating the pdf) so when the user downloaded the pdf it was numbered correctly.

What I reccomend is setting the page up (as the print stylesheet) so that page numbers are visible at these heights in the page, using absolute positionsing perhaps.

but I dont think this is failsafe.

Give them a PDF to print, then you have more control and dont have to worry about the web-print stylesheet, provided the PDF download link is prominently dispalyed.

Answer 3

You can't count page breaks, but you can count column breaks, which behave very similarly.

Wherever you have page break styles, pair them with a matching column break:

-webkit-column-break-inside: avoid;
-webkit-break-inside: avoid;

Then set the report to use columns that match the size of a printed page:

.page.precalc {
    width: 16800mm;
    height: 257mm;
    -webkit-column-width: 168mm;
    .content {
        width: 168mm;
    }
}

Column breaks work very similarly to page breaks, so you can determine the page number of an element simply by measuring the horizontal position.

var left = el.getBoundingClientRect().left;
pageNumber = Math.round(left/635) + 1

CSS columns still have somewhat spotty support, so may not print correctly. However, you can remove the .precalc style as soon as you are done with layout calculations, so that the view will return to the original vertical layout. Depending on use case, a screen/print media query could also work.

The above works for me to generate a table of contents with phantomjs. Getting it to work in an arbitrary browser controlled by the user is somewhat more complex.

Answer 4

I'm assuming you place a CSS page break at the end of each report and not manually at the end of each page. So your problem is to know when a page break will occur naturally within a long HTML document. The answer is - you can't. Even if you know how many lines of a table fit on a page (for example) you'll only know that for a given page size and print settings. If somebody decides to print your report on legal paper scaled 200% then your document will never know that. In my opinion, your options are 1) guess or 2) don't worry about it.

Answer 5

This will display page numbers, but not the total number of pages:

footer {
    position:fixed;
    bottom:0;
    left:0;
}

body {
    counter-reset: page_number;
}

#page-number:after {
    counter-increment: page_number;
    content: "Page " counter(page_number);
}

Having something like

<p id='page-number'></p>

in the footer.

Browser: Firefox 19.0.2