Oh! Please Avoid Those Page Breaks After

Image for Oh! Please Avoid Those Page Breaks After

Education at the Bottom

Image for Oh! Please Avoid Those Page Breaks After

'Bottom' is an orphan, and he shouldn't be

The page-break-after:avoid rule just doesn't do its job! Can we fix it? Yes we can.

You all know it to be true. The one really annoying thing about the re-flowable ePub, is that you are often seeing those sub-titles all on their own at the bottom of the page. Just like a lonely orphan.

You can see an example in the first image here.

CSS has some rules for paged-media that try to prevent a page breaking before or after elements. Try as I might, I simply cannot get this do as expected.

So is there a way to sort this out while we wait for the ereader software to be updated to solve this? Or do we really have to use the fixed-layout option. No!No! Please not that.


In the example you see here (please click the images for enlargment), we have a sub-heading thus:

<h2 class="subhead">Education</h2>

Then in the CSS we have:

h2.subhead {

But as you can see it doesn't work in iBooks on the MAC. I don't know why.

Later on in my Shakespeare play eBook, I have a worse problem, because I am sometimes getting a character left alone on the page with the speech starting at the top of the next. You'll see that 'Bottom' is an orphan, and he shouldn't be.

So what to do?

There is another one of these page-break CSS thingamajigs, that seems a lot more reliable. Here it is:


We use this, when we want to prevent an image getting seperated from its caption. We put both the image and the caption in a <div> and then use this. It works pretty well, as long as there is space to fit the block on the page.

With our problem though, how about if we had this h2.subhead and the following paragraph in a <div>, and then did our page-break-inside magic. It turns out that this does work.

But—there's always a 'but'.

We don't really want to go through all of our mark-up and add these divs. We have better things to do, so why not use some javascript to do this dynamically? Since we are using InDesign, we want to avoid editing the markup, and besides we can even add javascript when we export the ePub.

JQuery to the rescue.

JQuery has a function 'wrapAll' that just needs some targets setup and we can get the div added. Once we have the div, we just need the CSS to go with it.

I tend to use 'Fiddle' to test out jQuery so you can check the code out there if you like.

Here is the code at the top of each XHTML document in the eBook:

<script src="script/jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".character,.subhead").each(function() {
$(this).next('p').andSelf().wrapAll('<div class="staytogether" />');

Here is the CSS:

div.staytogether {

[Edit] You can add this CSS to the CSS file that InDesign has exported, or (better still) include this in your own custom CSS that you include at the time of exporting to ePub from InDesign.

Posted on 17 Dec around 5pm