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
|
---
title: text-emphasis
slug: Web/CSS/text-emphasis
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/text-emphasis
---
<div>{{CSSRef}}</div>
<p>La propriété <strong><code>text-emphasis</code></strong> est une propriété raccourcie qui permet de définir {{cssxref("text-emphasis-style")}} et {{cssxref("text-emphasis-color")}} avec une seule déclaration. Cette propriété appliquera les marques d'emphase définies sur chaque caractères du texte de l'élément sauf pour les séparateurs (comme les espaces) et les caractères de contrôle.</p>
<div>{{EmbedInteractiveExample("pages/css/text-emphasis.html")}}</div>
<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<p>La propriété <code>text-emphasis</code> est différente de {{cssxref("text-decoration")}}. La propriété <code>text-decoration</code> n'a pas d'héritage et la décoration est appliquée sur tout l'élément. Cependant, <code>text-emphasis</code> a un héritage et il est donc possible de changer la marque selon les « descendants » d'un élément.</p>
<p>La taille du symbole d'emphase, comme celle des symboles Ruby, représente environ 50% de la taille de la police du texte. <code>text-emphasis</code> peut modifier la hauteur de la ligne lorsque l'interlignage n'est pas suffisant pour placer les marques.</p>
<div class="note">
<p><strong>Note :</strong> <code>text-emphasis</code> ne réinitialise pas la valeur de {{cssxref("text-emphasis-position")}}. En effet, bien que la couleur et le style des marques puisse varier, il est très peu probable qu'on change leurs positions au cours du même document.</p>
</div>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush:css no-line-numbers">/* Valeur initiale */
text-emphasis: none; /* Pas de marque */
/* Chaîne de caractères */
/* Type <string> */
text-emphasis: 'x';
text-emphasis: '点';
text-emphasis: '\25B2';
text-emphasis: '*' #555;
/* À ne pas utiliser, cela pourra être */
/* considéré comme 't' uniquement */
text-emphasis: 'toto';
/* Valeurs avec mot(s)-clé(s) */
text-emphasis: filled;
text-emphasis: open;
text-emphasis: filled sesame;
text-emphasis: open sesame;
/* Valeurs avec mots-clés, combinés à une couleur */
text-emphasis: filled sesame #555;
/* Valeurs globales */
text-emphasis: inherit;
text-emphasis: initial;
text-emphasis: unset;
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>none</code></dt>
<dd>Il n'y aura pas de marques d'emphase appliquées.</dd>
<dt><code>filled</code></dt>
<dd>La forme de la marque est remplie avec une couleur unie. Si aucun des mots-clés parmi <code>filled</code> ou <code>open</code> n'est présent, ce sera la valeur par défaut.</dd>
<dt><code>open</code></dt>
<dd>La forme de la marque est évidée.</dd>
<dt><code>dot</code></dt>
<dd>La forme de la marque est un petit cercle. Le cercle plein est le caractère <code>'•'</code> (<code>U+2022</code>) et celui qui est évidé est <code>'◦'</code> (<code>U+25E6</code>).</dd>
<dt><code>circle</code></dt>
<dd>La forme de la marque est un grand cercle. Le cercle plein est le caractère <code>'●'</code> (<code>U+25CF</code>) et celui du cercle évidé est <code>'○'</code> (<code>U+25CB</code>). Lorsqu'aucune forme n'est spécifiée, c'est la forme par défaut utilisée pour les modes d'écriture horizontaux.</dd>
<dt><code>double-circle</code></dt>
<dd>La forme de la marque est un double-cercle. Le double-cercle plein est le caractère <code>'◉'</code> (<code>U+25C9</code>), celui du double-cercle évidé est <code>'◎'</code> (<code>U+25CE</code>).</dd>
<dt><code>triangle</code></dt>
<dd>La forme de la marque est un triangle. Le triangle plein correspond au caractère <code>'▲'</code> (<code>U+25B2</code>) et celui du triangle évidé correspond à <code>'△'</code> (<code>U+25B3</code>).</dd>
<dt><code>sesame</code></dt>
<dd>La forme de la marque est un sésame. Le sésame plein correspond au caractère <code>'﹅'</code> (<code>U+FE45</code>) et celui du sésame évidé correspond à <code>'﹆'</code> (<code>U+FE46</code>). Lorsqu'aucune forme n'a été définie, c'est la forme par défaut qui est utilisée pour les marques d'emphase pour les modes d'écriture verticaux.</dd>
<dt><code><string></code></dt>
<dd>La marque affichée sera la chaîne de caractères. Attention à n'utiliser que des chaînes d'un seul caractère. L'agent utilisateur peut tronquer ou ignorer les chaînes qui comportent plusieurs graphèmes.</dd>
<dt><code><color></code></dt>
<dd>Définit la couleur utilisée pour la marque. Si aucune couleur n'est définie, la valeur utilisée par défaut sera <code>currentColor</code>.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
<pre class="syntaxbox">{{csssyntax}}
</pre>
<h2 id="Exemples">Exemples</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p><em>Coucou</em>, je suis <em>là</em></p></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">em {
text-emphasis: sesame blue;
}</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample("Exemples")}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Text Decoration', '#text-emphasis-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")}}</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-position')}}</li>
</ul>
|
