Even page break for 2-sided printing in HTML and CSS

Question

I have page breaks working on print media with fast page-break-after: always . I use them to separate multiple reports in a single batch print job. Unfortunately, when the print job is two-sided, a page break can cause the printer to run a report on the back of the previous report.

Is there a way to make the page break on an even page? Or, alternatively, to determine which page number a particular item will be displayed?

Answer 1

There are no built-in CSS features for this.

Idea:
Perhaps you can try wrapping each of your reports in a div and then use something like jquery to develop a height div to determine if it ends on an odd page.

If it ends on an odd page, then enter an empty div with a page break class after that, so that it moves to the next page.

EDIT
Obviously, this will only work if you know which pages print to the destination printer. There is no magic answer that will only work for all scenarios.

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

You need to experiment a bit with the default printer settings to find out what works for you / your clients. If there are several scenarios, you can let them choose from the drop-down list.

So, you should use jquery to check the height of the pixel div, check it to the height of the page pixel to see if the div ends on an odd or even page, then enter page breaks if the report ends on an odd page.

You also need to know in advance if the user will use duplex printing - because you will need to do this only for duplex printing. A.

Answer 2

The standard has CSS functionality. You are on the right way. Using:

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

The problem is that at the moment, the only main browser that supports this is Opera. Opera, however, has its own printing problems, but it might work for your situation.