First, let's talk about viewport, perhaps the most widely misunderstood concept in webpage and ebook design. I'm not even sure I've got it totally clear. Which is why I take lots of screenshots.
What is a viewport? Very loosely, it's the area that you have to work with, the area where a web page or ebook will be displayed, on a mobile device (not a desktop computer whose windows are always variable). The trick is how to figure out how it relates to a given device size. And what happens if you can (or can't) change that device size, like when you make a window bigger and smaller. Let's look.
To begin, I created a very simple page with a bit of text, an image whose width I set to 500px and a 1px border around the body:
...
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<meta name="viewport" content="width=1000" />
<title>Test Viewport</title>
<style type="text/css">
body {margin:0;padding:0;border: 1px solid black; background:yellow}
p {margin:0;padding:0}
</style>
</head>
<body>
<p>Viewport measures 1000</p>
<p>And this image has width of 500px (actually 1100px wide)</p>
<p><img src="1100x1731.jpg" alt="1100x1731" width="500" /></p>
...You can download it here.
And then I displayed it in Safari for iOS on my iPad 3:
The important bits to notice are that the image whose width is set to 500px takes up half of the 1000px viewport in Safari iOS. (OK, almost half, since I've got a border on the background that takes up 1 px on the right and 1px on the left.)
Now what happens if we change the viewport size to 750px or 500px?
With the viewport equal to 750px, the 500px image takes up about 2/3 of the page. It's as if you said "now the area the browser has to work with is just 750px".
If we set the viewport to 500px, something strange happens: the image is actually bigger than the so-called viewport (because of the 1px border).
Now look at what happens if we change the viewport to 250px:
The image still fills the screen, it's the exact same size it was when the viewport measured 500px, but now we see that the
body with the border around it measures about half of that screen (250px).There's also one more very important thing to notice. The size of the text was different in each instance:
(Note that it seems there's a minimum viewport size of 200px. Also, the text appears the same whether the viewport measures 500px or 250px. Not sure exactly what's going on there.)
What about the viewport in iBooks?
The idea is similar, but iBooks has its own quirks. Surprise!You can download the 500px version of the Viewport test ebook here.
In iBooks, you not only have to specify the width of the viewport, but also the height. In these examples, I will change them proportionately so that we're not looking at too many changes at once.
First, here's an ebook, containing roughly the same page as above, with a viewport that measures 1000 pixels wide by 1574 pixels high. The width of the image is still set to 500px. (I've moved the text around in these examples so it's easier to read, but I didn't change its size from one book to the next.)
Notice how the image takes up half of the page size (500 is 1/2 of 1000).
Let's try with a viewport size of 750px wide:
There are three important things to notice here. First, the same 500px wide image now takes up 2/3 of the page. Second, the text is a bit bigger (since 4em depends on the viewport size), and third, and perhaps most surprising: the book itself didn't change size at all. There is exactly the same amount of letter boxing to the right and left and none above or below.
Let's look at a 500px viewport:
In contrast with the 500px viewport on Safari, now our 500px image exactly fills the 500px viewport. (I moved the text and changed its color (but not its size) so you could read it.) Again, the book itself has not changed size.
Finally, here's a 250px viewport:
Again, this is different than what happened in Safari iOS. In iBooks, with a 250px viewport, you'll only see half of a 500px image. It makes more sense, frankly.
There are a couple of things I want you to take away from all this.
1. In iBooks, the pixel dimensions of the viewport determine a book's proportions, not its absolute size. A book whose viewport measures 1000 x 1574px will look exactly the same at full size as a book whose viewport measures 250 x 394px. If the proportion of the viewport does not match the proportion of the screen itself, iBooks will letterbox the book.
2. The size of the objects on a page is determined with respect to the specified viewport. If the viewport is 1000 px wide and the image's width is 500px, the image will take up half of the page. If you have text that is 1em high, the em is determined in proportion to the viewport size. If you are positioning elements on the page, do it with the viewport dimensions in mind.
3. In Safari, an image that is larger than a viewport will still be displayed in its entirety. The viewport will still have the specified size, but there will be an intermediate, sort of extra viewport to hold the image at full size. It's almost philosophical. In iBooks, an image that is larger than a viewport will be cut off. (In earlier versions of iBooks, if you had more info than fit in your viewport you'd get that weird pile of boxes in the middle of the screen. That thankfully is no longer the case.)
4. Monarch butterflies are beautiful. When they hatch, their shriveled wings only take up about half of their regular size. It takes just a few minutes to pump them up and dry out, before they fly away.
Tomorrow, I'll talk about Viewports and Zoom. Unless Catalonia declares independence, in which case it might have to wait until Monday. Stay tuned.
