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
.
/* 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.
: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
etalphabetic
. 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
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
Specification |
---|
CSS Text Decoration Module Level 3 # text-underline-position-property |
Compatibilité des navigateurs
BCD tables only load in the browser