text-decoration

Unterstreichen, unterstricheln

text-decoration ist seit CSS3 die Kurzfassung für text-decoration-line, text-decoration-style, text-decoration-color und text-decoration-skip.

Das automatische Unterstreichen von Hyperlinks – a-Tags – erfolgt durch den CSS-Stil text-decoration: underline; und kann durch text-decoration: none; aufgehoben werden.

Erst mit CSS3 können Strichfarbe sowie der Stil des Strichs verändert werden. Die Strichstärke kann nicht beeinflußt werden. text-decoration ist jetzt die Kurzfassung für vier Eigenschaften.

text-decoration: underline;
text-decoration-style: dotted; 
text-decoration-color: orchid;

oder kurz

-webkit-text-decoration: underline dotted orchid;
text-decoration: underline dotted orchid;

Zurzeit unterstützen Chrome, Firefox und Safari die Eigenschaften text-decoration-style und text-decoration-color. IE und EDGE unterstützen schaffen immerhin den normalen Unter-, Über und Durchstrich, mehr aber auch nicht.

text-decoration-skip

Der Abstand des automatischen Unterstrichs lässt sich nicht beeinflussen. Da der Strich nah unter dem Text sitzt, durchkreuzte der Unterstrich in den alten Browserversionen Buchstaben wie g und y – in Chrome, Safari und Firefox bleiben die Unterlängen heil.

Der Unterstrich schneidet g und y

text-decoration-skip:ink sollte diesen typografischen Unglücksfall verhindern. text-decoration-skip ist aus CSS3 wieder entfernt, die Browser (bis auf IE und Edge) lassen heute von Haus aus eine Lücke im Unterstrich.

text-decoration-line

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

Alles frisch gestrichen!

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

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

CSS text-decoration

text-decoration-line

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.

text-decoration-color

Farbe als Hex-Wert, RGB, HSL oder Farbname

text-decoration-style

dotted | dashed | solid | double | groove | ridge | inset | outset (wie CSS border)

text-decoration-skip

überspringt Bereiche: none | objects | spaces | ink | edges | box-decoration

• none überspringt nichts
• objects überspringt das komplette Element, wenn es sich um ein inline-Element wie image oder inline-block handelt.
• spaces überspringt Leerzeichen und Raum zwischen Wörtern
• ink überspringt Unterlängen von Glyphen (Buchstaben und Ziffern)
• edges setzt Anfang und Ende leicht innerhalb des unterstrichenen Bereichs, damit sich Ende und Anfang eines folgenden Elements nicht berühren und den Eindruck einer Unterstreichung machen.
• box-decoration überspring margin, border und padding-Bereiche des Elements und wird erst, wenn ein Element text-decoration von einem Parent-Element erbt.

An dieser Stelle lebt der Standard – Eigenschaften kommen und gehen wieder. Die Fortsetzung von text-decoration folgt in CSS4.

text-decoration overline

Und was fängt man mit overline an? Ein kleiner billiger Ersatz für das verlorene MathML: Das Wurzelsymbol über die komplette Formel aufziehen.

<div class="formel">
   √<span class="oli">2x + ab</span>
</div>

.formel { font-size: 2em;}
.oli {text-decoration: overline; font-size: 110%}