My goal is to print a series of letters from the browser. For users who type letters on both sides of the paper, I want to make sure that a new letter never starts on the back of the previous letter. The letters vary in length, some 2 pages and others 3.
It looks like the following CSS should solve the following:
page-break-before: left
However, when I collected the sample, it does not work as expected.
<html>
<head>
<style>
h2.left { page-break-before: left; }
</style>
</head>
<body>
<h2 class="left">New Section</h2>
<h2 class="left">New Section</h2>
<h2 class="left">New Section</h2>
<h2 class="left">New Section</h2>
<h2 class="left">New Section</h2>
</body>
</html>
I expect the code to print 9 pages with a blank page in between to force the next "left". Actually the print preview just shows every h2 on it its own page with a blank empty page at the beginning.
I don’t understand how this CSS works or is my implementation wrong?
: Chrome, Safari Opera - .