PAGE ONE

This time out we're going to put together the information from CHAPTER-START IMAGES and the discussion of first lines at the end of PARAGRAPH STYLES, ETC.

The html code will be shown in Notepad++ and the various combinations displayed in Kindle Previewer.

The first variation uses the <big>...</big> code for the initial capital. The paragraph style ("start") calls for no indent. I'm using the <b> code to make the letters bold, and they're typed in all caps.

Here's the page of code for the start:

And here is the view from Kindle, font size 6:



The chapter-start image is set at 500 by 400 pixels, which is just about as wide as it can go. There's slightly more room below the bottom of the image because the paragraph style calls for a margin-top of 20 pixels.

You could make the top and bottom spaces equal by setting margin-top to zero, but then you'd want to create a new paragraph style with a decent margin-top and apply it to the opening paragraph of every new section within your chapters. Unless you use a dingbat to separate sections, you need to have a space there.

Next up is Kindle Fire, font size 1:

You'll see the image is centered, as the html code requires. If you mess up (as I did until I figured it out) and use the "body" style for your chapter start code, you'll find the image shifted a bit to the right. "Body" has that 1.2 em indent built in. You'll want the zero indent of "start" style—until you don't. You'll see.

Now Kindle Fire, font size 8:

Looks good.

Here's a smaller font (3) with the sepia background selected. Now the border of the white image can be seen. Are the letters too crowded left and right?



The next code to check out uses the <big> code, but is in italics (<i>...</i>), bold, and lower case.



First, standard Kindle, font size 4:



This image has a lot of room at the top. Adjusting margin-top to center up is not in play.

Here's Kindle Fire HD, font size 6, with the "night" background.

The white background of the image shows up starkly against the black. Just a little disconcerting...

Next, the iPad app for Kindle, in font size 1:



And the iPhone version, font 5 (the biggest):

Looks readable enough...

Now I'm going to show the result of another code. This uses <big> and is set in bold italics and caps. The "start" paragraph style now has its text-indent spec set to 5 em.

But that will also shift the image, which normally uses "start" style, to the right. To fix that, I've created a new paragraph style called "start-image." It keeps the image's indent to zero (in this case, I still want it centered).

Here's Kindle Fire at font size 5:

Now, Kindle Fire, font size 2, with the sepia background:

One thing jumps out at me: The transition from white to sepia is easier to take with an already dark chapter-start image.

Now, Kindle DX, font size 6:

In the next series of tests, I take out the <big> code for the initial letter and use instead an IMAGE of a letter. Back to zero indent, first few words in italics and caps. (I can drop the "start-image" style with this one.) Notice I've also reduced the image size to 200 by 200. The code looks like this:

First up, Kindle Paperwhite at font size 2:



Now Kindle Fire, font size 1:

Because there is no color in this chapter-start image, these two pages look pretty similar.

The problem inherent in creating images for initial letters crops up in the next two tests: Kindle in font 1 makes the big letter T look TOO big.

If actual drop caps were possible in a Kindle, this one would descend at least three lines—which is not that bad to look at (though TWO lines is more standard). Sticking up in the air like that, it looks rather ridiculous.

And here in Kindle Fire's largest font (10) the first letter is actually smaller than those that follow.

This is just plain stupid looking.

The reader holds the power to select a font size that can make you look like an idiot—so plan accordingly.

Now Kindle Fire HD, font size 6, background set to "night."

I rather like the way the initial letter is set in its own white block. Question is, can you take the chance your readers will stick to the mid-sized fonts?

You could avoid the problem of the super big letter by replacing ALL the words marked for special treatment.



First, Kindle Fire HD at font size 2:



I made the image in GIMP, setting the font to Times New Roman italic bold—with a bigger first letter. Looks plausible, right?

But check out Kindle Fire HD at font size 10:



We have the same problem as with the image of just the first letter: The words in the jpg are smaller than the text that follows.

Finally, here's the same selection in font size 4 and "night" background:

The white box surrounding the opening phrase looks odd, but it absolutely must be cropped this way to get it to match the spacing and line height of the text that follows. One more time the reader's choice makes a monkey of our code.

Anyway, you get the idea. The challenge is to pick the combination of text treatment (bold, italics, caps, lower case, indentation, etc.) that looks the best in the various versions of Kindle—and with a reasonable selection of fonts and backgrounds (the stuff that's out of your control in the world of Kindle).

Next time: the Table of Contents.

When I will point out Kindle demands TWO different kinds of TOC.