How To Create Fixed-Layout iBooks, Part 5
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 CSS FILE
The first of these is the css formatting data for the content on the page. In the sample template you'll actually find two style sheets, one named styles and the other page02. If each page in your fixed-layout ebook contains similar formatting for the text you can just create one css file and reuse it for every page. But chances are if you're doing a graphic novel or illustrated book with complex text layouts you'll need to make a different one for every page, as I have done in mine.
However, there will still be certain elements that will apply to every page, such as the page size and full page art positioning. If you open up the styles.css file here's what you'll find:
This is about a basic a css file as you'll ever see, and more often there will be a whole lot of other stuff in here, providing overall defaults for text styling and placement. 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, as well as embedded font information and the like. But I decided to save that discussion for the text section instead. For now we'll just set some general defaults for the document.
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 specifically defines the overall "container" that will hold your content.
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 and 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 and spacing and whatnot. You can zero all that here, 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 reader.
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 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 in addition), but since there will generally be only one background image, but a lot of text, it's easier just to change the img default to -1. You can then add other layers above this by stacking them in the css for each page.
Again, you need to enter your page dimensions here if you want to create full-bleed backgrounds, and zero out your margin and padding, as well as top and left positioning. You'll also see a "position" element set to "absolute" here, which allows us to place our images exactly using pixel references rather than placement relative to other elements. 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.
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.
THE .NCX FILE
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 and allows you to jump to another section of the book.
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:
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 daisy.org 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.
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.
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.
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:
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>.
[By the way, you might notice an error in the template .ncx here where I used copy and paste to create the second navPoint entry rather than typing it out again, but neglected to delete the #cover anchor, which I had only added as an example, since you would never actually use one there]
And that completes your toc.ncx file. At least until you create more content, that is.
NEXT UP: The Content.opf File
THE CSS FILE
The first of these is the css formatting data for the content on the page. In the sample template you'll actually find two style sheets, one named styles and the other page02. If each page in your fixed-layout ebook contains similar formatting for the text you can just create one css file and reuse it for every page. But chances are if you're doing a graphic novel or illustrated book with complex text layouts you'll need to make a different one for every page, as I have done in mine.
However, there will still be certain elements that will apply to every page, such as the page size and full page art positioning. If you open up the styles.css file here's what you'll find:
body {
width: 738px;
height: 985px;
margin: 0;
padding:0;
}
img {
z-index: -1;
width: 738px;
height: 985px;
position: absolute;
padding: 0;
margin: 0;
top: 0;
left: 0;
}
This is about a basic a css file as you'll ever see, and more often there will be a whole lot of other stuff in here, providing overall defaults for text styling and placement. 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, as well as embedded font information and the like. But I decided to save that discussion for the text section instead. For now we'll just set some general defaults for the document.
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 specifically defines the overall "container" that will hold your content.
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 and 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 and spacing and whatnot. You can zero all that here, 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 reader.
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 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 in addition), but since there will generally be only one background image, but a lot of text, it's easier just to change the img default to -1. You can then add other layers above this by stacking them in the css for each page.
Again, you need to enter your page dimensions here if you want to create full-bleed backgrounds, and zero out your margin and padding, as well as top and left positioning. You'll also see a "position" element set to "absolute" here, which allows us to place our images exactly using pixel references rather than placement relative to other elements. 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.
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.
THE .NCX FILE
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 and allows you to jump to another section of the book.
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" "http://www.daisy.org/z3986/2005/ncx-2...
<ncx xmlns="http://www.daisy.org/z3986/2005/ncx/" 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 daisy.org 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:
<navMap>
<navPoint id="navPoint-1" playOrder="1">
<navLabel><text>Cover</text></navLabel>
<content src="http://feedproxy.google.com/~r/TheAdv...
</navPoint>
<navPoint id="navPoint-2" playOrder="2">
<navLabel><text>Chapter 1</text></navLabel>
<content src="page02.xhtml"/>
</navPoint>
</navMap>
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>.
[By the way, you might notice an error in the template .ncx here where I used copy and paste to create the second navPoint entry rather than typing it out again, but neglected to delete the #cover anchor, which I had only added as an example, since you would never actually use one there]
And that completes your toc.ncx file. At least until you create more content, that is.
NEXT UP: The Content.opf File
No comments have been added yet.
