dyingeyes weblog: das persönliche Weblog von Boris Stumpf aus Frankfurt am Main

Neben den bekannteren Formen von Listen in HTML, der ungeordneten <ul> und der geordneten oder nummerierten Liste <ol>, gibt es einen weiteren vielseitigen Listentyp: die Definitionsliste <dl>. Die Definitionsliste stellt zwei Listenelemente zur Verfügung: den Definitionsausdruck (definition term) <dt> und die Definition (definition data) <dd>.

Das W3C hat sich bei der Elementdefinition nicht nur sehr flexibel gezeigt^*, was die vielseitige Verwendbarkeit von Definitionslisten angeht, es hat uns Webdesignern darüber hinaus auch keine Beschränkung auferlegt, wie viele Definitionsausdrücke <dt> und Definitionen <dd> wir in einem Zusammenhang verwenden. Wir verfügen mit der Definitionsliste also über ein semantisch vielseitiges Element.

Ich verwende hier im Blögchen Definitionslisten z.B. für bibliografische Angaben, wenn ich Bücher bespreche, wobei ich den Titel im <dt>-Element und den Originaltitel (bei übersetzten Büchern) sowie die Verlagsangaben in je einem <dd>-Element darstelle.

Eine weitere Möglichkeit für Definitionslisten ist die strukturierte Darstellung wörtlicher Wechselrede, wie sie z.B. bei gedruckten Interviews genutzt wird. In diesem Fall wird für den Fragenden das <dt>-Element verwendet, für den Befragten das <dd>-Element.

Wie im Buch

Eher klassisch, im Wortsinne, kommt die Definitionsliste in Glossaren oder FAQ zum Einsatz. Glossare kennt der Leser (nicht nur) wissenschaftlicher Fachbücher als Auflistung der verwendeten Fachbegriffe nebst Erläuterung, meist in oppositioneller Spaltendarstellung:

Wie realisiere ich eine solche oppositionelle Darstellung standardkonform und browsersicher?

Ich baue zunächst die Struktur in (X)HTML auf:

<dl class="glossar">
 <dt>background</dt>
 <dd>Angaben zum Hintergrund als Kurzform. Die Eigenschaft
 vereinigt die folgenden Eigenschaften</dd>
 <dt>background-attachment</dt>
 <dd>Fixieren der Hintergrundgrafik, fixed, inherit oder scroll</dd>
 ...
 ...
</dl>

Die Platzierung der Definitionselemente in Opposition und deren wunschgemäße Positionierung muss ich nun mittels Stylesheet vornehmen. Ich entscheide mich aufgrund der einfachen Realisierbarkeit und der Flexibilität für eine fließende Positionierung (float). Tatsächlich ist diese Art der Positionierung nicht ganz trivial, denn ich muss, um das Ganze wirklich flexibel zu halten, für eine Reihe möglicher Fälle vorsorgen.

Das Stylesheet: Fälle und Fallstricke

Schritt 1: Die oppositionelle Position

Ich platziere Definitionsausdruck und Definition auf derselben Zeile, indem ich ersteren per float: left; aus dem Dokumentfluss herausnehme und links neben die Definition verschiebe – die ein absatzgenerierendes (block-level) Element darstellt:

.glossar dt {
  float: left;
  ...
}

Schritt 2: Unterschiedliche Zeilenzahl und Laufweite

In Schritt 2 muss ich nun dem Umstand Rechnung tragen, dass die Definitionen in vielen Fällen mehrere Zeilen umfassen werden, der Definitionsausdruck jedoch immer nur eine Zeile benötigt. Gleichzeitig muss ich gewährleisten, dass ich jederzeit genügend Breite für die Definitionsausdrücke zur Verfügung habe.

Dabei will ich aber möglichst zuverlässig verhindern, dass bei unterschiedlicher Zeilenzahl die Definition sozusagen nach links ›zurückkehrt‹, indem sie den Definitionsausdruck wie ein Bild umfließt. Den Umfluss, wie ich ihn bei einem eingeschobenen Bild bevorzuge, und wie er bei Vergrößerung des Schriftgrades auftreten kann, möchte ich gerade vermeiden:

Da die Definition <dd> ein absatzgenerierendes Element ist, kann ich sie mit dem Setzen eines Außenabstandes (margin) vom linken Rand des umgebenden Elementes absetzen. Der ›fließende‹ Definitionsausdruck <dt> stört hierbei nicht. Ich wähle nun einen linken Rand (margin-left), der mir genügend Raum lässt, um auch längere Definitionsausdrücke fließend unterzubringen – und sorge damit gleichzeitig für eine visuell ansprechende Spaltendarstellung:

.glossar dd {
  margin-left: 15em;
  ...
}

Das Konstrukt ist nun stabil, indem die entstandene rechte Spalte jederzeit als Block erhalten bleibt, unabhängig von der Zeilenzahl.

Flexibilität

Um sicherzustellen, dass die auf diese Weise stabil oppositionell gesetzte Definitionsliste auch bei veränderter Schriftgröße im Browser des Betrachters ihr Layout behält, muss ich den vorgenannten margin-Wert mit der Maßeinheit »em« setzen. Den erforderlichen Wert ermittle ich anhand des längsten in meiner Liste vorkommenden Definitionsausdrucks – ich muss hier einfach etwas pi mal Daumen schätzen und auch gerne noch etwas Luft lassen. Im Beispielfall setze ich einen linken Rand von 15em (margin-left: 15em;). Damit verändert bei Veränderung der Schriftgröße lediglich die rechte Spalte (die Definitionen) ihre Breite und in Folge gegebenenfalls die Zeilenzahl, sofern sie vom umgebenden Element (z.B. einer Containerspalte) am Ausbreiten gehindert wird.

Zukünftig, wenn die gängigen Webbrowser die automatische Silbentrennung beherrschen, werden wir Webdesigner es etwas einfacher haben, denn wir werden bei längeren oder Bindestrich-getrennten Begriffen mit kontrolliertem Umbruch arbeiten können.

Das in den Bildern gezeigte Beispiel einer oppositionellen Definitionsliste ist als Demo in HTML und CSS zu sehen und steht zu eigenen Tests, Versuchen und Verwendung natürlich frei zur Verfügung.

^* »Definition lists, created using the DL element, generally consist of a series of term/definition pairs (although definition lists may have other applications).«

Dieser Inhalt (Textbeitrag und Fotos) ist unter einer Creative-Commons-Lizenz BY-NC-ND lizenziert.

Kategorie(n): Webdesign
Tags: CSS, Definitionslisten, Float, HTML, Listen, Webstandards

Kommentare und Pings geschlossen.

Kommentar-Feed (RSS) zu diesem Artikel