Anatomy of an iBooks page

I'm trying to figure out how exactly iBooks treats an ePub file: which formatting it preserves, and which it ignores. The fact that it ignores any at all, is incredibly short-sighted. Nevertheless, given that limitation, it seems like a good idea to at least quantify what we’re dealing with so that those who wish to design a book can have a safe idea of what it might look like, once it’s on the iPad.

The first thing to note is that the size of a page in iBooks depends on whether you’re viewing it horizontally or vertically. If you’re viewing it vertically, there is a single page whose text area measures about 4.25" x 6"(roughly 11 x 15cm).



If you’re viewing double pages horizontally, each one measures about 3" x 4" (about 7.5 x 10cm).



But how big is the text? First, the resolution of the iPad screen is 132 pixels per inch. I’ve found that if your CSS specifies text of 1em, the text you get will be 10 points.

Finally, I’ve decided that the maximum width of an illustration with wrapped text (until we can apply dynamic sizes), should be between 200 and 250 pixels, so that there’s enough space for text around the edges.

If you’re adding a full page illustration, make sure it's no bigger than 600 x 860 pixels, or else it will be divided between pages (ew!).