In E-Books sieht man häufiger mal den Fall, dass Listen- und Fußnotentexte hinter dem Aufzählungszeichen nicht ordentlich ausgerichtet sind.
Hierbei handelt es sich um reine text-basierte Listen (fake Listen) die mit einem <p> oder einem <h> Element im HTML gekennzeichnet sind. Es handelt sich also nicht um automatische HTML-Listen (<ul> & <ol>). Solche text-basierten Listen werden häufig benutzt um das Aufzählungszeichen anders darstellen zu können oder aber auch um Fußnoten auszuzeichnen.
Ein Nachteil dabei ist. HTML kennt kein Tab-Trennzeichen. Somit ist der Leerraum zwischen Aufzählungszeichen und Text durch ein oder mehrere Leerzeichen aufgefüllt. Als Resultat hat man das oben gezeigte Ergebnis. Es geht aber auch mit einem anderen Weg mithilfe von CSS.
Zuerst kennzeichnet man das Aufzählungszeichen durch ein zusätzliches <span>-Element und weist jeweils ein Klasse zu (hier „liste“ für das p-Element und „listenzeichen“ für das span-Element):
<p class="liste"><span class="listenzeichen">•</span>Lorit estemquid untenim int ducilla quiame volorum as aliciatur sitas acea quam, quam soluptatae del molendit qui ni dis et faccata aspitatis sunt licia quibus aliqui si odit eatemod molles alique destincto quas as aceperchil mo tem vitem repuda diorest, serum incilique et min nihil modipsapicim si ipiscim quoditia voles sinus mintium que quam faccatae.</p>
Zuerst muss das Element „liste“ die Eigenschaft „margin-left“ bekommen um den ganzen Absatz einzuziehen. Der Wert kann frei gewählt werden, sollte aber vorzugsweise in einer dynamischen Maßeinheit angegeben werden. Die erste Zeile muss mit „text-indent“ zurück in die Ursprungsposition versetzt werden.
p.liste {
margin-left:1.5em;
text-indent:-1.5em;
}
Anschließend ist das Aufzählungszeichen an der Reihe. Damit das Tab-Trennzeichen simuliert werden kann, muss aus dem „span“-Element durch „display:inline-block“ ein Block-Level-Element erstellt werden. „text-indent“ wird vom übergestelltem Element vererbt. Damit das Aufzählungszeichen also sichtbar bleibt muss „text-indent“ hier wieder auf Null gesetzt werden.
Um die erste Textzeile an der nachfolgenden Textzeile auszurichten muss dem Aufzählungszeichen die gleiche Breite zugewiesen werden als wie der Absatz eingezogen ist. Hier: „width:1.5em“.
Als letztes gilt es noch einen Bug in Kindle vorzubeugen. Und zwar vererbt Kindle auch die margin-left-Eigenschaft, was es aber eigentlich nicht sollte. Diese muss dann auch nochmal auf Null gesetzt werden.
span.listenzeichen {
display:inline-block;
text-indent:0;
width:1.5em;
margin-left:0;
}
Mit diesen paar Zeilen wurde nun das Tab-Trennzeichen in HTML nachgerüstet.
