Tag Archives: Centering

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.

ePub-compatible Kindle Centering

Amazon’s current Kindle-formatting guidelines offer two ways of centering content. The recommended method is to enclose the element within <center>...</center> tags, and the alternative is to apply the formatting within the element’s tag: <p align="center" style="text-indent:0">...</p>.

Unfortunately, neither of those methods are ePub-compatible; they will cause the ePub version of the book to fail validation. In the meantime, using simple CSS centering that’s suitable for ePub formatting, such as h3 {text-align:center;} doesn’t work on Kindle.

Handcrafted Ebooks offers a general solution to such cases where the ePub and Kindle versions of a book require different formatting or content, based on text-processing tools that generate the appropriate coding for ePub and Kindle as needed. The advantage of this is that it’s possible to use advanced ePub formatting, while also creating (simplified) Kindle files from the same set of XHTML sources. The disadvantages are that it adds complexity to your workflow, and that your published ePub file can’t simply be turned into a Kindle file by running it through Amazon’s Kindlegen converter. (Or at least, such a conversion will not lead to professional-looking results).

To help get around these two problems, I’ve now found two ePub-compatible ways to center elements on Kindle. Firstly, you can code heading elements directly in CSS; you just have to force the left- and right-margins to be zero. For example: h3.title {font-weight:bold; text-align:center; margin:0 0 0.75em 0 !important; page-break-after:avoid;}. Secondly, you can wrap content in a <div style="text-align:center;">...</div> block. You can also apply a CSS class to the <div> tag, of course, so you can make it do the more usual kind of CSS centering used with ePubs as well.

In the version of Gerard’s Herbal that will be offered to retail stores, I used the first method to center titles, and the second method to center images. The second method also works on body text (update: I’ve found a case where it failed, while trying to center several lines of body text in a short file. Possibly Kindle makes a judgement about the proportion of body text you’re trying to center, much as iBooks seems to. In any case, I was able to center the text by applying style="text-align:center;" to each paragraph individually).

It’s important to note that the above centering methods are not documented in the current Amazon Kindle Formatting Guidelines, and therefore technically they are unsupported and might possibly stop working in future. On the other hand, if the different centering requirements of ePub and Kindle are the only things keeping you from having an ePub file that’s fully portable to Kindle, simply by running it through Kindlegen, then you might well decide that the downside of using an unsupported/undocumented feature is worthwhile.