Issue with centre-aligned text in an ePUB on the iPad

For a while now been puzzled by an issue where centred text in an ePUB book was not appearing as such once the book was viewed on the iPad.

The following images show the issue in a test EBook generated initially in InDesign. All the items in the first (frontis) page should be centered, but aren’t. However the titles in each chapter (added using exactly the same styles!) appear fine.

 
To further confuse, testing the identical book in Adobe Digital Editions shows the required formatting.

So in the immortal words of developers everywhere, what the?

 
It turns out the problem is not in the CSS, or even in the ePUB. But with iBooks. And I thank the gurus at Pigs, Gourds and Wikis for pointing me in the right direction.

The solution is “Apple simple”, meaning its easy/obvious once you’ve been told where to look. But impossible to fathom before then.

 
Turns out iBooks has an “override” setting for justifying text. And this for some reason messes with my text-align:center. settings. The value can be changed within the Settings application. To get the centred text to appear as expected I needed to turn full justification off.
 
To demonstrate, following are the same pages from the start of the article, but now with the setting changed. Nothing was modified in the ePUB itself, only the iBooks configuration.
 

All is right with the world.

10 thoughts on “Issue with centre-aligned text in an ePUB on the iPad

  1. steven Post author

    David,

    I think the key is understanding why in the first two examples the frontis paragraphs get overruled but the chapter headings don’t. So there is some rule by which iBooks allows justification and centred.

    Was thinking it might be based on volume of content? If your page just has one centred line it lets it pass. But if you centre every paragraph then it gives up?

    Reply
  2. Nick

    Don’t ask me how or why, but it also works when you put a around it. It doesn’t even matter if the span declares text-align:center (this can stay in the in your css).
    An example of centering a number:

    2011

    With these settings you don’t have to turn off auto-justifying text on the iPad. You can’t expect every reader to do/know that.

    Reply
  3. Nick

    I’m sorry; the website discarded my HTML-code (don’t know how to make it visible) the message should be [you should read ( as < ]:

    Don’t ask me how or why, but it also works when you put a (span) around it. It doesn’t even matter if the span declares text-align:center (this can stay in the in your css).

    An example of centering a number:

    (p class="year")(span class="center")2011(/span)(/p)

    With these settings you don’t have to turn off auto-justifying text on the iPad. You can’t expect every reader to do/know that.

    Reply

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>