text-emphasis-position

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

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.

css
/* 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 :

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.

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 initialeauto
Applicabilitétous les éléments
Héritéeoui
Valeur calculéecomme spécifié
Type d'animationdiscrè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 :

css
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 :

css
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

html
<p><em>Coucou</em>, je suis <em>là</em></p>

CSS

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

BCD tables only load in the browser

Voir aussi