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.

furthermore...

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 {
page-break-after:avoid;
}

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:

page-break-inside:avoid;

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">
//<![CDATA[
$(document).ready(function(){
$(".character,.subhead").each(function() {
$(this).next('p').andSelf().wrapAll('<div class="staytogether" />');
});
});
//]]>
</script>

Here is the CSS:

div.staytogether {
page-break-inside:avoid;
}

[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

Tags:

Extra words from AMC:

So ... how much of this can you set up in InDesign vs. editing the EPUB afterwards?

Are you including the javascript (just this snippet) when exporting?  Able to use an object style or somesuch to add that that CSS bit?

AM

Posted on  12/17  at  07:35 PM

Extra words from Chris Jennings:

InDesign is fine. You just have your styles export tags, as in the Export tags option. Then you include the jquery file (you need to download a recent version) when you export to ePub.

You only need to add the javascript function into the head tag on each page. I use BBedit to do a search and replace for that.

If you include the jQuery file, then InDesign will also add the appropriate ‘scripted’ properties to the manefest files.

Also, because your HTML is actually XHTML, the inclusion of javascript MUST conform to the strict rules. Just see the code in the post.

Posted on  12/17  at  07:50 PM

Extra words from AMC:

Thanks! Forgive my obtuseness.

You’re mapping your style “subhead” to h2, yes?

And you said “how about if we had this h2.subhead and the following paragraph in a <div>” ... the jscript is doing the “wrapping in a <div> part, is that right?

Is the jscript also writing this to the CSS file:

div.staytogether {
page-break-inside:avoid;
}

or is that something you’re doing in InDesign, and if so, how?

thanks for your patience ;-D

Posted on  12/17  at  08:03 PM

Extra words from Chris Jennings:

Yes, sorry if this wasn’t clear!
I simply add this to my own CSS file which is add when exporting the ePub.

I usually modify the one that InDesign exports (to test it out), and then build a custom CSS file which is added through the export panels of InDesign.

C.

Posted on  12/17  at  08:08 PM

Extra words from John:

Hi,

Interestingly, that is something we had been doing as well but which we dropped a year ago because we ran intro one issue: a long paragraph after the heading, which meant you could get a page displaying the 2 last lines of the paragraph before the heading.

Interestingly once again, readers then complained a h*ll of a lot and judged the “orphanated sub-title” less of an issue than “almost blank pages” and even complained to Apple saying our books were badly formatted.

So we dropped our script and decided to go in manual mode because you can’t effectively automate that with a 100% success rate. So we’ve been trying to find another method but we have to test it before shipping it.

In other words, be very careful, it could have unexpected consequences.

Posted on  12/18  at  04:01 PM

Extra words from Chris Jennings:

Thanks John. yes, indeed you are right this could be an issue where the following paragraph is long, and if this is the case, then you might as well start that sub-heading on a new page! LOL

Anyway, my Jquery certainly solves my rendering of the Shakespeare play. Character names aren’t really headings, but this is what I was solving originally.

It really is frustrating that ‘before’ and ‘after’ don’t work as well as ‘inside’.

You have set me thinking of some other solutions though…

Posted on  12/18  at  04:22 PM

Commenting is not available in this channel entry.