View Cart

How To Create Fixed-Layout iBooks, Part 3

Creating Your Content

Before we can continue building our fixed-layout ebook we'll need some content to put in there. This is, of course, the reason we're here undertaking this project, so I would presume you already have something you want to make an ebook out of, and as we're focusing on fixed-layout format you've likely got some heavy art to include. First, however, you must understand the nature of the medium that you'll be working in.

In standard ebooks the size and placing of elements onscreen can change, which makes everything relative to everything else. But in fixed-layout ebooks everything is...well... fixed, and consequently the size and position of every element is absolute. In order to place those elements accurately, therefore, you must know precisely where you want them to be and how to put them there. This will require a slightly technical explanation, so bear with me for a moment.


NOTE: See the Display Resolution Chart in the resources section for the latest data regarding screen technology. The following discussion is somewhat out of date now, but the concepts imparted will continue to apply as long as screens have pixels. Just update the pixel stats accordingly for the newest displays, which are bound to keep increasing in resolution for some time.

The current iPad screens contain 1024x768 pixels at a resolution of 132 pixels per inch [upgraded to 2048x1536 @ 264ppi as of iPad 3]. However, the pixel density itself is irrelevant since the total number of pixels is fixed. In print, a resolution of 100 pixels per inch would make a 1000x1000 pixel image print out at 10" x 10" square, whereas a resolution of 200 pixels per inch would make that exact same image print at only 5" x 5". But on a fixed digital screen both images will appear exactly the same.

The iPhone4S and iPod Touch have a screen resolution of 960x640 pixels at 326 pixels per inch. With nearly three times the density of pixels, the smaller screen has nearly as many total pixels (614,400) as the larger, but lower resolution iPad (786,432 total), even though the iPhone display is only 3.5" and the iPad nearly three times that at 9.7". This is why the smaller screen has the ability to display almost as much detailed content as the larger one.

To make matters worse, resolution will continue to increase until the larger tablet screens reach the pixel density of the smaller ones. Fortunately for us, 326 pixels per inch is pretty much the upper limit of the human eye's ability to discern individual details, so increasing pixel density further would be pointless from a practical perspective. But when the iPad's 9.7" screen reaches the iPhone's level, its total pixel area will be 2529x1897 for a massive total of 4,797,513 pixels, every one of which you'll need to fill with content and color.

Now, some of those pixels can be duplicated, so that, for example, one pixel in a 1024x768 image created today will be displayed by a 4 pixel square in the 264-ppi 2048x1536 display rumored to be coming on the iPad 3 due out this April. Theoretically, the image should look pretty much the same, although in fact it will be zoomed and pixelated and somewhat fuzzy by comparison, since that 1024x768 image will only fill the middle of a screen with four times as many pixels (twice as many wide, and twice as many high), and it will be the display processor that calculates what color to make those extra pixels, not you. Crisp edges will become fuzzy where black meets white and the display logically selects three shades of gray as a compromise for the three new pixels it must fill in when zoomed to full screen resolution.

More importantly, these are all pixels that could contain more detail and present a clearer, crisper image. For this reason it is recommended that you always create artwork at the highest resolution possible to future-proof your hard work against the higher resolution screens that are surely coming. In the iBookstore Asset Guide Apple themselves recommend using images that are "at least twice their intended display size" for this reason, as well as enabling users to zoom in to see more detail. Unfortunately, as we will see, this is not technically possible, given Apple's current restrictions on total pixels in an image.


Complicating matters are two further issues we must take into consideration. First is Apple's two million pixel limit for each individual image. This is apparently not a hard and fast rule, but images larger than this may not display properly, or cause the iBooks app to crash. Given this restriction, the largest single image size legally allowable in the iPad's 4:3 aspect ratio would be 1224x1633, a total of 1,998,792 pixels. Of course, you can place more than one of these on a page, and two of them side by side makes up a full landscape spread. But this brings up our next consideration, which is total file size.

UPDATE:Apple has since increased the allowed image pixel limit, first to 3.2 million in August of 2013, and then to 4 million as of December 2014. This is still not quite enough to allow for Apple's recommended 1.5 times zoom allowance for images on the full size iPad, which a quick bit of math shows would be 4,718,592 pixels.

Since .epub files use .zip compression in their packaging, they must adhere to the zip archive's current 2 Gb limit, and this is a hard and fast rule which cannot be broken. Now, two gigs is a pretty enormous file, so there's really not a lot of concern here. But as files get bigger and enhanced ebooks include more content, it becomes increasingly possible this limit might be reached, particularly if a lot of video is embedded. Moreover, while 2 gigabytes might seem enormous by today's standards, ten years ago a 2 megabyte file would have been unwieldy (the Sony Librié, for example, which came out in 2004 as the first eInk device, had only 10 Mb of total onboard memory, and ran on 4 AAA batteries!) [2015 NOTE: Apple now recommends 10 Mb as the maximum for images in each xhtml file in an iBooks file]. Now it's not uncommon to have a single image file that is nearly two megabytes in size (Amazon now allows up to 5 Mb per image). More compression can, of course, bring file sizes down, but where quality is concerned, the less compression the better, especially on high resolution screens. It's a compromise each ebook artist will have to make for themselves.

The bottom line is that when you're creating high quality artwork for a graphic novel or illustrated ebook with full-page images, you should ideally create them as close to the two million pixel limit as possible and work from there. I create my original artwork at upwards of 4000x3000 pixels or so and then shrink to fit. But as screen resolution continues to increase, even these image sizes will be too small. The iPad, by the way, automatically resizes larger images to fit the screen, in whichever orientation it's being viewed. You can double-tap to view full screen, or pinch and zoom to view the image at full size.


Although the iPad's total screen size is now 2048x1536, Apple's "recommended page size" in the Asset Guide is still only 985x738, due to space taken up by the faux book pages and menus [and because apparently they haven't bothered to update this section of the Guide]. Consequently, this is the size I've used in the template to give you the official example. However, given the increased limit of four million pixels per image, the actual maximum image size you could use for a single full page layout at the 4:3 aspect ratio would be 2309x1732, for a total of 3,999,188 pixels.

While Apple's recommended page size accounts for the "faux" book pages and menus, if you want your pages to fill the entire iPad screen with the upper and lower menu bars retracted, use the full iPad resolution for a single page (i.e. 2048 high by 1536 wide, or a factor of that aspect ratio, which is 4:3). This will fill the screen with a single page in portrait, as well as a dual-page spread in landscape. Note that the auto-retracting menu bars will cover the upper and lower margins of the page when they are activated, obscuring what is underneath, which is presumably why Apple recommends the smaller page height. These menus disappear, however, when the page is tapped, removing them from view (all but the small status bar at the top, that is), leaving a blank space above and below if using their recommended ratio.

Recent updates have included the option to turn off the faux book borders in standard iBooks editions, via the font display menu, but since this menu is not available in fixed-layout iBooks, the faux book pages are there whether you want them or not. This may change at some point down the line, of course, particularly seeing that the new .ibooks format no longer has them. But for the time being, you'll want to take them into consideration when creating your art layouts, as I have done above, since removing them will slightly alter the full page aspect ratio. [UPDATE: You can now remove the faux book pages via internal coding in the OPF, but I do not recommend it, as this should be a choice left to the reader.] [2016 UPDATE: Apple has deprecated the faux book binding option, so this is no longer an option. Orientation-lock has also been removed. All ebooks must now auto-rotate, although you can still specify a default orientation.]


Fixed-layout iBooks actually allow you to use a single image to fill a two-page spread by spanning the image across the pages [and some of the links given in the reference section tell you to and show you how, although at least one has now retracted that as a recommended method]. However, given all I've just said I highly recommend against this, since Apple's pixel limit only applies to each individual image. If you use one image to fill two pages, you have effectively cut the maximum size of your artwork in half, with only one million pixels per page. This is still enough to fill up the pages currently [i.e. pre-iPad 3], but only just, and tomorrow it will look like crap. Additionally, it's a whole lot of extra effort and confusion to format for no good reason. It is vastly easier to cut an image precisely in half in Photoshop than to span it across two pages. You have to create two separate page files either way, and the seams match up perfectly when viewed in two-page landscape orientation.

However, in the interest of giving you a full range of options, I'll include the information anyway, as there may be occasions when it could be handy. For example, if a smaller image runs across two pages of, say, a magazine-style layout, or a travel guide or some such, particularly since this would allow you to adjust the image placement without having to go back in to Photoshop and chop it up again. Bear in mind, however, that I do not recommend this for full page images, for the reasons given.

But we won't get into that just yet. First we'll build some single pages.

Join Me
On Google+

View My Vids
On YouTube

envelopeSubscribe To
My Newsletter