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.)