View Cart

Kindle Fixed Layout Tutorial, Part 9

Adding Content Pages

Having gotten the support files out of the way, we can now turn our attention to the actual pages of the ebook! From this point forward in the published manual we examine each and every page and line of code in both the Basic and Advanced Templates, beginning with the simple image-only content and progressing in stages through increasingly complex layouts, complete with overlays and zoom functions. But you can start by adding simple pages with just one image in each file, which is very easy to do. The simplest way, of course, is just to use a template and replace its content with your own.

Before you begin to add content to your ebook, however, a short prologue is in order for those new to digital content creation, regarding the files required to create the page layouts themselves. Each page in a fixed layout ebook is contained within a separate HTML file, formatted to the size of the default display. We will see how this is done in just a moment.

The HTML file contains all of the text for that page, and/or links that tell the reading system which images to insert into that page (if any). Each of these content elements are enclosed within a variety of “containers” that can be sized and styled and placed into position using class and/or id tags, such as:

<div id=“container1” class=“fullpage”>

[ Some content goes here ]

</div>

The div is a “division” of the content that functions as a container for that section of content, and can best be thought of as a text box, although it can contain images as well, and even other divs within it. In this way you can visualize each page as a series of containers within containers, each with a definable height and width, and which can be placed precisely on the page. The page itself consists of an all-encompassing div that contains all of the other elements on that page.

In How To Make Kindle Comics & Children's Books, nearly two-thirds of the book is spent looking at the various content elements in a Kindle fixed layout ebook and how to place them on the page. However, before getting to that content, a few things should be pointed out here with regard to how HTML code works for those who have never used it before, since I must assume there will be some of these among the readers of this tutorial. Many lengthy textbooks have been written on the subject, but a few basic facts are all that are required to begin.

HTML & CSS

Firstly, each of the attribute tags that surround the content elements in an HTML file are references to an entry in the related CSS file that determines how that content should be styled, which includes all aspects of its visual presentation. CSS stands for Cascading Style Sheet, and is a secondary document, or set of documents, that contains all the styling data for these tags. The relevant CSS is referenced from each HTML file, so that the reading system knows where to look for this information.

If you look inside any of the HTML files contained in either of the templates, or in any ebook file, you will see there are two main sections below the namespace declaration: a <head> section and a <body> section. In the <head> section you will find a line containing the <title> (where you simply enter the title of your publication), a <meta> entry which gives the encoding information for the content, telling the reading system what it’s looking at (you don’t need to change anything here), and finally a <link> to the CSS file, such as:

<link rel=“stylesheet” href=“../css/stylesheet.css” type=“text/css” />

The three attributes may be in any order, but each must be present. The only one you need to change, however, is the href defining the link, or location, of the css file. In this case the ../ portion tells the system to begin looking for the file at the root level, since this particular file is in a neighboring branch folder labeled css.

Class vs. ID

A second general point to make concerns the difference between the class and id tags. These are often confused, and even used interchangeably, but in proper usage the id tag is used to “identify” one specific instance of an element, such as a particular div on a page, and consequently are generally used in fixed layouts to define the size and position of a given element, rather than its visual style (although they can contain some, such as when there is no need to create a whole new class for just that one instance). Conversely, class tags can be applied to any number of elements, and thus contain general styling data, such as color and weight for text, or border style and background-color for containers.

Inside the CSS file you will find something called a CSS Reset. This is a long string of common code elements set to a default neutral value. This is done so as to override any inherent browser settings that might be added if the file is opened in a third-party reader, since many browsers include their own default values. This sets everything to zero so that nothing goes awry. There are many CSS Resets that can be found online, but in Amazon’s samples they include the one from Yahoo! that is found in both of the templates.

Finally, with regard to positioning in fixed layouts, you must use absolute positioning for all divs in order to affix their position, but the content within those containers can have relative positioning, as, for example, to center align a block of text, which can only be done using relative positioning (since its position is inherently relative to the borders on either side). You can, of course, also use absolute positioning for content within a div. We will see a variety of ways to do this very soon, but be aware that this is very often an attribute that trips up even seasoned formatting veterans, since it can throw off everything with wildly unexpected results! If things are just not showing up where they should be, go back and check your positioning values. Chances are you'll find one that should be the other.

Creating Content

In standard reflowable ebooks the size and placing of elements can change based on the display size and orientation, the reader’s preferred font size and style, and the chosen line spacing and margins (among other things). Conversely, in Kindle fixed layout ebooks everything is fixed in place by the content creator, and consequently the size and position of every element is absolute (i.e. it cannot be altered by the reader). This is set in the CSS using the position: absolute attribute, as we will see shortly.

The primary distinction, therefore, between a standard reflowable ebook and its fixed layout counterpart is that, while the former is text-heavy and changeable, the latter relies primarily on graphics that are fixed in place, with precisely positioned text laid over or around them. In comics and children’s books, for example, the artwork is at least as important as the text, if not more so, at least in terms of layout. Image-heavy content such as graphic novels and children’s picture books make up the bulk of all fixed layout ebooks in production currently, although many art books, textbooks, and cookbooks use fixed layout as well.

While graphics are a key reason for using a fixed layout, complex text design can require fixed layouts as well, such as those that might be found in magazines, travel guides, or technical manuals, which include features such as columns that wrap around inlaid sidebars, images with captions that span columns or page spreads, or complex diagrams and charts.

However, much of this can now be done using basic HTML and CSS for positioning. Many stylistic elements can be produced using only simple code as well. Furthermore, images can be included in reflowable ebooks, either in between blocks of text or in-line (such as drop caps, for example). You can even add floating sidebars with outer word wrap using nothing but basic code. However, if you want edge-to-edge (“full bleed”) images, live text overlays, or magnification regions, fixed layout is for you.

There are three essential components to creating pages in a Kindle fixed layout ebook:

  1. One HTML file for each page, containing the text and links to any media content
  2. One or more CSS files containing layout and styling data for the content elements (this can be contained within the same HTML file as the page it styles, although it is generally a separate file)
  3. Any number of media files, which can include both images and embedded fonts, as well as audio and video (although the Kindle format does not yet support these last two in fixed layouts, so we will not discuss them here)

There are a great many variations for each of these, and in order to place these elements accurately, you must understand the nature of the medium in which you will be working and how to correctly prepare your content.


NOTE: A lengthy discussion follows at this point in the published manual, looking at three important topics:

  • Device Display Resolution
  • Image Resolution & Aspect Ratio
  • Image Format & File Size

As these issues are fairly advanced and technical, they are not dealt with here. However, you will find a chart of current Device Display Resolution in the resources section, which will be kept updated with the most current specs so that you can better determine how to format your content.

Due to the fact that ebooks are still a relatively new phenomenon, and technology is improving at a rapid rate, this is an ongoing matter of concern and speculation, and one for which all ebook creators should stay abreast.


A Simple Image-Only Page

Fixed layout pages containing only images make up the bulk of comics and graphic novels on the market today, due to their simplicity and universal application. An ebook file containing nothing but images is both easy to produce and can be readily adapted to many ebook formats, since the basic page layout requires very little code, and none that is specific to the Kindle.

You may, of course, create pages consisting of more than one image (or sections of a single image), aligned side-by-side, with each fixed into place using absolute positioning to create a single page layout. This is done, for example, with the image on the right in the Simple Template, although you can, of course, simply add it as a single image as well. You might do this, for example, to insert higher quality images than is allowed for individual images in standard resolution Kindle files. As display resolution continues to increase, image quality becomes ever more important.

<div id> vs. <img src>

There are two ways to embed images into an HTML page in Kindle fixed layout ebooks, and specific instances when one might be preferred over the other. We will first look at the CSS method recommended by Amazon, and then the standard HTML method as used in basic web pages, along with the strengths and weaknesses of each.

In essence, the primary difference between these two image insertion methods is that one is "locked down" and cannot be interacted with (CSS method), while the other can be magnified and scrolled to any size or position when double-tapped (HTML method). Let’s look first at the CSS method.

NOTE: If you are not using one of the templates made available on this site, you will need to create your own internal files from scratch, which can be a complex process, since each file requires specific header coding to define its characteristics. The easiest way to accomplish this is to copy it from an existing file, although all of the instructions and necessary code are provided and explained in the guidebook How To Make Kindle Comics & Children's Books.


The CSS Method

To add a full bleed image to a page, enter the following code within the <body> section of the HTML file for that page:

<div class="fullscreen">
<div id="css-image" class="image"></div>
</div>

What we've done is create one div container that contains a second div embedded in it. Both of these containers have a class attribute, which reference entries in the CSS file that is linked to in the <head> section of the HTML page, as discussed above. In the Simple Template there is just one stylesheet, while the Advanced Template has eleven, one for the first eight pages and a separate one for each of the remaining pages, which are more complex. For a basic project all you'll need is one, and that can be very simple. Before turning to the CSS entries, however, let us examine the HTML code for this page more closely.

First you should notice that the div container consists of an opening and closing tag:

<div></div>

This creates a container, into which you can put your content. The class attribute appended to the opening <div> tag adds size and position formatting to the container via CSS, which we will get to in a minute.

In this case the only content in the primary div container is a single image, which is contained within a second div, and referenced by an id link to its CSS entry:

<div id="css-image" class="image"></div>

Finally, note that there is also a second class attribute appended to the image div container to provide its own styling data in the CSS, which we will now look at closer to see how these elements are styled.

When you open up the stylesheet.css file from the Simple Template in your text editor you will first see the CSS Reset taking up the first 9 lines. The first 7 lines of this is comment text which, unlike HTML files, uses forward slashes and asterisks to mark out comments:

/* Any text entered here is ignored */

Following this we have two div entries given, the first of which defines the “fullscreen” class used in our HTML page for the main container.

div.fullscreen {
height: 1280px;
width: 800px;
position: relative;
}

In the CSS file, any entry preceded by a dot (.) is a class that defines or modifies the entity it is appended to, whereas those preceded by a number sign, or “hash” tag (#), signify an id entry which applies to just one referenced entity, as discussed earlier. Several of each are found in this simple CSS file.

After the entity.class entry any defined attributes you want applied to that class are listed between curly brackets. Here, of course, we want to define this main div container as “fullscreen” (as its name suggests) by giving it a height and width value that is equal to the aspect ratio and resolution you have chosen as your default, as discussed at length above. As mentioned previously, this is not necessarily the size of your images, nor of the actual device on which the ebook will be viewed, but a standard on which to base all subsequent values. This value must be equal to the “original-resolution” entered in the OPF Metadata section.

Here I have chosen the HD7” resolution and aspect ratio as my default (1280x800), although the images included are formatted to the larger HD8.9” device (1920x1200) so that they can be magnified and will scale up to the larger display without blurring.

The position: relative attribute is used here since the overall div container is relative to the device display. Note, however, that a second div entry is used to apply absolute positioning to any additional divs nested within the first one, such as the one containing our image:

div.fullscreen div {
position: absolute;
}

Having created and positioned our main container, and added absolute positioning to the second one, we now need to format the content we put into it, which uses both an id link and class tag for its styling:

<div id="css-image" class="image"></div>

In the CSS file there are two entries in the “CSS Method” section that define the values of these tags. The first of these, beginning with the hash tag, is the id reference that inserts our image:

#css-image {
background-image: url(“../images/image-div.jpg”);
}

In this method the image is referenced by the id as a CSS style to fill the tagged div element using the background-image property, the value of which is an url that links to the location of the image file you want to embed in this container.

With the image inserted into the div container, we then use a class to define its “style”:

div.image {
position: absolute;
background-repeat: no-repeat;
background-size: 100% auto;
height: 1280px;
width: 800px;
top: 0px;
left: 0px;
margin: 0px;
z-index: -1;
}

In this instance all of the formatting information is included in the “image” class, including its size and position, since - were I using this for more than just this single page - I would want all of the full page images to retain the same formatting, while each id would reference a different image. In this way we can reuse the same class values given here.

Beginning the list we see the image is again using absolute positioning to place it inside the div container. This is followed by two attributes which ensure the image fills the div. The “no-repeat” entry is not strictly necessary here, since the background-size is set to fill 100% of the container. But there may, of course, be cases where you do not want the image to fill the entire page, but don’t want it to repeat as a tiled image either, so I include the code here for reference.

Note that the height and width values given here are equal to the div which contains it, thereby filling up the container with the image. This will therefore scale larger (or smaller) images to fit the page size specified, rather than flowing beyond the edges, allowing you to insert higher resolution art for larger displays and magnification functions. And since the div and image values are equal, the whole page scales relative to the display size, so that the image will always fill the screen, regardless of the actual device resolution. This, however, is also the reason why you cannot scale the background image separately from its div container by double-tapping on it when you use this method (we will look at reasons why you may or may not want to do this at the end of this section).

Following this we enter our positioning values, which in this case is the upper-left corner, with “0” pixel values to ensure there is no gap between the image and the edges of the page.

The margin value given is again unnecessary in most instances, since the CSS Reset has set it to zero, but you will often find redundancy is your best friend. It takes little effort and small room in the code, but ensures that diverse reading systems treat your content the same. In this case we want our image to completely fill the screen with edge-to-edge art, rather than including the white margin found in standard reflowable ebooks, so we set the margin to zero.

Bear in mind that in some cases this will not prevent margins from occurring, since the conversion process also creates a mobi7 version of the file that strips out some of this code to create a file that can be read on older systems, the results of which you will see if you add a fixed layout file to Calibre or try to load it onto an iOS device: in both instances the images will appear with large white margins surrounding them. In most cases, however, this will not be an issue, since the mobi7 file will never be delivered to the user, and Amazon has checks in place to prevent KF8 fixed layout files from being downloaded onto systems that cannot handle it correctly (although other retailers, such as Smashwords, do not).

Finally, the z-index value gives the entity’s position in the vertical stack of layers, with zero being the default level. Thus, using a value of -1 we have pushed our image down one layer beneath anything that appears on the default layer. Of course, in this example there are no other layers, so this is not actually necessary here. But it is a good practice, just in case you decide to add text layers later (text is generally placed on the "zero" layer, with background content placed below and overlays above).


The HTML Method

Now let’s look at the second method of adding images to a fixed layout page (which you will find as Page 6 of either Template).

When you double-tap on a background image that has been inserted using this method, it will take you into “Zoom Mode,” in which the image becomes scaleable, and any layered elements disappear. An X appears in the upper right corner upon double-tapping to signify that you have entered “zoom” mode, which you can exit by tapping on the X. On newer devices the X is contained within a white square, while older devices sport a circle with the X inside, so if you see a circle rather than a square (as shown in the image) don’t be surprised.

Opening this file you will find that only a single line of code has changed (discounting the commentary text), which is the image link within the div:

<div class="fullscreen">
<img src="../images/image-src.jpg" alt="some text" class="fullpage" />
</div>

In this example, there is only one div, which itself contains the image. Both the div and the img entities have a class attribute, each of which provide the relevant formatting via those entries in the CSS file. Notice, however, that there is no id attribute, since the main container fills the whole screen, and the image fills it.

In this case the image is entered directly into the primary div as a referenced link, rather than a CSS reference:

<img src="../images/image-src.jpg" ...

The src= value directly references the location of the image file you want to add to this page. And as mentioned earlier all internal links are relative to the file in which the link is entered, so in this case we must back up to the root directory (../) and travel down into the images folder to reach or desired file.

Along with the source link you are technically required to include an alt attribute for all images, so that if for some reason the image cannot be displayed it will insert this text instead. You can include a description of the image, or simply add a message that says “Image cannot be displayed on this device” or something along those lines. I have even seen the quotes left empty. But the alt attribute itself does have to be included to conform to ePub standards (although Amazon themselves have left it out in some of the examples in their sample files). There is no instance in which a Kindle fixed layout file should open but the images would not display (so long as it is formatted properly, that is).

Finally, there is a class attribute appended to both the image and its div container, the first of which is the same one used in the previous example, while a new “fullpage” class has been added to format the image, the reference for which is in the “HTML Method” section of the CSS:

img.fullpage {
position: absolute;
height: 1280px;
width: 800px;
z-index: -1;
}

With just a few exceptions, each of the remaining pages in the Simple Template employs these same two entries to define the size and position of the main container and background image on that page: you only have to enter it here once and it can be referenced as many times as needed throughout the book, so long as you reference this same CSS file. The names of both ids and classes, by the way, can be anything you like, although it is best to give them names that are descriptive of their function for ease of reference.

Although we have defined the image’s position as absolute here, we do not need to define that position with top/left values since the default values have all been set to zero in the CSS Reset, including margins and padding. By default, therefore, the image will be placed in the upper left corner (top: 0px; left: 0px;), without actually entering those values.

Always be sure to close each line entry in the CSS with a semi-colon, and the attribute list with a final curly bracket. This is the easiest (and most common) error to make, and will cause you no end of headaches if your code is sloppy. Happily, good text editors will automatically color code the various elements in your CSS file so that you will immediately know if something is amiss, as all the subsequent colors will change, and you can therefore easily find it without endless hours of searching.

Also, while we’re on the subject of closing tags, make sure you’ve closed each entity in the HTML code with the proper backslash. In containers this requires the use of a backslash-entity combination (i.e. </div>), while in self-contained entities such as that for the image link, just a backslash preceding the closing angle bracket is sufficient. Kindlegen will inform you during conversion if there are any unclosed elements, or improper tags, and will in fact generally close them for you forcefully, pointing out where they are so you can go back in and fix them manually to remove future error messages.

Once you have completed building your page, be sure to list it in the Manifest, along with its associated supported files, such as the CSS (if not already listed) and images. All included files must be listed in the Manifest or you will get an error. Additionally, you will need to add a reference to the page in the Spine, in the order you want it to appear, as well as adding any navigation links to the page that you want to appear.

CSS vs. HTML Methods

The primary benefit to using the <img src> method for inserting images is that the image can be magnified by double-tapping on it and then using pinch-and-zoom to zoom in and out and scroll about to see more detail, or to view image-based text too small to read comfortably otherwise. Any text or image overlays disappear when this is done, so that only the background image itself is zoomed, which you can see examples of in the Advanced Template where there are layers. However, if the text is included in your images, then this is a great way to let your readers scale it to a size they can read easily. Essentially, this replicates the iBooks experience, except that the page does not scale up and down automatically when double-tapped as it does in iBooks.

This can be a handy feature, or a nuisance, depending on your project. For example, you may not want this in a children’s book, where it might only cause confusion for young readers with rambunctious hands, or interfere with other active elements on the page, such as in the instance of a quiz or seek and find book (for both of which again there are examples in the Advanced Template. On the other hand, for art books and graphic novels with no text layers it may prove highly useful for viewing finer details when no other zoom method is provided (such as Panel View). Text in comics are notorious for being difficult to read in ebooks, as they are almost always incorporated in the image (though it does not need to be). For now, at any rate, this is the easiest way to do so in most cases.

NOTE: From this point forward the guidebook How To Make Kindle Comics & Children's Books goes on to look at the remaining pages of the Simple Template, which address Self-Contained CSS Pages, adding Active Links, and Multi-Image Pages, followed by a dissection of the Advanced Template , which delves into embedding Fonts for live text layers, Styling Text and adding Drop Shadows, and a wide variety of page layout features, including a linked Table of Contents, Positioning Divs & Text Boxes, Region Magnification using multiple methods (along with a variety of tips and tricks for altering both text and images when tapped), Panel View Layouts, and Lightbox Fills, among many other subjects, culminating in the Conversion and Testing of your compiled file, which we will turn to next.

Top

Join Us
On Google+

Receive Our
RSS Feed

Look For Us
On LinkedIn

View Our Vids
On YouTube