Kindle CSS formatting

Posted on October 11th, 2009 under Web Stuff

I’ve got a shiny new Kindle, and like any complete and utter geek, I’ve spent most of my time since getting it seeing what it can do.

Since this is the Kindle 2 (and not the DX), the only native formats it supports are .MOBI and . AZW, but thankfully you can convert most document types by sending the document as an attachment to your kindle email address (usually, <name>_<numbers>@kindle.com), which sends it via their cellular network to your kindle.

This formatting process usually mangles the document structure, and since I’m a web geek, HTML/CSS may be an easier format to convert to/from. Sadly, there’s little documentation on what CSS does or doesn’t work on the Kindle, so in hopes of getting some of this written down, I’ve run a few test cases against the beast.

So, bottom line? What works:

  • Text indent (all paragraphs start out with a 4em text-indent)
  • Color * (greyscale only; colors are ignored)
  • Margin * (need to specify each direction individually, and left/right don’t work)
  • Text-Align
  • Text-Decoration * (overline doesn’t work)
  • <tt> (used to indicate monospaced fonts)
  • <em>
  • <b>
  • <i>
  • <strong>

What doesn’t work?

  • Padding of any sort
  • Text-Transform
  • Letter-Spacing
  • Word-Spacing
  • White-Space
  • <pre>

So far, that covers most of the text rules. Haven’t looked too far into positioning CSS yet, but the outlook doesn’t look too hot.

And because this sort of thing wouldn’t be complete without examples, here’s the HTML file used and the screenshots from the Kindle itself:

<html>
    <head>
        <title>Kindle Test Page«/title»
        <meta type="author" content="Paul 'Tester' Sweeney">
        <meta type="copyright" content="8-bitDesign">
        <meta type="description" content"This is a test page to test various CSS styles on the Kindle">
    </head>
    <body>
        <p style="margin:0 auto; width:100px;">margin:0 auto; width:300px;</p>
        <p style="text-indent:5em;">text-indent:5em;</p>
        <p style="border-bottom:1px dotted black;">border-bottom:1px dotted black;</p>
        <p style="background:black; color:white;">background:black; color:white;</p>
        <p style="color:#666;">color:#666</p>
        <p style="color:#333;">color:#333</p>
        <p style="color:#ccc;">color:#ccc</p>
        <p style="margin:5em;">margin:5em;</p>
        <p style="padding:5em;">padding:5em;</p>
        <p style="line-height:3em;">line-height:3em;</p>
        <p style="letter-spacing:1em;">letter-spacing:1em;</p>
        <p style="font-weight:bold;">font-weight:bold;</p>
        <p style="font-style:italic;">font-style:italic;</p>
        <p style="text-align:right;">text-align:right;</p>
        <p style="text-align:justify;">text-align:justify;</p>
        <p style="text-align:center;">text-align:center;</p>
        <p style="text-align:left;">text-align:left;</p>
        <p style="text-decoration:underline;">text-decoration:underline;</p>
        <p style="text-decoration:overline;">text-decoration:overline;</p>
        <p style="text-decoration:line-through;">text-decoration:line-through;</p>
        <p style="text-transformation:uppercase;">text-transformation:uppercase;</p>
        <p style="text-transformation:capitalize;">text-transformation:capitalize;</p>
        <p style="text-transformation:lowercase;">text-transformation:lowercase;</p>
        <p style="white-space:pre">white-space:pre;    this is a test         also:       test</p>
        <p style="white-space:nowrap">white-space:nowrap;    this is a test         also:     test; somereallyreallyreallyreallyreally
        <p style="word-spacing:3em;">word-spacing:3em;    this is a test         also:        test; some really really really really r
    </body>
</html>

Kindle test - Page 1Kindle test - Page 2

Comments are closed. Sorry, but them's the breaks. You can still use the contact page if you need to get a hold of me.