text-underline-position

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2020.

Die text-underline-position CSS Eigenschaft legt die Position der Unterstreichung fest, die mit dem underline-Wert der text-decoration-Eigenschaft gesetzt wird.

Probieren Sie es aus

Syntax

css
/* Single keyword */
text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;

/* Multiple keywords */
text-underline-position: under left;
text-underline-position: right under;

/* Global values */
text-underline-position: inherit;
text-underline-position: initial;
text-underline-position: revert;
text-underline-position: revert-layer;
text-underline-position: unset;

Werte

auto

Der User Agent verwendet seinen eigenen Algorithmus, um die Linie auf oder unter der alphabetischen Grundlinie zu platzieren.

from-font

Wenn die Schriftartdatei Informationen über eine bevorzugte Position enthält, verwenden Sie diesen Wert. Wenn die Schriftartdatei diese Informationen nicht enthält, verhalten Sie sich so, als ob auto gesetzt wäre, wobei der Browser eine geeignete Position wählt.

under

Erzwingt, dass die Linie unterhalb der alphabetischen Grundlinie gesetzt wird, an einer Position, an der sie keine Abwärtsstriche kreuzt. Dies ist nützlich, um die Lesbarkeit mit chemischen und mathematischen Formeln zu gewährleisten, die häufig Unterschriften verwenden.

left

In vertikalen Schreibmodi erzwingt dieses Schlüsselwort, dass die Linie auf der linken Seite des Textes platziert wird. In horizontalen Schreibmodi ist es ein Synonym für auto.

In vertikalen Schreibmodi erzwingt dieses Schlüsselwort, dass die Linie auf der rechten Seite des Textes platziert wird. In horizontalen Schreibmodi ist es ein Synonym für auto.

Formale Definition

Initialer Wertauto
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

text-underline-position = 
  auto                           |
  [ under || [ left | right ] ]

Beispiele

Ein einfaches Beispiel

Wir erstellen zwei Beispiel-Absätze:

html
<p class="horizontal">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac
  turpis vel laoreet. Nullam volutpat pharetra lorem, sit amet feugiat tortor
  volutpat quis. Nam eget sodales quam. Aliquam accumsan tellus ac erat posuere.
</p>

<p class="vertical">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac
  turpis vel laoreet. Nullam volutpat pharetra lorem, sit amet feugiat tortor
  volutpat quis. Nam eget sodales quam. Aliquam accumsan tellus ac erat posuere.
</p>

Unser CSS sieht so aus:

css
p {
  font-size: 1.5rem;
  text-transform: capitalize;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.horizontal {
  text-underline-position: under;
}

.vertical {
  writing-mode: vertical-rl;
  text-underline-position: left;
}

In diesem Beispiel setzen wir beide Absätze auf eine dicke Unterstreichung. Im horizontalen Text verwenden wir text-underline-position: under;, um die Unterstreichung unterhalb aller Abwärtsstriche zu platzieren.

Im Text mit einem vertikalen writing-mode können wir dann die Werte left oder right verwenden, um die Unterstreichung je nach Bedarf links oder rechts vom Text erscheinen zu lassen.

Das Live-Beispiel sieht so aus:

Setzen der text-underline-position global

Da die Eigenschaft text-underline-position vererbt und nicht durch die Kurzschreibweise text-decoration zurückgesetzt wird, kann es geeignet sein, ihren Wert auf globaler Ebene festzulegen. Zum Beispiel kann der Wert under für ein Dokument geeignet sein, das viele chemische und mathematische Formeln enthält, die häufig Unterschriften verwenden.

css
:root {
  text-underline-position: under;
}

Spezifikationen

Specification
CSS Text Decoration Module Level 3
# text-underline-position-property

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch