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.
Die paraguayische Harfe
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%}