text-underline-position

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2020⁩.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

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.
right: 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 Non standard: Ce mot-clé est synonyme de auto et c'est ce dernier qui doit être utilisé à la place.
above Non standard: 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 Non standard: 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 initiale	`auto`
Applicabilité	tous les éléments
Héritée	oui
Valeur calculée	comme spécifié
Type d'animation	discrète

Syntaxe formelle

text-underline-position = 
  auto                                       |
  [ from-font | 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

Voir aussi

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨3 août 2023⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content