Choosing a viewport's proportions in a Fixed Layout EPUB for iBooks

UPDATE: September 19, 2012. Well, unfortunately, the numbers given for the individual horizontal pages were not quite right. Which is strange, because the screenshots sure make it look like it was right. I'm still trying to track the problem, though I think the issue is caching, which I hope to get into in more detail in a separate blog post. For now, know that the faux pages take up 120px (because of the higher resolution of the Retina display!) and so the actual optimal size of full screen individual pages is 1900 x 1470.

---

Yesterday, I showed you how the specified Viewport size affects the size of text and images in a fixed layout ebook in iBooks. Today I want to go over in more detail how you should choose the viewport's proportions.

The first thing to remember is that even though you specify the viewport size in pixels, it's not really a fixed size, but rather a proportion. For example, if you specify a viewport of 1000px wide by 1000px wide, you'll get a square page, but on an iPad3, it will be displayed at some other number of pixels, but not necessarily 1000.

When viewing a two page spread, it will look like this:



And when you zoom into a single page, you get this:



Note that even though the viewport was defined as 1000px square, its actual measurement in pixels depends on its zoom factor. When zoomed into a single page, for example, it measures about 1470px square. When viewed in a spread, an individual page measures 997px square. That's awfully close to 1000, but it's just a coincidince.

A page whose viewport is set to 2000 x 2000px would also be displayed in a spread at almost 997px square. Actually, it measures 1010px square, because the faux pages are smaller and take up less room.



(If you're wondering why the image shrunk, go back and read yesterday's post.)

More importantly, when you have a square page viewed in a spread, there is a lot of letterboxing. And when you zoom in, you'll see as much of the facing page as fits in the space left over from the square:



Now what happens if you turn the iPad sideways? Viewing a spread of square pages makes them pretty small.



And when you zoom in, there's a fair bit of letterboxing above and below, and not so much room for the facing page.

So, how do you take advantage of the real estate?

Of course, if your book is designed to be square, there's not much to do about it, but if you're designing a new book, or have some leeway for adjusting an existing design, you can choose a viewport that better takes advantage of an iPad's screen.

There are two options in this vein. You can either choose to have a spread of facing pages fit on the screen, or you can have a single horizontal or vertical page fit on the screen. Let's look first at the facing pages option.

Suppose you want to create a book whose spread fits into landscape orientation view on the iPad. If the iPad measures 2048 x 1536, and you leave out 64 pixels for top and bottom real estate and 56 pixels for faux pages on the ends, you get 1984 x 1480px. If you have 1984px for the entire width, that means you'll need to set the width of one of the pages to exactly half that, or 992px. The height of each page will still be 1480px.

In this particular example—more Monarchs!—I filled the left page with the left half of an image and the right page with the right half of an image. So the spread looks like one large image, with only the telltale faux spine in the middle giving it away.



Now, I will admit that if you double click the spread, it moves the tiniest bit. I don't know if there is a perfect size that eliminates that. If there is, I couldn't find it. (This is different from the weird flicker that you get sometimes when flipping to a new page. That is a different problem altogether.)

You can't zoom in on that page because it already fills the screen.

If you turn the iPad sideways, you get letterboxing above and below, as you might expect,



but when you zoom in on a single page, it fills up practically the entire screen with no letter boxing and a minimal overlap of the facing page.



It's pretty good.

What happens if you change the viewport to 1984x2960? Note that that is precisely double the size we were using.

Once you change the width of each image to 1984px, it looks exactly the same:



There is one important difference, however, which I'm going to save for another post.

Until then, let's look at other options for the viewport. While you could create facing pages that would fit in a vertical screen, they'd be really skinny. There might be a reason to do that, but I'll leave it for you to figure out.

Instead, let's look at how to maximize the real estate of individual pages. There are a couple of reasons why you might favor individual pages instead of a spread that combines two pages into one. First of all, it's simply a different look to turn an entire page rather than turn a half of a page.

But secondly and more importantly, you can only apply Javascript within a single page. So if you want to activate something on the right side by doing something on the left side, you'll have to have both sides in the same XHTML document, that is, in an individual page.

Individual pages that maximize screen real estate

We've actually already seen how to maximize portrait orientation pages. Just use the same measurements as we did for the spread, but fill the right and left pages with distinct material.

Let's look instead at horizontal pages. Again, if we're starting with 2048 x 1536, then we have to subtract 64 for vertical real estate, 28 for the faux pages at one end, and 120 pixels for the minimum overlap of the facing page. That leaves us with 1900 x 1472px, which I'll round off to 1900 x 1470px so it's easier to remember.

Since each page is going to be independent, each image must occupy the full terrain, 1900 x 1470px.

If you view the book zoomed out, the pages are rather small:



But if you zoom into a single page, it takes up the full space available in horizontal orientation:

Other sizes

Of course, you can make a book any proportions you wish. You simply have to keep in mind that, as with the square example, there will either be a fair bit of letterboxing when the reader is zoomed out, or a lot of overlap from the adjacent page if they're zoomed in.

What about zoom?

I know, I keep hinting about zoom, and it's really important. But it's going to have to wait until Monday, independence or no.