CSS page-break-after to have even pages in Chrome

Question

I am dealing with a task to prepare HTML document for printing in Chrome (requirement), that will contain unspecified number of text elements of unspecified length. The document needs to be printed two-sided, while the elements shall not mix with eachother. So whenever the text spans over odd number of pages, one extra blank page needs to be included.

So far I have read a lot about page-break-before and page-break-after CSS elements, that should do exactly the job I need. However they doesn't seem to work according to the specifications in Chrome. I have noticed it probably quite well-known problem, but haven't found suitable workaround yet.

I created following CSS:

@media print {
  .block {
    font-family: Arial, Helvetica, sans-serif;
    page-break-after: right;
    display: block;
    float: none;
    position: relative;
  }
}

When I try it in Edge (44.18362.449.0), it seems to be inserting blank pages just as I need - the test output has 17 pages with page 6 and 12 completely blank. But my Chrome (85.0.4183.121) is not doing the same - here the page-breaks are made, but only one at the time, so the next div starts on even page, which is wrong for my case.

Simple demo code with some lorem-ipsum test data: https://codesandbox.io/s/inspiring-wing-rtwbn?file=/test.css

Answer 1

You definitely should keep in mind, that page-break properties are not supported correctly in most browsers. Check the caniuse report.

Also, here is the question that might help you, it already has some good answers.

Duplicating the main suggestions here with my own commentaries. It may be, that you can use the mix of every of them.

Number 1. (@Nils)

You could maybe try wrapping each of your reports in a div and then using something like jQuery to work out the height of the div to figure out whether it ends on an odd page.

If it ends on an odd page, then inject an empty div with your page-break-after class after that so that it feeds to the next page.

Obviously this will only really work if you know the dpi at which your page prints on your target printer. There's no magic answer that will just work for all scenarios.

• 72 dpi (web) = 595 X 842 pixels
• 300 dpi (print) = 2480 X 3508 pixels ("210mm X 297mm @ 300 dpi")
• 600 dpi (print) = 4960 X 7016 pixels

You'd need to experiment a bit here with your standard printer settings to see what works for you/your client(s). If there are multiple scenarios, you could let them select from a drop-down.

So you'd use jquery to check the pixel height of the div, check it against the pixel height of the page to see if the div ends on an odd or even page - then inject the page break if the report ends on an odd page.

You'd also need to know upfront if the user will be using duplex printing - because you'd only need to do this for duplex printing.

Number 2. (@spekary)

Use inline styles for manual page-breaking where it is needed.

<div style="page-break-after: right">
    <!-- your content -->
</div>

However, you should keep in mind that this doesn't exactly solve your problem, because, as you said, the document

will contain unspecified number of text elements of unspecified length.

But still, maybe you can play around with this solution.