CSS, HTML und Javascript mit {stil}

text-decoration, text-indent, text-transform

CSS text-decoration dekoriert einen Text durch Unterstreichen, einen Strich über dem Element oder durch das Element.

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.

Das automatische Unterstreichen von Hyperlinks folgt dem CSS-Stil text-decoration: underline; und kann durch text-decoration: none; aufgehoben werden.

Die Strichstärke kann nicht beeinflußt werden (erst in CSS3 könnten Strichfarbe sowie die Farbe des Strichs und der Stil des Strichs verändert werden). Aber der Text innerhalb des Elements wird in der Vordergrundfarbe dieses Elements unterstrichen, auch wenn für den Text selber eine andere Farbe angegeben wird.

Alles frisch gestrichen!

Auch der Abstand des automatischen Unterstrichs vom Text lässt sich in CSS 2 nicht beeinflussen. Da der Strich nah unter dem Text sitzt, durchkreuzt der Unterstrich Buchstaben wie g und y.

Der Unterstrich schneidet g und y

CSS border eignet sich besser, um Texte, die keine Links sind und nicht im Fließtext sitzen, herauszustellen:

border-bottom schneidet g und y nicht

<div style="text-decoration: underline; color: blue;">
   <p style="color: black;">Alles frisch gestrichen! </p>
</div>

Alle drei Werte für text-decoration können in einer Regel gesetzt werden.

Alles frisch gestrichen!

Auf andere Elemente als Texte darf text-decoration nicht wirken.

paint

<p style="text-decoration: underline overline;">
   <img src="paint.png" alt="paint" width="397" height="177" /> 
</p>

CSS text-decoration

text-decoration
unterstreicht und überstreicht Texte, streicht Text in der Mitte durch und/oder veranlasst, dass der Text blinkt.
Werte
none | underline | overline | line-through
none
ist die Standardeinstellung. Die Angabe von none stellt sicher, dass vorangegangene Deklarationen den Text nicht beeinflussen.
underline
zieht eine Linie unter dem Text.
overline
zieht eine Linie über dem Text.
line-through
zieht eine Linie mitten durch den Text.
blink
blendet einen Text ein und aus. Standardkonforme Browser sollten allerdings nicht blinken.

Die neuen Eigenschaften für Texte in CSS 3

CSS text-indent – Text-Einzug und -Auszug

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

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 steigert 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.

CSS 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, 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.