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.
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 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.
| Valeur initiale | over right |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Média | visuel |
| Valeur calculée | comme spécifié |
| Animable | non |
| Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Syntaxe
/* 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; /* Valeurs globales */ text-emphasis-position: inherit; text-emphasis-position: initial; text-emphasis-position: unset;
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.
Syntaxe formelle
[ 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
| Spécification | Statut | Commentaires |
|---|---|---|
| CSS Text Decoration Level 3 La définition de 'text-emphasis' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale |
Compatibilité des navigateurs
| Fonctionnalité | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
Support simple (over et under) |
46 (46)[1] | 25.0-webkit | Pas de support | 15.0-webkit | 6.1-webkit 7.1 |
left et right |
46 (46)[1] | Pas de support[2] | Pas de support | Pas de support | 7.1 |
| Fonctionnalité | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Support simple | 46.0 (46)[1] | 4.4-webkit | Pas de support | 33-webkit | 7.1 |
[1] Avec Firefox 45, ce n'était pas activé par défaut. Il faut utiliser about:config pour activer la préférence layout.css.text-emphasis.enabled avec la valeur true.
[2] Voir l'issue liée à Chromium