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.