---
title: text-emphasis-position
slug: Web/CSS/text-emphasis-position
tags:
  - CSS
  - Propriété
  - Reference
translation_of: Web/CSS/text-emphasis-position
---
<div>{{CSSRef}}</div>

<p>La propriété <strong><code>text-emphasis-position</code></strong> 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 <a href="/fr/docs/Web/HTML/Element/ruby">les annotations ruby</a> quant à la hauteur de ligne : s'il n'y a pas suffisamment de place, la hauteur de la ligne est augmentée.</p>

<pre class="brush: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;
</pre>

<h2 id="Position_privilégiée">Position privilégiée</h2>

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

<table>
 <caption>Position privilégiée pour les marques d'emphase en ruby</caption>
 <thead>
  <tr>
   <th rowspan="2" scope="col">Langue</th>
   <th colspan="2" scope="col">Position</th>
   <th colspan="2" rowspan="2" scope="col">Illustration</th>
  </tr>
  <tr>
   <th>Horizontale</th>
   <th>Verticale</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Japanese</td>
   <td rowspan="2">au dessus</td>
   <td rowspan="2">à droite</td>
   <td rowspan="2"><img alt="Emphasis marks appear over each emphasized character in horizontal Japanese text." src="https://drafts.csswg.org/css-text-decor-3/images/text-emphasis-ja.png" style="height: 28px; width: 225px;" title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text"></td>
   <td rowspan="3"><img alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text." src="https://drafts.csswg.org/css-text-decor-3/images/text-emphasis-v.gif" style="height: 89px; width: 34px;" title="Emphasis applied on the right of a fragment of Japanese text"></td>
  </tr>
  <tr>
   <td>Mongolian</td>
  </tr>
  <tr>
   <td>Chinese</td>
   <td>en dessous</td>
   <td>à droite</td>
   <td><img alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text." src="https://drafts.csswg.org/css-text-decor-3/images/text-emphasis-zh.gif" style="height: 28px; width: 133px;" title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text"></td>
  </tr>
 </tbody>
</table>

<div class="note">
<p><strong>Note :</strong> La propriété <code>text-emphasis-position</code> ne peut pas être définie (et donc ne peut pas être redéfinie) avec la propriété raccourcie {{cssxref("text-emphasis")}}.</p>
</div>

<h2 id="Syntaxe">Syntaxe</h2>

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt><code><dfn>over</dfn></code></dt>
 <dd>Les marques sont dessinées au-dessus du texte lorsqu'il est écrit en mode horizontal.</dd>
 <dt><code><dfn>under</dfn></code></dt>
 <dd>Les marques sont dessinées en-dessous du texte lorsqu'il est écrit en mode horizontal.</dd>
 <dt><code><dfn>right</dfn></code></dt>
 <dd>Les marques sont dessinées à droite du texte lorsqu'il est écrit en mode vertical.</dd>
 <dt><code><dfn>left</dfn></code></dt>
 <dd>Les marques sont dessinées à gauche du texte lorsqu'il est écrit en mode vertical.</dd>
</dl>

<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>

{{csssyntax}}

<h2 id="Exemples">Exemples</h2>

<h3 id="Masquer_les_marques">Masquer les marques</h3>

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

<pre class="brush: css">ruby {
  text-emphasis: none;
}
</pre>

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

<pre class="brush: css">em {
 /* On utilise text-emphasis pour les &lt;em&gt; */
  text-emphasis: dot;
}

em rt {
 /* On masque le ruby dans les éléments &lt;em&gt; */
  display: none;
}</pre>

<h3 id="Exemple_live">Exemple <em>live</em></h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;p&gt;&lt;em&gt;Coucou&lt;/em&gt;, je suis &lt;em&gt;là&lt;/em&gt;&lt;/p&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">em {
  text-emphasis-style: sesame;
  text-emphasis-position: under right;
}</pre>

<h4 id="Résultat">Résultat</h4>

<p>{{EmbedLiveSample("Exemple_live","100%","100%")}}</p>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">Statut</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Text Decoration', '#text-emphasis-position-property', 'text-emphasis')}}</td>
   <td>{{Spec2('CSS3 Text Decoration')}}</td>
   <td>Définition initiale</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>

<p>{{Compat("css.properties.text-emphasis-position")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{cssxref("text-emphasis-style")}}</li>
 <li>{{cssxref("text-emphasis-color")}}</li>
 <li>{{cssxref("text-emphasis")}}</li>
</ul>