Page breaks with magic images in ePub for iPad

I've been having so much fun with Twitter these days. Learning so so much from all the folks posting with the #eprdctn tag. If you want to learn about ePub, that's the place to go. Be sure to follow @BookDesignGirl, @tinahender, @crych, @DigiBookWorld, @mundie1010, and even me: @lizcastro. Of course, there are many, many others! It's a wonderful community of folks sharing what they know.

Which is my typically long-winded way of saying that this post is a collaboration of sorts. David Mundie is working on an ePub of bird photographs and information and wanted to be able to control the pagination. He used a series of divs with width properties to force them to a single page. Unfortunately, he could only add text that was encrusted in JPEGs.

Today I was talking to a friend on the phone, who pointed me to Molto Gusto, a great looking cookbook now available on the iBookstore, as an example of a book that really takes advantage of the beautiful graphics of the iPad, with photographs that accompany recipes. At first it seemed that the photographs were generally accompanied by a recipe on the facing page, but it was not at all regular for me. Sometimes the caption got broken up, and then the whole pagination shifted uncomfortably. Look what happens when the second line of the Fava Bean explanation jumps above the Asparagus picture:

But it all got me thinking. Apple states in their documentation for iBook creators that since images are automatically resized to fit the screen, you shouldn't hard-code image size. I spent a lot of time figuring out just what size actually works. It turns out that if you use an image that is too big, iBooks will divide it between two pages. And if it's too small, you run the risk of labeling your asparagus as "ricotta salata".

But what if you used images that were the perfect size to take up the entire page? I found out that the magic size is 600 x 860 pixels. For simplicity's sake, I'll call pictures of that size magic images since iBooks will always fill an entire page with them—whether it's horizontal or vertical—and never divides them up (as it does with images that are too big).

And of course, implicit in filling an entire page with a magic image, is that by doing so, you create a page break, which up to now, you could only do by creating a new XHTML document in your ePub document. I will admit to you that I had fleeting thoughts of blank magic images (spacer gifs, anyone?) that I could use as page breaks, but the idea of blank pages in my resulting ePub didn't quite seem worth it.

But what about incorporating full size images into the layout so that they served as beautiful page breaks?

First, I created several magic images (using Photoshop's Image Size command). Remember it's not the proportion that's important but the actual pixel size: 600 x 860.

And then I created an ePub with a magic image cover of that size, followed by some explanatory text, another magic image, some more text, and so on. I think it looks pretty nice, especially in horizontal mode, but it's not bad in vertical either.




And here's the vertical:



There's nothing particularly special in the code... in fact I used InDesign CS5 to export it and then just fixed the fonts by hand. But you can download the ePub anyway if you're curious.

Clearly, this idea doesn't work for everything, but I think, until iBooks finally supports at least the page-break capabilities already standard in CSS2, it's a start. I'd love to see what people can do with it. (Send me screenshots and epubs!)

And I won't pretend its perfect. Once in awhile, seemingly out of the blue, iBooks likes to repaginate my book in horizontal mode, starting on the left page. That throws everything off. I don't have a workaround for that yet, though I think keeping the text before the image is more logical, and thus less confusing.

At the very least, it offers some interesting possibilities.