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;


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;

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éChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple

Oui

25 -webkit-

?

46

45 — 491

Non

Oui

15 -webkit-

Oui

6.1 -webkit-

left and right62 ?46 Non49 Oui
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple

Oui

4.4 -webkit-

Oui ?

46

45 — 491

Non

Oui

33 -webkit-

?
left and right6262 ?46 ?49 ?

1. From version 45 until version 49 (exclusive): this feature is behind the layout.css.text-emphasis.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Voir aussi

Étiquettes et contributeurs liés au document

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