View Cart

How To Create Fixed-Layout iBooks, Part 5

Styling & Navigation

Now that you have a page created for your iBook file you'll need to tell the reading application what to do with it. This requires three separate files to accomplish, but you'll only need to make them once, and then add in additional information for each new page that you create.


The first of these is the css formatting data for the content on the page. In the sample template you'll actually find four style sheets, one named global-styles  for styling that applies to every page, plus a separate one of each page in the publication for data that applies specifically to those pages, with the exception of page 2, which contains only an image, just like the cover, and so does not require its own style sheet. If each page in your fixed-layout ebook contains identical formatting for each page (such as just one full page image, or the same text styling and placement on every page) you can just create one css file and reuse it for every page.

For example, you might only have text either at the top or near the bottom of each page, with a 3/4 page image in the opposite position, as seen in many children's books, in which case one style sheet with the four positioning options would suffice. But chances are if you're doing a graphic novel or children's illustrated book your page layouts will be much more complex than this and you'll want to make a different style sheet for each page, if only to keep things organized and make it easier to know what css is being applied to what page.

More importantly, pages tend to load faster when there is less code for the reading system to sort through. The more complex your page layouts, the more lag time that may occur if your code is poorly organized and bloated, and all thrown into one huge file. In this instance there is so little code I could have put it all in one file, but in the interest of showing how it should be done for larger files it has been split into individual files.

That said, there will almost always be certain elements that apply to every page, such as the page size and full page art positioning, so you will usually want to have a universal CSS file for that data. If you open up the global-styles.css file here's what you'll find:

body {
width: 738px;
height: 985px;
margin: 0;
img {
z-index: -1;
width: 738px;
height: 985px;
position: absolute;
padding: 0;
margin: 0;
top: 0;
left: 0;

This is about as basic a css file as you will ever see, and more often there will be a whole lot of other stuff in here, providing overall defaults for text styling and placement throughout the ebook, link styles, or interactive functionality. For example, you will usually include your chapter header styles and a base paragraph style for the main body text, plus any special formatting you might use in your book for quotes or indents, as well as embedded font information and the like. We'll look at some of these more closely in due course, but for now let's just set some general defaults for the document as a whole.

1. The "body" element

The "body" element defines the page size once again, so these need to match the pixel dimensions you enter in the page content html. This is a bit redundant, but required. The body element defines the overall "container" that will hold your content, within which all other content is held. Thus, any styles applied to the <body> tag will apply to the entire page as a whole, though not necessarily to the content contained within it.

It's also a good idea to set the default margins and padding to "0" just to give you a clean slate to work on. I'll talk about this more when we get to adding text, but in order to fill a page with an image edge to edge you need to remove any margins that might be set by the reading system. Since we're working with one specific program and a limited range of platforms here this isn't really an issue. But in a web based reader, for example, the browser will often add some default settings you don't want, such as base font size or spacing and whatnot.

It's also not a certainty that Apple won't at some point alter the way iBooks renders content, so it's best to hedge your bets. You can zero all that here, and very often you will see what is called a "CSS Reset" included that sets nearly everything to neutral values (just do a Google search and you'll find one you can use), but the only one you really need to worry about right now is margin spacing. This way you can add your own margins later when we get to text without having to account for any additional defaults imposed upon your content by the reading system.

2. The "img" element

One of the fundamental aspects of a fixed-layout ebook is the ability to precisely place images, and to overlay them with text, or even other artwork. Additionally, fixed-layout allows you to completely fill the page with art, with no white space surrounding it at all. This is called "full-bleed" in the print industry, due to the fact that the image is printed slightly larger than the final size, with some of it bleeding past the borders in order to ensure it reaches to the edge when cropped. Here, of course, your image need only be as large as the actual page dimensions, and will be exactly the size you make it.

The "z-index" is how you place your page elements in the vertical stack, with "0" being the default. Thus, in order to place your artwork behind the text, you simply drop it down one level by assigning a negative value to the img element. You could, of course, add a positive number to the text layer instead (or even in addition to it); however, since there will generally be only one background image, but often a lot of text, it's easier just to change the overall img default to -1 and leave the text layers at the default setting of 0, without worrying about forgetting to move some of it up. You can then add other layers above these by adding them to the stack in the css for the relevant page and element.

Again, you need to enter your page dimensions here if you want to create full-bleed backgrounds so that the image is the same size as the page, and zero out your margin and padding so there is no surrounding space, as well as setting the top and left positioning to zero, which places it against the edges. You'll also see a "position" element set to "absolute" here, which allows us to place our images exactly using "zero-point" pixel referents rather than placement relative to other elements, which can get confusing very quickly. All your content can now be precisely positioned simply by giving the number of pixels vertically from the top or the bottom, and the number of pixels from either the left or right. Generally you'll use top and left, but sometimes it's easier to work out placement from the nearest edge. You can (and likely will) also use relative positioning for many elements on your page, but for fixed layouts you will more often than not want to use absolute positioning for your layered elements.

In order to completely fill the page with art, you simply create an image with the same dimensions as the page (such as our cover art) and it will now be placed by default in the upper left corner at "0,0" and fill up the entire page.

You now have a completed cover page with both content and css. But we still have to tell the system how to find these files and when to display them, and this requires two additional pieces to our puzzle.


NOTE: The NCX file is no longer included in the template, as it has been replaced by the toc.xhtml navigation document. Again, in the interest of backwards compatibility this file can still be included (and in ePub2 based files must be), so the information is still included here. However, it may no longer function correctly due to changes in the way Apple handles file uploads. Proceed at your own risk! For details on the newer EPUB3 nav doc see Part 8 of this tutorial.

The toc.ncx file is a navigation control xml document which, as the name suggests, tells the reading system how to navigate the file. In this respect it functions as the table of contents for the file, and this is where the elements that make up the functional table of contents come from, that is, the one that shows up in the iBooks drop-down box in the upper menu bar

You can also include an actual table of contents as one of your html pages, complete with internal links, but these are generally less useful since you have to navigate to it first before going where you really want to. In addition, illustrated works such as graphic novels and children's books don't commonly employ tables of contents in the standard sense, although heavily formatted fixed-layout ebooks such as textbooks or travel guides will certainly want them.

But either way you will want to (and are in fact required to) include at least a few basic waypoints in the ncx, in particularly the cover and first page of actual story content. It's a good idea to at least put in chapter markers as well for every major section of the book.

If you open up the toc.ncx in the sample template you'll see the standard xml declaration/encoding data that we'll discussed before, followed by a new set of references:

<!DOCTYPE ncx PUBLIC "-//NISO//DTD ncx 2005-1//EN" "">
<ncx xmlns="" version="2005-1" xml:lang="en">

The ePub format is actually an amalgamation of several earlier specifications that have been modified and developed through the years, with the .ncx being an artifact from the original accessibility functions inserted by the Daisy consortium to assist users with sensory or mobility impairments. Thus, the ncx doctype and namespace references point to the site for their functionality. You don't need to know what any of this means, but just be aware of it and make sure to add it in.

1. The <head> element

The head element contains the document type definition (DTD), a name that is wholly unsuited to its function, as nowhere do you actually define the document type within it, or even within this file. There are four lines of meta data that do need to be included here, however, even though only the first two actually apply to ebooks at all.

<meta name="dtb:uid" content="0"/>

Every ebook requires a "unique identifier" (uid) to set it apart as a separate digital document, not just from all the other ebooks out there, but as a specific version of this document. You will need to replace the "0" content element here with your own identifier. This can be virtually anything, really, from a website url devoted to this book, to a version number string that includes enough data code (title, author, date, etc) to make it unique to any other ebook.

You can also generate a uid code using a web-based resource such as UUIDGEN, which will create a random string based on such factors as your IP address and the date and time. You will also enter this code in the content.opf we will create next, and the two must match.

<meta name="dtb:depth" content="1"/>

This is the only element that actually applies to the table of contents, and simply defines the number of levels in the toc hierarchy. For works of fiction this will almost always be "1" for simple chapter sections, but for non-fiction works there can be several levels of subsections within each chapter. Add one additional number for each subheading you'll be using.

<meta name="dtb:totalPageCount" content="0"/>
<meta name="dtb:maxPageNumber" content="0"/>

These last two are left over from physical print book metadata and are not relevant in ebooks generally, since the number of pages in reflowable ebooks varies greatly depending on the display screen and chosen font size. However, since fixed-layout ebooks do have a specific number of pages, you could enter that information here if you so choose. I'm not sure it will be used anywhere, but as this is metadata it might conceivably be included one day in the iBooks retail page listings for fixed-layout ebooks, so that potential purchasers can know how long the ebook is. This seems quite useful information to me, and since the metadata can be entered one would like to think it might be used.

The "totalPageCount" is the overall number of pages in the file, including front matter and appendices, whereas "maxPageNumber" would be the actual count of numbered pages, minus ancillary material.

2. The <docTitle> element

Here is one of the two places you'll enter the title of your magnum opus. The other is in the content.opf, and the two must match. Enter it as you want it to be listed.

3. The <navMap> element

The "navigation map" section is where you insert the entries in your table of contents, entering "navigation points" for each item you want to show up in the iBooks drop-down menu. Here we have just two, corresponding to the two main elements in our sample template, the cover and first page:


      <navPoint id="navPoint-1" playOrder="1">
            <content src="cover.xhtml#cover"/>

      <navPoint id="navPoint-2" playOrder="2">
            <navLabel><text>Chapter 1</text></navLabel>
            <content src="page02.xhtml"/>


Each navPoint has an id which can be anything, but a simple numbered order is most practical. The playOrder element is what tells the device how to list the entries, although entering them here in any other order than the way you intend them to show up would be simply idiotic, not to mention confusing.

Within the <navLabel><text> element enter the text you want to appear in the table of contents list, exactly as you want it to show up (i.e. capitalized and spelled correctly for those of you who communicate by text these days).

Finally, the content src references the content file you create for that page. You can wait until all you content is created to make the .ncx file, or you can add them one by one, which you might want to do in order to test the file as you progress. It's also often easier to do it bit by bit to keep from getting thoroughly confused.

To create subheadings within the table of contents (as specified in the metadata depth element), you would simply add them below their parent entry, but before the parent entry's closing tag. So, for example, if you want a second level element beneath the Chapter 1 entry, start a new navPoint entry after the <content src="page02.xhtml"/> line, but before the following </navMap> closing tag. You can create as many nested levels as you like this way, so long as you specify the number of levels in the metadata section.

Lastly, you can create table of content entries for mid-page subheadings using fragment references which point to anchors in your document, by adding references after the name of the content source file, such as: ..."page02.xhtml#section2"/>. Of course, you'll need to be sure to add the proper anchor at the  specified location in the document, as in <a href="section2>Section Header Title</a>.

And that completes your toc.ncx file. At least until you create more content, that is.

Join Me
On Google+

View My Vids
On YouTube

envelopeSubscribe To
My Newsletter