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, Form sowie der Stil des Strichs verändert werden, und auch die Strichstärke unterliegt jetzt CSS.

• text-decoration-style
• text-decoration-color
• text-decoration-thickness
• text-decoration-skip-ink / (text-decoration-skip)
• text-decoration-line

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 ist aus CSS3 wieder entfernt, 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?