2015-12-13 9 views
5

Ich mache meine ersten Schritte mit dem Kindle-Format KF8. Der Publishing Guidelines Zustand, dass das Format unterstützt CSS3:Wie Tabellendaten für Kindle (KF8) ausgerichtet werden

Die frühere Kindle-Plattform sehr grundlegende Unterstützung angeboten für Cascading Style Sheets (CSS). Ich mag nach rechts Ausrichten von Text in einer Tabellenzelle: Dies wurde in KF8 mit Unterstützung für CSS 2/CSS 3.

Nun scheint dies zu sein „sehr einfach“ hier deutlich verbessert. Vergleichen Sie die Ausgabe von Chrome vs Kindlegen 2.9/Kindle Previewer 2.94. Kindle Preview ignoriert die Ausrichtung vollständig.

Was mache ich falsch?

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> 

Antwort

2

Es ist frustrierend, wenn man solche Umgehungen im Namen Styling machen müssen, aber ich würde Ihnen raten, in der td die Textausrichtung zu einem Aufnahmeelement Anwendung, z.B.

Sheet-Snippet:

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

Html-Schnipsel:

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

Hoffentlich wird Ihre Bedürfnisse, bis Amazon ordentlich dies gerecht werden.

+0

Vielen Dank, das funktioniert. Es funktioniert nicht, sobald es in der Zelle so etwas wie ein Hochgestelltes gibt, aber ich bin froh, hier zumindest eine rudimentäre Layout-Option zu haben. Unterstützung für CSS hier zu beanspruchen ist ein Witz, geschweige denn CSS3. – ratlan