--- 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 <em> */ text-emphasis: dot; } em rt { /* On masque le ruby dans les éléments <em> */ display: none; }</pre> <h3 id="Exemple_live">Exemple <em>live</em></h3> <h4 id="HTML">HTML</h4> <pre class="brush: html"><p><em>Coucou</em>, je suis <em>là</em></p></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>