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
167
168
169
170
171
172
173
174
175
176
177
178
|
---
title: text-emphasis
slug: Web/CSS/text-emphasis
translation_of: Web/CSS/text-emphasis
---
<div>
<p>La <strong>propiedad</strong> <strong><a href="https://developer.mozilla.org/es/docs/Web/CSS">CSS</a></strong> de <strong>text-emphasis</strong>, es una propiedad <em>abreviada</em> para establecer los valores de <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-style">text-empahasis-style</a> y <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-color">text-emphasis-color</a>, en una sola declaración.</p>
<p>Esta <strong>propiedad</strong> aplicara el énfasis a cada carácter especificado en el texto del elemento, a excepción de caracteres separados como espacios y caracteres de control .</p>
</div>
<pre class="brush:css no-line-numbers">/* Valor Inicial */
text-emphasis: none; /* No emphasis marks */
/* <string> valor */
text-emphasis: 'x';
text-emphasis: '点';
text-emphasis: '\25B2';
text-emphasis: '*' #555;
text-emphasis: 'foo'; /* Should NOT use. It may be computed to or rendered as 'f' only */
/* Valor de la Palabra Clave */
text-emphasis: filled;
text-emphasis: open;
text-emphasis: filled sesame;
text-emphasis: open sesame;
/* Valor de la Palabra clave combinada con un color */
text-emphasis: filled sesame #555;
/* Valores Globales */
text-emphasis: inherit;
text-emphasis: initial;
text-emphasis: unset;
</pre>
<p>La propiedad <strong>text-emphasis</strong> es diferente a la propiedad <a href="https://developer.mozilla.org/es/docs/Web/CSS/text-decoration">text-decoration</a>.</p>
<p><a href="https://developer.mozilla.org/es/docs/Web/CSS/text-decoration">Text-decoration</a> no hereda y la decoración se aplica atreves de todo el elemento. Sin embargo, la propiedad <strong>test-emphasis</strong> si hereda, lo que significa que es posible cambiar el <strong>énfasis</strong> para los descendientes.</p>
<p>The size of the emphasis symbol, like ruby symbols, is about 50% of the size of the font, and <code>text-emphasis</code> may affect line height when the current leading is not enough for the marks.</p>
<div class="note">
<p><code>text-emphasis</code> doesn't reset the value of {{cssxref("text-emphasis-position")}}. This is because if the style and the color of emphasis marks may vary in a text, it is extremely unlikely that their position will. In the very rare cases when this is needed, the property {{cssxref("text-emphasis-position")}}.</p>
</div>
<p>{{cssinfo}}</p>
<h2 id="Sintaxis">Sintaxis</h2>
<h3 id="Valores">Valores</h3>
<dl>
<dt><code>none</code></dt>
<dd>No emphasis marks.</dd>
<dt><code>filled</code></dt>
<dd>The shape is filled with solid color. If neither <code>filled</code> nor <code>open</code> is present, this is the default.</dd>
<dt><code>open</code></dt>
<dd>The shape is hollow.</dd>
<dt><code>dot</code></dt>
<dd>Display small circles as marks. The filled dot is <code>'•'</code> (<code>U+2022</code>), and the open dot is <code>'◦'</code> (<code>U+25E6</code>).</dd>
<dt><code>circle</code></dt>
<dd>Display large circles as marks. The filled circle is <code>'●'</code> (<code>U+25CF</code>), and the open circle is <code>'○'</code> (<code>U+25CB</code>). This is the default shape in horizontal writing modes when no other shape is given.</dd>
<dt><code>double-circle</code></dt>
<dd>Display double circles as marks. The filled double-circle is <code>'◉'</code> (<code>U+25C9</code>), and the open double-circle is <code>'◎'</code> (<code>U+25CE</code>).</dd>
<dt><code>triangle</code></dt>
<dd>Display triangles as marks. The filled triangle is <code>'▲'</code> (<code>U+25B2</code>), and the open triangle is <code>'△'</code> (<code>U+25B3</code>).</dd>
<dt><code>sesame</code></dt>
<dd>Display sesames as marks. The filled sesame is <code>'﹅'</code> (<code>U+FE45</code>), and the open sesame is <code>'﹆'</code> (<code>U+FE46</code>). This is the default shape in vertical writing modes when no other shape is given.</dd>
<dt><code><string></code></dt>
<dd>Display the given string as marks. Authors should not specify more than one<em> character</em> in <code><string></code>. The UA may truncate or ignore strings consisting of more than one grapheme cluster.</dd>
<dt><code><color></code></dt>
<dd>Defines the color of the mark. If no color is present, it defaults to <code>currentColor</code>.</dd>
</dl>
<h3 id="Formal_syntax">Formal syntax</h3>
<pre class="syntaxbox">{{csssyntax}}
</pre>
<h2 id="Ejemplos">Ejemplos</h2>
<h3 id="A_heading_with_emphasis_shape_and_color">A heading with emphasis shape and color</h3>
<p>This example draws a heading with triangles used to emphasize each character.</p>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">h2 {
text-emphasis: triangle #D55;
}</pre>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><h2>This is important!</h2></pre>
<h4 id="Resultado">Resultado</h4>
<p>{{EmbedLiveSample("A_heading_with_emphasis_shape_and_color", 500, 70)}}</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Text Decoration', '#text-emphasis-property', 'text-emphasis')}}</td>
<td>{{Spec2('CSS3 Text Decoration')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Firefox (Gecko)</th>
<th>Chrome</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatGeckoDesktop("46")}}<sup>[1]</sup></td>
<td>25.0{{property_prefix("-webkit")}}</td>
<td>{{CompatNo()}}</td>
<td>15.0{{property_prefix("-webkit")}}</td>
<td>6.1{{property_prefix("-webkit")}}<br>
7.1</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Firefox Mobile (Gecko)</th>
<th>Android</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatGeckoDesktop("46")}}<sup>[1]</sup></td>
<td>4.4{{property_prefix("-webkit")}}</td>
<td>{{CompatNo()}}</td>
<td>33{{property_prefix("-webkit")}}</td>
<td>7.1</td>
</tr>
</tbody>
</table>
</div>
<p>[1] In Firefox 45, it wasn't activated by default: in <code>about:config</code>, the user has to set the preference <code>layout.css.text-emphasis.enabled</code> to <code>true</code>. Activated by default in Firefox 46, this preference was removed in Firefox 49.</p>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li>The longhand properties {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis-color')}}.</li>
<li>The {{cssxref('text-emphasis-position')}} property allowing to define the position of the emphasis marks.</li>
</ul>
|
