CSS text-align – Referenz, Beispiel und Labor

stylesheet.css · text-align

.probe {
  text-align: center;
}

Der Webautor schreibt einen Absatz, der Browser setzt ihn nach den Regeln des Stylesheets. Groß- und Kleinschreibung, Abstand, Farbe und Schnitt hängen an genau einer Eigenschaft.

berechneter Werttext-align: center

Box-Breite–

Box-Höhe–

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

Der Blocksatz und seine Voraussetzungen

Von den vier Werten ist der Blocksatz der einzige, der etwas berechnet. Die anderen ordnen die fertige Zeile an; er verteilt den Rest der Zeile auf die Zwischenräume, damit beide Kanten glatt werden.

Das setzt Bedingungen voraus, die im Web selten erfüllt sind. Guter Blocksatz braucht eine ausreichende Zeilenlänge und eine Silbentrennung, damit die Verteilung nicht auf wenige Wörter fällt. Fehlt die Trennung, entstehen Zeilen mit auffällig großen Zwischenräumen, und wenn diese Löcher in mehreren Zeilen untereinanderstehen, ziehen sich sichtbare Bahnen durch den Absatz.

Weil die Silbentrennung lange nicht verfügbar war, hat der Blocksatz im Web einen schlechten Ruf. Inzwischen gibt es sie, sprachabhängig und über eine eigene Eigenschaft gesteuert, und damit ist auch der Blocksatz wieder eine Möglichkeit, sofern die Sprache des Dokuments ausgezeichnet ist.

Worauf sich die Ausrichtung bezieht

Die Seite hält den entscheidenden Punkt fest: die Eigenschaft richtet den Inhalt innerhalb eines Blocks aus, nicht den Block selbst. Ein Element mit fester Breite lässt sich damit nicht in seinem Elternelement zentrieren; dafür sind die Außenabstände zuständig.

Vererbt wird sie und wirkt damit auf alle Blöcke innerhalb des Elements, an dem sie steht. Das ist bequem für ganze Abschnitte und wird zum Problem, wenn ein zentrierter Bereich Elemente enthält, deren Text linksbündig bleiben soll: dort muss die Ausrichtung ausdrücklich zurückgesetzt werden.

Ausgerichtet wird gegen die Kanten des umschließenden Blocks, nicht gegen das Fenster. Das klingt selbstverständlich, erklärt aber die geläufige Beobachtung, dass zentrierter Text nicht in der Mitte der Seite steht: der Block, in dem er liegt, steht selbst nicht in der Mitte.

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.

Ausgangswert: Abhängig von Anwenderprogramm und Schreibrichtung
Berechneter Wert: Spezifizierter Wert
Vererbung: Ja
Anwendbarkeit: Auf alle Block- Level- Elemente; der Wert <string> nur auf Tabellenzellen
%-Bezugswert: Nicht zutreffend
Mediengruppe(n): 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.

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.

CSS-Eigenschaft text-align