View Full Version : Need help - measuring fonts in iBooks

11-11-2010, 09:33 AM
Hey, folks! I'm working on divining some of the darker corners of how iBooks works, and I need a little help. Long story short, I need someone to download the attached file, open it in iBooks on their Apple device, and either post a screenshot or just copy the displayed text and post it here (along with what kind of device you have). The more the merrier!

I have an iPad, but I don't have an iPhone, iPhone 4, iPod Touch, or any other Apple device. I've done this for the iPad, but need information on the other devices. Can anyone help?

The long version:

I've created a special ePub file (attached below). This file has some Javascript in it which does the following: It typesets a string of 10 letters (for example, ten "a"s, or ten "G"s).
It measures the displayed width of the string.
It does this for a wide selection of different characters.
Finally, it adds a new paragraph to the page displaying the measured character widths, along with the currently selected font family and font size.So the way it works is, you open the file, and it will tell you what font family you're using, what the font size is, and the exact width of various characters.

If you change the font family or font size, then you need to re-open the file and it will refresh the information. I would love to get data from a wide variety of Apple devices, and for a wide selection of font families and sizes.

Bonus points for answering the question: what is the smallest size font you can select?
Open this file, select "Baskerville" font, and reduce the font size until you can't reduce it any more. Then close and re-open the file. What font size is given?On my iPad, the smallest Baskerville font size is 16px, while the smallest Cochin size is 18px.

I'm hoping to learn that fonts are rendered the same on every device, but even knowing that they're different would be a great help.

Here's sample output from 16px Baskerville on the iPad:
Font size = 16px Font family = Baskerville
0, 0, 40, 65, 29, 39, 39, 40, 50, 40, 40, 40, 70, 109, 99, 115, 122, 100, 89,
124, 129, 57, 57, 125, 97, 149, 120, 132, 90, 117, 87, 112, 124, 152, 109,
55, 55, 75, 84, 69, 84, 70, 44, 75, 85, 40, 40, 74, 39, 129, 85, 80, 84, 84,
59, 54, 47, 84, 74, 109, 77, 74, 69, 160
Thanks in advance for any brave folks willing to help me out!

Edit: Font measurements are actually given in tenths of pixels. So "109" means the character is 10.9 pixels wide.

11-12-2010, 06:06 PM
Results for smallest size from my iPod Touch, 2G, 320x480:
Baskerville 16px
Cochin 18px
Georgia 14px
Palatino 14px
Times New Roman 16px
Verdana 11px

The latter truly tiny. The individual character widths exactly match the ones you give too.

[this is a fascinating piece of javascript]

11-13-2010, 10:39 AM
Thanks! This is really helpful information to know. My iPad matches those minimum font sizes, by the way.

Anyone have information from a 3G or 4? I'm suspecting that they'll all be the same, but you never know.

Thanks for the compliment. A few of the concepts in the javascript are borrowed, so I can't take all of the credit. I'm working on a fairly sophisticated project that should be pretty impressive if it works.

You may also like a little snippet I wrote to report the viewable page area in iBooks. I originally posted it here ( I have an ePub file with that code floating around somewhere -- I'll post that if anyone's interested in trying it.

11-13-2010, 06:14 PM
Here are the results from your snippet for my 2G Touch:
screen wxh = 320x480
avail wxh = 320x460
inner wxh = 274x376
outer wxh = 560x376 (!?)

a propos javascript... I like to use sidebars, but in case the reader finds them too small on a handheld, would like to provide a toggle button via an anchor tag that would call a bit of javascript to increase the float width in the stylesheet to 100%. This works within an individual xhtml file, and you can even make the toggle flag effectively a global variable via HTML5 local storage (so even persistent between opening and closing the book), but just can't find a way to get ibooks to re-render other xhtml files. [I even tried href="iBooks://" but this just puts you back to the beginning.]