Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

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 initialeauto
Applicabilitétous les éléments
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'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.

Compatibilité des navigateurs

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.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, Sebastianz, teoli, FredB
 Dernière mise à jour par : SphinxKnight,