CSS, HTML und Javascript mit {stil}

text-decoration

CSS text-decoration: Unterstreichen aus

text-decoration kennen wir vom automatischen Unterstreichen von Links. Der Unterstrich – underline – kann aber auch für andere Elemente eingesetzt werden.

text-decoration markiert seit den Anfängen des Webs einen Text durch Unterstreichen, einen Strich über dem Element oder streicht das Element durch. Die einfachen Merkmale des Unterstrichs sind heute erweitert um Farbe und Stile (ähnlich wie CSS border).

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Unterstreichen, unterstricheln

text-decoration ist die Kurzfassung für text-decoration-line, text-decoration-style, text-decoration-color und text-decoration-skip. Das 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 und überspringen Unterlängen wie y und g mit text-decoration-skip-ink (IE unterstützte immerhin den normalen Unter-, Über und Durchstrich, mehr aber auch nicht).

Das Unterstreichen von Links ist auf Touchscreen immer noch die beste Kennung für Hyperlinks im Text, als Hervorhebung von Text aber nicht angebracht, da es schnell einen Link vortäuscht. Das Unterstreichen von Text ein Relikt aus der Schreibmaschinenzeit, als das Zurückschieben des Wagens und der Unterstrich wichtige Passagen dem Text ein höheres Gewicht geben sollte.

text-underline-offset

Wenn der Zeilenabstand groß genug ist, bleibt mehr Freiraum zwischen dem Text und dem Strich .

Der Unterstrich lässt Platz für g und y

Eine Headerzeile in Versalien mit Unterstrich kommt gut zur Geltung. Anders als border läuft text-decoration nur unterhalb des Texts.

HEADER

Da spielt das ganze text-decoration-Orchester: 

color: cyan; 
font-size: 2rem;
text-decoration: underline; 
text-underline-offset: 0.2em; 
text-decoration-thickness:3px;
letter-spacing: 1px;

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.

Bild mit Link
text-decoration zeigt sich nicht bei Bildern, auch wenn sie in einem a-Element sitzen.
Link

Wenn ein Bild als Link eingesetzt wird, müssen u.U. andere Kennzeichnungen verwendet werden, um auf den Link aufmerksam zu machen.

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?