MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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.

/* 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;

Valeur initialeover right
Applicabilitétous les éléments
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

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 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.

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.

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 Module 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,