iBooks 3.0.1 inline-block Bug

I’m back on ebook formatting after a long period working on paper book layouts, and I find that something I used to rely on is broken in the latest version of iBooks (on iPad, at least), which was released a few days ago. It’s been commonplace to use a CSS declaration like:

div.nobrk {display:inline-block;}

to group elements (such as a heading and the paragraph that follows it) such that iBooks will avoid, if possible, separating them with a page break. This is a work-around for iBooks’ lack of support for CSS’s official page break properties, and the previous behaviour was that iBooks pushed the whole block (the heading plus the first paragraph, for example) onto the next page, whenever there is not enough space to render that block on the current page.

What I’m observing with iBooks 3.0.1 is that it fails to push the block onto the next page. Instead, it renders as much of the block as possible on the current page, and then renders the remainder on the next page. The bad news is that “as much as possible” means as many lines and/or fractional lines as will fit in the space. That’s right, it will render part of a line (which could even be the title) at the bottom of a page, and the rest of that line at the top of the next page. Sometimes you get most of the line rendering at the bottom, with various lopped-off descenders appearing as “debris” at the top of the next page. I’ve seen similar behaviour on older versions of iBooks before, in ePubs that meddle with the line height, but that is not the explanation for what I am seeing now.

This new way of rendering inline blocks means that many ePubs that used this technique and worked well on older versions of iBooks, will currently render incorrectly, with the books that have been most carefully designed being the ones most likely to fall prey to the bug, since those are the ones where the designer will have painstakingly inserted all those <div class="nobrk"> ... </div> blocks to keep elements together on the same page.

Update: here is a screenshot showing the bug in action:

iBooks 3.0.1 Inline-Block Bug

The good news is that iBooks currently supports page-break-inside:avoid;, meaning that the page I showed above now renders correctly, with the titles and text kept together and no split line (though I’ve still had no luck in iBooks with page-break-after or page-break-before). This is of course not much help for books that have been previously released using display:inline-block; to keep elements together, but at least it gives us an option going forward.