Tuesday, January 24, 2012

How to Create Fixed-Layout iBooks, Part 2

Today 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 the list of contents one by one. If you haven't downloaded the free template file yet, then do so now, as I'll be using it to describe the contents of a standard iBooks file. You can also download my Ring Saga sample chapter and have a look inside if you want to see a somewhat more complex file. It's encryption-free, so you can open it up and look at all the content.

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/
                   page02.css
                   styles.css
            /fonts/
                   Storybook.ttf
            /images/
                   bookpage.jpg
                   cover.jpg
            content.opf
            cover.xhtml
            page01.xhtml
            page02.xhtml
            toc.ncx

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 its structure and that the contents use zip compression. 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 my Ring Saga mimetype 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 I've got some work to do yet in figuring that out. I'll let you know when I work it out. But from this we can discern that one of those new rules is that .ibooks files get the nice new glossy hardback cover!

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

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. See my Ring Saga sample for my work around to that. 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.

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.

NEXT UP: Creating Your Content