Even page-break for double-sided printing in HTML & CSS

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

Answer 1

There is CSS functionality in the standard. You are on the right track. Use:

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

The problem is, currently, the only major browser that supports this is Opera. Opera has its own finicky issues with printing though, but it might work for your situation.

Answer 2

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.