text-indent – hängender Einzug
In Büchern und im Spaltensatz von Zeitschriften oft zu sehen: Die erste Zeile eines Absatzes wird eingezogen, allerdings nicht beim ersten Absatz nach einer Überschrift. Das lockert das Textbild auf und bringt dem Leser die Gedankengänge des Autors näher. In Satzprogrammen und der Textverarbeitung wie Word, Pages oder Open Office wird diese Textauszeichnung als hängender Einzug oder hängender Absatz bezeichnet.
Auf Webseiten bevorzugen wir einen Durchschuss, den Freiraum zwischen Absätzen, der durch das eingebauten margin-top und margin-bottom für Textabsätze beim p-Tag automatisch erzeugt wird. AGBs und ähnliche Vertragstexte sehen wir häufig mit einem Einzug, der komfortabel und effizient durch CSS text-indent erzeugt wird.
Text einrücken
Das Einrücken eines neuen Absatzes anstelle einer Leerzeile oder eines größeren Zeilenabstands sorgt für Ruhe im Schriftbild.
Der Einzug bei einem neuen Absatz stellt stellt eine kleine Pause, einen neuen Gedanken oder kleinen Themenwechsel heraus, aber unterbricht den Lesefluss nicht.
Das Webdesign bevorzugt eher den Abstand zwischen aufeinanderfolgenden Absätzen als das Einrücken des Textes durch text-indent, denn im frühen Internet gab es kein CSS für typografische Feinheiten.
Im Spaltensatz der Druckerzeugnisse hätte der Durchschuss die Absatzformatierung erschwert.
p {
text-indent: 2em;
margin: 0;
}
h6 + p {
text-indent: 0;
}
text-indent vs Zeilenabstand
Das HTML p-Tag ist von Haus aus schon mit einem Abstand zu den folgenden Absätzen vorbelegt, weil CSS erst später hinzukam. Dieser Abstand wird durch CSS margin bestimmt. Im Beispiel oben ist margin: 0 gesetzt, um den Abstand zwischen den Absätzen auszuschalten.
Werte für text-indent
- text-indent
- Wenn length oder percentage negativ sind, wird die Linie nach links ausgezogen. Ein positiver Wert zieht den Text nach rechts ein.
- Werte
- %, px, em, ex, rem, pt, in, mm, cm
- hanging
- Alle Zeilen außer der ersten einrücken (neuer Wert, der zurzeit von keine Browser unterstützt wird, für die nächste Version von Safari angekündigt).
- each-line
- Alle Zeilen nach einem harten Zeilenumbruch (<br>) einrücken (neuer Wert, der zurzeit von keine Browser unterstützt wird, für die nächste Version von Safari angekündigt).
Text nach links ausziehen
Mit einem negativen Wert zieht text-indent den Text nach links aus. Das hebt zum Beispiel Überschriften gut vom Fließtext ab.
h6.auszug { text-indent: -1em; }
Eine Alternative für den Fließtext ist das HTML dl-Element mit folgenden dt- und dd-Elementen. Der Text in dt wird linksbündig dargestellt, der Inhalt des dd-Elements nach rechts eingerückt.
Dieses Schema soll auch durch die neue Eigenschaft text-indent: hanging 2em umgesetzt werden.
