Eine rote Linie

Unterstrichener Text im Internet – CSS3 Underline wurde ausgebaut

Jeder von uns kennt unterstrichene Texte im Internet. Meistens symbolisieren sie einen Link – oder sind ein Gestaltungselement zum Beispiel im Menü.

Das man einen Text auf einer Webseite unterstreichen kann ist nun wirklich keine Neuheit. Links werden vom Browser (seit gefühlten Jahrzehnten) standardmässig  unterstrichen. Mit dem CSS Code „text-decoration: underline“ kann man ebenfalls seit Ewigkeiten Texte unterstreichen.

Das Problem an diesem Befehl ist, dass man den Unterstrich nicht wirklich gestalten konnte. Der Strich hat immer die selbe Farbe wie die Schrift. Man konnte den Abstand zwischen Buchstaben und Unterstrich nicht definieren und auch nicht festlegen ob z.B. die Textlängen von kleinen Buchstaben (z.B. g oder q) ausgespart werden sollen oder nicht.

Viele Webentwickler – auch ich selber – haben statt zu unterstrichen lieber die Möglichkeit von „Rahmen“ für einen Unterstrich missbraucht. Mit einem simplen „border-bottom: 2px solid red“ zeichnet man per CSS einen 2px breiten Unterstrich in rot.

Das schöne an Webtechnologien ist, dass sie sich ständig weiterentwickeln. Neu kann man die „text-decoration“ mit weiteren Werten versehen.

Zum Beispiel kann man die Farbe der Linie definieren. Erlaubt sind alle CSS kompatiblen Farbcodes inkusive. rgb() und rgba()

h5 {
    text-decoration: underline;
    text-decoration-color: green;
}

ergibt:

Ein Beispieltext der grün unterstrichen ist

In diesem Beispiel sehen wir, dass der Strich beim Buchstaben „p“ ausgespart wird. Theoretisch können wir die Linie mit der neuen CSS Eigenschaft „text-underline-position“ anpassen.

h5 {
    text-decoration: underline;
    text-decoration-color: green;
    text-underline-position: under;
}

Nun würde unser unterstrichener Text so aussehen:

Beispieltext grün unterstrichen ohne Aussparung

Um bei den Unterstreichungen noch etwas mehr Gestaltungsfreiheit zu haben, können wir auch die Linie noch ander gestalten. Dazu gibt es die neue CSS Eigenschaft: „text-decoration-style“. Hier kann man verschiedene Eigenschaften benutzen: z.B. „wavy“ – dadurch wird die Linie gewellt statt gerade.

Die neuen CSS Eigenschaften ergeben (endlich! 😉 ) etwas mehr Freiheit bei den Gestaltungen von Linien unter Texten. Ab sofort einsetzten können wir sie leider noch nicht – da noch nicht alle Browser alle Befehle unterstützen.

Am besten wird zurzeit die Eigenschaft „text-decoration-color“ Unterstützt. Hier hat nur Microsoft Edge und der Internet Explorer Probleme damit. Bei den anderen Eigenschaften ist der Support weitaus schlechter – dies dürfte sich aber in den nächsten Monaten massiv verbessern – ich freue mich darauf!

 

go! App - Die Uber Alternative aus der Schweiz
E-Post Office - Briefe digital - ein Erfahrungsbericht!

Noch keine Kommentare

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.