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.

* Some parts of this feature may have varying levels of support.

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-emphasis-position
auto
ExperimentalNon-standard
left
over
right
under

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Voir aussi