Maximizing zoom via the viewport in Fixed Layout ebooks in iBooks

I got an email from one of my readers the other day saying I was giving him a headache. Well, watch out, because I'm not done yet :) Bet you didn't know I used to be a math major...

Let's forge ahead. Although, as we've seen here and here, when you specify a viewport, you're actually specifying the proportions of the viewport, it turns out that you're also specifying the amount of zoom possible. Basically, if you use small numbers for the viewport, you'll have less zoom than if you use large numbers. Let's look at an example.

First, let's suppose, giving the calculations from Friday, that we want a viewport whose proportions take advantage of the iPad's screen with as little letterboxing as possible. We also want individual pages for each image. That means the viewport's proportions will be 1900 x 1470px.

You might be alarmed that 1900 x 1470, when multiplied together is larger than 2,000,000, which, if you had images that size, would cause your book to be rejected by Apple's iBookstore. But, just because your viewport is a certain size, does not mean that your images have to be that size, even if you want them to fill the page. They simply have to be displayed at that size.

But again, what numbers should we use for the viewport, if the proportions are 1900 x 1470, or a ratio of 1.29:1 (which is just 1900/1470)? A simple option would be to set the viewport to 1290px x 1000px (which of course, also has a ratio of 1.29:1).

<meta name="viewport" content="width=1290,height=1000" />

Now, what is the largest image that we can put in that viewport that will display full size? To get this number, multiply the ratio by 2 million (in our example 1.29 x 2,000,000 = 2,580,000), and then take the square root of the answer (1606). That number is the biggest width a 2 megapixel image of these proportions could have. If you like, round it off to make it easier to remember and type (1600). Divide the width by 1.29 to get the height (1240). And if you like, multiply them together to make sure you did it right. You should get a number that is less than 2,000,000 (1,984,000).

Next, save your images at 1600 x 1240px.

Add the images to your pages, and preview in iBooks. Here's the page at full size.



But with a book like this, your readers will want to zoom in. Here's the same page, zoomed in as far as it will go:



But what happens if we use a larger viewport? Let's try the full 1900 x 1470, which, as you remember has the same 1.29:1 ratio as 1290 x 1000px.

<meta name="viewport" content="width=1900,height=1470" />

I'm not going to change the images at all. It's the same 1600 x 1240 image I used in the previous example. (Though I did change the CSS to display the image at the same width as the viewport, 1900px wide.)

At full size, the page looks exactly the same. It's counterintuitive, but makes sense if you think about it. Just remember: the viewport determines the proportions, not the actual size.



But look what happens when you zoom in. Specifically, notice how much farther you can zoom in:



And what if we made it bigger still. Let's try. I'll pick 2400 pixels wide, just because it's relatively even number. If the width is 2400, I just have to divide by 1.29 to get the height (1860).

<meta name="viewport" content="width=2400,height=1860" />

At full size (it still fills the screen with no letterboxing), it still looks exactly the same as the other viewports with the same proportion. Note that I'm still using the same image that meaures 1600 x 1240px:



But now you can zoom in even further:



Now, I'm not sure what the limit is. Surely, it doesn't make any sense to be able to zoom in so far that the image is totally blurry or pixelated. However, in a book where zooming in is important, you want to make sure you don't use puny viewport numbers.

I also am not sure if there is an upper limit to the viewport that Apple or iBooks will allow. When I tried to create a viewport that measured 4800 x 3720px, it opened, but crashed when I zoomed in and out of a page. All of the sizes shown on this page work just fine.

Ah, and you might ask, what about the image size. How can we make the zoomed in images look their best. That's tomorrow :)

Note: This is a picture of a Monarch Butterfly egg. Notice the pin head in the upper-left corner of the picture for perspective on its size. This particular egg was just about to hatch (it's on the next page in the book!) They are truly amazing creatures.