Question

I’ve got page breaks working for print media with a quick page-break-after: always. I use these to separate multiple reports in a single batched print job. Unfortunately, when the print job is double-sided, the page break can cause the printer to start a report on the back of the previous report.

Is there any way to force a page break to an even page? Or, alternatively, to detect which page number a certain element will appear on?

Answer 1

There’s no built-in functionality in CSS for this.

An idea:
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.

EDIT
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.