CSS, HTML und Javascript mit {stil}

text-indent, text-transform

text-transform: Nur Großbuchstaben oder Versalien

text-indent zieht die erste Zeilen eines Textes nach rechts ein oder nach links aus.

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.

text-indent zieht die erste Zeilen eines Textes nach rechts ein oder nach links aus.

CSS text-indent – Texteinzug

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.

Text einrücken

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 Einrücken eines neuen Absatzes anstelle einer Leerzeile oder eines größeren Zeilenabstands sorgt für Ruhe im Schriftbild und unterbricht den Lesefluss nicht.

Auf Webseiten verbesser ein Abstand zwischen aufeinander folgenden Absätzen die Lesbarkeit meist besser als das Einrücken des Textes durch text-indent.

p { text-indent: 20px; margin: 0; }
h6 + p  { text-indent: 0;  }

Das HTML p-Tag ist darum schon von Haus aus mit einem Abstand gegenüber den folgenden Absätzen vorbelegt. Dieser Abstand wird durch CSS margin bestimmt.

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

text-transform – Kleinbuchstaben zu Versalien

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.

Alexander der Große

.cap { text-transform: uppercase; }
…
<p class="cap">Alexander der Große</p>

Das war einst für kundige Typografen eine kleine Katastrophe: Das »ß« wurde bei der Umwandlung in Großbuchstaben nicht in »SS« umgesetzt. Safari 3 und Firefox 3 (Mac OS und Windows) sind allerdings bereits korrekt bei der Umsetzung der Eigenschaft text-transform und zeigen »SS«, wenn ein »ß« im Text vorkommt, Chrome als Webkit-Browser ersetzt das ß ebenfalls durch SS.

Opera 11 (Mac) zeigte immer noch das »ß«, Internet Explorer verbreitet diesen Nano-Bug auch immer noch in allen Versionen. Wen kümmert das schon, wer weiß davon …

Für große Textpassagen wird text-transform kaum eingesetzt werden – eher z.B. für Überschriften, die in Großbuchstaben angezeigt werden. Da der Text in normaler Groß- und Kleinschreibung bleibt und nur vom Browser in Großbuchstaben angezeigt wird, muss keine Seite nachgearbeitet werden, wenn das nächste Design wieder zur Groß- und Kleinschreibung übergeht.

CSS text-transform

text-transform
text-transform steuert die Groß- und Kleinschreibung eines gewählten Textes.
Am Rande: Wer Texte nicht durchgehend in Großbuchstaben, sondern in Kapitälchen setzen will, braucht die Eigenschaft font-variant.
capitalize
stellt den ersten Buchstaben jedes Wortes als Großbuchstaben dar.
uppercase
stellt alle Buchstaben eines Textes in Großbuchstaben dar.
lowercase
stellt alle Buchstaben eines Textes in Kleinbuchstaben dar.
none
ist die Voreinstellung. none stellt sicher, dass keine vorangegangenen Deklarationen den ausgewählten Text beeinflussen.