text-underline-position

Exemple interactif

text-underline-position: auto;

text-underline-position: under;

<section id="default-example">
  <p>
    <span class="transition-all" id="example-element"
      >C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub></span
    >
    est la formule chimique de la caféine.
  </p>
</section>

p {
  font: 1.5em sans-serif;
}

#example-element {
  text-decoration-line: underline;
}

Syntaxe

/* Valeurs avec un mot-clé */
text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;

/* Avec plusieurs mots-clés */
text-underline-position: under left;
text-underline-position: right under;

/* Valeurs globales */
text-underline-position: inherit;
text-underline-position: initial;
text-underline-position: revert;
text-underline-position: revert-layer;
text-underline-position: unset;

Valeurs

auto

L'agent utilisateur utilise son propre algorithme pour placer la ligne au niveau ou sous la ligne de base alphabétique.

from-font

Si le fichier de police contient des informations sur une position préférée, utiliser cette valeur. Si le fichier de police n'inclut pas cette information, se comporter comme si auto était défini, le navigateur choisissant une position appropriée.

under

Force la ligne à être placée sous la ligne de base alphabétique, à une position où elle ne traversera aucun jambage. Ceci est utile pour garantir la lisibilité des formules chimiques et mathématiques, qui utilisent largement des indices.

left

En modes d'écriture verticale, ce mot-clé force la ligne à être placée du côté gauche du texte. En modes d'écriture horizontale, il est synonyme de auto.

right

En modes d'écriture verticale, ce mot-clé force la ligne à être placée du côté droit du texte. En modes d'écriture horizontale, il est synonyme de auto.

Définition formelle

Syntaxe formelle

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

Exemples

Un exemple simple

Nous créons deux paragraphes d'exemple :

<p class="horizontal">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam onsectetur 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 onsectetur 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>

Notre CSS ressemble à ceci :

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;
}

Dans cet exemple, nous définissons les deux paragraphes pour avoir un soulignement épais. Dans le texte horizontal, nous utilisons text-underline-position: under; pour placer le soulignement sous tous les jambages.

Dans le texte avec un writing-mode vertical défini, nous pouvons ensuite utiliser les valeurs left ou right pour faire apparaître le soulignement à gauche ou à droite du texte selon les besoins.

L'exemple en direct ressemble à ceci :

Définir text-underline-position de manière globale

Parce que la propriété text-underline-position est héritée et n'est pas réinitialisée par la propriété raccourcie text-decoration, il peut être approprié de définir sa valeur au niveau global. Par exemple, la valeur under peut être appropriée pour un document contenant de nombreuses formules chimiques et mathématiques, qui utilisent largement des indices.

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

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété text-decoration est une propriété raccourcie pour définir la plupart des propriétés de décoration de texte, y compris text-decoration-line, text-decoration-color, et text-decoration-style. Cependant, elle ne définit pas text-underline-position.