CSS text-indent – Referenz, Beispiel und Labor

stylesheet.css · text-indent

.probe {
  text-indent: 32px;
}

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-indent: 32px

Box-Breite–

Box-Höhe–

Erläuterungen

text-indent dient der Definition des Einzuges der ersten Zeile in einem Absatz. Ist die Schreibrichtung ltr, erfolgt der Einzug auf der linken Seite, ist sie rtl, erfolgt er auf der rechten Seite.

Erlaubte Werte

Tipps:

Die Eigenschaft text-indent erlaubt nur den Einzug der ersten Zeile eines Absatzes. Möchte man den Einzug auf alle Zeilen eines Absatzes ausdehnen, verwendet man am besten padding. Auf keinen Fall sollte man solche Einzüge mit Elementen wie blockquote realisieren.

Da die Eigenschaft text-indent vererbt wird, beeinflusst sie auch Inline-Block- Elemente als Kind- Elemente, wenn sie an Block- Elemente angebracht wird. Unerwünschte Effekte vermeidet man, indem man für Inline-Block- Elemente text-indent:0; deklariert.

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

'text-indent'
<length> | <percentage> | inherit

<length>: Ein absolutes oder relatives Längenmaß. Negative Werte sind erlaubt, in dem Fall wird die erste Zeile nicht eingezogen, sondern nach außen geschoben. Es hängt von der Eigenschaft overflow ab, ob der Text vollständig sichtbar ist.; Mehr Informationen über Längenwerte in CSS finden Sie im Grundlagenartikel Längenwerte.
<percentage>: Prozentwert in Bezug auf die Breite des umschließenden Blocks. Dieser Wert ist unabhängig von der Breite des Elementes.
inherit: Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel

P { text-indent: 1.5em; }

Browserunterstützung

: Die Eigenschaft text-indent wird von allen modernen Browsern ohne Einschränkung 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

:lang, overflow

Nur die erste Zeile, und warum das genügt

Der Einzug wirkt auf die erste Zeile eines Blocks, nicht auf die erste Zeile jedes Absatzes im Element und nicht auf die Zeile nach einem Umbruch. Bei einem Absatz ist beides dasselbe; bei einem Block, der mehrere Absätze enthält, nicht.

Der Hinweis auf der Seite trifft den verbreitetsten Fehler: Wer alle Zeilen einrücken will, braucht einen Innenabstand oder einen Außenabstand, nicht diese Eigenschaft. Sie ist für den Erstzeileneinzug des Werksatzes gedacht, der Absätze voneinander trennt, ohne dass zwischen ihnen Platz gelassen werden muss.

Negative Werte sind zulässig und ergeben den hängenden Einzug: die erste Zeile ragt nach links heraus, die folgenden stehen eingerückt. Zusammen mit einem Innenabstand derselben Größe entsteht daraus die Form, die für Literaturverzeichnisse und Glossare üblich ist.

Prozentwerte und Vererbung

Ein Prozentwert bezieht sich auf die Breite des umschließenden Blocks. Er wird nicht beim Setzen umgerechnet, sondern bleibt ein Prozentwert und wird bei jeder Breitenänderung neu berechnet, was den Einzug mit der Spaltenbreite mitwachsen lässt.

Bei der Vererbung wirkt das anders, als man erwartet. Vererbt wird der berechnete Wert, und bei einem Prozentwert ist das die daraus errechnete Länge, bezogen auf den Block des Elternelements. Ein Kind mit anderer Breite erbt also den Einzug des Elternelements und nicht denselben Prozentsatz seiner eigenen Breite.

Die Schreibrichtung entscheidet über die Seite: bei Text von links nach rechts wird links eingerückt, bei umgekehrter Richtung rechts. Die Eigenschaft ist damit eine der wenigen aus CSS 2.1, die sich mit der Richtung dreht.

Besonderheiten im Medientyp `handheld`

Diese Eigenschaft ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1. Man sollte jedoch damit rechnen, dass eine Deklaration von text-indent durch die Mobilgeräte zugunsten der besseren Ausnutzung des Displays ignoriert wird.

Weitere Charakteristika

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

Ausgangswert: 0
Berechneter Wert: Spezifizierter %-Wert oder absolute Länge
Vererbung: Ja
Anwendbarkeit: Auf Block- Level- Elemente
%-Bezugswert: Breite des umschließenden Blocks
Mediengruppe(n): Visual

Ausblick

Das neue CSS-3-Modul Text enthält einige erweiterte Möglichkeiten der Textgestaltung und -Formatierung, konzentriert sich aber 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-indent