Double tap zoom transforms fixed layout ebooks in iBooks

I'm supposed to be working on my presentations for PepCon, but I've been distracted with something that Rick Gordon brought to my attention last week: "Remember you can double-tap a text frame to zoom to screen size in iBooks FL".



As happens so often on Twitter, that message went into my brain and didn't come out until a few days later when Rick offered me a sneak preview of an amazing fixed layout ebook he's working on, Tiny Homes: Simple Shelter, by Lloyd Kahn.

Before I go any further, I have to tell you (if you haven't already heard my rants on the subject), that I generally hate it when publishers just replicate a print design as a fixed layout for the iPad (or whatever reader). One of the first examples I saw was a gorgeous collection of Ansel Adams prints with what I thought was the tiniest text you could never read. It was so frustrating. And although I understand the usefulness of Fixed Layout, and have written a fair bit of information about how to create FL ebooks, I've always shied away from recreating a text-heavy fixed layout ebook.

So, I was intrigued when, in the introductory note about Tiny Homes, Rick said that I could double-tap any of the text blocks or images to magnify them. I didn't remember being able to do that in other FL books, and wondered if Rick, an EPUB expert, had discovered or developed some new tricks. And while he has, and I'll get to that in a later post, what is almost more important is that he made me realize that we've had this capability all along.

At first, I couldn't believe we had. So I went back and looked. And though there are a few examples of what I'm calling double-tap-zoom (DTZ), I'm not surprised I didn't notice.



iBooks has always let you double-tap a book page to fill the screen with just that page along with a sliver of the facing page. This works in all fixed layout ebooks on iBooks.

What I didn't realize is that you can double-tap some text blocks and images to automatically zoom them as well. This makes reading a text-heavy (or text-and-image-heavy, as in Tiny Homes) a much more pleasant—and even feasible—project. I'm a bit embarrassed to admit that double-tap works great in the Ansel Adams book that I've used to use as an example of what not to do with fixed layout. No more.



But it's not consistent. Sometimes when you double-click an image, it zooms the page and sometimes it zooms the image. Sometimes the text zooms and sometimes it doesn't:



And the more I looked, the more I wondered what distinguished the text and images that zoom from those that remained static.

One of the most important characteristics of text and images that can be double-tap zoomed is so obvious, you might not have thought of it: they must start out smaller than the page itself. Otherwise, there's nothing to zoom to!

That means that if you have a text block that you want to have zoomed, the text has to be somewhat narrower than the page on which it is placed. (I have found that a width of 85% will zoom, while 86% won't. Actually, 86% zooms in landscape but not portrait.) The width property is very useful here:

div.text {width:85%}

What I found rather remarkable is that it doesn't matter if you position the text absolutely or some other way, it doesn't matter if the text has offsets or if it doesn't. And you don't have to invoke any crazy incantations. It just matters how wide the text block is with respect to the page width.

Of course, sometimes when you position an image, you change its width. For example, if you give a text block a left offset of 200 pixels on a page 1200 pixels wide, that leaves only 83% of the page (1000/1200) for the text block. It will zoom even though you haven't explicitly specified the width.

The same rule applies to images: as long as they're at least 85% smaller than the page width, they will zoom when double-tapped.

Why didn't we notice this before? Why didn't I notice this before (you probably did!)

There are three main reasons I've found. First, if you're using full bleed images and just placing text on top, there's no way to zoom the images. They're already as big as they can get. (The text on top should still zoom.)

Second, early fixed layout examples (mine included) often used an overly complicated system of displaying half of a layout on the left page and half on the right, hiding the bits that didn't fit. This required some strange sizing of even smaller images, rendering them unzoomable. What a shame. I feel a little guilty that I espoused that method of creating fixed layouts, and hope to remedy that more thoroughly soon. For now, I'll say that I recommend creating each page in a layout independently, dividing images into two pieces as necessary and keeping the sizing as simple as possible.

Third, if an image is beneath a transparent text block, particularly one that doesn't zoom, you won't be able to reach it with a double-tap. It's beyond your touch, and it won't zoom. Be careful with z-index!

If you're creating fixed layout ebooks with a lot of text and/or images, make sure they double tap zoom by following these caveats. It'll make you books a lot more pleasant to read.



You can download my example file shown in this last video. Feel free to unzip it and look at the code. The CSS is right in the XHTML just so you can see what is affecting what. I wouldn't create a real book this way. And I think the z-index is what is keeping the large 1200 x 1700 image (with the castle in the lower right corner) from zooming.

Oh, and sorry about all the reflection in the videos. I've got a ways to go before I can create videos as nice as my screenshots :)

Many thanks to EPUB coder extraordinaire Rick Gordon for getting me thinking about this and for sharing his lovely book with me. He also pointed me to a few interesting articles, one on double-tap zoom, another from the Safari HTML reference that describes the user-scalable variable and how it is on by default, and a third on a new zoom property. Rick's book, Tiny Homes, uses a few more double-tap to zoom tricks that I hope to talk about in a future post.