text-emphasis-position

Baseline Large disponibilité *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2022.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La propriété CSS text-emphasis-position définit l'emplacement des marques d'emphase. Similaire au texte rendu par l'élément HTML <ruby>, si l'espace disponible pour les marques d'emphase est insuffisant, la hauteur de ligne est augmentée.

Exemple interactif

text-emphasis-position: auto;

text-emphasis-position: over right;

text-emphasis-position: under right;

text-emphasis-position: auto;
writing-mode: vertical-rl;

text-emphasis-position: over left;
writing-mode: vertical-rl;

text-emphasis-position: over right;
writing-mode: vertical-rl;

<section id="default-example">
  <p>
    Je préfère être
    <span class="transition-all" id="example-element"
      >heureux que d'avoir raison</span
    >
    n'importe quel jour.
  </p>
</section>

p {
  font: 1.5em sans-serif;
}

#example-element {
  text-emphasis: filled double-circle #ffb703;
}

Syntaxe

css

/* Valeur initiale */
text-emphasis-position: auto;

/* Valeurs avec mot-clé */
text-emphasis-position: over;
text-emphasis-position: under;

text-emphasis-position: over right;
text-emphasis-position: over left;
text-emphasis-position: under right;
text-emphasis-position: under left;

text-emphasis-position: left over;
text-emphasis-position: right over;
text-emphasis-position: right under;
text-emphasis-position: left under;

/* Valeurs globales */
text-emphasis-position: inherit;
text-emphasis-position: initial;
text-emphasis-position: revert;
text-emphasis-position: revert-layer;
text-emphasis-position: unset;

Valeurs

La propriété accepte une ou deux valeurs :

Si une seule valeur est fournie, elle peut être auto, over ou under. Lorsque seul over ou under est utilisé, right est supposé comme position par défaut.
Si deux valeurs sont fournies, elles doivent inclure l'une de over ou under et l'une de right ou left. Leur ordre n'a pas d'importance.

Les valeurs incluent :

auto: Dessine les marques au-dessus du texte en mode d'écriture horizontal et à droite du texte en mode d'écriture vertical.
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.

Description

La position préférée des marques d'emphase dépend de la langue. Par exemple, en japonais, la position préférée est over right. En chinois, en revanche, la position préférée est under right. Le tableau informatif ci-dessous résume les positions préférées des marques d'emphase pour le chinois, le mongol et le japonais :

Les marques d'emphase apparaissent au-dessus de chaque caractère accentué dans un texte japonais horizontal.

Les marques d'emphase apparaissent à droite de chaque caractère accentué dans un texte japonais vertical.

Position privilégiée pour les marques d'emphase en ruby
Langue	Position	Illustration
Japonais	au dessus	à droite
Coréen
Mongolique
Chinois	en dessous	à droite

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.

Définition formelle

Valeur initiale	`auto`
Applicabilité	tous les éléments
Héritée	oui
Valeur calculée	comme défini
Type d'animation	discrète

Syntaxe formelle

text-emphasis-position = 
  [ over | under ]   &&
  [ right | left ]?

Exemples

Ajouter des positions de marques d'emphase

Utilisez le menu déroulant pour changer la position des marques d'emphase. Cela changera la classe sur l'élément <section>, ce qui mettra à jour la position des marques d'emphase sur le texte.

HTML

<p class="unsupported">
  La valeur <code>auto</code> n'est pas prise en charge par votre navigateur.
</p>
<label for="position">Position de l'emphase&nbsp;:</label>
<select id="position">
  <option value="auto">auto</option>
  <option value="over-right">over right</option>
  <option value="over-left">over left</option>
  <option value="under-right">under right</option>
  <option value="under-left">under left</option>
  <option value="preferred">preferred</option>
</select>

html

<section id="setting" class="auto">
  <p class="horizontal" lang="zh">你好世界</p>
  <!-- Bonjour le monde en chinois -->
  <p class="vertical" lang="ja">世界、こんにちは。</p>
  <!-- Bonjour le monde en japonais -->
</section>

CSS

.unsupported {
  color: red;
}
@supports (text-emphasis-position: auto) {
  .unsupported {
    display: none;
  }
}
.horizontal {
  writing-mode: horizontal-tb;
}
.vertical {
  writing-mode: vertical-rl;
}
section {
  display: flex;
  justify-content: space-around;
}

css

section p {
  text-emphasis: filled circle tomato;
  text-emphasis-position: auto;
}
.over-right p,
.preferred p [lang="ja"] {
  text-emphasis-position: over right;
}
.over-left p {
  text-emphasis-position: over left;
}
.under-right p,
.preferred p [lang="zh"] {
  text-emphasis-position: under right;
}
.under-left p {
  text-emphasis-position: under left;
}
.preferred p [lang="ja"] {
}

const position = document.querySelector("#position");
const setting = document.querySelector("#setting");
const updateClass = () => {
  const currentClass = setting.classList;
  setting.classList.replace(currentClass, position.value);
};
position.addEventListener("change", updateClass);

Résultat

Utilisez le menu déroulant « Position de l'emphase » pour choisir l'emplacement des marques d'emphase. L'option « prefered » du menu utilise les positions privilégiées, comme expliqué dans la Description.

Privilégier ruby aux marques d'emphase

Certain·e·s éditeur·ice·s préfèrent masquer les marques d'emphase lorsqu'elles entrent en conflit avec ruby. En HTML, cela peut être fait avec la règle de style suivante :

css

ruby {
  text-emphasis: none;
}

Privilégier les marques d'emphase à ruby

D'autres éditeur·ice·s préfèrent masquer ruby lorsqu'il entre en conflit avec les marques d'emphase. En HTML, cela peut être fait avec le modèle suivant :

css

em {
  text-emphasis: dot; /* On applique text-emphasis aux éléments <em> */
}

em rt {
  display: none; /* On masque ruby à l'intérieur des éléments <em> */
}

Spécifications

Spécification
CSS Text Decoration Module Level 3 # text-emphasis-position-property

Compatibilité des navigateurs

Voir aussi

La propriété text-underline-position
La propriété text-emphasis-style
La propriété text-emphasis-color
La propriété raccourcie text-emphasis
La propriété writing-mode

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 2 avr. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

Langue	Position		Illustration
Langue	Horizontale	Verticale	Illustration
Japonais	au dessus	à droite
Coréen
Mongolique
Chinois	en dessous	à droite