Styling the underlines on the Web

Das Gestalten von Unterstreichungen unter Links kann eine knifflige Angelegenheit sein, und ich vergesse ständig, was der beste Ansatz für die jeweilige Situation ist. Glücklicherweise bringt uns John Jameson in diesem Gastbeitrag auf den neuesten Stand.

Es gibt eine Reihe von verschiedenen Möglichkeiten, Unterstreichungen zu gestalten. Vielleicht erinnern Sie sich an den Artikel Crafting link underlines on Medium. Medium wollte nichts verrücktes tun; sie wollten einfach nur eine ziemlich normal aussehende Linie unter ihrem Text erstellen.

Es ist eine ziemlich einfache Unterstreichung, aber sie hat eine gute Größe und überspringt auch absteigende Buchstaben. Definitiv besser als die Standardeinstellung der meisten Browser. Nun, es stellt sich heraus, dass Medium viel Mühe aufwenden musste, um diesen Stil im Web zu erzielen. Zwei Jahre später ist es immer noch genauso schwer, eine gut aussehende Unterstreichung zu gestalten.

Ziele

Was ist falsch daran, einfach text-decoration: underline zu verwenden? Wenn wir über das ideale Szenario sprechen, sollte eine Unterstreichung Folgendes können:

• Sich unterhalb der Grundlinie positionieren
• Absteigende Buchstaben überspringen
• Farbe, Dicke und Stil ändern
• Sich über umgebrochenen Text wiederholen
• Auf jedem Hintergrund funktionieren

Ich denke, das sind alles ziemlich vernünftige Anforderungen, aber soweit ich weiß, gibt es keine intuitive Möglichkeit, all diese in CSS zu erreichen.

Ansätze

Welche verschiedenen Möglichkeiten gibt es also, Text im Web zu unterstreichen?

Hier sind die, an die ich denken kann:

• text-decoration
• border-bottom
• box-shadow
• background-image
• SVG-Filter
• Underline.js (canvas)
• text-decoration-*

Gehen wir die Liste eins nach dem anderen durch und sprechen über die guten und schlechten Seiten jedes Ansatzes.

text-decoration

text-decoration ist der einfachste Weg, Text zu unterstreichen. Sie wenden eine einzige Eigenschaft an und das war's. Bei kleineren Größen kann es ziemlich gut aussehen, aber wenn Sie die Schriftgröße erhöhen, wirkt dieselbe Linie unbeholfen.

Siehe die Demo.

Das größte Problem mit text-decoration ist seine mangelnde Anpassbarkeit. Es verwendet die Farbe und Schriftgröße des Textes, auf den es angewendet wird, und es gibt keine browserübergreifende Möglichkeit, den Stil zu ändern. Mehr dazu später.

Gut

• Einfach zu verwenden
• Unter der Grundlinie positioniert
• Überspringt absteigende Buchstaben standardmäßig in Safari und iOS
• Wird über Zeilen umbrochen
• Funktioniert auf jedem Hintergrund

Schlecht

• Kann absteigende Buchstaben in anderen Browsern nicht überspringen
• Kann Farbe, Dicke oder Stil nicht ändern

border-bottom

border-bottom bietet eine gute Balance zwischen *schnell* und *anpassbar*. Dieser Ansatz verwendet einen bewährten CSS-Rand, was bedeutet, dass Sie Farbe, Dicke und Stil einfach ändern können.

So sieht border-bottom auf inline-Elementen aus

Siehe die Demo.

Der große Nachteil ist, wie weit die Unterstreichung vom Text entfernt ist – sie liegt komplett *unterhalb* der absteigenden Buchstaben. Sie können dies beheben, indem Sie Elemente zu inline-block machen und line-height reduzieren, aber dann verlieren Sie die Möglichkeit, Text umzubrechen. Gut für einzelne Zeilen, aber nicht viel mehr.

Siehe die Demo.

Zusätzlich können Sie text-shadow verwenden, um Teile der Linie nahe absteigender Buchstaben abzudecken, aber Sie müssen es faken, indem Sie dieselbe Farbe wie der Hintergrund verwenden. Das bedeutet, dass es nur für einfarbige Hintergründe und nicht für Verläufe oder Bilder funktioniert.

Siehe die Demo.

An diesem Punkt gibt es *vier* Eigenschaften, die eine einzelne Unterstreichung gestalten. Das ist viel mehr Arbeit als bei text-decoration.

Gut

• Kann absteigende Buchstaben mit text-shadow überspringen
• Kann Farbe, Dicke und Stil ändern
• Kann Farbe und Dicke überblenden und animieren
• Wird standardmäßig umgebrochen, es sei denn, es ist ein inline-block
• Funktioniert auf jedem Hintergrund, es sei denn, Sie verwenden text-shadow

Schlecht

• Weit entfernt positioniert und schwer neu zu positionieren
• Viele zusammenhanglose Eigenschaften, um es *genau richtig* zu machen
• Janky Textauswahl bei Verwendung von text-shadow

box-shadow

box-shadow zeichnet eine Unterstreichung mit zwei inneren Box-Schatten: einer zur Erzeugung eines Rechtecks und einem zweiten, um es abzudecken. Das bedeutet, Sie benötigen einen einfarbigen Hintergrund, damit dies funktioniert.

Sehen Sie den Pen Underlines 5: box-shadow von John D. Jameson (@johndjameson) auf CodePen.

Sie können denselben text-shadow-Trick verwenden, um Lücken zwischen der Unterstreichung und den absteigenden Buchstaben des Textes zu erzeugen. Aber wenn die Linie eine andere Farbe als der Text hat – oder sogar nur dünn genug ist – kollidiert sie nicht so stark wie text-decoration.

Gut

• Kann unter der Grundlinie positioniert werden
• Kann absteigende Buchstaben mit text-shadow überspringen
• Kann Farbe und Dicke ändern
• Wird über Zeilen umbrochen

Schlecht

• Kann Stil nicht ändern
• Funktioniert nicht auf jedem Hintergrund

background-image

background-image kommt allem am nächsten, was wir wollen, und mit den wenigsten Haken. Die Idee ist, dass Sie linear-gradient und background-position verwenden, um ein Bild zu erstellen, das sich horizontal über Textzeilen wiederholt.

Auch hier müssen Sie diesen Ansatz zu display: inline; machen.

Siehe die Demo.

Dieser Ansatz muss nicht unbedingt linear-gradient verwenden. Sie können Ihr eigenes Hintergrundbild für coole Effekte verwenden.

Siehe die Demo.

Gut

• Kann unter der Grundlinie positioniert werden
• Kann absteigende Buchstaben mit text-shadow überspringen
• Kann Farbe, Dicke (halbe Pixel erlaubt) und Stil ändern
• Funktioniert mit benutzerdefinierten Bildern
• Wird über Zeilen umbrochen
• Funktioniert auf jedem Hintergrund, es sei denn, Sie verwenden text-shadow

Schlecht

• Das Bild kann sich bei verschiedenen Auflösungen, Browsern und Zoomstufen unterschiedlich skalieren

SVG-Filter

Hier ist ein Ansatz, mit dem ich herumgespielt habe: SVG-Filter. Sie können ein Inline-SVG filter-Element erstellen, das eine Linie zeichnet und dann den Text erweitert, um Teile der Linie auszublenden, die wir transparent haben möchten. Dann können Sie dem filter eine id geben und ihn in CSS mit etwas wie filter: url(‘#svg-underline’) referenzieren.

Der Vorteil hierbei ist, dass der Filter Transparenz hinzufügt, ohne sich auf text-shadow zu verlassen. Das bedeutet, Sie können absteigende Buchstaben auf jedem Hintergrund überspringen, einschließlich Verläufen und Hintergrundbildern! Dieser funktioniert jedoch nur auf einer einzigen Textzeile, also Vorsicht.

Siehe die Demo.

So sieht es in Chrome und Firefox aus

Die Browserunterstützung in IE, Edge und Safari ist problematisch. Es ist schwierig, die Unterstützung für SVG-Filter in CSS zu testen. Sie können @supports mit filter verwenden, aber das testet nur, ob die *Referenz* funktioniert – nicht der angewendete Filter selbst. Mein Ansatz führt zu ziemlich hässlichem Browser-Sniffing, also doppelte Vorsicht.

Vorteile

• Unter der Grundlinie positioniert
• Überspringt absteigende Buchstaben
• Kann Farbe, Dicke und Stil ändern
• Funktioniert auf jedem Hintergrund

Nachteile

• Wird nicht über Zeilen umbrochen
• Funktioniert nicht in IE, Edge oder Safari, aber Sie können auf text-decoration zurückgreifen. Safaris Unterstreichungen sehen sowieso gut aus.

Underline.js (Canvas)

Underline.js ist faszinierend. Ich finde es super beeindruckend, was Wenting Zhang mit JavaScript und viel Liebe zum Detail gemacht hat. Wenn Sie die Underline.js Tech-Demo noch nicht gesehen haben, hören Sie auf zu lesen und schauen Sie sie sich unbedingt an. Es gibt einen faszinierenden neunminütigen Vortrag darüber, wie es funktioniert, aber ich gebe Ihnen die Kurzfassung: Es zeichnet Unterstreichungen mit <canvas>-Elementen. Es ist ein neuartiger Ansatz, der überraschend gut funktioniert.

Trotz des eingängigen Namens ist Underline.js nur eine **Tech-Demo**. Das bedeutet, Sie können es nicht einfach in Projekte einbauen, ohne es vorher stark zu verändern.

Es lohnt sich, es hier als Proof of Concept zu erwähnen. <canvas> hat das Potenzial, schöne, interaktive Unterstreichungen zu erstellen, aber Sie müssen etwas benutzerdefiniertes JavaScript schreiben, um sie zum Laufen zu bringen.

text-decoration-* Eigenschaften

Erinnern Sie sich an den Teil „mehr dazu später“? Nun, hier sind wir.

text-decoration funktioniert an sich gut, aber Sie können einige experimentelle Eigenschaften hinzufügen, um sein Aussehen anzupassen.

• text-decoration-color
• text-decoration-skip
• text-decoration-style

Nur werden Sie nicht zu aufgeregt. Sie wissen schon, *Browserunterstützung*.

text-decoration-color

text-decoration-color ermöglicht es Ihnen, die Farbe einer Unterstreichung getrennt von ihrer Textfarbe zu ändern. Die Eigenschaft hat sogar bessere Browserunterstützung als erwartet – sie funktioniert in Firefox und mit Präfix in Safari. Hier ist der Haken: Wenn Sie keine absteigenden Buchstaben überspringen, platziert Safari die Linie *über* dem Text. 🙃

Firefox

Safari

text-decoration-skip

text-decoration-skip schaltet das Überspringen von absteigenden Buchstaben in unterstrichenem Text um.

Diese Eigenschaft ist nicht standardisiert und funktioniert derzeit nur in Safari. Sie benötigen also den -webkit--Präfix, um sie zu verwenden. Safari aktiviert diese Eigenschaft jedoch standardmäßig, weshalb Unterstreichungen absteigende Buchstaben überspringen, auch auf Websites, die dies nicht angeben.

Wenn Sie Normalize verwenden, wissen Sie, dass neuere Versionen die Eigenschaft *deaktivieren*, um die Dinge browserübergreifend konsistent zu halten. Sie müssen sie wieder aktivieren, wenn Sie diese traumhaften Unterstreichungen wünschen.

text-decoration-style

text-decoration-style bietet die gleichen Arten von Linien, die Sie von border-style erwarten würden, fügt aber auch *wavy* (wellig) Linien hinzu.

Hier sind die verschiedenen Werte, die Sie verwenden können:

• dashed
• dotted
• double
• solid
• wavy

Derzeit funktioniert text-decoration-style nur in Firefox. Hier ist also ein Screenshot:

Kommt Ihnen das bekannt vor?

Was fehlt?

Die text-decoration-*-Eigenschaften sind weitaus intuitiver als die Verwendung anderer CSS-Eigenschaften zum Gestalten von Unterstreichungen. Aber wenn wir uns unsere früheren Anforderungen noch einmal ansehen, bieten diese Eigenschaften keine Möglichkeit, die Linienstärke oder Position anzugeben.

Nach etwas Recherche bin ich auf diese beiden Eigenschaften gestoßen:

• text-underline-width
• text-underline-position

Es sieht so aus, als ob sie in früheren Entwürfen von CSS vorgeschlagen wurden, aber aufgrund mangelnden Interesses nie implementiert wurden. Hey, schieben Sie es nicht auf mich.

Fazit

Was ist also der beste Weg, Text zu unterstreichen?

Das kommt darauf an.

Für kleine Texte empfehle ich die Verwendung von text-decoration und dann optimistisch die Anwendung von text-decoration-skip obendrauf. Es sieht in den meisten Browsern etwas schlicht aus, aber Unterstreichungen sahen schon immer so aus, und die Leute scheinen nichts dagegen zu haben. Außerdem besteht immer die Chance, dass, wenn Sie geduldig genug sind, alle Ihre Unterstreichungen später großartig aussehen, ohne dass Sie etwas ändern müssen.

Für Fließtext wahrscheinlich den Ansatz mit background-image verwenden. Er funktioniert, sieht großartig aus und es gibt Sass- Mixins dafür. Sie können text-shadow wahrscheinlich weglassen, wenn die Unterstreichung dünn oder in einer anderen Farbe als der Text ist.

Für einzelne Textzeilen verwenden Sie border-bottom und alle anderen Eigenschaften, die Sie damit verwenden möchten.

Und um absteigende Buchstaben über einem Farbverlauf oder Hintergrundbild zu überspringen, versuchen Sie es mit SVG-Filtern. Oder vermeiden Sie einfach die Verwendung einer Unterstreichung.

In Zukunft, wenn die Browserunterstützung besser ist, lautet die Antwort: text-decoration-* durchgehend.

---

Sehen Sie sich auch den Beitrag von Benjamin Woodruff CSS Underlines Suck an, der zufällig diesen Boden auf ähnliche Weise behandelt.