by Joshua Tallent

 

JIMMY

  On the Kindle 1, the

tag gives the entire block of text a 0.5 inch left margin, but no right margin. On the Kindle 2 it gives the text a 0.25 inch left margin. The

tag does not assign a first-line indent, but you can give it one by using the width property as described on page 51. You can also make the text left-aligned, right-aligned, and centered, and the text will still keep its left margin. However, it is not possible to assign a hanging indent to a

; it will just be treated like a paragraph.

  Block quotes can be used to create progressive indentation by nesting the block quote tags inside one another:

 

Bob: I was at the appointed place on time. When you struck the match to light your cigar I saw it was the face of the man wanted in Chicago. Somehow I couldn't do it myself, so I went around and got a plain clothes man to do the job.

  Because the amount of indentation is different in the two Kindle devices, the nesting on the two devices is also different. You can nest up to 3 levels (1 1/2 inches) on the Kindle 1 and up to 5 levels (1 3/8 inches) on the Kindle 2. After that, both Kindles give a partial indent to the next

and line up all subsequent

indents with it.

  Here is how nested block quotes show up on the Kindle 1 (Figure 5.3) and Kindle 2 (Figure 5.4):

  Figure 5.3: Block quotes on Kindle 1.

  Figure 5.4: Block quotes on Kindle 2.

  Lists

  There are two types of lists available in HTML: ordered and unordered. Ordered lists automatically place a number in front of each item, while unordered lists automatically place a bullet in front of each item. In most web browsers you can control the types of numbering and the symbols inserted, but the Kindle will only show numbers and bullets.

 

 
1. apple


 


 
1. orange


 


 
1. grape


 


 


 

 

 
• apple


 


 
• orange


 


 
• grape


 


 


 

  The text of the items in a list are indented the same amount as block quotes (0.5 inches on Kindle 1 and 0.25 inches on Kindle 2), but the number or bullet is placed to the left of that indent. You can nest lists within each other, but you run into the same issues with that process that you do with block quotes: the Kindle 1 will only really support three levels of indentation and the Kindle 2 will only support 5 levels, plus a lot of screen real estate is taken up with the white space on the left.

  You can use the left-align style described on page 52 to force left-justification on your list elements.

  It is also important to note that the size and placement of the bullets has changed on the Kindle 2.

  There is an alternative to using traditional lists. You can use the same general markup described in the Poetry section on page 57 using hanging indents and non-breaking spaces to create lists that allow more indentation and the ability to change the number or bullet style. Here is an example of an outline created in this format:

 

  ..........

 

     V.  The Texas Revolution — October 2, 1835 through April 21, 1836

 

          A.  The Federal Rebellion Against Tyranny

 

               1.  Organization of Provisional Government

 

               2.  The Siege of Bexar

 

               3.  The Fall of the Alamo

 

          B.  The War of Independence

 

               1.  Convention of 1836

 

               2.  The Loss of South Texas

 

               3.  Later Campaigns and the Battle of San Jacinto

 

    VI.  The Republic of Texas — April 21, 1836 through December 29, 1845

 

          A.  Establishment of Government

 

               1.  Problems of the Government

  There is no way to get the list items completely lined up at every font size. This will probably not matter much to your readers, though, as long as the indentation is consistent enough. Notice that the first line of the outline above (V. The Texas Revolution) uses the second poetry level indentation—a width of -60px and five non-breaking spaces. However, the next item at that same level (VI. The Republic of Texas) only uses four non-breaking spaces since the Roman numeral has an extra letter. You will have to tweak your outline like that to make sure everything is lined up as much as possible.

  Also, notice that I have assigned the left-align style to the outline paragraphs. This ensures that when the text wraps it does not insert the extra spacing common with fully-justified text, which can make an outline like this harder to read.

  Definition Lists

  Definition lists are not used very often in HTML, but they are supported in the Kindle. A definition list actually consists of three separate tags. The

tag is the surrounding tag. Inside that

you can list a “definition term” in the

tag and “definition data” in the

tag. Without the

tag, the other two tags will be ignored.

  In the Kindle, Definition lists are indented the same way

tags are. The only difference in formatting is that the contents of the

tag are bolded.

  You can create better formatting of lists like this using other styles mentioned here, so I do not suggest using definition lists unless you need to.

  Headings

  In HTML, headings are marked in tags like this:

 

Heading 1

 

Heading 2

 

Heading 3

 

Heading 4

 

Heading 5

 

Heading 6

  Each tag is supposed to format its contents progressively larger from

up to

. However, on the Kindle there is really not much of a difference between

and

at the medium font sizes. As the user adjusts the font size these headings also change. They generally stay in proportion to the regular paragraph font size, but in font size 4

reaches the maximum size allowed on the Kindle, in font size 5

reaches that maximum, and in font size 6

reaches that maximum. As you are planning your book layout you may want to keep these size differences in mind.

  You can add the left-align, right-align, and centered styles to your headings.

  Margins

  In addition to the left margins we talked about in the Hanging Indent and Poetry sections above, the Kindle allows the creation of margins above and below headings, paragraphs, lists, and block quotes. Top margins can be added with the height attribute, but the Kindle also supports the use of the margin-top and margin-bottom CSS form
atting.

  The height attribute can be given a value in:

  pixels (height="40"),

  points (height="40pt),

  percent (height="10%"),

  or em-units (height="2em").

  Negative values are ignored.

  The CSS margin commands can also use

  pixels (margin-top:40px;),

  points (margin-top:40pt;),

  percent (margin-top:10%;),

  and em-units (margin-top:2em;).

  Note that the Kindle 1 (Figure 5.5) and Kindle 2 (Figure 5.6) will display the heights slightly differently due to differences in the default line heights assigned on the devices. Also, the size of the em-unit is different on the two devices. (Refer to the section about measurements on page 49 for more information about that.)

  Figure 5.5: Heights on Kindle 1.

  Figure 5.6: Heights on Kindle 2.

  Margins are very useful when applied to headings, like this:

 

Man About Town

 

by

 

O. Henry

 

There were two or three things that I wanted to know. I do not care about a mystery. So I began to inquire.

  Notice that I gave the

a 50 pixel height and the first paragraph a 30 pixel height as well as a no-indent style. Formatting like that can effectively recreate the hard copy formatting at book chapter headings.

  Margins also look very nice when applied to a book’s subheadings. Adding a little 30 pixel height to them makes the text flow much better.

  You can give block quotes and poetry a little more space with the height attribute. Just add a height (usually 20-30px is good) to the first

or poetry tag and to the first paragraph following that text.

  Tables

  The Kindle 1 does not support HTML tables, but the Kindle 2 does. Table tags in your HTML file on a Kindle 1 (Figure 5.7) will be completely ignored, and the resulting content will be pretty much un-readable. On the Kindle 2 (Figure 5.8), the table tags will be interpreted properly, and the resulting table will be displayed on the screen. If the table is wider than the screen allows, the user can click the joystick right and left while selecting the table to scroll it horizontally.

  Figure 5.7: Table on Kindle 1.

  Figure 5.8: Table on Kindle 2.

  However, because the Kindle 1 does not support tables, I do not suggest that you start using the table tags just yet. There are still a lot of Kindle 1 users out there, and using HTML tables in your books will leave them wondering what the mess of words on their screen is supposed to be.

  So, there are two useable ways to handle table content. In many books tables are used to create formatting, not really to show tabular data. For instance, a list might be placed in a table to reduce the amount of the page it consumes. In instances like that, it is best to make the list into a regular list.

  There are other times when the table data can be constructed as text in a way that makes sense to the user. For instance, this table of eBook Revenues from the IDPF:

  can be formatted like this in the Kindle:

 

Quarter: Q1 07

 

Revenues: $7,500,000

 

Quarter: Q2 07

 

Revenues: $8,100,000

 

Quarter: Q3 07

 

Revenues: $8,000,000

 

Quarter: Q4 07

 

Revenues: $8,200,000

 

Quarter: Q1 08

 

Revenues: $10,100,000

 

Quarter: Q2 08

 

Revenues: $11,600,000

  Notice that the table headers were repeated for each row of data, and that the “Quarter” paragraphs have a top margin. This results in a very readable set of data that is easy to format.

  The other option for including tabular data in your book is to convert it into an image (usually by taking a screen shot with your image creation program). This option works well for smaller tables that really need to be in a tabular format. However, if you are planning to make a large table into an image, you will probably need to break it up into several pieces so that the text stays readable, and you may even want to turn the images 90° counterclockwise to take full advantage of the screen size.

  Borders

  Borders are not supported on the Kindle 1, but you can, as you see above, add borders around tables in the Kindle 2. As a matter of fact, you can even use the background-color CSS property to assign a grayscale color in a table cell. See the section about Pull Quotes and Sidebars on page 110 for an example of this formatting and an explanation of its pros and cons. Borders are not supported around other tags on the Kindle 2. To set apart text in a way that is supported on both devices, use the

---

(Horizontal Rule) tag described on page 91.

  Images

  The Kindle screen is an E Ink Vizplex electronic paper display (EPD). The Kindle 1 screen supports four grayscale levels (black, white, 33% gray, and 66% gray), and the Kindle 2 screen supports 16 grayscale levels. Both screens handle a variety of image types remarkably well. I have formatted books for my clients with charts and graphs, company logos, maps, and photos of people and places. These all display okay on the Kindle 1, but are much better on the Kindle 2.

  Dimensions

  There has been a lot of talk on the Kindle DTP forums about what dimensions an image should be to take full advantage of the available screen real estate. The consensus opinion, and the response stated by the DTP admin, has been that 450 pixels wide by 550 pixels high (a ratio of 9:11) is the proper scale. In the course of my formatting work and testing I have found that there is a little bit more to the story than that.

  The actual size of the viewable book area on the Kindle 1 screen is 524px × 640px, and the viewable book area on the Kindle 2 screen is 520px × 622px. Any images larger or smaller than that (including those sized 450px × 550px) will be automatically re-sized until the width or height fits the viewable book area. At 261px × 319px on Kindle 1 and 260px × 311px on Kindle 2 (half the size of the viewable book area) the image is no longer resized to fit the book area’s width or height. This is important when you are creating logos or other small images for your book. Logos usually look great when sized around 75–100px wide. However, images will still lose some quality when reduced in size, especially photos. I suggest that you keep your images at the Kindle 2 dimensions (520px × 622px) if you can, so that your image quality does not suffer.

  In case you are wondering, I found these numbers using an old trick that photographers use when testing a camera lens. My brother, a semi-professional photographer, was instrumental in this testing. We created an image with 1 pixel lines alternating black and white, both horizontal and vertical. Then, we tested that image at various sizes on the Kindle. When an image is being re-sized by the device the lines show up on the screen with some distortion. When the image is not being re-sized the lines show up clearly defined.

  Figure 5.9: Kindle 1 at 520px × 622px

  Figure 5.10: Kindle 1 at 524px × 640px

  Figure 5.11: Kindle 2 at 524px × 640px

  Figure 5.12: Kindle 2 at 520px × 622px

  If your image has captions, you will need to either add the caption text to the image itself, or size the image at dimensions that will allow the text to be seen underneath it. The benefit of adding the caption to the image is that you don’t have to worry about the image and caption showing up on different screens (“pages”). The benefit of using text under the image is that it can be re-sized by the reader. Whichever way you decide to go, you will usually need about 30-50 pixels of space to write your caption. Don’t forget, though, that the caption font size will change with the rest of the text,
and you will not be able to control whether or not that forces some of the caption text to the next screen.

  Colors

  While the Kindle screen is not color, highly suggest that you keep your images in color for two reasons. First, at some point (probably in 2011) the E Ink Corporation will begin mass-producing a color electronic paper screen, so there is a decent possibility that a later version of the Kindle will support color. It would be best for authors and publishers to plan for this so that they do not have to re-upload their books with color images. Second, many Mobipocket-supported devices and the iPhone support color images. Since Kindle books are now available on the iPhone, and since you might want to sell your book in the Mobipocket format, leaving the images in color is a good idea.

  Resolution

  The Kindle screen supports up to 167 pixels per inch (ppi), so it is best to work with images in that resolution or better if possible. Print images are usually at least 300ppi, and Internet images are usually 72ppi. Both will usually work fine for the Kindle, though the 72ppi images might be a little bit more grainy.

  File Type

  The Kindle supports PNG, JPG, GIF, and BMP files. The file type you choose for your images will probably depend on what format they are in already. PNGs are usually very good for charts, graphs, and other images with text; JPGs are commonly used for photographs; GIFs can be used with charts and graphs, or to keep your file size down if you have a lot of images; I don’t suggest using BMPs since the other formats are usually better. Note that although Amazon requires a TIFF or JPG file for the book cover image on the DTP, the Kindle itself does not support the TIFF format. If you are going to include the cover image at the front of your book, you will need to convert it into the JPG format.