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

I just dis­co­ve­red some­thing that I consi­der 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 pro­blem (well, I consi­der it as a pro­blem): 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 dif­fe­rently: 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 imme­dia­tely fol­lows a h1, its page-break will be can­cel­led. You end up with the nor­mal 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 cal­led it mis­fea­ture); it is plain pos­sible one want to insert a blank page (this is fairly com­mon in books). But most of the time, like for a chap­ter title on its own page fol­lo­wed by a sec­tion title, a blank page is more of an annoyance.

Loading Facebook Comments ...

Une réflexion au sujet de « page-break in CSS-print: how to get rid of accidental blank pages »

Laisser un commentaire