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:

Drop capital using enlarged text

(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:

Drop capital using an image

Supported characters

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

If you’ve read this article, you’ll know about book structure and if you’ve read this page, you’ll understand the basics of HTML and CSS.

At this point, you can now think of how you want your book to look visually. CSS has a very rigid syntax:

Read the rest of this entry »

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 »

The good news is that you can generally do your self-publishing project with open source and free software. I imagine better, paid-for software is probably available, but I’ll leave that for other people to comment – sadly, I’m not in the pocket of Big Publishing (although I would like to be).

In this area, the PC platform is generally better catered for than the Mac.

Read the rest of this entry »

The good news is that the Kindle format supports tables. The bad news is it only supports them in the most rudimentary way.

Some things to bear in mind about tables on a Kindle:

1. There is nothing you can do to stop a table breaking across a page. Whether it does or not will depend on how big it is and  on individual users’ font settings
2. The fairly narrow width of the screen means you can only really include simple tables, with a few columns
3. Only use tables to display tabular data. Do not use them as a formatting tool
4. Table options are pretty much non-existent. You can change the alignment in the cells (left, right or centre) and turn the grid lines on and off. The headings will be bold. That’s about it.

How to add a table

As I advised in this post it’s highly recommended that you separate tables and images from your main document.

Copy your table from MS Word and convert it to HTML using cKEditor, as I have outlined already. Copy the source code into a new Notepad++ file.

In Notepad++, use Find & Replace to get rid of all <p> and </p> tags. Then delete everything before the <tbody> tag.

Paste the code <table border=”1″> before the <tbody> tag if you want gridlines or <table border=”0″> if you don’t. Then delete everything after the </table> tag at the end. You can then paste the completed code in your final document where you want it to appear.

Here is a sample HTML file containing a simple table:

Sample table.htm

Using graphics as tables

If your tables are fairly large of complex, another option is to include them as images. You can do this in portrait format, to the width of the page, or in landscape format, where you can use the full height of the screen (although the user must of course turn the reader sideways.

The maximum size, according to Amazon, for an image is 500 pixels (width) x 600 pixels (height). This, however does not fill the whole screen – apparently only the cover is allowed to do that.The best image format to use for tables is probably GIF, whose compression will result in clearer text than something like JPEG or PNG.

Amazon’s formatting guidelines state that a letter ‘a’ should be no smaller than six pixels. I don’t know how to test for this rule, but please think of your readers; some of them may have worse eyesight than you and others may be reading your book on a smartphone. In Kindle Previewer go to Devices in the main menu and see what it looks like on different reading devices.. You can always split a table across two images.

Generating table graphics

There are many ways to do this. The most obvious would be PowerPoint, which lets you save individual slides as GIFs. However, for some reason, GIFs exported from PowerPoint look awful. I’ve had much better results using the same technique using Impress in Open Office or Libre Office. You’ll need to adjust the page size – in Format > Page, setting the page width to 13.23cm gives you 500 pixels width when you export a GIF using File > Export. Deselect the Save Transparency option in the subsequent dialog box.

Now, here comes the most difficult bit. At this point, you’ll have fixed the layout and typography and you’ll have fixed the structure of your document in your word processor (or decided you’ll just edit the code).

Here are some options.

Read the rest of this entry »

Some authors take time to think about the structure of books – section headings, chapter headings and the like – while some are a bit more blasé about it. However, it’s important to do it correctly, in terms of navigation, as a consistent visual pointer for the reader and for technical reasons such as whether or not a heading appears in a table of contents. And also that you can define styles for them and change their appearance throughout the book very quickly.

In HTML (and by relation Kindle format), you can have six descending levels of headings, from <h1> to <h6>.

A simple novel

Let’s take the simplest example – a novel with twenty-five chapters. All you need to do is to make sure all your chapter headings are tagged with <h1>.

Chapter 1
<p>It 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>

A book in parts

However, let’s suppose you split your book into three parts. <h1> now corresponds to the part and <h2> is now the chapter style.

Part 1
Chapter 1
<p>It 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>

And of course, if you want to have some subheadings, they’ll be <h3>.

If you’re writing something quite long and technical, with lots of headings, it’s easy to forget where in the hierarchy you are.

Defining Structure

Most word processors feature the same principle I’ve outlined above. In MS Word, for example, if you go to Format > Styles and Formatting, some built-in headings are displayed in the right-hand pane – typically Heading 1, Heading 2 and Heading 3. These correspond exactly to <h1>, <h2> and <h3> and can be carried into the HTML, which is an easier option than trawling through code and doing it manually. So I highly recommend you use this feature – all you need to do is select your heading text and click on the style. In addition, once you’ve defined all your headings, you can use Word’s automatic table of contents function, which is very useful for displaying the structure of long books.

I’ll admit it: HTML can be scary. Somewhere in your browser menu is a command called View Source or View Page Source – if you select that, you get a load of indecipherable code that looks very intimidating.

However, at the level of a file for an eBook, it’s really isn’t so complicated. HTML is a plain text format – you can write and edit any webpage using Notepad or TextEdit. The basic idea is to surround every element with a container, which take the form of <> and </>.

For instance to make a sentence bold, you would use the <strong> tag:

<strong>This text is entirely bold.</strong>

Read the rest of this entry »

As an editor, here are the most common formatting and typographical errors I have to fix.

Make a copy of your original book before doing any of this, just in case something goes wrong.

I’m assuming here that you’re using MS Word, because most people are. However, the same principles apply in other word processors such as Open Office and iWork – you’ll just have to look up the appropriate Find & Replace symbols and substitute them accordingly. (Note that Google Docs lacks advanced find and replace functions; you may want to download Open Office for these tasks.)

Where I write things like [space], hit the space bar; I’m assuming you’re not going to type in the text verbatim (just checking).

Read the rest of this entry »