CSS, HTML und Javascript mit {stil}

text-indent, text-transform

Text Einrücken und Ausziehen zum Herausstellen

text-indent rückt die erste Zeile eines Textabsatzes nach rechts ein oder nach links aus. Ein Absatz – paragraph – besteht meist aus mehreren Sätzen mit engem inhaltlichen Zusammenhang und der Einzug zeigt einen neuen Gedanken zum Thema oder eine kleine Themenänderung heraus.

CSS text-transform wandelt alle Zeichen eines Textes in Kleinbuchstaben oder in große Buchstaben (Versalien) um oder stellt jeden ersten Buchstaben eines Wortes in großen Buchstaben dar.

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. Auf Webseiten bevorzugen wir einen Durchschuss, den Freiraum zwischen Absätzen, der durch CSS margin automatisch erzeugt wird.

AGBs und ähnliche Vertragstexte sehen wir hingegen 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.

p { text-indent: 2em; margin: 0; }
h6 + p  { text-indent: 0;  }

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 ist margin: 0 gesetzt, um den Abstand zwischen den Absätzen auszuschalten.

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, pt, in, mm, cm
hanging
Alle Zeilen außer der ersten einrücken (neuer Wert, der zurzeit von keine Browser unterstützt wird).
each-line
Alle Zeilen nach einem harten Zeilenumbruch (<br>) einrücken (neuer Wert, der zurzeit von keine Browser unterstützt wird).
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.

1 2 3 4 text-indent