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.

3 thoughts on “iBooks 3.0.1 inline-block Bug”

  1. Hi, thank you very much for the post.
    I have been having the same problem with iBooks 3.1 and I couldn’t understand why, since I was taught the inline-block value of display.
    But I have tried to apply page-break-inside:avoid to the same div and it definitely isn’t working as I find my headers as the very last line on a few pages.
    Do you think I should give up?

    1. Hi Francesca, I’m afraid I can’t see any alternative; even if there’s some other workaround, there’s no guarantee it will keep working or not make things worse. I mean, ePubs that used the inline-block workaround now look worse on iBooks than they would if their creators hadn’t bothered. So I would just keep using page-break-inside:avoid (or whatever makes mose sense for your book), test it as widely as possible, and accept that iBooks just doesn’t handle this very well yet … it might in future, in which case your ePub will be ready!

      Also, remember that page-break-inside:avoid won’t do any good if the elements being kept together just won’t fit … in such cases, the renderer has no choice but to insert a page break. I’m not saying that that’s the case with your example, but it could be something to bear in mind.

Leave a Reply

Your email address will not be published. Required fields are marked *