View Cart

How To Create Fixed-Layout iBooks, Part 2

The File Structure

In this part we'll be tearing apart an ePub file to look at what's inside, and then starting at the top and working our way down through the list of contents one by one. If you haven't downloaded the template file yet, then do so now, as I'll be using it to describe the contents of a standard iBooks file.

OPENING THE FILE

As I mentioned previously, an iBooks file is just a slightly modified .epub, which itself is just a .zip archive with the extension changed. Consequently, you can open an .epub the same way you open any .zip file. You can either change the .epub extension back to .zip if you want to, or you can just right-click on the .epub and select "Extract" or "Open with" whatever zip program you use. I recommend 7-Zip, which lets you modify the contents of an .epub without changing the extension or extracting the files. You can also just drag and drop new files into it, and delete ones that are in there. Other compression programs might do this too, but I haven't tried them, so you're on your own there.

The other program you'll want is Notepad++, or something similar which has numbered lines and search/replace functions. Don't use Windows Notepad as it doesn't have these features and will totally garble your files. You can use any webpage builder you might have, such as Dreamweaver or whatnot, but since you'll be opening and closing it a lot and often, you'll want something that loads and opens files quickly. Whichever editor you choose, be sure to add it as the default editor in 7-Zip (Tools / Options / Editor) so that you can right-click and select "edit" to open compressed files in the editor without extracting the files.

THE FILE STRUCTURE

When you look inside the template, what you'll see at the root level is one file and two folders (whose contents I'll also disclose here for a complete overview of where we're going:

     mimetype

     /META-INF/

            container.xml

            [com.apple.ibooks.display-options.xml] *

     /OEBPS/

            /css/

                   global-styles.css

                   page1styles.css

                   page3styles.css

                   page4styles.css

            /fonts/

                   Storybook.ttf

            /images/

                   bookpage.jpg

                   cover.jpg

                   page02.jpg

                   promopage.jpg

            content.opf

            cover.xhtml

            page01.xhtml

            page02.xhtml

            page03.xhtml

            page04.xhtml

            toc.xhtml

* NOTE: The com.apple file is now obsolete and no longer included in the template, but is still discussed in the tutorial for the sake reference and backwards compatibility with iBooks 2.0. The previous toc.ncx file has also been replaced with the newer toc.xhtml navigation document, both of which will be discussed in due course.

This is the basic ePub file structure, all of which must be in an iBooks file (except for the custom font), although the names of the content files themselves can be unique to your book project, with the exception of the META-INF folder and its contents, which must be named exactly as shown. And of course there will likely be a whole lot of additional files in there before you're done, possibly including a few varieties not listed here. But more on that later. First things first...

THE MIMETYPE FILE

The mimetype file tells the reading system what type of file it's looking at. If you right-click and select "edit" to open this file you'll see a single line of text:

application/epub+zip

This tells the device's operating system that the file is an epub/zip archive, which tells it a lot about it's structure that the contents are compressed. You can create this file from scratch in your editor, but you can also just use this one, as they're mostly all the same. The new .ibooks files have a new mimetype:

application/x-ibooks+zip

which I imagine tells the iBooks application to apply a whole new set of rules to the contents. This also technically makes it no longer an epub file, although the general structure is pretty much the same. As an experiment I changed the mimetype the template to this and loaded it into iBooks. The file opened with the super-cool new hardback cover animation, but there wasn't anything else inside, so something else is going on with the new .ibooks code.

If you choose to create your own mimetype file there are three stipulations you must observe:

  1. The mimetype file must not be compressed or encrypted
  2. There must be nothing else in the file but the one line of text
  3. It must be the first file in the zip archive

The best way to achieve these requirements is to create a zip archive with just the mimetype file in it, using no compression when you add it, and then to add in all the other files later, with compression. Encryption is an issue I won't even begin to get into here.

THE CONTAINER FILE

Like the mimetype file, the container.xml must be named exactly that. In addition, it must be in a folder named META-INF, so that the OS knows where to find it. The sole function of the container file is to tell the device where to find the .opf (which seems a somewhat redundant step if you ask me). Looking inside the container.xml file here is what you'll see:

This is the first of many files where we need to explain some things to the computer so it understands what we're saying and what to do with the information.

The first two lines are declarations, stating what language we're speaking and giving a namespace reference (xmlns), which is a specific set of operating rules, more or less:

<?xml version="1.0"?>
<container version=1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">

Within this is contained the rootfile path, which as I said tells the system where to look for the file that contains a listing of the ebook's contents, and what type of file that is:

<rootfile full-path="OEBPS/content.opf" media-type="application/oebps-package+xml"/>

Looking at our file structure above, you'll see that the content.opf is in the OEBPS folder, just like our path data says here. This file can actually be anywhere and named anything you like, so long as you say so here. The media-type, however, must read exactly as given, since it describes the target's file type, which is an Open eBook Publication Structure (OEBPS) package written in eXtensible Markup Language (XML). We'll talk about the .opf itself later. Be sure to include both the </rootfiles> and </container> closing tags as shown in the image.

THE COM.APPLE FILE

NOTE: This file is no longer required for iBooks 3.0 and newer versions of the app. See Part 8 of this tutorial for full details. Should you want to create an ePub 2.0 file for backwards compatibility, however, you will need to include this file. Therefore, the following discussion is still included here.

This is a file completely unique to Apple's iBooks, which consists of a set of display options that tell iOS devices how to present the content. I've included all of the triggers that I am aware of in the template file, along with some notes (in green) giving the allowable choices. However, the only ones required are these:

<display_options>
<platform name="*">
<option name="fixed-layout">true</option>
</platform>
</display_options>

The platform name "*" means all devices, with the only two other options being either "iphone" for handheld devices only (including the ipod touch) or "ipad" for tablet only content. This allows you to specify different display options for different platforms. I'll give an example using the remaining options:

<display_options>
     <platform name="*">
          <option name="fixed-layout">true</option>
          <option name="specified-fonts">true</option>
     </platform>
     <platform name="ipad">
          <option name="open-to-spread">true</option>
          <option name="orientation-lock">landscape-only"</option>
          <option name="interactive">true</option>
     </platform>
</display_options>

So here we have one set of options that apply to all platforms and three that apply only to the ipad. This would create an ebook with a fixed-layout and custom fonts on all devices, but which would only open as a spread on the ipad, and only in landscape mode, and which would have its interactive content disabled on handheld devices (since "true" is only chosen for the iPad and "false" is the default).

Most of these have "true/false" choices, with "false" as the default. Taking them one by one:

  • "fixed-layout" [true/false] - this must be set to "true" for any of what we're about to do to work. This is the tag that tells iBooks to use fixed-layout properties, and so is required.
  • "specified-fonts" [true/false] - you can embed your own fonts into your ebook if you want something beyond what's offered on the ipad, although you must have the appropriate rights to do so. More on this when we get into the fonts folder.
  • "open-to-spread" [true/false] - this tells iBooks whether or not to open to a full two-page spread or zoom to a single page size, and is set to "false" by default. However, "false" does not mean you'll see only that single page, but that the starting page will be zoomed to its largest possible height or width, with the opposing page content flowing beyond the edges of the frame. Depending on the size of your book's pages you may see most, if not all, of a two page spread in non-spread mode, particularly in landscape orientation. And most unfortunately, for a cover image the left page will still appear, it will just be blank. This has been fixed in the new .ibooks format, but here there is no way to have just the cover itself appear, nor is there a way to place rear cover content on that blank left page. With this option set to "true" you'll see the full two-page spread no matter which way you turn the device. Which brings us to...
  • "orientation-lock" [portrait-only/landscape-only/none] - this allows you to choose just one orientation in which your ebook can be viewed, which can be beneficial if your book has odd sized pages (such as a photo album with pages wider than they are tall), or you're aiming for handheld-only devices only where you might want single pages viewed in portrait mode only.
  • "interactive" [true/false] - this is an option which allows scripted content to be added and made active. Again, "false" is the default setting, so you must tell it if you're adding scripted content such as java or canvas. This does not apply to anything that's inherent in iBooks itself, such as pinch-and-zoom or tapping and swiping, but only to more complex content such as finger-painting or movable images that require scripted code.

As mentioned, aside from the "fixed-layout" option itself, you only need to add in others if they apply to your book. Just leave out the rest. But this gives you some leverage in how your work is presented to the world, which can make a lot of difference.

Lastly, you will need to add the xml declaration at the top of this file:

<?xml version="1.0" encoding="UTF-8"?>

So that's it for the META-INF folder. There are other files that can find there way in here, but none you'll need to mess with, as they mainly involve encryption controls. Some ebooks will put in manifest and metadata files here, but those are best left in the .opf where they belong (and are required). These are all you'll need for now, and that's as far as we'll be going for the moment.

Join Me
On Google+

View My Vids
On YouTube

envelopeSubscribe To
My Newsletter