diff options
Diffstat (limited to 'files/fr/web/css/text-emphasis-position/index.html')
| -rw-r--r-- | files/fr/web/css/text-emphasis-position/index.html | 167 |
1 files changed, 167 insertions, 0 deletions
diff --git a/files/fr/web/css/text-emphasis-position/index.html b/files/fr/web/css/text-emphasis-position/index.html new file mode 100644 index 0000000000..2dfa5fb7cb --- /dev/null +++ b/files/fr/web/css/text-emphasis-position/index.html @@ -0,0 +1,167 @@ +--- +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> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<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> |