Goodbye Widows and Orphans, or yes you can force page breaks in ePub

[links to ePub samples now at end of article]

Working on a tip from a follower on Twitter, the other day I documented how to insert video into an iBook for iPad. Let's just say I got a lot of visits to my site for that, and continue to do so.

What I have to share with you today also originated from a follower on Twitter, Rick Gordon, and though it's not as sexy as video, it's much, much more significant. And it validates.

Rick tweeted the following yesterday afternoon:

Enclosing a ul or other block elements in a div set as inline-block causes whole block to shift page at once. Cool! #ipad #epub #ePrdctn

Having some control over page breaks is an ebook designer's number 1 concern right now. I'm thrilled to confirm that the battle has shifted to our favor.

Because it works. If you set the display property for a div to be inline-block, iBooks will display the contents of the entire div together on a single page, skipping to a new page if necessary, unless the entire div can't fit on a page by itself, in which case it will be divided across pages.

It's simple and very powerful: div {display: inline-block}

Here's a short document with no inline-block display. Notice how the header is separated from the paragraph that follows it, and even how a bit of the background bleeds through to the following page. Icks. The image and caption are likewise separated. Terrible!




Here's the exact same document with one div enclosing the header and paragraph and second div enclosing the image and caption. Both divs were set to display:inline-block. The result? Goodbye widows and orphans:



Where can you use this? As shown here, if you have a series of illustrations with captions, use inline-block to keep the caption right under the illustration.

If you want a header to never appear alone at the bottom of the page, but always be followed by at least one paragraph, just enclose the header and the paragraph in an inline-block div.

Perhaps you don't want any orphans or widows at all. You could conceivably set every p element to have inline-block display so that they will always (when possible) be displayed on a single page. (If the div can't fit on a single page, it will be divided across multiple pages. Which makes sense.)

Anywhere you might use InDesign's Keep functions, the display:inline-block rule will come in handy.

The possibilities are endless. And it works in iBooks, Adobe Digital Editions, and seems to work also on Barnes & Noble's nook. Perhaps everywhere, please let me know if you test it on other readers.

Addendum: Here's the ePub without inline-block. And here's the ePub with inline-block.