Wednesday, June 9, 2010

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:
Shifted caption
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.

page 1 horiz
page 2-3 horiz
page 4-5 horiz
And here's the vertical:
cover vertical
page 1 vertical
page 3 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.


  1. Well, except there's really nothing "magic" about 600 x 860, right? Any image, whose height is greater than or equal to 860 would work in combination with a "height: 100%" attribute. Or multiple images with heights summing to 100%, as long as their total height is greater than or equal to 860.

  2. I'm not so sure. I just did a test with images that are 1000 x 1333, using div and img set to height:100%, and on a vertical page, the image does not fill the page, and the text from the following page shows up at the bottom, throwing off the layout.

    On the other hand if I use images in the same proportion as 600x860 (with the same css as above, or none), as for example, 900x1290, then it works the way I want it to: full page photos with no text on them. But if I'm going to use that proportion, why not use the smallest version of it?

    In fact, sometimes in your Bird book, I get the captions shifted to the top of the page, with say "Oriole Blackbird" over the map for the gnatcatcher.

    So, I don't think setting the height of the div is enough. But I'd love to be proved wrong.

  3. I wonder how this is going to work in the iPhone version of iBooks, given the different resolution/aspect ratios...can't wait to try it :D

  4. Hi Liz,
    Where could I get the Apple documentation for iBoook creators that you mention above?

  5. Thanks, Liz. I'm designing a book of cartoons for a client and really hated the idea of having a separate xhtml doc for each page. This is much better.

  6. Liz,

    That looks really promising and already your samples have a more organized and logical layout than many ePubs where the text and images seem only casually acquainted. It's almost enough to get me to learn how to do this stuff, thanks for the idea, I'll try it out.

  7. Hi Joel:
    Yeah, and be sure to check out this post as well: for even more page break options. No wonder ebooks are slower to read if you have to navigate this "where does this part go" thing.

  8. Titusz Pan was kind of enough to take screenshots of an iPhone 4 for me, and they look pretty good. The images fill the screen when held portrait-wise, and are shown in full (though obviously much smaller) when held landscape wise.

  9. Hi Liz,
    Where could I get the Apple documentation for iBoook creators that you mention above?

  10. I guess it's in the FAQ when you use iTunes Producer (when you sign up to put the books on the iBookstore).

  11. Hi, I am working on creating ePub for Apple IPAD device. I have few queries which need to be clarify for creating a good epub files -

    1. Dead link - I have linked one footnote number to text and text again to reverse footnote number. When i clicked on number, it went to footnote text and i scroll back again to that number. After that, i found that the footnote number links is not active. Please explain why this has happend? Is it Ipad limitation or any further solution?

    2. Blank spaces - Blank spaces originate at the end of sections. Please provide solution to control this.

    Thanks for looking into this.


  12. hi Liz,
    great blog.
    I was wondering if you've had any success with double spread images when the ipad is oriented horizontally?

  13. Hi Ian:
    Nope, I haven't been able to get iBooks to do a horizontal spread. Maybe in a future version?

  14. For what it's worth, I've found that when you have an image larger than the size of the iPad screen (so you can double-tap and zoom, pinch larger, etc) the magic ratio is 16:25 w:h. Anything thinner than that breaks the image to the next page. Anything wider allows lines of text to creep in above/below when the font is as the smallest size. Haven't found a way to avoid it in two-page landscape mode, but at least that works in the standard portrait iPad view.

  15. Hey Liz,

    I just want to say thank you very much for this post! I was having problems trying to figure out why the ePub wasn't displaying right with images, but this worked perfect.


    P.S: I'll be buying your book very soon :)

  16. I have wrestled with this problem for a while, and the 860 was the best clue I've found yet. (Please note that in what follows I'm testing with an iPad 2 and iBooks 2.)

    I used the 860 as a starting point, but I have figure labels, so I needed to make space for them, too. I assumed that an extra 40 pixels would be sufficient for default text size of my labels (if users increase font size to very large, I'm happy to let them get whatever iBooks gives them at that size). My images are over 1100 pixels high in some cases (but within the Apple spec. of 2M pixels per image).

    There are two things required:

    1) in style.css add
    "page-break-before: always;
    at the end of the style definitions for your images;

    2) add
    to the img statement of each image.

    Item 1 ensures a new page (yup, iBooks 2 obeys this; much to my surprise). Item 2 tells iBooks the maximum height on a vertical page (and in my case allows space for the figure label. When in horizontal mode, it seems that iBooks is happy to use the forced display of a great-than-860-pixels height image as one of equal-to-or-less-than 860 pixels, and displays the image both in the full page AND with the page break before it.

    When text size is increased by the user, the figure simply slips to the next page; something I'm happy to accept for very large font sizes, which break up the elegant layout, anyway.

    Finally, I have a set of images in my book that behave as I'd expect them to.

    Also, I'd had problems with image resolution out of Pages. It had seemed that iBooks 1 was recasting them at a lower resolution. Using hand wrought changes to the links to the images to new, high-resolution images was not working well. Now, I simply calculate to be under the 2M limit per image, save at that size, and use the height css statement to do the rest. This works well in iBooks 2, and double-tapping now allows the image to be magnified to a great extent, certainly sufficient for my line-art details.


More of my books