text-underline-position

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

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.

Valeur initiale	`auto`
Applicabilité	tous les éléments
Héritée	oui
Média	visuel
Valeur calculée	comme spécifié
Animable	non
Ordre canonique	l'ordre d'apparition dans la grammaire formelle des valeurs

Syntaxe

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

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

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: 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.

Syntaxe formelle

auto | [ under || [ left | right ] ]

Exemples

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

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

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

Résultat

Spécifications

Spécification	Statut	Commentaires
CSS Text Decoration Level 3 La définition de 'text-underline-position' dans cette spécification.	Candidat au statut de recommandation	Définition initiale.

Fonctionnalité	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Support simple (`auto`)	33.0	Pas de support	6^[1]	Pas de support	Pas de support
`under`	33.0	Pas de support	Pas de support	Pas de support	Pas de support
`left`, `right`	Pas de support[2]	Pas de support	Pas de support	Pas de support	Pas de support
`above`, `below`	Pas de support	Pas de support	5^[1]	Pas de support	Pas de support
`auto-pos`	Pas de support	Pas de support	6^[1]	Pas de support	Pas de support

Fonctionnalité	Android	Chrome pour Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Support simple	Pas de support	Pas de support	Pas de support	?	Pas de support	Pas de support

[1] Internet Explorer implémente des valeurs différentes qui ont parfois des effets différents. Entre IE 5 et IE 7 compris, seule une version non-préfixée existait. À partir d'IE8, une version préfixée est disponible.

[2] Voir l'issue 313888 pour Chrome.