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.

La propriété text-underline-position définit la position du soulignement utilisé lorsque la propriété text-decoration prend la valeur underline.

css
/* 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: unset;

Cette propriété est héritée sur les différents éléments et n'est pas réinitialisée avec la propriété raccourcie text-decoration, ce qui permet de la définir simplement pour l'ensemble du document.

css
:root {
  /* Une meilleure règle par défaut pour un document */
  /* avec de nombreuses formules chimiques */
  text-underline-position: under;
}

Syntaxe

Valeurs

auto

Ce mot-clé permet à l'agent utilisateur d'utiliser un algorithme pour choisir entre under et alphabetic.

under

Ce mot-clé force la ligne à se situer sous la ligne de base, à une position où elle ne traversera pas de jambage. Cela est notamment utile lorsqu'on veut souligner de façon lisible des formules chimiques ou mathématiques (qui utilisent fréquemment des indices).

left

In vertical writing-modes, this keyword forces the line to be placed on the left of the characters. In horizontal writing-modes, it is a synonym of under.

Pour les modes d'écritures verticaux, ce mot-clé force la ligne à être placée à droite des caractères. Pour les modes d'écritures horizontaux, ce mot-clé est synonyme de under.

auto-pos

Ce mot-clé est synonyme de auto et c'est ce dernier qui doit être utilisé à la place.

above

Ce mot-clé force la ligne à être dessinée au dessus du texte. Lorsqu'on écrit avec un script d'Asie orientale, la valeur auto aura un effet semblable.

below

Ce mot-clé force la ligne à être dessinée sous le texte. Lorsqu'on utilise un texte alphabétique, la valeur auto aura un effet semblable.

Définition formelle

Valeur initialeauto
Applicabilitétous les éléments
Héritéeoui
Valeur calculéecomme spécifié
Type d'animationdiscrète

Syntaxe formelle

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

Exemples

HTML

html
<p class="chimique">C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></p>
<p class="defaut">
  Et là avec des <sub>indices</sub>
  et du jambage
</p>

CSS

css
.chimique {
  text-decoration: underline;
  text-underline-position: under;
}

.defaut {
  text-decoration: underline;
  text-underline-position: auto;
}

Résultat

Spécifications

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

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi