Thursday, September 20, 2012

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:

1290x1000 zoom

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.

1900x1470 full 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:

Viewport 2400x1860

But now you can zoom in even further:

2400x1860 Zoom

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.


  1. Is there a difference that needs to be accounted for between retina and non-retina devices? I also wonder how these principles might apply to video.

  2. Liz, applying the math explained in this post i didn't get the page full covered by the pictures. I tried to use the viewport as 1200 x 1700, which gives the proportion of 0.7 and the maximum size of the pic to 1180 x 1685. I've made a picture with 2360 of width but it still didn't work. I wonder if this problem happens since my ipad is the first one and them i must make the pictures double sized of the viewport, ignoring the retina display question or if I must set the viewport size to 1180 x 1685.

    Thanks for the help.

    1. I'm not sure I follow. You want the viewport to be 1200 wide by 1700 high? You've calculated the max pic size as 1180 x 1685. So, if you want to make it fit the viewport size, give it a width that is the same size as the viewport: 1200 wide. Yes?

  3. Your last three posts have been about iBooks functions Liz. Out of curiosity, why do you even bother with them? IBooks sells about as many books as the Astros win baseball games. With all the hoops they make you jump through to become a publisher of record etc. (even worse than NookKids publishing), they hardly seem worth it to me.

    1. It's a very good and reasonable question. I think my personal answer is that I'm still captivated by the possibilities. iBooks has the best support for EPUB and for JavaScript. There's so much you can do.

    2. I guess if nothing else iBooks is good practice for all those ePub-3 bells and whistles we'll probably be doing for every other retailer somewhere down the road.

      I like your blog Liz, and I have one of your books on formatting. Just thought I'd say hello for once.

  4. Speaking of ibooks ^-- (above mentioned) this gives me a great opportunity to bring up IOS 6. I design books for people who want interactivity in their ebooks. Things like quizzes, audio / video support, JS and jQuery driven image sliders, the possibilities.. they aren't endless, but close. Anyhow, I recently updated to IOS 6, and to my surprise was no longer able to access the keyboard with <input type="color"> which was the current workaround because of the lack of support for <input type="text"> now the only way to access the keyboard to type in a text field is to put the entire pages in an <object> or <iframe> tag which is very sloppy. Tell me support for this was an oversight because it would limit the possibilities so much. I've been looking for a new solution for a few days and haven't found anything yet, I'd be happy with another workaround if nothing else works. Any thoughts liz? Do you use input fields in your ebooks regularly? Thanks :)


More of my books