Search code examples
kindle

How to align table data for Kindle (KF8)

I'm doing my first steps with the kindle format KF8. The Publishing Guidelines states that the format supports CSS3:

The earlier Kindle platform offered very basic support for Cascading Style Sheets (CSS). This has been significantly enhanced in KF8 with support for CSS 2/CSS 3.

Now this seems to be "very basic" here: I want to right align text in a table cell. Compare the output of Chrome vs kindlegen 2.9 / Kindle Previewer 2.94. Kindle Preview ignores the alignment completely.

What am I doing wrong?

Chrome vs Kindle Preview

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Table sample</title>
        <meta charset="utf-8" />
        <style>
td.right {
    padding: 2px 4px;
    text-align : right;
}

td.left {
    padding: 2px 4px;
    text-align : left;
}

td.center {
    padding: 2px 4px;
    text-align : center;
}

h2 { color: green; }

</style>
    </head>
    <body>
        <a name="part2_chap1"/>
        <article role="main">
            <header class="chapter">
                <hgroup>
                    <h2>ALIGNMENT</h2>
                </hgroup>
            </header>
            <div class="epigraph">
                <p class="noind">How to right align table data</p>
            </div>
            <section class="table" id="table01">
                <table>
                    <tr>
                        <th>
                            <i>---center---</i>
                        </th>
                        <th>
                            <i>---right---</i>
                        </th>
                        <th>
                            <i>---right---</i>
                        </th>
                        <th>
                            <i>---left---</i>
                        </th>
                    </tr>
                    <tr>
                        <td class="center">---centered---</td>
                        <td class="right">right&gt;</td>
                        <td class="right">right&gt;</td>
                        <td class="left">&lt;left</td>
                    </tr>
                    <tr>
                        <td class="center">centered</td>
                        <td class="right">right&gt;</td>
                        <td class="right">right&gt;</td>
                        <td class="left">&lt;left</td>
                    </tr>
               </table>
            </section>
        </article>

    </body>
</html>
Solution

  • It's frustrating when you have to make such workarounds in the name of styling, but I would advise applying the text alignment to a containing element within the td, e.g.

    Stylesheet snippet:

    td.right div {         
     width: 100%;
     text-align: right;
 }

    Html snippet:

    <tr>
    <td class="right"><div>right&gt;</div></td>
</tr>

    Hopefully this will suit your needs until Amazon tidy this up.