HTML formatting for Amazon Kindle

Formatting HTML for Kindle

last updates:

Navigation

Why another page about Kindle ?

After buying Amazon Kindle reader, I realized that it could be used also for my own documents. This short article deals with ways how to prepare a document that can be read on the Kindle reader using simple HTML and CSS.

I found some information about preparing documents for Kindle here and there and I realized that the best way of formatting document for Kindle is using HTML markup language which is the internal represenation of mobi-pocket documents used by Kindle. Kindle uses a subset of the HTML 3.2 and CSS so that no exotic HTML techniques will be needed.

If you want to skip the theory ...

... and look right at the example - jump here

Basic tools you will need

I suppose that you have at least some basic knowledge of the HTML and CSS but even without this knowledge you'll be able to prepare your own documents. You can use my example as a starting point.

First, what you need is some HTML editor. As I've already mentioned no special HTML/CSS fetures will be used so the simpliest way is to use standard text-mode editor which is e.g. Notepad under the MS Windows.

Myself, I am using the freeware editor PsPad - http://www.pspad.com - which supports code completing and tags highlightning - features you can live without, but making the text preparation is easier and faster. This editor has a lot of usefull functions: it offers changing of the text coding (Windows code pages, ISO, UTF8, UTF/16), allows easy conversion of a text from plain or rtf format to HTML and bunch of many other handful functions.

Next, you will need is some converter which converts HTML to the MobiPocket format - .prc or .mobi. There are two programs I use for this task:

MobiPocket creator - http://www.mobipocket.com/en/DownloadSoft allows you to convert HTML file to the .prc file format and also generate contents from HTML header tags (H1..H3) and add a document cover image.

The second program for converting to mobi format is Calibre - http://calibre-ebook.com . I recomend to use this program anyway as it is an excelent librarian for your e-books and allows you comfortably transfer books to your Kindle.

Both MobiPocket creator and Calibre are freeware.

Another useful tools

For testing what you have done you will need either use Kindle or, more comfortably, use Kindle preview which can be downloaded from the Amazon Kindle site free of charge. It simulates Kindle reader on Windows.

If you want to prepare / modify documents in another e-book format you might find usefull conversion programs.

For Microsoft .LIT documents it is LitConverter and its front-end ConvertLIT - http://dukelupus.pri.ee/convertlit.php.

A lot of conversions can be done using the (already mentioned) Calibre.

For converting PDF files to HTML format, I use ABBYY FineReader which is comercial but not extensively priced program for the text recognition.

Preparing and testing procedure

I usually use the following procedure:

* If you don't need create a contents you can skip the Mobipocket steps, pack the HTML and possibly other required files like external CSS file into one .zip file and add it to the Calibre and convert it to the MOBI format.

How to embed the CSS code

There are basically three ways how to include a CSS code into HTML page. You can

Now, we finaly got to the HTML formating hints:

Supported HTML and CSS features

Not all the functions and features are supported by the Kindle. In fact, the Kindle supports only a subset of the available functionality.

The list of the supported features can be found in this pdf file

The basic rule for formating the document is Keep it simple.

Which HTML elements to use ?

Basic formating

I use these basic elements for the document structure:

Headers

For the headings, I use H1 - H6 tags (Usually I use only H1/H2 headers and sometimes H3). Kindle representation of the tags depends on the text size selected. The bigger font, the bigger difference between size of two neighbour headings. In other words, if you select small font on the Kindle device there is almost no difference between H5 and H6.

Generally, the difference between the font size of the H1 and H6 is smaller then in the web browser.

To modify the header size You can use the following css code, e.g.: 

  h1{
      font-size:150%;
    }

Paragraphs

The text of the document is normally organized in paragraphs. The kindle standardly indents the first line of a paragraph and makes too little space above it.

As the Kindle screen space is spare I prefer not to indent the first line (especially when document contains dialogs where paragrahps are relatively short) and instead I make a little space above each paragraph.

This can be achieved by a few line of the css: 

  p {
    text-indent:0em;
    margin-top:0.6em;
    }

You can modify the space above paragraphs acording to your taste by changing the margin-top value. Decimal numberes are allowed.

Lists

Standard HTML list tags can be used - <ul> / <ol> tags for unnumbered / numbered list and <li> for list items

Links

Again, standard HTML <a> tags can be used

To define an anchore use <a name="AnchoreName"> </a>

To create a link use <a href="#AnchoreName"> </a>

Page breaks

To force a page break I use the mobipocket special tag <mbp:pagebrak/>

Extended formating

For some special effects I sometimes use other of the Kindle supported HTML/CSS features

The Kindle understands the following elements:

The text alignment can has the left, right, center and justify values.

When changing the text font size, again, the differences between various values are not so big as in a web browser and are dependent on the Kindle font size selected - the bigger Kindle font the greater differences.

The valid parameters are:

Images

Images can be used but there is one trick: when using MobiPocket Creator for HTML->prc conversion it is necessary to copy the images to the directory where MobiPocket reader stores the resulting prc file.

Then, standard <img> tag can be used. Just resize the image to reasonable size.

Left margins

If you need to indent a paragraph you can use either <pre> html tag or you can use CSS margin-left parameter; The style should be applied to the paragraph <p> tag or <div> tag but not to <div class="marginleft"> tag with embeded <p> tag. The value of the margin-left parameter has little if any impact.

The correct way is 

  <style>
    .leftmargin{    
      margin-left:2em;
    } 
  </style>
    ...
    ...
  <p class="leftmargin">  
  lorem ipsum
  </p>  

  or - alternatively
  
  <div class="leftmargin">  
  lorem ipsum
  </div>

Top margins

If you need to make a space above a paragraph you can use CSS margin-top parameter; The style should be applied to the <p> or <div> tag.

The correct way is 

  <style>
    .topmargin{    
      margin-top:3em;
    } 
  </style>
    ...
    ...
  <p class="topmargin">  
  lorem ipsum
  </p>  

  or - alternatively
  
  <div class="topmargin">  
  lorem ipsum
  </div>

There are other supported tags like text strike-over and underline but I don't recommend to use them as the underline is used for links and comments so that underlining of a text could be confusing for a reader.

What you can do but not quite well

Tables

Kindle supports tables - to some extent.

That means that you can embed a small table into the document as far as it fits on single Kindle page - and this depends on the font size selected on Kindle.

You can use table tag parameter border="n", i.e. the whole tag looks e.g. like this 

  <table  border="1">  
    <tr> 
      <td> bla bla</td>
      <td> bla bla</td> 
      <td> bla bla</td> 
    </tr>    
    <tr>
      <td> bla bla</td>
      <td> bla bla</td> 
      <td> bla bla</td> 
    </tr>    
  </table>

which looks this way:

bla blabla blabla bla
bla blabla blabla bla

or this way if border ="0" is used:

bla blabla blabla bla
bla blabla blabla bla

The real problem begins if you want to create a table exceeding one Kindle page. In such a case Kindle displays as much as it can on a single page and truncates the rest of a table cell. In other words, you are not able to create a table which spans across more Kindle pages, AFAIK.

What you can't do

Right margins

The CSS margin-right has no effect.

CSS positioning

There are no float-left and similar goodies of the CSS definition. Simple let Kindle to do the formating.

Formatting example

People used to say that an example is worth a hundred pages of explanation so here you are: Kindle formatting example source html code

and here is the document converted to a Kindle mobi format.

Create your own dictionary for Kindle

I've created an Italian - Czech dictionary (Dictionario Italiano-Cecho) for my own use. I am not entitled to offer it to a public domain as I have used the PC translator vocabulary and I don't have the author rights to publish it. Anyway, if anybody is interested and would like to create his / her own dictionary for Kindle I can offer a simple how-to-do help and a program for converting dictionary word pairs to a html file which can be easily converted into a Kindle dictionary.

update 29.2.2012:

TabToOpf - Conversion program

As there is growing demand for the conversion program I decided to publish a link for download. The program is quick-and-dirty and has just the necesary controls as it has been created just for my own one-time conversion, but it works. It converts a TAB separated text file to format which can be passed to MobiPocket creator to create a Kindle dictionary.

The program is free and it is released under the Just-let-me-know-ware licence.

Here is a short help:

It supposes that you have installed MobiPocket creator on your computer 


 1, Open source file having the following format:
      Lang1-expression TAB Lang2-expression
      Lang1-expression TAB Lang2-expression
      Lang1-expression TAB Lang2-expression
    The file contents is visible in the right window.

 2,Fill in the metadata fields
     Title tag determines the size of the dictionary title
     Keyword tag determines the size of the Language 1 expression
     Bullet is a character used at the begining of an dictionary item

 3, Optionally add the cover image and Title page

 4, Click on the Create Output files button
    -  One or more HTML files are created (default file size is 10 000 lines) along with the .opf file.
       The file structure  is suitable for  creating a  Kindle dictionary by MobiPocket creator.

 5, Double-click the opf file 
  to open the MobiPocket creator, mark it as dictionary and use its BUILD function to convert HTML files to a .prc 
dictionary files.

Download link: TabToOpf MJ.

The screen-shot:

to my home page

Links

Preventing Kindle to continuously restart itself

Recently, I realized that my Kindle 3 battery is self discharging within a couple of days. First I suspected the battery itself. Then I realized that the Kindle, when switched off, tries to install some actualizations, fails, reboots and this repeats indefinitely.

I found a remedy of the problem here: supplied by Ivo Kosteleck�.

As the article is written is in Czech I excerpt the basics - it is necessary to prevent Kindle to update the SW. To do this, connect Kindle via USB as a disk, delete file "Update_611680021_1725970040.bin" in the root and create an empty file with the same name.

English Kindle sites

Czech Kindle sites

Finally, a small advertisment:

Links to my other webs

Feedback

Please feel free to let me know your comments both to the contents of the article as well as to my english.

If you have your own tricks how to prepare documents for the Kindle let me know as well.

The mail address is not clickable - it is an image. So you should re-type it in your mail client;