CSS 2.1: `text-align`

Erläuterungen

Diese Eigenschaft dient der horizontalen Textausrichtung. Technisch gesehen lässt sich text-align nur auf Block- Level- Elemente anwenden. Die Eigenschaft beeinflusst dann nur die darin liegenden Line- Boxes bzw. Inline- Boxes, nicht aber Block- Level- Elemente. Das bewirkt, dass die Textzeilen nach den Rändern des umschließenden Block- Level- Elementes ausgerichtet werden, nicht nach den Rändern des Browserfensters.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'text-align' left | right | center | justify | inherit

left: Textausrichtung am linken Rand des Elements. Dies ist der Ausgangswert, wenn als Schreibrichtung 'links-nach-rechts' eingestellt ist.
Textausrichtung nach bestimmten Zeichen an einer gedachten vertikalen Linie.
Regeln für dieses Beispiel:
TABLE#im TD { text-align: ","; } #im TD:first-child { text-align: "/"; }
right: Textausrichtung am rechten Rand des Elements. Dies ist der Ausgangswert, wenn als Schreibrichtung 'rechts-nach-links' eingestellt ist.
center: Textausrichtung an einer gedachten senkrechten Linie in der Mitte des Elements. Der Abstand zwischen Text und Rand des Elements wird auf beide Seiten gleich verteilt.
justify: Blocksatz - der Text schließt links und rechts direkt am Rand des Elements an. Dazu ist es dem Anwenderprogramm erlaubt, die Inline- Boxes sowohl zu strecken als auch seitlich zu verschieben. Dies ist auch abhängig von der Werten der Eigenschaften letter-spacing und word-spacing.
<string>: Ein Zeichen oder eine Zeichenkette, nach der die Inhalte von allen Tabellenzellen ausgerichtet werden, die untereinander in einer Spalte liegen. Die Ausrichtung erfolgt entlang einer gedachten senkrechten Linie. Das in der CSS-Regel genannte Zeichen liegt direkt rechts dieser Linie (bei Schreibrichtung 'links-nach-rechts'), bzw. links der Linie (bei Schreibrichtung 'rechts-nach-links'). Wendet man diesen Wert auf andere Elemente als auf Tabellenzellen an, wird er entweder als left oder right interpretiert, abhägig vom aktuellen Wert der Eigenschaft direction.; Praktische Anwendungsmöglichkeiten für diesen Wert sind z. B. Preistabellen oder Formulare. Er ist aber ebenfalls eines der mit CSS 2 eingeführten Merkmale, die bis jetzt noch kein Browser reproduziert. Sie wurden deshalb nicht mit nach CSS 2.1 übernommen. So bleibt nur, die Inhalte wie bisher in zwei Tabellenzellen aufzuteilen, von denen die linke nach rechts orientiert und die rechte nach links orientiert ist.
inherit: Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel:

TD.preis { text-align: "$"; } /* Preisliste */ #main-text P { text-align: justify; }

Browserunterstützung

: Die Eigenschaft text-align mit Ausnahme des Wertes <string> wird von allen modernen Browsern unterstützt.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen:

direction,
letter-spacing, word-spacing

Besonderheiten im Medientyp `handheld`:

Diese Eigenschaft ist mit Ausnahme des Wertes string Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1.

Weitere Charakteristika:

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangs- wert:	Berechneter Wert:	Vererbung:	Anwendbar- keit:	%-Bezugs- wert:	Medien- gruppe(n):
Abhängig von Anwenderprogramm und Schreibrichtung	Spezifizierter Wert	Ja	Auf alle Block- Level- Elemente; der Wert `<string>` nur auf Tabellenzellen	Nicht zutreffend	Visual

Ausblick:

Das neue CSS-3-Modul Text enthält einige erweiterte Möglichkeiten der Textgestaltung und -Formatierung, konzentriert sich dabei im Wesentlichen auf die fernöstlichen mehrdirektionellen Textarten.