Keeping it together - Page breaks in iBooks

I've been doing a lot of testing with InDesign CS 5.5 and was surprised this morning to find that the CSS it uses to create page breaks in EPUB documents actually works in iBooks. It used to be that iBooks only supported page breaks when they were in local CSS, and then it supported it in external CSS, and then for a while it didn't support even that, but now it looks like full iBooks support for page breaks is back.

Maybe this is a good time to go over the page breaks capabilities in CSS and what iBooks supports. While they don't give absolute control over where elements appear on a page, they have an enormous influence on how professional the page looks. (Note the design of these pages is bare-bones, the emphasis is on page breaks.)

The three CSS properties are page-break-before, page-break-after, and page-break-inside. Each one can take values of auto, always, and avoid, and the first two also accept left and right, though iBooks does not yet support those values.

If you want a title to appear alone on a page, you could use

.title {
     page-break-before: always;
     page-break-after: always;
     }

but note that if that is the first page in your EPUB, iBooks will show a blank page at the beginning (since it creates a page break before your title). In which case, you should only use:

.title {
     page-break-after: always;
     }




In order to make a header always start at the top of the page (together with the content that follows it), use:

.header {
     page-break-before: always; 
     page-break-after: avoid;
     }




And if you want to keep a photograph with its caption, you could use

.group {
page-break-inside: avoid;
}

assuming that you've got a div with class="group" that contains both the image and the caption.



It would be really, really nice if iBooks would support the CSS widows and orphans properties. But it doesn't yet. (NOOK does, yay.)

Page Breaks in iBooks 1.2 (Updated!)

Updated 11 Feb 2011: The bug described in this post has been fixed as of iBooks 1.2.1. The app now recognizes the page-break properties both in local CSS and external CSS. See Page Breaks, Turning off Hyphenation and Horizontal Bolding Bug in iBooks for more details.

One of the most annoying failings of iBooks to date has been its lack of support of one of CSS' most basic controls: when and where to place page breaks in the text. Without this control, you can't force a header to begin at the top of the page, nor keep a caption with its paragraph.

When the new version of iBooks came out yesterday, I heard (through Fabio Brivio on Twitter) that these page break controls were now supported, but I couldn't seem to make it work. I asked Fabio if he would share his EPUB with me, and he kindly emailed it. (Thanks, Fabio!)

After pulling it apart, and applying it to my files, I finally figured it out what the key was: iBooks only supports CSS page break controls when they're in a local style sheet. They won't work in an external one.

So, if you want each of your h3 elements to begin on a new page, in the head section of each of the pages in your EPUB, add:

<style type="text/css">
h3 {page-break-before: always;}
</style>



Other possible values for page-break-before include avoid, if you'd rather a page break did not occur right before the element, and the very interesting, but not yet supported left and right, which push the element in question to the first left or right page, respectively.

You can also create page breaks after an element (or group of elements). Use page-break-after.

Finally, you can use page-break-inside: avoid to keep an element on a single page. For example, you might apply this rule to a div that contained an image and its caption.

CSS also has ways for controlling widows and orphans (stray lines that appear at the top and bottom of pages), but unfortunately, iBooks doesn't yet support them. (Nook, and other ereaders, do.)

I cover these page break features in detail in my book, HTML, XHTML, and CSS: Visual QuickStart Guide, which is a big help for any EPUB book designer who wants to create a really polished ebook. You can learn more about how to get inside an EPUB file, and what to do there, in my EPUB Straight to the Point.

At some point, iBooks will properly support all of the page break values, and will support them both in local CSS as well as the more useful and common external CSS. You'll read about it here first!