Unterstreichen, unterstricheln
text-decoration ist die Kurzfassung für text-decoration-line, text-decoration-style, text-decoration-color und text-decoration-skip. Das automatische Unterstreichen von Links – a-Elementen – erfolgt automatisch durch text-decoration: underline; und kann durch text-decoration: none; aufgehoben werden.
Heute können Strichfarbe, Form sund Stil des Strichs verändert werden, und auch die Strichstärke unterliegt CSS.
- text-decoration-style
- text-decoration-color
- text-decoration-thickness
- text-decoration-skip-ink / (text-decoration-skip)
- text-decoration-line
Die paraguayische Gangway
text-decoration: underline; text-decoration-style: double; text-decoration-color: orchid; text-decoration-thickness: 3px; text-decoration-skip: spaces; /** Safari **/ text-decoration-skip-ink: spaces;
oder kurz
text-decoration: underline dotted orchid;
Die modernen Browser unterstützen alle Stile, Safari überspringt Unterlängen wie y und g mit text-decoration-skip, Chrome & Co und Firefox mit text-decoration-skip-ink. IE unterstützt 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 fiel irgendwann unter den Tisch, bleibt aber in Safari. Stattdessen kam text-decoration-skip-ink für alle modernen Browser bis auf Safari.
text-decoration-line
Alle drei Werte für text-decoration-line können in einer Regel gesetzt werden.
Alles frisch gestrichen!
text-decoration: underline overline line-through; text-decoration-color: hsla(30,80%,60%,0.8); text-decoration-style: wavy;
Auf andere Elemente als Texte darf text-decoration nicht wirken. Da wartet CSS border auf den Einsatz.
CSS text-decoration
- text-decoration-line
- unterstreicht und überstreicht Texte, streicht Text in der Mitte durch und/oder veranlasst, dass der Text blinkt.
- none ist die Standardeinstellung. Die Angabe 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. Muss nicht sein … .
- text-decoration-color
- Farbe als Hex-Wert, RGB, HSL oder Farbname
- text-decoration-style
- dotted | dashed | solid | double | groove | ridge | inset | wavy | outset (wie CSS border)
- text-decoration-skip-ink
- ü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.
- text-decoration-thickness
- px, em, %, from-font
Der Standard lebt – Eigenschaften kommen und gehen wieder. Gibt es wohl weitere Fortsetzungen von text-decoration?