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 | 164 |
1 files changed, 0 insertions, 164 deletions
diff --git a/files/fr/web/css/text-emphasis-position/index.html b/files/fr/web/css/text-emphasis-position/index.html deleted file mode 100644 index f818083fef..0000000000 --- a/files/fr/web/css/text-emphasis-position/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -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="text-emphasis-ja.png" 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="text-emphasis-v.gif" 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="text-emphasis-zh.gif" 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> - -<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> |