Das Modell der visuellen Formatierung

Das Modell der visuellen Formatierung beschreibt, wie die Elemente innerhalb eines Webdokuments generiert und dargestellt werden, in welchem Verhältnis sie zueinander stehen und welche gegenseitigen Abhängigkeiten existieren. Es bezieht sich auf Medien, die der Mediengruppe visual zugeordnet sind und ist damit auf die folgenden Medientypen beschränkt: handheld, print, projection, screen, tty und tv. Die Auswirkungen der auf dieser Seite beschriebenen Berechnungen lassen sich gut beobachten, wenn man ein Browserfenster in der Größe verändert.

Der Bildschirm ist heute immer noch das wichtigste Medium im Web, deshalb nimmt auch die visuelle Formatierung in CSS einen relativ breiten Raum ein: allein 3 der 18 Abschnitte in der Spezifikation CSS 2.1 sind diesem Thema gewidmet.

Bei der Ausgabe eines Webdokuments muss der Browser grundsätzlich immer die gleichen Fragen beantworten:

Wie werden die am Bildschirm dargestellten Boxes zuerst erzeugt?
Nach welchem Schema werden die Boxes dann positioniert oder platziert?
Wie werden die Abmessungen und die Lage jeder Box bestimmt?
Was passiert, wenn Kindboxes über die Ränder der Elternbox hinaus stehen?
Welche Box wird ausgegeben, wenn mehrere Boxes denselben Platz auf dem Bildschirm beanspruchen?
Welchen Einfluss haben nicht-westliche Schreibrichtungen auf die Ausgabe der Boxes?

Die Antworten zu diesen sechs Fragen bilden deshalb die sechs Abschnitte des Modells der visuellen Formatierung. Man kann zusätzlich das Boxmodell und das Line- Box- Modell als Teile des Modells der visuellen Formatierung auffassen, das ist aber auch eine Frage der Philosophie.

Wir dürfen bei alledem aber nicht den Unterschied zwischen Elementen und Boxes vergessen. Elemente sind die Dinge, die wir auf dem Bildschirm sehen. Boxes sind unsichtbare Vierecke, also gedachte Hilfskonstruktionen, mit deren Hilfe die Elemente am Bildschirm platziert werden. Jedes Element erzeugt seine eigene Box und die umschließende Box für alle Nachfahrenelemente.

Im Folgenden sollen die sechs Fragen beantwortet werden, soweit die Antworten nicht auf anderen Seiten bereits gegeben sind.

Der Wert run-in korrekt dargestellt.
Oben: normale Darstellung einer Überschrift h2.
Mitte: h2 { display: run-in } mit nachfolgender Block- Box.
Unten: h2 { display: run-in } mit nachfolgender Inline- Box.

Generierung der Boxes

Wir können die HTML-Elemente in zwei Gruppen einteilen: Block- Level- Elemente, die Block- Boxes erzeugen, und Inline- Level- Elemente, die Inline- Boxes generieren. Diese beiden Zustände lassen sich auch durch die Werte block und inline der Eigenschaft display einstellen.

Run-In-Boxes

Display bietet zusätzlich den Wert run-in zur Generierung von Run-In-Boxes. Allgemein ausgedrückt, sind dies Block- Boxes, die in die nachfolgende Block- Box integriert und dem darin vorhandenen Inhalt vorangestellt werden. Eine Run-In-Box wird dadurch zur ersten Inline- Box der auf sie folgenden Block- Box, falls diese nicht floatiert oder absolut positioniert ist.

Enthält die Run-In-Box jedoch ihrerseits eine Block- Box als Nachkommenelement, dann wird sie selbst zur Block- Box.

Auch in allen anderen als den beiden oben genannten denkbaren Fällen wird eine Run-In-Box zur Block- Box.

Eine Run-In-Box erbt die Eigenschaften ihres Elternelementes, nicht die des Elementes, in das sie sich integriert. Run-In-Boxes verhalten sich ählich wie Inline-Block- Boxes, sollten mit diesen aber keinesfalls verwechselt werden.

Positionierungsschemata

In CSS 2.1 gibt es drei Möglichkeiten, Boxes zu positionieren. Mit Hilfe dieser Positionierungsarten allein ist es möglich, die Zugänglichkeit einer Website erheblich zu steigern, denn sie machen die Verwendung unsichtbarer Grafiken zu Layout-Zwecken komplett überflüssig.

Erste Möglichkeit: Wir greifen nicht in die Positionierung ein und lassen den Elementen die Freiheit, ihre Boxes selbst zu positionieren. Sie nehmen dadurch auf dem Bildschirm einen Platz ein, der ihrer Reihenfolge und ihrem Auftreten im Dokumentstammbaum entspricht. Dies ist der normale Elementfluss.

Dieses Schema umfasst alle Block- Boxes, Inline- Boxes und Run-In-Boxes, deren Positionierung als statisch oder relativ definiert ist (position: static oder position: relative).
Wir können Boxes aber auch an einer bestimmten Stelle aus dem normalen Fluss lösen und sie ganz links oder ganz rechts am Rand des umschließenden Blocks (sprich: des Elternelementes) platzieren. Dieses Verfahren heißt floatierte Positionierung. Wir nutzen dazu die Eigenschaften float und clear. Die Einzelheiten des Schemas der floatierten Positionierung ist bereits in der Referenz der Eigenschaft float erläutert.
Schließlich lassen sich Elemente auch vollständig aus dem normalen Fluss herauslösen und unabhängig, also nicht relativ zu anderen Elementen, am Bildschirm platzieren. Diese Möglichkeit wird absolute Positionierung genannt. Sie wird durch die Werte absolute oder fixed der Eigenschaft position deklariert. Dazu sind im Regelfall auch eine oder zwei der Eigenschaften top, right, bottom oder left notwendig.

Ermittlung von Abmessungen und Lage der erzeugten Boxes

Die Bestimmung der bildschirmgeografischen Lage der Elemente ist ein Gebiet, das theoretische und sehr detaillierte Beschreibungen erfordert, wenn es richtig erklärt werden soll. Das macht die Erläuterungen dazu relativ langwierig. Sie wurden deshalb auf die Extraseite 'Visuelle Formatierung — Breite und Höhe' ausgelagert.

Überfließen und Abschneiden von Inhalten

Dieser Punkt behandelt die Möglichkeit, Elemente unter bestimmten Bedingungen nur teilweise darzustellen. Das kann einmal der Fall sein, wenn ein Element über den Rand des umschließenden Blocks hinaussteht. Wie dann verfahren wird, regelt die Eigenschaft overflow.

Der andere Fall ist gegeben, wenn wir von einem Element einen bestimmten Teil ausschneiden und nur diesen Teil darstellen wollen. Das geht mit Hilfe der Eigenschaft clip.

Stapeln von Elementen

Dieser Abschnitt definiert ganz allgemein, welche Teile eines Webdokuments welche anderen Teile verdecken können. Im Einzelnen gibt es folgende Regelungen:

Rahmen und Hintergründe von Block- Level- Elementen im normalen Fluss:: Innerhalb des Elements stehen Hintergrundbilder vor der Hintergrundfarbe. Falls ein Rahmen deklariert wurde, steht dieser wiederum davor, er verdeckt also einen Teil des Hintergrundes.
Rahmen und Hintergründe von Tabellen:: Welche Eigenschaften hier Vorrang haben, ist abhängig davon, an welchem Element innerhalb der Tabelle sie angebracht werden. Die Reihenfolge von vorne nach hinten ist: Zellen (td ,th), Reihen (tr), Reihengruppen (thead, tfoot, tbody), Spalten (col), Spaltengruppen (colgroup), Tabelle(table). Mehr dazu ist im Abschnitt Das CSS-Tabellenmodell des Artikels 'Tabellenformatierung mit CSS' erklärt.
Positionierte Elemente:: Die Schichtung von positionierten Elementen ist abhängig vom Z-Index. Die Elemente werden hintereinander gestaffelt abhängig davon, ob sie einen aktuellen Schichtungskontext oder einen lokalen Schichtungskontext etablieren. Was das bedeutet und wie das vor sich geht, ist bereits im Referenzartikel zur Eigenschaft z-index erläutert.
Float-positionierte Elemente:: Für floatierte Elemente ergibt sich die Staffelung aus ihrer Reihenfolge im Dokumentstammbaum unterhalb ihres Elternelements. Von float-Elementen abstammende Elemente werden im Schichtungskontext des Elternelements eingegliedert, ähnlich wie im Fall des lokalen Schichtungskontexts der positionierten Elemente.
Inline- Level- Elemente:: In den Line- Boxes (sprich: Textzeilen) wird die Schichtung für jede Zeile einzeln bestimmt. Dabei gilt für Hintergrund und Rahmen dieselbe Reihenfolge wie für Block- Level- Elemente. Für die Inline- Level- Elemente innerhalb der Zeile spielt auch die Textdekoration eine Rolle: underline und overline verdecken ggf. Textteile, alle Inline-Level-Nachkommen und line-through stehen 'hinter' dem Text.

Schreibrichtung

Die Sprache von Webdokumenten wird in der Regel mit dem HTML-Attribut lang oder durch Metadaten festgelegt. Seitdem HTML 4.01 und Unicode zu geltenden Standards wurden, kann Text in Webseiten auch von rechts nach links laufen, vorausgesetzt, dass eine entsprechende Sprache wie z. B. 'hebrew' (hebräisch) vorgegeben ist. Browser dürfen die Schreibrichtung aber nicht aus dem Attribut lang herleiten.

In CSS 2.1 sind allein die beiden Eigenschaften direction und Unicode- bidi zur Einstellung der Schreibrichtung vorgesehen. An dieser Stelle sei deshalb zuerst auf die Referenz zur Eigenschaft direction und zur Eigenschaft unicode-bidi verwiesen. Hier wollen wir uns nur ein kleines Beispiel ansehen, das die Effekte praktisch zeigt.

Ein Beispiel:

Der folgende Absatz enthält eine Mischung deutscher und hebräischer Worte, die hebräischen Zeichen sind in Unicode notiert. Hier zuerst der Quellcode:

Haus1 תיה2 Berg3 Zelt4
הר5 א׀הל6

Das Kürzel "05ea" am Beginn entspricht dem Zeichen 'ת' und "05dc" am Ende entspricht dem Zeichen 'ל'. An jedes 'Wort' ist zur Kennzeichnung der ursprünglichen Reihenfolge eine Ziffer von 1 bis 6 angehängt. Daran kann man erkennen, dass die hebräischen Textteile, jedes für sich, von rechts nach links ausgegeben werden. Sie behalten also ihre natürliche, im Unicode verankerte Schreibrichtung bei. Das ist die Bedeutung der Bidirektionalität: