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.
September 23rd, 2010 at 11:10 am
Thank you. I too had problems with this and could not understand.
October 15th, 2010 at 10:50 am
I have been having the same issue. Your fix worked. Howerver, the demo book that comes with iBooks has centered text with full justification on; how did they manage this?
October 15th, 2010 at 10:51 am
There must be a trick we do not know about.
October 19th, 2010 at 9:31 pm
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?
November 17th, 2010 at 6:49 pm
Uncovered a fix discovered by our friends at Pigs, Gourds and Wikis. See today’s post on ePubbing.
December 6th, 2010 at 9:53 am
OMG I spent hours trying to figure this out! I am so glad you posted this information! I thought I was losing my mind.
April 14th, 2011 at 5:52 pm
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.
April 14th, 2011 at 5:58 pm
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.
November 7th, 2011 at 1:58 pm
Thank you! You just saved me hours of time
December 1st, 2011 at 6:49 pm
I am loving seeing all these comments – it makes me feel much less stupid!
Kind of annoying though that they have that built into the program!