Natasha Fondren

Coding the chapter headings is where most of the creativity and design comes in. Make sure to check out Kindle Formatting for Novels IV: Chapter Design for ideas. Almost anything is possible, so get creative!

If I were working along with this series, I would apply each of these changes to my first chapter. When I finished working with this post and the next post, I’d copy the lot, then paste it at the beginning of each chapter, making the appropriate changes. I’d wait until after the next installment, because the styling for the first sentence of the first paragraph can easily be pasted right along with the chapter heading.

Style Code

We’ll be manipulating the style code today, even though I won’t cover the coding for the head portion of your html document until the next installment. You may decide to change parts of this later, so think of this as a foundation. You will almost definitely change the “margin-top” numbers. For now, at the beginning of your document, above the </head>, paste this code:

<style>

p.noindent { text-indent:0; margin-top:60;}
p.right { text-align:right; }
p.left { text-align:left; }
p.image { text-indent:0; text-align:center; }
.center { text-align:center; }
h1 { text-align:center; margin-top:120; }
h2 { text-align:center; }
h3 { text-align:center; }
h4 { text-align:center; }
h5 { text-align:center; }

</style>

Absolute Must-Have

Start each chapter on a new page. If you do no other formatting, please do this. Nothing looks sloppier than a chapter starting only a hard enter away from the last paragraph of the former chapter, helter-skelter in the middle of the page. It will be the first code you enter at the beginning of a chapter:

 <mbp:pagebreak />

Header Sizing

Decide which line in your chapter heading will be largest. If you have “Chapter 1” first, and the next line is the title of Chapter 1, you probably want Chapter 1 to be <h3> or <h2>, and the title to be <h1>. Here is a sample of what each heading looks like on the Kindle.

You unfortunately do not have control of the font, unless you use an image instead of text.

Bookmark

For your table of contents, put a bookmark after the page break and before the chapter heading. Something like this is fine:

<a name="chap1"/>

Obviously, you’ll want to change "chap1" to "chap2" for the second chapter, and so on.

Heading Style

If you wish to make any part of the heading in italics, you have two choices: the first way is to surround the text with the <i> tag. If you decide not to use italics with the <h1> tag on your title pages, then this way might be the easiest way to go.

<h1><i>h1 Heading, Italics</i></h1>

If you wish to universally apply italics every single time you use the <h1> tag (or <h2>, <h3>, etc.), then alter the <style> code at the top of your document:

h1 { text-align:center; font-style:italic; }

(If you know CSS, you can create separate classes, but I’m trying to make this simple for now.)

Once you decide the sizing and style of each line of your heading, you need to decide whether you want them aligned to the left, center, or right.

Heading Alignment

To align the heading left, center, or right, alter the style code with your choice of one of the following:

h1 { text-align:left; }

h1 { text-align:center; }

h1 { text-align:right; }

The other alignment we need to alter is how far you’re pushing down the text from the top of the page. As a rule of thumb, I generally push the first heading down 120 pixels. You don’t want to push it down too far, because if your reader is resizing the text to be bigger, then you still want all of your chapter heading and at least the first line of your text to show up on the first “page.”

Whichever heading tag is first on this page, add the “margin-top” styling to the style code:

h1 { text-align:center; margin-top:120; }

If you have more than one line using different header sizes, you might want to put a little space between each line. Or not. Whatever you decide, you can use this method to push text down.

Images

To insert an image, whether for decoration or as a replacement to chapter headers so you have more design freedom, use the following code:

<p class="image"><img src="image.jpg" alt="name of image" align="top"/></p>

The Kindle accepts .bmp, .gif, .jpg, and .png files. If you want to the image to span the width of the Kindle page, then 520 pixels wide is your best bet. The Kindle resizes images with varying results and more complexity than I’m going to go into in this series. Also, keep your image under 64 kb. (You can compress it when you save it as a .jpg in Gimp or Photoshop.)

In the style code, you can alter (or add) the "margin-top" and "text-align" attributes in the style at the top of your document, just as I’ve shown you above. In the place where you’ve inserted the image (such as the beginning of the chapter), you can change the "align=" to top, middle, or bottom, which will align the image vertically to the top of the line, the middle of the line, or the bottom of the line.

Next Installment

Tomorrow we’ll style and code the first line of the first paragraph after the chapter heading and for each section within a chapter.

Any questions? And what will help you most for the post after that? Should I include pictures and the precise coding I used, so you can see examples? Or should I move on?