How to match table data for Kindle (KF8)

I am taking my first steps in the Kindle KF8 format. Publishing rules indicate that the format supports CSS3:

The earlier Kindle platform offered very basic support for Cascading Style Sheets (CSS). This is greatly improved in KF8 with support for CSS 2 / CSS 3.

Now this seems β€œvery simple" here: I want to align text in a table cell. Compare the results of Chrome vs kindlegen 2.9 / Kindle Previewer 2.94. Kindle Preview completely ignores alignment.

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> 
+5
source share
1 answer

This is frustrating when you have to do such workarounds in the name of style, but I would advise applying text alignment to the containing element in td , for example.

Style shots:

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

HTML fragment:

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

Hope this suits your needs until Amazon takes it away.

+2
source

Source: https://habr.com/ru/post/1238011/


All Articles