page-break in CSS-print: how to get rid of accidental blank pages

I just discovered something that I consider a misfeature:

  1. On your CSS-print, say you want to insert a page-break after h1. So far, so good.
  2. Now, let’s say your layout requires you to also insert a page-break before h2.

This will look like this:

h1	{page-break-after:always} h2	{page-break-before:always}

Now, you have a problem (well, I consider it as a problem): the page-break after the h1 and the one before the h2 add up!

This means that you have h1 on page 1, then a break-after which send you to page 2, then the break-before from h2 which sends you to page 3.

Said differently: a blank page.

== Rendered == h1↩ ↩  ← blank page h2 == Expected == h1↩ h2 

Now, I have a solution:

h1+h2	{page-break-before:avoid}

With this code, if (and only if) a h2 immediately follows a h1, its page-break will be cancelled. You end up with the normal page-break after from the h1, so only one page-break, no blank page, everone’s happy.


I did not say this is bug (I called it misfeature); it is plain possible one want to insert a blank page (this is fairly common in books). But most of the time, like for a chapter title on its own page followed by a section title, a blank page is more of an annoyance.

flattr this!