Preparing the HTML file, part 2

Part 13: use my example Kindle HTML template to add code to your own ebook.
Okay. You’ve coded your manuscript’s body. Now, we’ll look at the head and table of contents. Perhaps the best way to learn this is by following an annotated example, and *reaches under the desk* here’s one I prepared earlier. Download it (right click on the link → save link as) and open the downloaded .html file in Notepad++.

Delicious cake
Here’s something else I wish I prepared earlier     (source)

Note that lines 128-130 inform you that the majority of the manuscript’s body chapters have been deleted, However, this won’t be a problem, as you have your own chapters to wrap the example code around. This means that you’ll be cutting, pasting and editing lines of code from the example file across to your own HTML file. I’ve left the table of contents intact because we’ll be working a little more with that in the next article.

Exploring the HTML example template

Lines 1 & 217: the entire document is wrapped in HTML tags.
Lines 5-9: here we have the four paragraph styles I’ve used throughout my novel. Note that all four carry just three attributes: indents, margins and justification. You could, quite easily, delete the last two styles and create some of your own (see below). There are a few points to make here:
1. On most Kindle devices, the paragraph text would automatically justify and have margins set at zero anyway. The only reason I’ve set these attributes is on the couple of ‘devices’ which don’t do this: namely, web browsers, Kindle for iOS and Amazon’s Look Inside! store feature.
2. I’ve set indentations (and, again, margins) because most readers prefer indented paragraphs with minimal extra spacing between. The point is that all that extra paragraph space can look quite ugly on dialogue-heavy pages.
3. However, Kindle paragraphs do not automatically remove indents for the first paragraph or each chapter, or after section breaks, something that sets my OCD absolutely twitching. This is fixed with the .noindent style.
4. One place I do want a small margin between paragraphs is in my glossary or dictionary of Australian slang at the back of Saving Davey Gravy. You’ll see that I’ve set the top margin to ‘1em’ (think of HTML margin values as clockwise: top, right, bottom, left).
5. 1em is the width of one em dash, which is the same width as the font height – that is, if the font is set to 16pt, then 1em = 16pt. It is known as a relative size. If you actually set the value at 16pt, it would become a fixed size. What’s the difference? The relative value will change as a font size is scaled (say, by a Kindle user making the default font larger), while the fixed value won’t. In this way, in the context of an ebook, relative values are recommended over fixed values, as they will scale with the reader’s setting adjustments.
6. This is as good a time as any to introduce the various measurements available in HTML and CSS. Goodness, there are nine of them, I hear you say? I generally only use two: ems when I’m setting relative measurements and px, or pixels, when I’m setting fixed measurements. This scale will help you convert between some of the measurements – make sure that you understand that the conversion to ems is relative to 12pt font (the default setting for many programs)!
Lines 13 & 216: this section of the document is wrapped in body tags.
Lines 14 & 24: Kindles support div tags. Think of the div as a container, inside which values can be assigned. In this case, the value is to centre align the text.
Line 14: the value id="start" designates the (you guessed it) start of the ebook to the Kindle.
Line 15: <hr /> inserts a horizontal line. This can be further modified by values (see line 17). Note that % is also a relative size.
Lines 20-23: why so many breaks? This is purely for the sake of Amazon’s Look Inside! feature, and allows a little breathing space between the title and the table of contents.
Line 28: the value id="toc" designates the table of contents to the Kindle.
Line 32: <a> tags assign an HTML link. On web pages, you’ll see these as links to other pages, or areas within a very long page. Here, the tags link to each chapter of Saving Davey Gravy: line 32 links to line 55 (the preface), line 33 links to line 64 (chapter 1), etc. More on this:
1. Obviously, here you would assign as many links as there are chapters in your book, bearing in mind that each new section of front or back matter forms its own ‘chapter’.
2. The chapter reference ID value (#cxx) can be modified to suit your desires (#section01, #partone, etc.). You cannot, however, assign a name beginning with a number, as it interferes with the XML protocol.
Line 58: I’ve assigned the leading paragraph of the preface with the value class="noindent", referring it back to the style contained in the HTML head. See also line 163 onwards, where I’ve assigned a different style to these paragraphs.

The cover

At this stage, the cover image is not included. This will be expanded on in a later article.

Kindle formatting

Now that you have an understanding of how you can format paragraphs by using HTML (see Tizag’s HTML tutorial for a good, simple primer), the question becomes: how much formatting should I include?
The answer is: as little as possible to achieve great readability. Formatting is about readers, not authors. Jennifer Kyrnin’s article on Kindle formatting is extremely relevant, and I’ll paraphrase the major points, or should I say, major don’ts:
1. Set a rigid font size of the body text. Leave this to the reader to decide.
2. Deviate from plain text, except for special emphasis. You may think a book looks fantastic in italics, but your readers are unlikely to.
3. Mess with the font or background colour. Books are black text on a white background for a reason.
Basically, treat your manuscript as you would a cover letter or a resume: clean, clear and precise. Non-standard fonts and layout are going to rub most readers up the wrong way. In fact, Amazon strongly discourages authors from setting fonts, as it negates the ability of Kindle users to set their own.

Previewing the HTML in a browser window

Once you have coded your HTML according to this guide, you should be able to preview it in a web browser by dragging the file into the browser window. The file will display as a simple ebook, minus the cover image for now, and if you change the width of the browser window, you will see how the text reflows to fit the new window size.
You are now only four short steps from having a finished MOBI file, suitable for uploading to Amazon.

Proceed to Part 14: ‘Preparing the OPF file’, or return to the article index.
Return to Re: writing
While I’ve endeavoured to provide you with accurate information, what is considered ‘accurate’ will change over time. If I’m wrong, or you’d like to ask a question or share your thoughts, I’d love to hear your take on things.

Rhys About Rhys

Teacher, writer, editor, cook: a bit like that nursery rhyme, really.
Facebook / Google+ / Twitter

Speak Your Mind