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…