Beating iBooks Bugs

Yesterday and the day before I spent an inordinate amount of time doing trial-and-error testing with iBooks 1.1's latest bugs. Basically, if the default Full Justification is left ON in the Settings panel for iBooks, iBooks then overrides any left alignment setting specified by the book designer. Indeed, center alignment is often disregarded as well.

I posted my fruitless efforts to this blog and shared them on Twitter in the amazing #eprdctn group, and this morning found that others had worked on this problem and found a solution. I am in awe of the cooperation, generosity, and sticktoitiveness of this group. Thank you!

There are two parts to the problem. For some reason, iBooks ignores the text-align property when that Full Justification setting is ON. It is also known that iBooks ignores any font information set with the span tag.

The solution, discovered by Anthony Levings, is curious. Just by inserting empty span elements (no class necessary) within each and every p element, and without assigning a single CSS declaration to the span itself, iBooks suddenly pays attention to the text alignment settings in the CSS of the p element.


Rick Gordon, meanwhile, reminded us of The Span Bug: iBooks ignores font information applied through a span element. Rick suggests using some other element besides span, like the otherwise little-used cite, so that you also maintain a given font for the body of the ebook. And while it is true that using an element in this way is a hack, it is also true that the resulting ePub will validate, will have the font the designer intended, and will not break in other ereaders. It is also true that if Apple would follow the EPUB standard, these hacks would be unnecessary.


It's important to remember that (according to the official CSS spec) the text-align property only works with block-level elements, so it must be applied to the p selector. On the other hand, since iBooks doesn't support applying font information to a p, div, or span element, you must declare the font information with the cite element. In addition, many ereaders/browsers apply italics to cite by default, so you'll have to add font-style: normal to neutralize that effect.


It is my personal opinion that standards are an extremely important tool and that software manufacturers (read: ereader and web browser creators) should follow the published and specified standards so that those of us creating content can be confident that what we create will work in as many ereaders/browsers as possible and be compatible not only with current but also with future versions of the software. It is only when we all agree on the rules that this is possible.

When those software manufacturers don't follow the rules, I believe we content creators have the liberty to work around those deficiencies, but that we should do so in the most standards-compliant way possible.

So, in this case, Apple doesn't follow the EPUB spec that it says it supports and ignores a perfectly valid CSS property, text-align. Designers add in fairly harmless span elements that solve the problem. I call that an extremely reasonable compromise. 

Apple doesn't follow the EPUB spec in allowing span elements to convey font information. Designers use less common XHTML elements in a non-semantical way to resolve the issue. I am less comfortable with this solution, since using those elements in non-standard ways deprives them of their true meaning. Nevertheless, since those elements are rarely used anyway, I'm willing to go with this compromise as well.

You will have to make your own judgment.

And if you want to learn the latest in ePub creation techniques, or share some of your techniques with the rest of us, come visit us at #eprdctn!