text-emphasis-position

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  :

Position privilégiée pour les marques d'emphase en ruby
Langue Position Illustration
Horizontale Verticale
Japanese au dessus à droite Emphasis marks appear over each emphasized character in horizontal Japanese text. Emphasis marks appear on the right of each emphasized character in vertical Japanese text.
Mongolian
Chinese en dessous à droite Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text.

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 initialeover right
Applicabilitétous les éléments
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'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

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,