Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
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 valeurunderline.
/* 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é raccourcietext-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
autoCe mot-clé permet à l'agent utilisateur d'utiliser un algorithme pour choisir entre
underetalphabetic.underCe mot-clé force la ligne à se situer sous la ligne de base, à une position où elle ne traversera pas dejambage. Cela est notamment utile lorsqu'on veut souligner de façon lisible des formules chimiques ou mathématiques (qui utilisent fréquemment des indices).
leftIn vertical writing-modes, this keyword forces the line to be placed on theleft of the characters. In horizontal writing-modes, it is a synonym of
under.rightPour 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-posNon standardCe mot-clé est synonyme de
autoet c'est ce dernier qui doit être utilisé à la place.aboveNon standardCe mot-clé force la ligne à être dessinée au dessus du texte. Lorsqu'on écrit avec un script d'Asie orientale, la valeur
autoaura un effet semblable.belowNon standardCe mot-clé force la ligne à être dessinée sous le texte. Lorsqu'on utilise un texte alphabétique, la valeur
autoaura 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
<p>C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></p><p> 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 |