diff options
Diffstat (limited to 'files/fr/web/css/text-emphasis-position/index.md')
| -rw-r--r-- | files/fr/web/css/text-emphasis-position/index.md | 209 |
1 files changed, 109 insertions, 100 deletions
diff --git a/files/fr/web/css/text-emphasis-position/index.md b/files/fr/web/css/text-emphasis-position/index.md index f818083fef..723c88c987 100644 --- a/files/fr/web/css/text-emphasis-position/index.md +++ b/files/fr/web/css/text-emphasis-position/index.md @@ -7,11 +7,12 @@ tags: - Reference translation_of: Web/CSS/text-emphasis-position --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<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> +La propriété **`text-emphasis-position`** 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 [les annotations ruby](/fr/docs/Web/HTML/Element/ruby) quant à la hauteur de ligne : s'il n'y a pas suffisamment de place, la hauteur de la ligne est augmentée. -<pre class="brush:css">/* Valeur initiale */ +```css +/* Valeur initiale */ text-emphasis-position: over right; /* Valeurs avec mot-clé */ @@ -28,137 +29,145 @@ text-emphasis-position: left under; text-emphasis-position: inherit; text-emphasis-position: initial; text-emphasis-position: unset; -</pre> +``` -<h2 id="Position_privilégiée">Position privilégiée</h2> +## Position privilégiée -<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> +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 : <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> + <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> +> **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 {{cssxref("text-emphasis")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<h3 id="Valeurs">Valeurs</h3> +### Valeurs -<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> +- `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. -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +### Syntaxe formelle {{csssyntax}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Masquer_les_marques">Masquer les marques</h3> +### Masquer les marques -<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> +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 : -<pre class="brush: css">ruby { +```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> +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 : -<pre class="brush: css">em { - /* On utilise text-emphasis pour les <em> */ +```css +em { + /* On utilise text-emphasis pour les <em> */ text-emphasis: dot; } em rt { - /* On masque le ruby dans les éléments <em> */ + /* On masque le ruby dans les éléments <em> */ display: none; -}</pre> +} +``` -<h3 id="Exemple_live">Exemple <em>live</em></h3> +### Exemple _live_ -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><p><em>Coucou</em>, je suis <em>là</em></p></pre> +```html +<p><em>Coucou</em>, je suis <em>là</em></p> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css">em { +```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> +} +``` + +#### Résultat + +{{EmbedLiveSample("Exemple_live","100%","100%")}} + +## Spécifications + +| Spécification | Statut | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | ------------------- | +| {{SpecName('CSS3 Text Decoration', '#text-emphasis-position-property', 'text-emphasis')}} | {{Spec2('CSS3 Text Decoration')}} | Définition initiale | -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("css.properties.text-emphasis-position")}}</p> +{{Compat("css.properties.text-emphasis-position")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{cssxref("text-emphasis-style")}}</li> - <li>{{cssxref("text-emphasis-color")}}</li> - <li>{{cssxref("text-emphasis")}}</li> -</ul> +- {{cssxref("text-emphasis-style")}} +- {{cssxref("text-emphasis-color")}} +- {{cssxref("text-emphasis")}} |