1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
|
---
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>
|
