iBooks Bootcamp: Fixed Layout Project Setup

In part one of the iBooks Bootcamp series, we talked about how to get an iBooks content provider account from Apple and discussed the iBooks platform at a high level. In this second installment, we'll go over how to actually create your first fixed layout iBooks project.

Step 1: Create the Folder System

The first thing we need to do is set up the necessary folders.

Main Folder

Start by creating a main project folder in which to store everything.

You can name the folder whatever you like. For this tutorial, I'll name ours "iBookDemo".

META-INF and OEBPS Folders

Inside the main folder we’ll create two new folders. The first must be named "META-INF" and the second "OEBPS".

The META-INF folder will contain metadata that iBooks can use to identify the book. The OEBPS folder will contain all the content and supporting files for the book. These two folders are required. If not provided, the book will not validate as an iBook and will not open in the iBooks app.

Step 2: Set Up the EPUB Specific Files

Mimetype File

Besides the META-INF and OEBPS folders, the only other file that should be present in the main level of the folder is the mimetype file. Launch your text editor and select a new file. Type the following code on the first line:

application/epub+zip

This mimetype file tells iBooks that this is a zipped EPUB application. Make sure there are no carriage returns and that the code appears on the first line. Click "Save", and then name the file "mimetype". Note that the file does not have an extension after the name.

com.apple.ibooks.display-options.xml

Let’s specify some iBooks options. Create another new file in your text editor, and type the following code:

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

The above code sets up the file to add display options for the book. We’ll add the specific options for each one a little later. Save the file as "com.apple.ibooks.display-options.xml" inside the META-INF folder.

Container.xml

As we discussed in part one of this tutorial, the container.xml file points iBooks in the direction of the .opf file, which contains the metadata for the book. Create a new file in your text editor and add the following code:

<?xml version="1.0"?>
<container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
  <rootfiles>
    <rootfile full-path="OEBPS/content.opf"
     media-type="application/oebps-package+xml" />
  </rootfiles>
</container>

As long as you always name your .opf file the same name and save it in the same location, you can reuse the same container.xml file each time you create a new iBook. Save the file as "container.xml" and make sure to put it in the same META-INF folder.

OPF File

Easily the largest file in the bunch, the .opf file is where you will list the contents and order of your book. Create a new file in your text editor and add the following code:

<?xml version='1.0' encoding='utf-8'?>
<package xmlns="http://www.idpf.org/2007/opf"
            xmlns:dc="http://purl.org/dc/elements/1.1/"
            unique-identifier="bookid" version="2.0">
  <metadata>
  </metadata>
  
  <manifest>
  </manifest>
  
  <spine toc="ncx">
  </spine>
  
  <guide>
  </guide>
</package>

The .opf file starts out with the required namespaces and is followed by four main sections. The first section is metadata for the book. This includes things like the title, author, and copyright. The second is the manifest which details every file used in the content of the book. All the XHTML files, fonts, images, CSS, JavaScript, audio and video; every bit of content used in the book must be listed here. The third section is the spine, and this is where each page of the book is listed in the order it will be displayed. The final section is the guide which specifies important sections of the book, such as an index, glossary, or table of contents. The guide is optional, however if your book has an official table of contents or index, it is a good idea to add these references to the guide. Save your file as "content.opf" and make sure it is inside the OEBPS folder.

NCX File

The last EPUB specific file is the .ncx file, the directory of bookmarks in your book. Create a new file in your text editor and add the following code:

<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE ncx PUBLIC "-//NISO//DTD ncx 2005-1//EN"
                 "http://www.daisy.org/z3986/2005/ncx-2005-1.dtd">
<ncx xmlns="http://www.daisy.org/z3986/2005/ncx/" version="2005-1">
  <head>
  </head>
  
  <docTitle>
  </docTitle>
  
  <navMap>
  </navMap>
</ncx>

Like nearly all of the EPUB specific files we have created, this file is also based on XML. Save the file as "toc.ncx" in the OEBPS folder.

Step 3: Create the Remaining Files

Creating the CSS File

While you can use external, internal, or in-line CSS with iBooks, for organizational purposes, we're going to stick with externally linked CSS. Create a new file in your text editor and add the following code:

body {
    width: 612px;
    height: 792px;
    margin: 0;
}

We will only add one tag for now, and that is the body tag. The size of the page is defined in two places in an iBook, the body tag of the CSS and the viewport tag in the XHTML file. Save the file and name it "cssstyles.css". For this example, we will save the CSS files directly in the OEBPS folder, however you may want to have a separate folder in the OEBPS folder in your own project if you plan to use a separate CSS file for each page.

Creating the XHTML Template

Each page of a Fixed Layout iBook is a separate XHTML file. This means that if your book has ten pages, you will have ten separate XHTML files. The easiest way to create that many pages is to start by building a template containing the code that will be present on every page, and click "Save As" to save the file as the other XHTML pages you will need. Let’s start by building the template for our project. Create a new file in your text editor and add the following code.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
    <head>
        <title>iBooks Demo</title>
        <meta name="viewport" content="width=612, height=792" />
        <link rel="stylesheet" type="text/css" href="cssstyles.css" />
    </head>

    <body>
    </body> 

</html>

There are a few important pieces to this code. The first section includes the XHTML and EPUB namespaces and corresponding URIs. Inside the head tag is the book’s title and a tag for the viewport. Just like the body tag in the CSS file, the viewport lets iBooks know the size of a book’s page in pixels. We also link the newly created external CSS file. The last section, the body, is where all our content goes. Save the file as "page01.xhtml" and make sure it is saved in the OEBPS folder.

Using the XHTML Template

With "page01.xhtml" still open, click File > Save As and save the file as "page02.xhtml" in the OEBPS folder. Click File > Save As again and save the file as "page03.xhtml" in the OEBPS folder. You now have three pages for your demo iBook without having to write the same code three times!

Conclusion

Your project is now set up, however there is no content yet and nothing to test if we upload to a device. In the next installment of this series, we will add some content to create a working example of an iBook.

HIGHLIGHTS OF THE DAY