XML-Know How

Listen

Textinhalte mit wiederholendem Charakter wie beispielsweise Aufzählungen werden für eine bessere Übersicht in Form einer Liste dargestellt, die durch Aufzählungszeichen gegliedert wird. Listen werden grundsätzlich in ungeordnete Listen mit unbestimmten Aufzählungszeichen wie dem Halbgeviert-Strich oder dem zentrierten Punkt und geordnete Listen, die eine Reihenfolge wiedergeben, unterschieden.

In HTML wird diese Unterscheidung durch die Elemente ul („unordered list“) und ol („ordered list“) getroffen. Die einzelnen Listeneinträge stehen jeweils in einem li-Tag. Für weitere Listenebenen können die Listen-Container ineinander verschachtelt werden. Darüber hinaus existiert mit dem dl-Element („definition list“) eine Struktur für die Auszeichnung von Begriffs- und Definitions-Paaren. Dieses Listenelement bietet sich zum Beispiel für die Umsetzung eines Glossars im E-Book an.

Entsprechend der konsequenten Trennung von Inhalt und Darstellung wird der Stil der Liste im Stylesheet festgelegt. Zu den am häufigsten verwendeten Aufzählungszeichen bzw. Nummerierungen, die sich mit list-style-type definieren lassen, gehören die folgenden Werte.

  • disc (Standardwert für ul)
  • circle
  • square
  • none
  • decimal (Standardwert für ol)
  • lower-latin
  • upper-latin
  • lower-roman
  • upper-roman

Darüber hinaus kann mit der Eigenschaft list-style-image auch eine Grafik als Listenzeichen implementiert werden.

Grundsätzlich ist die Darstellung der Aufzählungszeichen abhängig vom Ausgabesystem. Da das Zeichen nicht Teil des Inhaltsdokuments ist, sondern über das Stylesheet generiert wird, wird es standardmäßig außerhalb des Seitenbereichs dargestellt. Um sicherzugehen, dass es nicht durch den Viewport des Lesegeräts abgeschnitten wird, sollte grundsätzlich ein linker Innenabstand von mindestens 1.0em für ul und 1.5em für ol definiert werden und die Darstellung individuell geprüft werden. Mit der Eigenschaft list-style-position:inside kann das Aufzählungszeichen alternativ innerhalb des Textblocks platziert werden, jedoch werden die nachfolgenden Zeilen in diesem Fall nicht eingezogen.

Um die Aufzählungszeichen unabhängig vom Inhalt zu stylen, muss der Listeninhalt separat ausgezeichnet werden. Dies lässt sich mit Hilfe eines span-Elements umsetzen.


<ul>
    <li><span>unsortierte Liste</span></li>
    <li><span>unsortierte Liste</span></li>
</ul>
Listing 4.17

Ausgehend von dieser Strukturierung kann mit dem Selektor li span der Textinhalt formatiert werden, die Darstellung der Listenzeichen wird über den ul-Selektor gesteuert, der nur für die Aufzählungszeichen nicht überschrieben wird.

Kästen

Textkästen werden zur Abgrenzung von Inhalten eingesetzt. Speziell bei informierenden Texten und Inhaltsstrukturen in Fach- und Lehrbüchern, die selektiv gelesen werden, können mit ihnen Textabschnitte vom Fließtext optisch eindeutig abgehoben werden.

Als klassische Gestaltungselemente für Kästen dienen Rahmenkonturen und Rasterunterlegungen. Bei Linienrahmen ist häufig eine Anpassung der Linienstärke an die Strichstärke der Schrift notwendig, um Text und Rahmen einheitlich zu gestalten. Ein bewusster Gegensatz kann hingegen als typografisches Mittel gezielt eingesetzt werden. Bei allen Kästen sind darüber hinaus der Innenabstand (der Abstand des Rahmens zum Text innerhalb des Rahmens) und der Außenabstand (der Abstand des Rahmens zum ihm umgebenden Text) weitere Faktoren für die Gestaltung.

Da mit dem section-Element Inhalte in HTML 5 semantisch gegliedert werden können, bietet es sich für die Umsetzung eines Textkastens an. Ist die Position und der Inhalt des Kastens nicht kontextabhängig, kann auch aside verwendet werden. Neben den aus vorherigen Abschnitten bereits bekannten Eigenschaften background-color, margin und padding sind die border-Eigenschaften für das CSS-Styling eines Kastens wichtig. Mit ihnen lassen sich Breite, Linienstil und Farbe des Rahmens festlegen.

Rahmen-Eigenschaft

CSS-Eigenschaft

Breite

border-width

Stil

border-style (Werte: dotted, dashed, solid, double, groove, ridge, inset, outset)

Farbe

border-color

Zusammenfassende
Angaben

border

Tab. 4.3 Die CSS-Rahmeneigenschaften

Diese Eigenschaften lassen sich jeweils auch individuell für die einzelnen Rahmenseiten border-top, border-right, border-bottom und border-left angeben. Das Styling für einen Kasten mit einfacher Kontur kann wie folgt aussehen:


section.kasten {
  margin-top: 1.0em;
  padding: 0.6em; 
  border: 1px solid #000000;
  background-color: #ebebeb;
}
Listing 4.18

Blockelemente laufen unabhängig vom Inhalt grundsätzlich über die ganze Seitenbreite. Mit den Eigenschaften width, min-width und max-width können absolute und relative Breiten in Bezug auf die Seite definiert werden. Um die Darstellung abhängig vom (Text-)Inhalt des Elements zu steuern, kann mit der Deklaration display: inline-block das Verhalten eines Inline-Elements erzielt werden, das nur den Platz (Breite) belegt, den es benötigt, ohne die Block-Eigenschaften zu verlieren.

Kindle Format 8

Durch die unmittelbare Unterstützung einiger neuer CSS 3-Funktionen lassen sich in KF 8 weitere Gestaltungen für Textkästen umsetzen. Mit der Eigenschaft border-radius erhalten Rahmen abgerundete Ecken. Dabei können die einzelnen Ecken mit border-(top/bottom)-(left/right)-radius angesprochen werden, oder mit border-radius unterschiedliche Werte angegeben werden, beginnend mit der oberen, linken Ecke im Uhrzeigersinn folgend (die Deklaration border-radius: 0.5em 0 0 0 entspricht border-top-left-radius 0.5em).

Zu den weiteren Möglichkeiten mit CSS 3 gehören Eigenschaften, die nicht in den Guidelines notiert sind und aufgrund ihrer Auffälligkeit nur sehr zurückhaltend für die Gestaltung von E-Book-Inhalten eingesetzt werden sollten. Eine Funktion ist –webkit-box-shadow, mit der ein Kasten mit einem weichen Schatteneffekt versehen werden kann. Die Syntax ist identisch zu dem im Kapitel „Auszeichnungen“ beschriebenen text-shadow, mit Werten für den horizontalen und vertikalen Abstand, dem Weichzeichnungsgrad und der Farbe. Mit dem zusätzlichen inset-Wert kann der Schattenffekt nach innen gesetzt werden.


section.kasten {
  […]
  -webkit-box-shadow: inset 2px 2px 3px black;
}
Listing 4.19 Textschatten

Lineare und radiale Verläufe können mit dem background-Wert -webkit-gradient implementiert werden. Das KF 8-Format setzt hierfür eine frühere Version der WebKit-Syntax ein.


section.kasten {
  […]
  background: -webkit-gradient(linear, left top, left bottom, from(#ff8fa7), to(#ffe8e8), color-stop(20%,#ffffff));
}
Listing 4.20 Linearer Verlauf

Der Verlauf wird dabei über einige Parameter definiert, die viele Möglichkeiten bieten. Mit linear wird zuerst die Art des Verlaufs angegeben. Anschließend werden Start- und Endpunkt definiert. Im Listing-Beispiel 4.20 geht der Verlauf von oben nach unten. Innerhalb from und to stehen die jeweiligen Verlaufsfarben. Mit der Funktion color-stop() lassen sich zusätzliche Verlaufsfarben und -positionen hinzufügen.

Mit der Eigenschaft -webkit-transform können Blockelemente zweidimensional verändert werden. Zu den möglichen Transformationen gehören translate für eine Verschiebung, rotate zur Drehung, die Skalierung mit skale und ein Verzerrung durch skew. Es lassen sich gleichzeitig mehrere Transformationen auf ein Element anwenden. Im nachfolgenden Beispiel wird der Textkasten gegen den Uhrzeigersinn gedreht und nach rechts verzerrt.


section.kasten {
  […]
  -webkit-transform: rotate(2deg) skew(8deg);
}
Listing 4.21

Tabellen

Tabellen werden für eine übersichtliche, geordnete Darstellung von Informationen, die in Bezug zueinander stehen, eingesetzt. Sie stellen aufgrund ihres komplexen Aufbaus die schwierigsten Strukturen im Buchsatz dar. Typografisch muss die eindeutige Differenzierung der Informationen und die optische Gliederung der Unterteilungen gewährleistet werden. Dabei kommen Abstände, Rahmen, Linien und Unterlegungen zum Einsatz. Neben der inneren Struktur muss beim Satz auch der Kontext der Buchseite berücksichtigt werden.

Zu den Bestandteilen einer Tabelle gehören die Kopf- und Fußzeilen, die Informationen in Bezug auf den Inhalt darstellen und der Tabellenkörper, der den eigentlichen Inhalt abbildet.

HTML und CSS ermöglichen die Strukturierung und Darstellung auch komplexer tabellarischer Informationen. Mit dem HTML-Tabellenmodell wird deren Aufbau zeilenweise strukturiert. Innerhalb der Bereiche thead, tfoot (optional) und tbody werden die Zeilen mit dem tr-Element ausgezeichnet, das jeweils th-Kopfzellen und td-Elemente für die Daten enthalten kann.

Tabellenstruktur

HTML-Element

Tabelle

table

Titel

caption

Kopf

thead

Fuß

tfoot

Körper

tbody

Zeile

tr

Kopfzelle

th

Inhaltszelle

td

Tab. 4.4 Die HTML-Tabellenelemente

Zusätzlich besteht auch die Möglichkeit, mehrere Zellen über die Zeile bzw. Spalte zu verbinden. Diese Überspannungen werden mit den Attributen rowspan bzw. colspan und einem Wert, der die Anzahl der Zellen angibt, ausgezeichnet.

Um individuelle Spalten per CSS anzusprechen, muss die Tabellenstruktur ergänzt werden. Hierzu können zu Beginn der Tabelle durch col bzw. colgroup einzelne Spalten oder Spaltengruppen festgelegt werden.

Für das CSS-Styling existieren Eigenschaften, die sich explizit auf Tabellen beziehen. Grundsätzlich kommen aber bekannte Eigenschaften wie padding und border zum Einsatz. Anhand der folgenden Struktur soll das CSS-Styling exemplarisch beschrieben werden:


<table>
  <thead>
    <tr>
      <th>Tabellenstruktur</th>
      <th>HTML-Element</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tabelle</td>
      <td><span class="code">table</span></td>
    </tr>
    <tr class="gerade">
      <td>Kopf</td>
      <td><span class="code">thead</span></td>
    </tr>
    <tr>
      <td>Fuß</td>
      <td><span class="code">tfoot</span></td>
    </tr>
    <tr class="gerade">
      <td>Körper</td>
      <td><span class="code">tbody</span></td>
    </tr>
    […]
    <tr class="gerade">
      <td rowspan="2">Überspannungen</td>
      <td><span class="code">rowspan</span></td>
    </tr>
    <tr>
      <td><span class="code">colspan</span></td>
    </tr>
  </tbody>
</table>
Listing 4.22 Beispiel einer HTML-Tabellenstruktur

Für die Lesbarkeit einer Tabelle sind eine gleichmäßige Ausrichtung der Spalten und eine sichtbare Trennung zwischen dem Tabellenkopf und den Daten wichtig. Eine mögliche CSS-Umsetzung, die die Tabelle mit einem übersichtlichen, rahmenlosen Layout versieht, wäre folgende:


table {
  font-family: DroidSans, sans-serif;
  font-style: normal;
  font-weight: normal;
  width: 100%;
  border-spacing: 2px;
}
th {
  font-weight: bold;
  color: #ffffff;
  background-color: #ff4000;
  text-align: left;
  vertical-align: top;
  padding: 0.2em 0.6em 0.2em 0.4em;
}
td {
  text-align: left;
  vertical-align: top;
  padding: 0.2em 0.6em 0.2em 0.4em;
  min-width: 25%;
}
tr.gerade td {
  background-color: #fff5f2;
}
Listing 4.23 CSS-Styling der Tabelle

Mit width: 100% wird die Tabelle, deren Breite sich standardmäßig am Inhalt orientiert, auf die volle Seitenbreite verteilt [5]. border-spacing legt den Abstand zwischen benachbarten Tabellenzellen fest [6]. Der Tabellenkopf th wird durch eine Hintergrundfarbe und Schriftauszeichnungen deutlich gemacht [8]. Mit der Eigenschaft vertical-align wird die vertikale Ausrichtung in Bezug auf die Zelle festgelegt, im Beispiel wird der Inhalt auch bei hohen Zellen oben ausgerichtet [13]. Damit Spalten, die anschließend an Zellen mit langen Texte stehen, nicht zu wenig Raum erhalten und „gequetscht“ werden, wird per min-width: 25% eine Mindestbreite für die Inhaltszellen td definiert [20].

04_05_tabelle.png
Abb. 4.5 Beispieltabelle unter Verwendung des CSS

Mit Hilfe eines HTML-Klassenattributs können die Tabellenzeilen individuell gestaltet werden. Im Beispiel werden alle geradzahligen Zeilen farbig unterlegt [23]. Werden einzelne td-Elemente durch einen Zellenrahmen unterteilt, kann mit border-collapse festgelegt werden, dass die Konturen mit benachbarten Zellen zusammenfallen und kein doppelter Rahmen dargestellt wird.

Generell ist die Darstellung speziell komplexer Tabellenstrukturen im E-Book aufgrund des Seitenkonzepts der Lesegeräte und der Displaybegrenzung problematisch. Lange Zeilen werden nicht vollständig dargestellt, Kopf- und Fußzeilen werden bei einem Seitenwechsel nicht wiederholt und umfangreiche Zellen führen zu einem unübersichtlichen Layout. Ausgehend von der umzusetzenden Tabelle muss aus diesem Grund individuell entschieden werden, ob die Tabellenstruktur funktioniert oder gegebenenfalls umstrukturiert und optimiert werden muss. Notfalls kann die Einbindung einer Grafik die letzte Lösung sein.