Thursday, February 10, 2011

Page Breaks, Turning off Hyphenation, and Horizontal Bolding Bug in iBooks

Apple came out with version 1.2.1 of the iBooks app yesterday and though I haven't had a chance to look at it carefully, I have been hearing from Twitter that the page-break bug that I mentioned in Page Breaks in iBooks 1.2 —in which the CSS page-break properties had to be in a local stylesheet within the XHTML file instead of in an external CSS file—has been fixed. External CSS now works as it should. Yay.

The second thing that I wanted to mention was that iBooks 1.2 is a bit bossy with its new hyphenation feature and applies it automatically to every paragraph in your document. But, you probably don't want to have hyphenations in your headers.

Bad hyphens

To suppress hyphenation, you can use the -webkit-hyphens property (Thanks, Rick!) just on your header elements:

h1, h2, h3 {-webkit-hyphens:none;}

Finally, I've just noticed something very strange in iBooks. When I hold a book vertically, my headers are in a normal weight.

But when I hold it horizontally, the headers are suddenly displayed in boldface.

Horizontal = bold

I can't quite figure out why this might be. There is no font-weight assigned to the header elements at all. Seems like a bug to me. Lord knows I've certainly tried to achieve different layouts in different orientations!


  1. Great, another iBooks bug... Looks more like a gain in thickness than a real bold font. A rendering issue, perhaps. Well, at least the page-break works the way it should now. Thanks for pointing this out.

  2. The strange thing, I would think, is why are your headers in normal weight when in vertical orientation, not why they are bolded when in horizontal orientation.

    Reading agents usually assign a default bolded style to headings, so for them to display otherwise, if I am not wrong, you would have to explicitly reset them with a font-weight: normal either with a CSS reset or with their own style.

    You are not using any media query conditional on orientation or width that may be triggering a change in styles?

  3. Maybe it's got to do with reversing the type out of a red block? Or does the same thing happen with black type/no block?

  4. I would also suggest disabling hyphenation, as described above, for centered text, links, and perhaps also for left-aligned text.

    Better yet, in that last case, would be support for some CSS property that set a minimum word length or a minimum number of characters before or after a hyphenation — but I am not aware of any property that has been defined to handle that — the equivalent of the first 3 parameters of InDesign's hyphenation setup.

  5. Actually, I see now that there are hyphenate-before and hyphenate-after properties in CSS3. I know they are not currently implemented in iBooks, but may show up in a future Webkit implementation.

  6. Weird I am not seeing that page-break is fixed. Has this actually been verified?

  7. The -webkit-hyphens property dont work on iBooks 1.3 on header elements (h1, h2, h3).
    Why? It's possible?

  8. Dear Liz,

    I found several websites showing how to remove or undo hyphenation, but few try to teach how to add it (specifically in ePubs).

    Some blogs show tips like:

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;

    ... in my lowly understanding, "auto" means that the reader identifies the language of ePub and makes its hyphenation automatically.

    I noticed that the Kobo Reader for iPad hyphenates same ePubs that are not configured for it, the problem is that for Portuguese (I live and work in Brazil) does not work.

    You could give tips on how to properly format the body text for proper hyphenation? Is there any rule to follow in ePub file for the recognition of language?


More of my books