[dgatwood]

Originally Posted by SantafA

I read this on this site (https://wiki.mobileread.com/wiki/EPub):

"The iBooks reader prevents problems with text ending up in the margins (and getting clipped) by setting -webkit-line-box-contain: block glyphs replaced;."

Should I actually insert this in my css? Like this:

html {-webkit-line-box-contain: block glyphs replaced;}

or does iBooks somehow automatically "set" this without the creator needing to put it in their style sheet? I don't have a Mac so I have no way to test this.

The iBooks reader includes the "glyphs" form of that CSS property in its built-in user agent stylesheet. Because of that line, if your book uses drop caps, and if they stick up above the top of the enclosing paragraph, iBooks will artificially push the drop cap lower to ensure that it does not stick up above the top of the paragraph. This is done to ensure that if the paragraph is the first thing on the page, the drop cap won't stick up above the top margin.

Unfortunately, the result is that these drop caps are rendered lower than they are in any other reader, and can potentially even collide with the line of text below them. For this reason, if your drop caps stick up above the paragraph, you should specify the "inline" form in your stylesheet, which overrides the default reader stylesheet, and tells the underlying WebKit engine not to shift the drop cap down.

The best way to test your content if you don't have a Mac or an iPhone is to grab a copy of WebKit (free, runs on most platforms). For previewing the way pagination will happen, print the page to PDF with variable page sizes. This isn't 100% accurate by any means, but it is a decent starting point that will get you about 85% of the way there, with the biggest difference being image handling behavior.

Of course, WebKit doesn't include the "glyphs" form of that style in its own default stylesheet, so if you want to better approximate what it will look like in iBooks, you can add:

html {-webkit-line-box-contain: block glyphs replaced;}

to your stylesheet. If that makes your content look wrong, change it to:

html {-webkit-line-box-contain: block inline replaced;}

and smile because you just avoided a bunch of iBooks users complaining about your drop cap formatting.

IMPORTANT: If a paragraph containing a drop cap could realistically appear at the very top of a page, you must use padding-top on that paragraph to ensure that the drop cap can never stick up above the top margin of the page. (After a page break, the margin-top property of a paragraph is zeroed, so you must use padding-top rather than margin-top, to ensure the necessary separation.)