text-emphasis-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 mars 2022.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
La propriété text-emphasis-position permet de décrire l'emplacement des marques d'emphase quand elles sont utilisées. L'ajout des marques a le même effet que les annotations ruby quant à la hauteur de ligne : s'il n'y a pas suffisamment de place, la hauteur de la ligne est augmentée.
/* Valeur initiale */ text-emphasis-position: over right; /* Valeurs avec mot-clé */ text-emphasis-position: over left; text-emphasis-position: under right; text-emphasis-position: under left; text-emphasis-position: left over; text-emphasis-position: right under; text-emphasis-position: left under; /* Valeurs globales */ text-emphasis-position: inherit; text-emphasis-position: initial; text-emphasis-position: unset; Position privilégiée
La position des marques d'emphase varie en fonction du langage. Par exemple, en japonais, on préfère les placer au dessus à droite. En revanche, pour le chinois, on préfèrera en bas à droite. Le tableau qui suit illustre les différences, notamment entre le chinois, le mongolien et le japonais :
| Langue | Position | Illustration | ||
|---|---|---|---|---|
| Horizontale | Verticale | |||
| Japanese | au dessus | à droite |  |  |
| Mongolian | ||||
| Chinese | en dessous | à droite |  | |
Note : La propriété text-emphasis-position ne peut pas être définie (et donc ne peut pas être redéfinie) avec la propriété raccourcie text-emphasis.
Syntaxe
Valeurs
over-
Les marques sont dessinées au-dessus du texte lorsqu'il est écrit en mode horizontal.
under-
Les marques sont dessinées en-dessous du texte lorsqu'il est écrit en mode horizontal.
right-
Les marques sont dessinées à droite du texte lorsqu'il est écrit en mode vertical.
left-
Les marques sont dessinées à gauche du texte lorsqu'il est écrit en mode vertical.
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-emphasis-position =
[ over | under ] &&
[ right | left ]?
Exemples
Masquer les marques
Certains éditeurs préfèrent masquer les marques d'emphase lorsque celles-ci entre en conflit avec les annotations ruby. On peut utiliser la règle suivante :
ruby { text-emphasis: none; } D'autres préfèrent masquer le contenu ruby et privilégier les marques d'emphase. On peut obtenir cet effet avec les déclarations suivantes :
em { /* On utilise text-emphasis pour les <em> */ text-emphasis: dot; } em rt { /* On masque le ruby dans les éléments <em> */ display: none; } Exemple live
HTML
<p><em>Coucou</em>, je suis <em>là</em></p> CSS
em { text-emphasis-style: sesame; text-emphasis-position: under right; } Résultat
Spécifications
| Specification |
|---|
| CSS Text Decoration Module Level 3 # text-emphasis-position-property |
Compatibilité des navigateurs
Chargement…