Kindle CSS Weirdness

Here are some Kindle CSS gotchas I’ve come across recently. I’ll update this post with more such oddities as (or if) I come across them.

  • text-align:center; fails if designated as !important, even if the left and right margins are set to zero.
  • text-indent:0; fails (ignored). It works if you specify the measurement: text-indent:0em;

These quirks are present in each of the reader programs I tried: Kindle Previewer, Kindle for PC, and Mobipocket Reader. This leads me to suspect that they are bugs in Kindlegen rather than in the Kindle reading software; I don’t know how Kindlegen works but my guess is that it contains a CSS translator that generates inline formatting, leading to possibilities of flawed HTML being generated if the translation code isn’t spot-on. If so, we can hope that these quirks will be fixed in a future Kindlegen release. In the meantime, the potential work-arounds/trade-offs are obvious — but note that Stanza on iPad requires !important in order to center body text; you might want to force body text centering on Kindle by using <div style="text-align:center;"><p class="MyCenteredClass">...</p></div> instead, in order to maximise the portability of your ePub.

Leave a Reply

Your email address will not be published. Required fields are marked *