View Full Version : ePub display issue in iBooks

01-26-2011, 06:59 PM
So, I have some ePubs made in Sigil with photos interspersed throughout the chapters. The photos come with captions, all in a <div> tag to keep the photo and caption together.

Most of the chapters display correctly, but I have about three that override any reader settings I might have. For example, I generally my generic font-family settings of "serif" and "sans-serif" will all become Verdana when I select that option. But in these chapters, the body paragraphs will remain serif.

It's definitely something relating to the photos because if I remove some or just one of the pics, that chapter will display correctly. But I'm racking my brains trying to figure out why, with the photos added back in, it goes back to being different and overriding reader settings.

And, of course, the files validate and look fine in any other application. Anyone encounter anything similar? Any ideas?

01-26-2011, 07:28 PM
And I'm not sure if this will be much help, but it seems to be an issue with how apple is rendering things instead of my code. I added a paragraph of nonsense and all of a sudden the chapter displayed correctly.

Does anyone know whether iBooks has some overriding widows/orphans property set for paragraphs?

01-27-2011, 02:14 PM
iBooks has some quirks regarding ePubs. Widows and orphans is one of them. You have to put it in your stylesheet how many lines you want the widow or orphan to be.

02-08-2011, 02:38 PM
Hi !
I’ve played around with iBooks and font-family too.

iBooks doesn’t like to respect your font-family or text-align rules in all p, span and div. Exception : if there are other things in these elements, like span (even empty span…) or images, then the fonts work…

Just read these posts :

And here is what Liz Castro is writing in her book, Epub straight to the point :
Apple inexplicably crippled font support in iBooks 1.1. While iBooks is perfectly capable of displaying the more than 30 font faces that are pre-installed on the iPad, Apple has for some reason kept iBooks from recognizing those fonts when applied to certain elements, namely: p, div, body, html, and span. On the other hand, iBooks has no problem understanding fonts applied to non-body text elements like headers (h1, h2, and so on), list items (li), definition lists (dl, dd, and dt), highlighted text (em, strong, b, i, code, and so on).

One way around this is to enclose body text in an additional non body-text element. For example, you could use a rarely used element like samp:
<p><samp>Even a criminal is entitled to fair play; and certainly when a man who has done no harm has been unjustly treated, he is privileged to do his best to right himself.</samp></p>
Then apply the desired font to the samp selector in the CSS:
samp {font-family: "American Typewriter";}
You’ll find updates on this issue on my website.