Need help - measuring fonts in iBooks

jharker · 11-11-2010, 08: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:

Code:

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.

whbenson · 11-12-2010, 05: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]

jharker · 11-13-2010, 09: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.

whbenson · 11-13-2010, 05: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.]

11-12-2010, 05:06 PM	#2
whbenson Enthusiast Posts: 37 Karma: 493532 Join Date: May 2010 Device: ipad	smallest font sizes 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]

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Sans-serif fonts and iBooks	Adjust	ePub	17	01-26-2013 07:31 PM
iPad iBooks, ePub, embedded fonts & encryption	pdurrant	Apple Devices	37	06-08-2010 01:24 PM
Embedded fonts, Calibre, and choice of fonts	AlexBell	ePub	8	05-30-2010 06:00 AM
Large fonts / bold fonts for Kindle DX International	tandyjames	Amazon Kindle	5	03-23-2010 06:53 AM
Stanford U: Measuring Fair Use	doctorow	Lounge	0	09-26-2004 09:37 AM

11-13-2010, 09:39 AM	#3
jharker Developer Posts: 345 Karma: 3473 Join Date: Apr 2007 Location: Brooklyn, NY, USA Device: iRex iLiad v1, Blackberry Tour, Kindle DX, iPad.	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, 05:14 PM	#4
whbenson Enthusiast Posts: 37 Karma: 493532 Join Date: May 2010 Device: ipad	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.]

Advert