HTML text kerning & line spacing

Question

Level 1

0 points

HTML text kerning & line spacing

I am experiencing HTML text when viewed on the iPad via iBooks Author that displays differently than in Safari and other browsers.

It appears that the iPad renders text with slightly different kerning and line spacing than the same fonts on the Mac. For example, when a word gets too close to the right side of the text block on the iPad, because it's kerned slightly wider, it forces a line wrap and the word moves to the next line. Sometimes this is an issue because the remainder of the paragraph moves down one line. Where I'm wanting text lined up with graphics or other text, the line spacing is now off. Also, line spacing in general appears to be slightly more than in the browser, and with large blocks of HTML text, text at the bottom of the page runs off the HTML page.

I've ensured I'm using iOS-standard fonts, and everything looks good when viewed in the browser. I can't use iBA's native text blocks, because I'm building a lot of interactivity and animations in with the text (this is for an online course that will be delivered both in iBA and on the web via HTML5).

So... anyone else seen this? And, is there a way to ensure exact kerning and/or line spacing between HTML browser display and iOS HTML display?

Mac OS X (10.7.2)

Posted on Mar 30, 2012 12:44 PM

Reply

Answer 1

K T

Level 7

23,889 points

Mar 30, 2012 12:51 PM in response to purdyboy

Can we see a sample of your CSS?

Reply

Answer 2

Mar 30, 2012 1:24 PM in response to purdyboy

The rendering engine in iBooks isn't the same as in Dashboard or Safari so, as you say, fonts don't render the same way. In iBooks, the same text occupies more space. This can also affect placement of PNG files.

The only way to fix it I could find was to run the widget in iBooks and to adjust the geometry by trial and error.

Michi.

Reply

Answer 3

Fabe

Level 3

622 points

Mar 30, 2012 5:19 PM in response to purdyboy

... is there a way to ensure exact kerning and/or line spacing between HTML browser display and iOS HTML display?

No, there isn't. The idea of kearning is fluid in the digital world.

Reply

Answer 4

Mar 30, 2012 9:04 PM in response to Fabe

Right. It would be awfully nice though if the rendering in Dashcode were the same as in iBooks, seeing that Dashcode is the recommended development tool.

Michi.

Reply

Answer 5

purdyboy Author

Level 1

0 points

Apr 1, 2012 1:56 PM in response to MichiHenning

Thank you for all the replies. I went into this knowing that there would likely be some slight differences between how the same font displays in different environments, but was surprised at how much different some of the iBA HTML rendering was. Perhaps my original question should be re-framed as:

"Short of turning text into graphics (not an option for me), what are some best practices for trying to maintain consistent placement of text blocks in iBA's rendering of HTML text and to keep it as close as possible to other HTML environments?"

I have adjusted the geometry via trial and error as you suggested, Michi, but since we also need to deploy this material in multiple browsers, it's time consuming and still inconsistent.

To be specific, I'm developing the material in Hype, exporting it as both a widget for iBA and HTML for Windows (IE 8, IE 9, Firefox, Chrome) and Macintosh (Safari, Firefox, Chrome). I get pretty good consistency in Firefox, Safari, and Chrome, but iBA's HTML widget rendering has taller line spacing for the standard Times font I'm using.

It may just be that we have to live with the text not always lining up where we want it. But hey, it's worth asking, eh?

Peace, love, and consistent fonts to you all! - John

Reply

Answer 6

K T

Level 7

23,889 points

Apr 1, 2012 1:59 PM in response to purdyboy

I think you have the best handle on it you can at this point - good luck in any case.

Reply