If you really don’t like the Kindle’s default chapter styles, then a workable alternative is to use an image instead. Of course, this means creating a different image for every chapter, which is time-consuming if your book is long, but it will look really nice if it’s done well. You could maybe ask the person who’s designing your cover for advice (or get him or her to do these graphics for you as well).

Instructions

Your image should be a GIF and, as discussed in the section on section break graphics, you have to enter the size of the graphic to stop the Kindle resizing it.

The CSS you need is the same as what you’ve been using for text, because graphics in this case are treated in the same way.

h1{ text-align:center; page-break-before: always; margin-bottom: 2em;}

Obviously, if you want your graphic to be left- or right-aligned, change the text-align value accordingly.

Now, putting the image in is not difficult at all; assuming your chapter headings are wrapped in <h1> … </h1> tags, simply adding the HTML code to insert an image between the tags will work. The only problem is that your conversion program has no information on which to build a table of contents.

This is not too difficult to fix; however, I’ve only been able to get this working with Calibre and not with MobiPocket Creator.

Here’s the HTML you’ll need:

<h1 title="Chapter 1"><img src="Chapter1.gif" height="221px" width="250px" alt="Chapter 1" ></h1>

The text you put in the quotes after h1 title is what will appear in the table of contents. Change the height and width values to match the size of your image.

You should also add an alt=”” tag – this is alternate text for an image. When someone is using text-to-speech, an eBook should speak this text when it encounters an image. Unfortunately the Kindle ignores this (poor show, Amazon), but you should still include it – ePub files will not validate unless images have alt tags. (Hopefully Amazon will fix this oversight in a firmware update.)

We now need to tell this to Calibre. The instructions for converting to Calibre are here; in the Table of Contents pane in the Convert dialog, press the magic wand button by the Level 1 TOC field. Enter the following values;

• Under ‘Match HTML tags …’, enter h1
• Under ‘Having the attribute’ enter title. Press OK

Bear in mind that, in this case, the output of Calibre’s built-in reader will not be the same as the output in Kindle Previewer or the Kindle.

A sample layout

Kindle file: imageheading.mobi
Source HTML file and images: imageheading.zip

In my prospective Freemasonry-themed conspiracy thriller, I’ve used some Masonic compasses as chapter headings. In the Kindle file, these chapters output as ‘Chapter 1’ and ‘Chapter 2’ in the table of contents. The images are about 17KB each.

It’s taken some trial and error and reading the official Kindle specifications (so you don’t have to), but I think I now have a good idea of how the Kindle handles images. So before I go into the details, here are some things to bear in mind.

1. The Kindle likes to resize images to the width of the page. Initially, I was annoyed by this feature but having thought about it, I’m beginning to think it makes sense. The reason for this is simply the multitude of devices that can run Kindle software – an image precisely sized for the Kindle won’t look the same on a smartphone
2. It’s not possible to size an image to fill the screen. Only the cover is allowed to do this
3. The maximum dimensions for a single image are 500px x 600px (the 500px is the most important dimension, as it represents the maximum width – height will obviously vary)
4. The maximum file size for a single image is 127KB. You can upload a larger image to MobiPocket Creator or Calibre, but they will resize them. It’s a far better idea to alter them yourself in a photo editor within this size limit, rather than to rely on these conversion programs
5. Wrapping text around an image isn’t possible in Kindle format. All you can really do with an image is align it to the left, centre or right.

File formats

The Kindle supports two formats: JPEG (.jpg or .jpeg) and GIF (.gif). The choice of which one to use is fairly simple:

• Use JPEG for photos. Compress them to the best-available quality within the 127KB size limit. If this is difficult, you can reduce the number of colours in the image in your photo-editor, which will also reduce the file size
• For line-art, drawings and tables, use the GIF format. The reason for this is that the GIF compression algorithm results in sharper lines and less jaggedness than JPEG.

Amazon recommends using colour images wherever possible, to use on colour-enabled devices; if you do use colour, check how they look in black and white; some colour images do not convert well.

Inserting an image

The code for inserting an image is quite simple:

<img src="myimage.jpg"/>

Remember that filenames are case sensitive and the code assumes your image is in the same folder as your HTML file.

Alignment

By default, an image will be left-aligned. As I’ve discussed, for a typical photo, you should just let it fill the screen, but for small pieces of line art, centre (or even right) alignment may be desirable.

Add this to the CSS:

p.imagecentre {text-indent:0; text-align:center;}
p.imageright {text-indent:0; text-align:right;}

And add this to the HTML:

For a centred image:

<p class="imagecentre"><img src="image.gif"/></p>

For a right-aligned image

<p class="imageright"><img src="image.gif"/></p>

Fixing the image size

For small images (such as graphical section breaks or small illustrations at the start of chapters), you’ll want to fix the image size.

To do this, you need include the width and height of the graphic in pixels, otherwise the Kindle will resize them upwards. If you’ve forgotten what size you cropped them to, these values are usually available in the information pane of the window; if not, right-click on the graphic icon and select Properties, where you’ll find the dimensions.

For example:

<p class="sectionbreak"><img src="image.jpg" height="50px" width="100px"/></p>

A sample file

The following downloads are based on the first chapter of Alice in Wonderland and have a centred image at the start of the chapter. It looks a little large on the iPhone preview, but fine in all other formats.

Alice in Wonderland: zip file, containing HTML, image and dummy cover image
Alice in Wonderland: .prc file file – will open in the Kindle/Kindle Previewer

Section breaks

By which I mean those fancy ornamental graphics that are used to start a new section within a chapter. There seems little agreement as to what they’re actually called; I have heard them described as dinkus, space break symbols, paragraph dividers, fleurons and glyphs. But when you see one, you’ll know what I mean.

Where to find them

Although I’m an editor, I’ve never edited fiction and assumed these things would be easy to find. The odd thing is that they’re not – the only abundant source seems to be photo libraries, who obviously charge for them.

There are free fonts available, which contain these graphics as characters, but these are of no use as typefaces on a Kindle (unless you convert them into graphics using the method described further down).

If you do find some suitable graphics on the web, bear in mind that you may not have permission to use them, unless they’re available under a Creative Commons license or similar, where you can use them as long as you credit the originator. (If you know of a free source of these images, please leave a comment.)

One solution may be to explore some of the Wingdings- or Webdings-style characters that come with Microsoft Office, for example. According to Microsoft’s terms and conditions, they’re cleared for use in publications. In Windows, you can browse through them using the Character Map, which is available in Accessories via the Start button, increase their size and then save the page as a GIF (the method is the same as I described for tables). In a photo editor, you can then cut them out to the required size.

Below are some graphics that I’ve converted from the Wingdings 1 and Wingdings 2 typefaces in Windows.

If your book has a particular theme, you could of course use an appropriate glyph:

Inserting the graphics

Not as easy as you might think. I won’t bore you with the details – simply copy the code.

CSS

In the CSS, between the <style></style> tags, copy and paste this line:

p.sectionbreak {text-indent:0; margin-top:0.5em; margin-bottom:0.5em; text-align:center;}

You can adjust the values for margin-top and margin-bottom as you wish, to change the spacing before and after the graphic.

HTML

In the HTML, insert this line wherever you want the graphic to appear, changing the filename as appropriate (remember in HTML that filenames are case sensitive).

<p class="sectionbreak"><img src="image.gif" height="39px" width="100px" alt="section break"/></p>

Note that you must also include the width and height of the graphic in pixels, otherwise the Kindle will resize them upwards. If you’ve forgotten what size you cropped them to, these values are usually available in the information pane of the window; if not, right-click on the graphic icon and select Properties, where you’ll find the dimensions. For a section break image with a wide aspect ratio, around 100 pixels seems to work okay.

Bear in mind that, unless you define a specific location, graphics must be in the same folder as your HTML file.

If you’re not bothered about having graphics, you could use three asterisks instead. In this case, the HTML would be something like:

<p class="sectionbreak"><strong><big>*&nbsp;&nbsp;*&nbsp;&nbsp;*</big></strong></p>

Joel Friedlander at The Book Designer has written a useful article on this subject.

Drop capitals

Drop capitals (aka drop caps) look very nice on the opening paragraphs of chapters in books. Unfortunately the Kindle doesn’t really support them. It doesn’t support text wrapping around images either, so you can’t cheat by using pictures of capital letters.

The best you can do is to have first letter bigger and poking out above the text.

Option 1

The first option is to make it big and bold in the code by using the <strong> and <big> tags. It’s a bit inelegant in terms of markup. The paragraph has <p class=”first”> because the book has indented paragraphs and we need to have no indent in the first paragraph (see this page).

<p class="first"><strong><big><big><big>I</big></big></big></strong>t was a dark and stormy night; the rain fell in torrents — except at occasional intervals, when it was checked by a violent gust of wind which swept up the streets (for it is in London that our scene lies), rattling along the housetops, and fiercely agitating the scanty flame of the lamps that struggled against the darkness.</p>

Here’s the result:

(Thanks to Natasha Fondren for this tip.)

Option 2

If you’re very patient, you could make graphics of all your drop capitals and insert those. The advantage is that you can use any typeface you want; the disadvantage is that they won’t resize with the text. The example below uses an image that’s 44 pixels high and 36 pixels wide (you have to add this in case the Kindle tries to resize it). Here’s the markup:

<p class="first"><img src="Idropcap.gif" height="44px" width="36px">t was a dark and stormy night; the rain fell in torrents — except at occasional intervals, when it was checked by a violent gust of wind which swept up the streets (for it is in London that our scene lies), rattling along the housetops, and fiercely agitating the scanty flame of the lamps that struggled against the darkness.</p>

Here’s the result:

Supported characters

In the Kindle Publishing Guidelines [PDF], there is a list of all the characters supported by the Kindle.

One of the downsides of Kindles and other eReaders has been the decline in the importance of the cover. No longer can you see what other people are reading; and no longer can you hope to impress girls by pretending you understand Proust.

That’s not to say that there are no upsides – you may be a professor of theoretical physics at MIT who secretly likes reading Danielle Steel. I digress …

Read the rest of this entry »