Text-Unterstreichungs-Offset - CSS-Tricks

Die text-underline-offsetEigenschaft in CSS legt den Abstand der Textunterstreichungen von ihrer ursprünglichen Position fest.

.text ( text-underline-offset: 0.5em; )

Sobald Sie eine Unterstreichung für ein Element text-decorationmit dem Wert der Unterstreichung angewendet haben , können Sie mithilfe der text-underline-offsetEigenschaft angeben, wie weit diese Zeile von Ihrem Text entfernt sein soll .

Werte

• auto: (Standard) Der Browser gibt einen geeigneten Versatz für Unterstreichungen an.
• : Jede gültige Länge mit einer bestimmten Einheit (einschließlich negativer Werte). Dies ersetzt alle Informationen in der Schriftart und im Browser-Standard.
• percentage: Gibt den Versatz von Unterstreichungen als Prozentsatz von 1em in der Schriftart des Elements an.
• initial: Die Standardeinstellung der Eigenschaft, die automatisch ist.
• inherit: Übernimmt den Unterstreichungsversatzwert des übergeordneten Elements.
• unset: Entfernt den aktuellen Offset aus dem Element.

Demo

In der folgenden Demo können Sie den Wert von ändern, um text-underline-offsetzu sehen, wie sich dies auf die Textdekoration des Elements auswirkt:

Anmerkungen

• text-underline-offset ist nicht Teil der Abkürzung von text-decoration.
• Es funktioniert nicht in anderen text-decorationZeilen wie line-throughoder overline.
• Negative Werte werden akzeptiert, wodurch die Unterstreichung nach innen ausgeglichen wird.

Es ist konstant für die Nachkommen

Sobald Sie eine Dekoration für ein Element festgelegt haben, haben auch alle untergeordneten Elemente diese Dekoration. Stellen Sie sich nun vor, Sie möchten den Versatz der Unterstreichung für eines der Kinder ändern:

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-underline-offset: 1.5em; /* Doesn't work */ )

Dies funktioniert nicht, da Sie einen Versatz einer durch Vorgängerelemente angegebenen Unterstreichung nicht überschreiben können. Damit dies funktioniert, müssen Sie eine Unterstreichungsspezifität für das Element selbst festlegen:

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-decoration: underline; text-underline-offset: 1.5em; /* It works! */ )

Die Verwendung von em wird empfohlen

Der Vorteil der Verwendung eines relativen Werts wie em besteht darin, dass der Versatz mit der Änderung des font-sizeWerts skaliert . Wenn Sie dagegen eine Einheit mit fester Länge (z. B. Pixel) verwenden, wird der Versatz nicht an die Änderungen angepasst, und es ist möglicherweise nicht der Abstand, den Sie für Ihren Text haben möchten:

Prozentsatz und die Kaskade

Für diese Eigenschaft wird eine Länge als fester Wert geerbt und nicht mit der Schriftart skaliert. Auf der anderen Seite wird ein Prozentsatz als relativer Wert geerbt und daher mit Änderungen in der Schriftart beim Erben skaliert.

Die folgende Demo zeigt den Vergleich zwischen der Verwendung von em und Prozentwerten bei Vererbung. Wie Sie sehen können, hat der geerbte Wert auf der linken Seite (in der wir em verwenden) eine feste Länge. Sie können den berechneten Wert in Ihren DevTools überprüfen. Das heißt, es skaliert nicht mit der Änderung der Schriftart. Auf der rechten Seite erben die Texte jedoch einen relativen Wert (in diesem Fall 100%); Daher skaliert der Versatz mit der Änderung der Schriftart:

Schreibmodi und Text-Unterstreichungsposition

Ein vertikaler Schreibmodus wirkt sich auf die Position der Unterstreichung aus. Dadurch wird die Richtung des Versatzes geändert, der auf das Element angewendet wird. Spielen Sie mit den Werten in der folgenden Demo:

verbunden

• text-decoration
• text-underline-position
• text-decoration-thickness

Mehr Informationen

CSS Text Decoration Module Level 4 (Entwurf des Herausgebers)

Browser-Unterstützung

Zum Zeitpunkt dieses Schreibens ist Firefox der einzige Browser mit vollständiger Unterstützung. Safari unterstützt keine Prozentwerte.

Text-Unterstreichungs-Offset

IE	Kante	Feuerfuchs	Chrom	Safari	Oper
Nein	Nein	70+	Nein	12.1+	Alle

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mini
Nein	Nein	Nein	12.2+	Ja

Text-Unterstreichungs-Offset: Prozentsatz

IE	Kante	Feuerfuchs	Chrom	Safari	Oper
Nein	Nein	74+	Nein	Nein	Nein

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mini
Nein	Nein	Nein	Nein	Ja