In the first two installments of this series, we went over the basics of iBooks and explained how to set up your project. In this installment, we'll add some content to our fixed-layout project and begin building a working iBook. Let's get started!

Getting the Project Images

The downloadable source files provide images you can use in your project to complete the tutorial. If you have not already done so, download the source files at the top of this page. Double-click to open the "iBookDemo" folder, then open the "OEBPS" folder and right-click on the "images" folder. Select "Copy 'images'" from the menu before navigating back to the project folder you have been working with in this series. Navigate inside your project’s "OEBPS" folder and right-click. Select "Paste Item" from the menu to paste the images folder inside your project folder.

Step 1: Adding XHTML content

Background Images

Let's add background images to the XHTML files. Open "page01.xhtml", "page02.xhtml", and "page03.xhtml" in your text editor, and then add the following code inside each page's body tag:

<div class="backgroundImage">
            <img src="images/demoBackground.jpg"
                 alt="A big, green, grassy hill
                 with a bright blue sky in the
                 background."/>
</div>

Notice the descriptiveness of the alt tag. Apple places a high level of importance on accessibility, requiring alt tags to be descriptive for visually impaired users. The file "demoBackround.jpg" is located in the "images" folder we pasted into the OEBPS folder earlier.

Adding the Bird Image

The bird image is a PNG file while the background image is a JPEG file. This is because the bird image requires transparency outside of its edges. When an image doesn't need transparency to see the image below, as is the case with the background image, you’ll want to stick with JPEG file types with a high quality level.

Add the following code inside the body tag of “page01.xhtml”, “page02.xhtml”, and “page03.xhtml” to place the bird image on each page.

<div class="bird" id="bird">
            <img src="images/bird.png" alt="a round, red bird" />
</div>

Many elements added to a book will have an associated CSS class and/or id. If you are unfamiliar with CSS, these identifiers will allow us to adjust the properties of the elements, such as positioning, size, layering, and font specifications for text. A class attribute is used to create groups of like HTML elements, whereas an id is used to specify one specific kind of element. In this demo, we really just need the ID attribute, but in your own projects you may want to group like objects together with a class. We will add the attributes to the external CSS file for these in a bit.

Adding Text

Now that we have a couple of images, let’s add some text to our iBook. Navigate back to “page01.xhtml” and type the following code inside the body tag.

<div id="page01Text">
            My iBook Demo Project
</div>

All the text in an iBook should be coded into the project versus placed in an image. This allows a user to search for or look up text at any time, as well as provides full accessibility for iOS device users with Voice Over activated.

Click on "page02.xhtml" and add the following code inside the body tag:

        <div id="page02Text">
            Little bird sees a blue sky. 
        </div>

Click on "page03.xhtml" and add the following code inside the body tag:

    <div id="page03Text">
        Little bird sees green grass. 
    </div>

Step 2: Creating the CSS

Let's add some CSS to place the elements on the page. Open the "cssstyles.css" file and add the following code to place the background image:

.backgroundImage 
{
    position: absolute;
    margin: 0;
    z-index: 0;
    top: 0px;
    left: 0px;
}

.backgroundImage img
{
    width: 800px;
    height: 600px;
    top: 0px;
    left: 0px;
}

The first CSS rule positions the container in the top, left corner with no margin. The second rule provides the height and width specifications for the image itself, as well as placing the image in the top, left corner of the container.

Positioning the Bird

Just below the .backgroundImage img rule, add the following code to position the bird on each page:

#bird {
    position: absolute;
    z-index: 10;
    left: 200px;
    top: 250px;
}

#bird img{
    width: 200px;
    height: 123px;
}

Once again, the image size is set along with the location on the page and placement on top of the background image.

Positioning and Formatting the Text

CSS rules for text usually involve additional properties, such as font size and family. Add the following code just below the previous code:

#page01Text {
    position: absolute;
    z-index: 20;
    top: 74px;
    left: 90px;
    width: 600px;
    font-family: serif;
    font-size: 28pt;
    letter-spacing: 2px;
    font-weight: bold;
    -webkit-text-fill-color: #000000;
    text-shadow: 1.5px 1.5px #ffffff;
}

#page02Text {
    position: absolute;
    z-index: 20;
    top: 74px;
    left: 80px;
    width: 600px;
    font-family: serif;
    font-size: 28pt;
    letter-spacing: 2px;
    font-weight: bold;
    -webkit-text-fill-color: #000000;
    text-shadow: 1.5px 1.5px #ffffff;
}

#page03Text {
    position: absolute;
    z-index: 20;
    top: 74px;
    left: 65px;
    width: 600px;
    font-family: serif;
    font-size: 28pt;
    letter-spacing: 2px;
    font-weight: bold;
    -webkit-text-fill-color: #000000;
    text-shadow: 1.5px 1.5px #ffffff;
}

Because iBooks fully supports the WebKit web browser engine, text can be formatted in various ways. WebKit has a variety of properties that can be changed to create the look you want for your text.

Step 3: Formatting the EPUB Specific Files

com.apple.ibooks.display-options.xml

Now that the content has been added, let's finish setting up the EPUB files. Open the "com.apple.ibooks.display-options.xml" file and add the following code inside the display_options tag.

<platform name="*">
        <option name="fixed-layout">true</option>
        <option name="orientation-lock">landscape-only</option>
        <option name="open-to-spread">false</option>
</platform>

There is a lot going on here; let’s take a look at the different options. The first option tells iBooks that the book is a Fixed Layout iBook, not a Flowing or Multi-Touch book. The second option locks the book in landscape orientation. This means if the user rotates the device, the book stays locked in the landscape orientation. If you want your book to lay out in portrait orientation, use the value portrait-only. If you want it to rotate freely, leave this option out completely. The last option determines if the book opens as a two-page spread or just a single page. By specifying a value of false, the book will open to a single page. Replace the value with true to have the book open in a two-page spread.

OPF File: Metadata

The first part of the .opf file is the book's metadata. Open the "content.opf" file and add the following code inside the metadata tag.

    <dc:title>iBooks Demo</dc:title>
    <dc:creator>Aaron Crabtree</dc:creator>
    <dc:identifier id="bookid">12345</dc:identifier>
    <dc:language>en-US</dc:language>
    <meta name="cover" content="cover-image" />

This is just a small sampling of the many available meta tags. Three tags are required for EPUBs: title, identifier, and language. The tags are fairly straightforward. Title is the title of the book, creator is the author, identifier is used to identify the book and is almost always an ISBN. Language is the language in which the book is written, and cover identifies the image to use as the cover of the book.

OPF File: Manifest

In order for the EPUB to work properly, all the files that are included in the project must be listed in the manifest. In the "content.opf" file add the following code inside the manifest tag:

    <item id="ncx" href="toc.ncx" media-type="application/x-dtbncx+xml" />

    <item id="cover" href="page01.xhtml" media-type="application/xhtml+xml" />
    <item id="page02" href="page02.xhtml" media-type="application/xhtml+xml" />
    <item id="page03" href="page03.xhtml" media-type="application/xhtml+xml" />
    
    <item id="cover-image" href="images/demo01.jpg" media-type="image/jpeg" />
    
    <item id="bird-image" href="images/bird.png" media-type="image/png" />
    
    <item id="css" href="cssstyles.css" media-type="text/css" />

There are a few attributes to each item in the manifest. The first attribute is id, a value of your choosing. The second attribute is href, which specifies the file associated with the id and its location. The last attribute is media-type, a type and subtype that indicate the file type of the item. The first item in the list is the toc.ncx file we created in part two of the series. The second section contains the XHTML files. The third section contains the background image, the JPEG. The fourth section is the bird image, a PNG, and the last item references the CSS file.

OPF File: Spine

The spine determines the order of the pages in the book. Add the following code inside the spine tag.

    <itemref idref="cover" />
    <itemref idref="page02" />
    <itemref idref="page03" />

Notice the item's id from the manifest section is used to reference the page, not the name of the file itself.

OPF File: Guide

The guide is an optional element used to identify important reference-related sections of the book, such as the glossary, index, or table of contents. Add the following code inside the guide tags.

<reference href="page01.xhtml" type="cover" title="Cover" />

Since we don’t have any reference sections in our book, we’ll only include a reference to "page01.xhtml" as the cover of the book.

NCX File: Head

The .ncx file, or table of contents file, is used to generate bookmarks for the important sections of your book. Open the .ncx file and add the following code inside the

    <meta name="dtb:uid" content="12345"/>
    <meta name="dtb:depth" content="1"/>
    <meta name="dtb:totalPageCount" content="0"/>
    <meta name="dtb:maxPageNumber" content="0"/>

The most important part of this section is that the value of the first line is identical to the value of the book identifier in the metadata section of the .opf file.

NCX File: docTitle

Move down to the docTitle tag and add the following code.

<text>iBook Demo</text>

This value should match the value of the title tag in the .opf metadata tag.

NCX File: navMap

The last section of the .ncx file contains the starting page for the book. Since we are creating a simple book, we don’t need a complex page of bookmarks to various chapters and sections. Add the following code inside the navMap tag.

<navPoint id="navpoint-1" playOrder="1">
      <navLabel>
        <text>Book Cover</text>
      </navLabel>
      <content src="page01.xhtml"/>
</navPoint>

The text tag indicates the text to be displayed in the table of contents for your book, and the content src="" tag is its link location.

Step 4: Building the EPUB

Let's build and test the iBook on a device. Begin by launching Terminal. Make sure that you are in the same directory as your main EPUB folder. Type the following commands into Terminal:
zip -0Xq iBooksDemo.epub mimetype.

This command instructs Terminal to create a new zip file with the name "iBooksDemo.epub", without compressing the files, and leaving the mimetype file out of the zip archive. Because iBooks needs to access the mimetype file in order to open the EPUB, the file must remain outside of the zip archive.

Next, we'll add the META-INF and OEBPS folders to the zip file by typing the following into Terminal:
zip -0Xr9Dq iBooksDemo.epub *.

This set of commands tells Terminal to add the two folders and their contents to the zip archive. It is important to make sure you name your EPUB the same name in each line. Open your book's main folder and you will see the newly created .epub file. This file contains all the elements of your book in one handy file.

Step 5: Testing the iBook on a Device

If you have not downloaded the iBooks application, go to the App Store on your device and search for and download "iBooks". Launch iTunes and connect a device to your computer. Drag and drop the .epub file into the Library in iTunes. Click on the connected device in iTunes and click "Sync" at the bottom of the page. Once the device syncs, launch iBooks and tap on your book to launch and test the iBook.

Conclusion

Congratulations! You just made a Fixed Layout iBook! As you develop your skills, you will find that iBooks provides an incredible opportunity to create fully interactive, fun, and engaging books for readers of all ages. Books are no longer just text and pictures. Thanks to iBooks, they are multimedia experiences involving animations, video, audio, interactivity, and more!