css-text-decor-3/Overview.src.html@45007c88f5c7
css-text-decor-3/Overview.src.html
Thu, 07 Feb 2013 22:55:02 -0800
- author
- L. David Baron <dbaron@dbaron.org>
- date
- Thu, 07 Feb 2013 22:55:02 -0800
- changeset 7399
- 45007c88f5c7
- parent 7310
- 13343cf8c42f
- child 7548
- bdb242da56bb
- permissions
- -rw-r--r--
[css-text-decor-3] Add "Animatable:" lines to propdef tables, and change the Computed Value: line for the 'text-decoration' shorthand to "see individual properties".
The Animatable lines are as resolved in Tucson face-to-face at
2013-02-04 11:40:47 -0700, and edited by me per discussion starting at
2013-02-05 11:11:38 -0700.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
2 <html lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>CSS Text Decoration Module Level 3</title>
6 <link rel=contents href="#contents">
7 <!--<link rel=index href="#index">-->
8 <link rel="stylesheet" type="text/css" href="../default.css">
9 <link rel="stylesheet" type="text/css"
10 href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css">
12 </head>
14 <div class="head">
15 <!--logo-->
17 <h1>CSS Text Decoration Module Level 3</h1>
19 <h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
20 <dl>
21 <dt>This version:</dt>
22 <!--
23 <dd><a href="http://www.w3.org/TR/[YEAR]/WD-css-text-decor-3-[CDATE]/">http://www.w3.org/TR/[YEAR]/WD-css-text-decor-3-[CDATE]/</a></dd>
24 -->
25 <dd><a href="http://dev.w3.org/csswg/css-text-decor-3/">http://dev.w3.org/csswg/css-text-decor-3/</a>
27 <dt>Latest version:</dt>
28 <dd><a href="http://www.w3.org/TR/[SHORTNAME]/">http://www.w3.org/TR/[SHORTNAME]/</a></dd>
30 <dt>Latest editor's draft:</dt>
31 <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a></dd>
33 <dt>Previous version:</dt>
34 <dd><a
35 href="http://www.w3.org/TR/2012/WD-css-text-decor-3-20121113/">http://www.w3.org/TR/2012/WD-css-text-decor-3-20121113/</a>
37 <dt>Issues List:</dt>
38 <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/10">http://www.w3.org/Style/CSS/Tracker/products/10</a>
40 <dt>Discussion:</dt>
41 <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line “<kbd>[text-decor-3] <var>… message topic …</var></kbd>”
43 <dt>Editors:</dt>
44 <dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> (Mozilla)</dd>
45 <dd><a href="mailto:koji.a.ishii@mail.rakuten.com">Koji Ishii</a> (Rakuten, Inc.)</dd>
46 </dl>
48 <!--copyright-->
50 <hr title="Separator for header">
51 </div>
53 <h2 class="no-num no-toc" id="abstract">Abstract</h2>
55 <p>This module contains the features of CSS relating to
56 text decoration, such as underlines, text shadows, and emphasis marks.
57 <a href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing
58 the rendering of structured documents (such as HTML and XML) on screen, on
59 paper, in speech, etc.
61 <h2 class="no-num no-toc" id="status">Status of this document</h2>
64 <p><em>This section describes the status of this document at the time of
65 its publication. Other documents may supersede this document. A list of
66 current W3C publications and the latest revision of this technical report
67 can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
68 index at http://www.w3.org/TR/.</a></em>
70 <p>Publication as a Working Draft does not imply endorsement by the W3C
71 Membership. This is a draft document and may be updated, replaced or
72 obsoleted by other documents at any time. It is inappropriate to cite this
73 document as other than work in progress.
75 <p>This CSS module has been produced as a combined effort of the <a
76 href="http://www.w3.org/International/Activity">W3C Internationalization Activity</a>,
77 and the <a href="http://www.w3.org/Style/Activity">Style Activity</a> and is maintained
78 by the <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>. It also
79 includes contributions made by participants in the <a
80 href="http://www.w3.org/Style/XSL/Group/">XSL Working Group</a> (<a
81 href="http://cgi.w3.org/MemberAccess/AccessRequest">members
82 only</a>).
84 <p>This document was produced by a group operating under the <a
85 href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
86 2004 W3C Patent Policy</a>. W3C maintains a <a
87 href="http://www.w3.org/2004/01/pp-impl/32061/status"
88 rel=disclosure>public list of any patent disclosures</a> made in
89 connection with the deliverables of the group; that page also includes
90 instructions for disclosing a patent. An individual who has actual
91 knowledge of a patent which the individual believes contains <a
92 href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
93 Claim(s)</a> must disclose the information in accordance with <a
94 href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
95 6 of the W3C Patent Policy</a>.</p>
97 <p><strong>Feedback on this draft should be posted to the
98 (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
99 public mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a></strong>
100 (see <a href="http://www.w3.org/Mail/Request">instructions</a>) <strong>with
101 <kbd>[text-decor-3]</kbd> in the subject line.</strong>
102 You are strongly encouraged to complain if you see something stupid
103 in this draft. The editors will do their best to respond to all feedback.</p>
105 <p>The following features are at risk and may be cut from the spec during
106 its CR period if there are no (correct) implementations:</p>
107 <ul>
108 <li>the 'text-decoration-skip' property / ''ink'' value
109 <li>the <a href="#line-position">line positioning rules</a>
110 </ul>
112 <p>This is a <strong>Last Call Working Draft</strong>.
113 The deadline for comments is <strong>31 January 2013</strong>.
115 <h2 class="no-num no-toc" id="contents">
116 Table of Contents</h2>
118 <!--toc-->
120 <h2 id="intro">
121 Introduction</h2>
123 <p><em>This subsection is non-normative.</em>
125 <p>This module covers text decoration, i.e. decorating the glyphs
126 of the text once typeset according to font and typographic rules.
127 (See [[CSS3TEXT]] and [[CSS3-FONTS]].)
128 Such features are traditionally used not only for purely decorative purposes,
129 but also in some cases to show emphasis, for honorifics,
130 and to indicate editorial changes such as insertions, deletions, and misspellings.
132 <p>CSS Levels 1 and 2 only defined very basic <a href="#line-decoration">line decorations</a>
133 (underlines, overlines, and strike-throughs)
134 appropriate to Western typographical traditions.
135 Level 3 of this module adds the ability to change
136 the color, style, position, and continuity of these decorations,
137 and also introduces
138 <a href="#emphasis-marks">emphasis marks</a> (traditionally used in East Asian typography),
139 and <a href="#text-shadow-property">shadows</a> (which were proposed then deferred from Level 2).
141 <h3 id="placement">
142 Module Interactions</h3>
144 <p>This module replaces and extends the text-decorating
145 features defined in [[!CSS21]] chapter 16.
147 <h3 id="values">
148 Values</h3>
150 <p>This specification follows the
151 <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
152 definition conventions</a> from [[!CSS21]]. Value types not defined in
153 this specification are defined in CSS Level 2 Revision 1 [[!CSS21]].
154 Other CSS modules may expand the definitions of these value types: for
155 example [[CSS3COLOR]], when combined with this module, expands the
156 definition of the <color> value type as used in this specification.</p>
158 <p>In addition to the property-specific values listed in their definitions,
159 all properties defined in this specification also accept the
160 <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
161 keyword as their property value. For readability it has not been repeated
162 explicitly.
164 <h3 id="terms">Terminology</h3>
166 <p>The terms <a href="http://www.w3.org/TR/css3-text/#grapheme-cluster"><dfn>character</dfn></a>,
167 <a href="http://www.w3.org/TR/css3-text/#letter"><dfn>letter</dfn></a>, and
168 <a href="http://www.w3.org/TR/css3-text/#content-language"><dfn>content language</dfn></a>
169 as used in this specification are defined in [[!CSS3TEXT]].
170 Other terminology and concepts used in this specification are defined
171 in [[!CSS21]] and [[!CSS3-WRITING-MODES]].
173 <h2 id="line-decoration">
174 Line Decoration: Underline, Overline, and Strike-Through</h2>
176 <p>
177 The following properties describe line decorations that are added to the content of an element.
178 When specified on or propagated to an inline box,
179 that box becomes a <dfn>decorating box</dfn> for that decoration,
180 applying the decoration to all its fragments.
181 The decoration is then further propagated to any in-flow block-level boxes that split the inline
182 (see <a href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">CSS2.1 section 9.2.1.1</a>).
183 When specified on or propagated to a block container that establishes an inline formatting context,
184 the decorations are propagated to an anonymous inline box that wraps all the in-flow inline-level children of the block container.
185 When specified on or propagated to a ruby box,
186 the decorations are propagated only to the ruby base.
187 For all other box types,
188 the decorations are propagated to all in-flow children.
190 <p class="note">
191 Note that text decorations are not propagated to any out-of-flow descendants,
192 nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.
193 They are also not propagated to inline children of inline boxes,
194 although the decoration is <em>applied</em> to such boxes.
196 <p>
197 By default underlines, overlines, and line-throughs are applied only to non-replaced inline boxes,
198 and are drawn over all text (including white space, letter spacing, and word spacing).
199 Atomic inlines, such as images, are not decorated.
200 The 'text-decoration-skip' property can be used to modify this behavior,
201 for example allowing atomic inlines to be underlined
202 or requiring that white space be skipped.
203 Margins, borders, and padding of the <i>decorating box</i> are always skipped.
205 <p>Relatively positioning a descendant moves all text decorations
206 applied to it along with the descendant's text; it does not affect
207 calculation of the decoration's initial position on that line.
208 The 'visibility' property, 'text-shadow', filters, and other graphical transformations
209 likewise affect text decorations as part of the text they're drawn on,
210 even if the decorations were specified on an ancestor box.
212 <div class="example">
213 <p>In the following style sheet and document fragment:</p>
214 <pre>
215 <!-- --> blockquote { text-decoration: underline; color: blue; }
216 <!-- --> em { display: block; }
217 <!-- --> cite { color: fuchsia; }</pre>
218 <pre>
219 <!-- --> <blockquote>
220 <!-- --> <p>
221 <!-- --> <span>
222 <!-- --> Help, help!
223 <!-- --> <em> I am under a hat! </em>
224 <!-- -->
225 <!-- --> <cite> —GwieF </cite>
226 <!-- --> </span>
227 <!-- --> </p>
228 <!-- --> </blockquote></pre>
229 <p>...the underlining for the blockquote element is propagated to an
230 anonymous inline box that surrounds the span element, causing
231 the text "Help, help!" to be blue, with the blue underlining from
232 the anonymous inline underneath it, the color being taken from the
233 blockquote element. The <code><em>text</em></code>
234 in the em block is also underlined, as it is in an in-flow block to
235 which the underline is propagated. The final line of text is fuchsia,
236 but the underline underneath it is still the blue underline from the
237 anonymous inline element.</p>
238 <p><img src="underline-example.png" alt="Sample rendering of the above underline example"></p>
239 <p>This diagram shows the boxes involved in the example above. The
240 rounded aqua line represents the anonymous inline element wrapping
241 the inline contents of the paragraph element, the rounded blue line
242 represents the span element, and the orange lines represent the
243 blocks.</p>
244 </div>
246 <h3 id="text-decoration-line-property">
247 Text Decoration Lines: the 'text-decoration-line' property</h3>
249 <table class="propdef">
250 <tr>
251 <th>Name:
252 <td><dfn>text-decoration-line</dfn>
253 <tr>
254 <th><a href="#values">Value</a>:
255 <td>none | [ underline || overline || line-through || blink ]
257 <tr>
258 <th>Initial:
259 <td>none
260 <tr>
261 <th>Applies to:
262 <td>all elements
263 <tr>
264 <th>Inherited:
265 <td>no (but see prose)
266 <tr>
267 <th>Percentages:
268 <td>N/A
269 <tr>
270 <th>Media:
271 <td>visual
272 <tr>
273 <th>Computed value:
274 <td>as specified
275 <tr>
276 <th>Animatable:
277 <td>no
278 </table>
280 <p>Specifies what line decorations, if any, are added to the element.
281 Values have the following meanings:</p>
283 <dl>
284 <dt><dfn title="text-decoration-line:none">''none''</dfn>
285 <dd>Neither produces nor inhibits text decoration.
286 <dt><dfn>''underline''</dfn>
287 <dd>Each line of text is underlined.
288 <dt><dfn>''overline''</dfn>
289 <dd>Each line of text has a line over it (i.e. on the opposite
290 side from an underline).
291 <dt><dfn>''line-through''</dfn>
292 <dd>Each line of text has a line through the middle.
293 <dt><dfn>''blink''</dfn>
294 <dd>
295 The text blinks (alternates between visible and invisible).
296 Conforming user agents may simply not blink the text.
297 Note that not blinking the text is one technique to satisfy <a href="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">checkpoint 3.3 of WAI-UAAG</a>.
298 This value is <strong>deprecated</strong> in favor of Animations [[CSS3-ANIMATIONS]].
299 </dl>
301 <h3 id="text-decoration-color-property">
302 Text Decoration Color: the 'text-decoration-color' property</h3>
304 <table class="propdef">
305 <tr>
306 <th>Name:
307 <td><dfn>text-decoration-color</dfn>
308 <tr>
309 <th><a href="#values">Value</a>:
310 <td><a href="http://www.w3.org/TR/css3-color/#color0"><span class="value-inst-color"><color></span></a>
312 <tr>
313 <th>Initial:
314 <td><a href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a>
315 <tr>
316 <th>Applies to:
317 <td>all elements
318 <tr>
319 <th>Inherited:
320 <td>no
321 <tr>
322 <th>Percentages:
323 <td>N/A
324 <tr>
325 <th>Media:
326 <td>visual
327 <tr>
328 <th>Computed value:
329 <td>the computed color
330 <tr>
331 <th>Animatable:
332 <td>as <a href="http://dev.w3.org/csswg/css3-transitions/#animtype-color">color</a>
333 </table>
335 <p>This property specifies the color of text decoration (underlines
336 overlines, and line-throughs) set on the element with
337 'text-decoration-line'.</p>
339 <p>
340 The color of text decorations must remain the same on all decorations originating from a given element,
341 even if descendant boxes have different specified colors.
343 <h3 id="text-decoration-style-property">
344 Text Decoration Style: the 'text-decoration-style' property</h3>
346 <table class="propdef">
347 <tr>
348 <th>Name:
349 <td><dfn>text-decoration-style</dfn>
350 <tr>
351 <th><a href="#values">Value</a>:
352 <td>solid | double | dotted | dashed | wavy
354 <tr>
355 <th>Initial:
356 <td>solid
357 <tr>
358 <th>Applies to:
359 <td>all elements
360 <tr>
361 <th>Inherited:
362 <td>no
363 <tr>
364 <th>Percentages:
365 <td>N/A
366 <tr>
367 <th>Media:
368 <td>visual
369 <tr>
370 <th>Computed value:
371 <td>as specified
372 <tr>
373 <th>Animatable:
374 <td>no
375 </table>
377 <p>This property specifies the style of the line(s) drawn for
378 text decoration specified on the element. Values have the
379 same meaning as for the
380 <a href="http://www.w3.org/TR/css3-background/#the-border-style">border-style
381 properties</a> [[!CSS3BG]]. ''wavy'' indicates a wavy line.</p>
383 <p>
384 The style of text decorations must remain the same on all decorations originating from a given element,
385 even if descendant boxes have different specified styles.
387 <h3 id="text-decoration-property">
388 Text Decoration Shorthand: the 'text-decoration' property</h3>
390 <table class="propdef">
391 <tr>
392 <th>Name:
393 <td><dfn>text-decoration</dfn>
394 <tr>
395 <th><a href="#values">Value</a>:
396 <td><var><a href="#text-decoration-line"><text-decoration-line></a></var> ||
397 <var><a href="#text-decoration-style"><text-decoration-style></a></var> ||
398 <var><a href="#text-decoration-color"><text-decoration-color></a></var>
400 <tr>
401 <th>Initial:
402 <td>none
403 <tr>
404 <th>Applies to:
405 <td>all elements
406 <tr>
407 <th>Inherited:
408 <td>no
409 <tr>
410 <th>Percentages:
411 <td>N/A
412 <tr>
413 <th>Media:
414 <td>visual
415 <tr>
416 <th>Computed value:
417 <td>see individual properties
418 <tr>
419 <th>Animatable:
420 <td>see individual properties
421 </table>
423 <p>This property is a shorthand for setting 'text-decoration-line',
424 'text-decoration-color', and 'text-decoration-style' in one declaration.
425 Omitted values are set to their initial values. A 'text-decoration'
426 declaration that omits both the 'text-decoration-color'
427 and 'text-decoration-style' values is backwards-compatible
428 with CSS Levels 1 and 2.</p>
430 <div class="example">
431 <p>The following example underlines unvisited links with a solid blue
432 underline in CSS1 and CSS2 UAs and a navy dotted underline in CSS3 UAs.</p>
434 <pre><code class="css">
435 <!-- -->:link {
436 <!-- --> color: blue;
437 <!-- --> text-decoration: underline;
438 <!-- --> text-decoration: navy dotted underline; /* <a href="http://www.w3.org/TR/CSS21/syndata.html#ignore">Ignored</a> in CSS1/CSS2 UAs */
439 <!-- -->}</code></pre>
440 </div>
442 <h3 id="text-decoration-skip-property">
443 Text Decoration Line Continuity: the 'text-decoration-skip' property</h3>
445 <table class="propdef">
446 <tr>
447 <th>Name:
448 <td><dfn>text-decoration-skip</dfn>
449 <tr>
450 <th><a href="#values">Value</a>:
451 <td>none | [ objects || spaces || ink || edges || box-decoration ]
453 <tr>
454 <th>Initial:
455 <td>objects
456 <tr>
457 <th>Applies to:
458 <td>all elements
459 <tr>
460 <th>Inherited:
461 <td>yes
462 <tr>
463 <th>Percentages:
464 <td>N/A
465 <tr>
466 <th>Media:
467 <td>visual
468 <tr>
469 <th>Computed value:
470 <td>as specified
471 <tr>
472 <th>Animatable:
473 <td>no
474 </table>
476 <p>This property specifies what parts of the element's content
477 any text decoration affecting the element must skip over. It
478 controls all text decoration lines drawn by the element
479 and also any text decoration lines drawn by its ancestors.
480 Values have the following meanings:</p>
482 <dl>
483 <dt><dfn title="text-decoration-skip:none">''none''</dfn></dt>
484 <dd>Skip nothing: text-decoration is drawn for all text content
485 and for inline replaced elements.</dd>
486 <dt><dfn title="text-decoration-skip:objects">''objects''</dfn></dt>
487 <dd>Skip this element if it is an atomic inline (such as an
488 image or inline-block).</dd>
489 <dt><dfn title="text-decoration-skip:spaces">''spaces''</dfn></dt>
490 <dd>Skip spaces:
491 this includes space (U+0020) and tab (U+0009),
492 as well as nbsp (U+00A0), ideographic space (U+3000),
493 all fixed width spaces (such as U+2000–U+200A, U+202F and U+205F),
494 plus any adjacent letter-spacing or word-spacing [[!CSS3TEXT]].
495 <p class="issue">Should this include visible characters like Ethiopic Word Space?
496 <dt><dfn title="text-decoration-skip:ink">''ink''</dfn></dt>
497 <dd>Skip over where glyphs are drawn: interrupt the decoration
498 line to let text show through where the text decoration would
499 otherwise cross over a glyph. The UA may also skip a small
500 distance to either side of the glyph outline.</dd>
501 <dt><dfn title="text-decoration-skip:edges">''edges''</dfn></dt>
502 <dd>The UA should place the start and end of the line inwards from
503 the content edge of the <i>decorating element</i> so that, e.g. two
504 underlined elements side-by-side do not appear to have a single
505 underline. (This is important in Chinese, where underlining is a
506 form of punctuation.)</dd>
507 <dt><dfn title="text-decoration-skip:box-decoration">''box-decoration''</dfn>
508 <dd>
509 Skip over the box's margin, border, and padding areas.
510 Note that this only has an effect on decorations imposed by an ancestor.
511 </dl>
513 <p class="note">Note that this property inherits and that descendant
514 elements can have a different setting.</p>
516 <p class='note'>
517 Note that CSS 2.1 required skipping margins, borders, and padding always.
518 In this level, by default only the margins, borders, and padding of the <i>decorating element</i> are skipped.
520 <h3 id="text-underline-position-property">
521 Text Underline Position: the 'text-underline-position' property</h3>
523 <table class="propdef">
524 <tr>
525 <th>Name:
526 <td><dfn>text-underline-position</dfn>
527 <tr>
528 <th><a href="#values">Value</a>:
529 <td>auto | alphabetic | [ under || [ left | right ] ]
531 <tr>
532 <th>Initial:
533 <td>auto
534 <tr>
535 <th>Applies to:
536 <td>all elements
537 <tr>
538 <th>Inherited:
539 <td>yes
540 <tr>
541 <th>Percentages:
542 <td>N/A
543 <tr>
544 <th>Media:
545 <td>visual
546 <tr>
547 <th>Computed value:
548 <td>as specified
549 <tr>
550 <th>Animatable:
551 <td>no
552 </table>
554 <p>This property sets the position of an underline specified
555 on the same element: it does not affect underlines specified by
556 ancestor elements. Values have the following meanings:</p>
558 <dl>
559 <dt><dfn id="underline-auto" title="text-underline-position: auto">''auto''</dfn></dt>
560 <dd>The user agent may use any algorithm to determine the
561 underline's position; however it must be placed at or under
562 the alphabetic baseline.
563 <p class="note">It is suggested that the underline position
564 be ''alphabetic'' unless it crosses either subscripted (or
565 otherwise lowered) text, or it affects characters from Asian
566 scripts such as Han or Tibetan, for which an alphabetic
567 underline is too high: in such cases, aligning to the em box
568 edge as described for ''under left'' is more appropriate.
569 <dt><dfn id="underline-alphabetic" title="text-underline-position: alphabetic">''alphabetic''</dfn></dt>
570 <dd>The underline is positioned relative to the alphabetic baseline. In
571 this case the underline is likely to cross some descenders.
572 <div class="figure">
573 <p><img title="text-underline-position: alphabetic"
574 alt="In a typical Latin font, the underline is positioned slightly
575 below the alphabetic baseline, leaving a gap between the line
576 and the bottom of most Latin letters, but crossing through
577 descenders such as the stem of a 'p'."
578 src="underline-position-alphabetic.png"
579 >
580 <p class="caption">''text-underline-position: alphabetic''</p>
581 </div>
582 <dt><dfn id="underline-under" title="text-underline-position: under">''under''</dfn></dt>
583 <dd>In horizontal writing modes, the underline is positioned
584 relative to the under edge of the element's content box.
585 In this case the underline usually does not cross the descenders.
586 (This is sometimes called "accounting" underline.)
587 If the underline affects descendants with a lower content edge,
588 the user agent should shift the underline down further to the
589 lowest underlined content box edge.
590 The user agent may ignore elements with ''vertical-align''
591 values given as lengths, percentages, ''top'', or ''bottom''
592 when making this adjustment.
593 (Note that images that are not affected by the underline per
594 'text-decoration-skip' will not affect the position of the
595 underline.)
596 <div class="figure">
597 <p><img title="text-underline-position: under"
598 alt="In a typical Latin font, the underline is far enough
599 below the text that it does not cross the bottom of a 'g'."
600 src="underline-position-under.png"
601 >
602 <p class="caption">''text-underline-position: under''</p>
603 </div>
604 <div class="example">
605 <p>Because 'text-underline-position' inherits, and is not reset
606 by the 'text-decoration' shorthand, the following example
607 switches the document to use ''under'' underlining, which can
608 be more appropriate for writing systems with long, complicated
609 descenders. It is also often useful for mathematical or chemical
610 texts that use many subscripts.
611 <pre>:root { text-underline-position: under; }</pre>
612 </div>
613 <dt><dfn id="underline-left" title="text-underline-position: left">''left''</dfn></dt>
614 <dd>In vertical writing modes, the underline is aligned as for
615 ''under'', except it is always aligned to the left edge of the text.
616 If this causes the underline to be drawn on the "over" side of
617 the text, then an overline also switches sides and is drawn on
618 the "under" side.
619 <dt><dfn id="underline-right" title="text-underline-position: right">''right''</dfn></dt>
620 <dd>In vertical writing modes, the underline is aligned as for
621 ''under'', except it is always aligned to the right edge of the text.
622 If this causes the underline to be drawn on the "over" side of
623 the text, then an overline also switches sides and is drawn on
624 the "under" side.</dd>
625 </dl>
627 <p>If ''under'' is specified alone, ''left'' is also implied.
628 If ''left'' or ''right'' is specified alone, ''under'' is also
629 implied.
631 <div class="figure" id="fig-text-underline-position">
632 <table>
633 <tr>
634 <td>
635 <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left'
636 places the underline on the left side of the text."
637 title="text-underline-position: left"
638 src="underline-position-left.png"
639 >
641 <td>
642 <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right'
643 places the underline on the right side of the text."
644 title="text-underline-position: right"
645 src="underline-position-right.png"
646 >
648 <tr>
649 <td>''left''
650 <td>''right''
651 </table>
652 <p class="caption">In vertical writing modes, the 'text-underline-position'
653 values ''left'' and ''right'' allow placing the underline on either
654 side of the text. (In horizontal writing modes, both values are
655 treated as ''under''.)</p>
656 </div>
658 <div class="example">
659 <p>The following example styles modern Chinese, Japanese, and Korean
660 texts with the appropriate underline positions in both horizontal
661 and vertical text:
662 <pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: under right; }
663 <!-- -->:root:lang(zh), [lang|=zh] { text-underline-position: under left; }</pre>
664 </div>
666 <h3 id="line-position">
667 Determining the Position and Thickness of Line Decorations</h3>
669 <p>In determining the position of text decoration lines,
670 user agents must consider, per line box, the "ideal" positions of all fragments
671 of in-flow inline descendants of the <i>decorating box</i> on that line
672 as follows
673 (treating <a href="#underline-left"><i>over</i>-positioned underlines</a> as <i>over</i> lines
674 and <a href="#underline-left"><i>under</i>-positioned overlines</a> as <i>under</i> lines):
676 <dl>
677 <dt><a href="http://dev.w3.org/csswg/css3-writing-modes/#over"><i>over</i></a> lines
678 <dd>
679 Align the line decoration with respect to the highest
680 <!-- <i>text-over</i> baseline of the considered fragments. -->
681 <a href="http://dev.w3.org/csswg/css3-writing-modes/#over"><i>over</i></a> edge
682 of the considered fragments' EM boxes.
684 <dt><a href="#underline-alphabetic"><i>alphabetic</i></a> underlines
685 <dd>
686 Calculate an average of the ideal underlining offsets
687 (from their respective alphabetic baselines)
688 of the considered fragments,
689 assigning any inline with non-initial 'vertical-align' the ideal offset of its parent.
690 Align the line decoration to the lowest alphabetic baseline considered,
691 with that calculated offset.
692 (Alphabetic baselines can differ between ''baseline''-aligned boxes if the dominant baseline is non-alphabetic.)
694 <dt>non-alphabetic <a href="http://dev.w3.org/csswg/css3-writing-modes/#under"><i>under</i></a> lines
695 <dd>
696 Position the line decoration with respect to the lowest
697 <!-- <i>text-under</i> baseline of the considered fragments. -->
698 <a href="http://dev.w3.org/csswg/css3-writing-modes/#under"><i>under</i></a> edge
699 of the considered fragments' EM boxes.
701 <dt>line-throughs
702 <dd>
703 For each set of considered fragments with the same 'font-size',
704 compute an ideal position averaged from their direct contents and font metrics,
705 assigning any fragment with non-initial 'vertical-align' the ideal position of its parent.
706 Position the portion of the line across each decorated fragment at that fragment's ideal position.
707 (Essentially, this performs the same sort of averaging as for alphabetic underlines,
708 but recomputes the position when drawing across a descendant with a different computed 'font-size'.
709 This ensures that the text remains effectively "crossed out" despite any font size changes.)
710 </dl>
712 <p>
713 CSS does not define the thickness of line decorations.
714 In determining the thickness of text decoration lines,
715 user agents may consider the font sizes, faces, and weights of descendants
716 to provide an appropriately averaged thickness.
718 <div class="example">
719 <p>The following figure shows the averaging for underline:
720 <p><img alt="In the first rendering of the underlined text '1st a'
721 with 'st' as a superscript, both the '1st' and the 'a'
722 are rendered in a small font. In the second rendering,
723 the 'a' is rendered in a larger font. In the third, both
724 '1st' and 'a' are large."
725 height="105" src="underline-averaging.gif" width="326">
726 <p>In the three fragments of underlined text, the underline is drawn
727 consecutively lower and thicker as the ratio of large text to small
728 text increases.</p>
729 <p>Using the same example, a line-through would in the second fragment,
730 instead of averaging the two font sizes,
731 split the line-through into two segments:
732 <p><img alt="" src="linethrough-averaging.gif">
733 <p>In both cases, however, the superscript, due to the vertical-alignment shift,
734 has no effect on the position of the line.
735 </div>
737 <div class="note">
738 <p>In some cases (such as in OpenType) the font format can offer
739 information about the appropriate position of an underline.
740 Typically this information gives the position of an ''alphabetic''
741 underline; in some cases (especially in CJK fonts), it gives
742 the position of a ''under left'' underline. (In this case,
743 the font's underline metrics typically touch the bottom edge
744 of the em box).
745 The UA is encouraged to use information (such as the underline
746 thickness, or appropriate alphabetic alignment) from the font
747 wherever appropriate.
748 </p>
749 </div>
751 <h2 id="emphasis-marks">
752 Emphasis Marks</h2>
754 <p>East Asian documents traditionally use small symbols next to each glyph to emphasize
755 a run of text. For example:</p>
757 <div class="figure">
758 <p>
759 <img alt="Example of emphasis in Japanese appearing over the text"
760 class="example" src="text-emphasis-ja.gif" height="28" width="225"></p>
761 <p class="caption">Accent emphasis (shown in blue for clarity) applied to Japanese text</p>
762 </div>
764 <h3 id="text-emphasis-style-property">
765 Emphasis Mark Style: the 'text-emphasis-style' property</h3>
767 <table class="propdef">
768 <tr>
769 <th>Name:
770 <td><dfn>text-emphasis-style</dfn>
771 <tr>
772 <th><a href="#values">Value</a>:
773 <td>none |
774 [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] |
775 <a class="noxref" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string"><span class="value-inst-string"><string></span></a>
777 <tr>
778 <th>Initial:
779 <td>none
780 <tr>
781 <th>Applies to:
782 <td>all elements
783 <tr>
784 <th>Inherited:
785 <td>yes
786 <tr>
787 <th>Percentages:
788 <td>N/A
789 <tr>
790 <th>Media:
791 <td>visual
792 <tr>
793 <th>Computed value:
794 <td>'none', a pair of keywords representing the shape and fill, or
795 a string
796 <tr>
797 <th>Animatable:
798 <td>no
799 </table>
801 <p>This property applies emphasis marks to the element's text.
802 Values have the following meanings:</p>
804 <dl>
805 <dt><dfn title="text-emphasis:none">''none''</dfn></dt>
806 <dd>No emphasis marks.</dd>
807 <dt><dfn title="text-emphasis:filled">''filled''</dfn></dt>
808 <dd>The shape is filled with solid color.</dd>
809 <dt><dfn title="text-emphasis:open">''open''</dfn></dt>
810 <dd>The shape is hollow.</dd>
811 <dt><dfn title="text-emphasis:dot">''dot''</dfn></dt>
812 <dd>Display small circles as marks.
813 The filled dot is U+2022 '•', and the open dot is U+25E6 '◦'.</dd>
814 <dt><dfn title="text-emphasis:circle">''circle''</dfn></dt>
815 <dd>Display large circles as marks.
816 The filled circle is U+25CF '●', and the open circle is U+25CB '○'.</dd>
817 <dt><dfn title="text-emphasis:double-circle">''double-circle''</dfn></dt>
818 <dd>Display double circles as marks.
819 The filled double-circle is U+25C9 '◉', and the open double-circle is U+25CE '◎'.</dd>
820 <dt><dfn title="text-emphasis:triangle">''triangle''</dfn></dt>
821 <dd>Display triangles as marks.
822 The filled triangle is U+25B2 '▲', and the open triangle is U+25B3 '△'.</dd>
823 <dt><dfn title="text-emphasis:sesame">''sesame''</dfn></dt>
824 <dd>Display sesames as marks.
825 The filled sesame is U+FE45 '﹅', and the open sesame is U+FE46 '﹆'.</dd>
826 <dt><dfn title="text-emphasis:sesame">''<var><string></var>''</dfn></dt>
827 <dd>Display the given string as marks.
828 Authors should not specify more than one <i>character</i> in <string>.
829 The UA may truncate or ignore strings consisting of more than one grapheme cluster.</dd>
830 </dl>
832 <p>If a shape keyword is specified but neither of ''filled'' nor ''open'' is
833 specified, ''filled'' is assumed. If only ''filled'' or ''open'' is specified,
834 the shape keyword computes to ''circle'' in horizontal writing mode and
835 ''sesame'' in vertical writing mode.</p>
837 <p>The marks should be drawn using the element's font settings with its
838 size scaled down to 50%. However, not all fonts have all these glyphs,
839 and some fonts use inappropriate sizes for emphasis marks in these
840 code points. The UA may opt to use a font known to be good for
841 emphasis marks, or the marks may instead be synthesized by the UA.
842 Marks must remain upright in vertical writing modes: like CJK
843 characters, they do not rotate to match the writing mode.</p>
845 <p class="note">
846 One example of good fonts for emphasis marks is Adobe's opensource project,
847 <a href="http://sourceforge.net/adobe/kenten-generic/">Kenten Generic OpenType Font</a>,
848 which is specially designed for the emphasis marks.
849 </p>
851 <p>The marks are drawn once for each <i>character</i>. However,
852 emphasis marks are not drawn for characters that are:</p>
853 <ul>
854 <li><a href="http://www.w3.org/TR/css3-text/#word-separator">Word separators</a> or that
855 belong to the Unicode separator classes (Z*).
856 (But note that emphasis marks <em>are</em> drawn for a space
857 that combines with any combining characters.)</li>
858 <li>Characters belonging to the Unicode classes for control codes
859 and unassigned characters (Cc, Cf, Cn).</li>
860 </ul>
862 <p>If emphasis marks are drawn for characters
863 for which ruby is drawn in the same position as the emphasis mark,
864 the ruby should be stacked between the emphasis marks and the base text.
865 In this case, the position of the emphasis marks for a given element
866 should be determined as if all characters have ruby boxes
867 of the same height as the highest ruby box in the element.
868 If the UA is not capable of drawing ruby and emphasis marks on the same side,
869 the UA may hide ruby and draw only emphasis marks.</p>
870 <div class="figure">
871 <p><img
872 alt="Example of emphasis marks applied to 4 characters, and ruby to 2 of them"
873 src="text-emphasis-ruby.png" width="134" height="50"></p>
874 <p class="caption">Emphasis marks applied to 4 characters, and ruby to 2 of them</p>
875 </div>
877 <p class="note">A future level of CSS may define controls to specify
878 what to do when emphasis marks and ruby text coincide.</p>
880 <h3 id="text-emphasis-color-property">
881 Emphasis Mark Color: the 'text-emphasis-color' property</h3>
883 <table class="propdef">
884 <tr>
885 <th>Name:
886 <td><dfn>text-emphasis-color</dfn>
887 <tr>
888 <th><a href="#values">Value</a>:
889 <td><color>
890 <tr>
891 <th>Initial:
892 <td><a href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a>
893 <tr>
894 <th>Applies to:
895 <td>all elements
896 <tr>
897 <th>Inherited:
898 <td>yes
899 <tr>
900 <th>Percentages:
901 <td>N/A
902 <tr>
903 <th>Media:
904 <td>visual
905 <tr>
906 <th>Computed value:
907 <td>as specified
908 <tr>
909 <th>Animatable:
910 <td>as <a href="http://dev.w3.org/csswg/css3-transitions/#animtype-color">color</a>
911 </table>
913 <p>This property specifies the foreground color of the emphasis marks.</p>
915 <p class="note">
916 The <dfn>''currentcolor''</dfn> keyword computes to itself
917 and is resolved to the value of 'color' after inheritance is performed.
918 This means 'text-emphasis-color' by default matches the text 'color'
919 even as 'color' changes across elements.
921 <h3 id="text-emphasis-property">
922 Emphasis Mark Shorthand: the 'text-emphasis' property</h3>
924 <table class="propdef">
925 <tr>
926 <th>Name:
927 <td><dfn>text-emphasis</dfn>
928 <tr>
929 <th><a href="#values">Value</a>:
930 <td>'<<a href="#text-emphasis-style">text-emphasis-style</a>>' || '<<a href="#text-emphasis-color">text-emphasis-color</a>>'
932 <tr>
933 <th>Initial:
934 <td>see individual properties
935 <tr>
936 <th>Applies to:
937 <td>all elements
938 <tr>
939 <th>Inherited:
940 <td>yes
941 <tr>
942 <th>Percentages:
943 <td>N/A
944 <tr>
945 <th>Media:
946 <td>visual
947 <tr>
948 <th>Computed value:
949 <td>see individual properties
950 <tr>
951 <th>Animatable:
952 <td>see individual properties
953 </table>
955 <p>This property is a shorthand for setting
956 'text-emphasis-style' and 'text-emphasis-color'
957 in one declaration.
958 Omitted values are set to their initial values.</p>
960 <p class="note">Note that 'text-emphasis-position' is not reset in this
961 shorthand. This is because typically the shape and color vary, but the
962 position is consistent for a particular language throughout the document.
963 Therefore the position should inherit independently.</p>
965 <h3 id="text-emphasis-position-property">
966 Emphasis Mark Position: the 'text-emphasis-position' property</h3>
968 <table class="propdef">
969 <tr>
970 <th>Name:
971 <td><dfn>text-emphasis-position</dfn>
972 <tr>
973 <th><a href="#values">Value</a>:
974 <td>[ over | under ] && [ right | left ]
976 <tr>
977 <th>Initial:
978 <td>over right
979 <tr>
980 <th>Applies to:
981 <td>all elements
982 <tr>
983 <th>Inherited:
984 <td>yes
985 <tr>
986 <th>Percentages:
987 <td>N/A
988 <tr>
989 <th>Media:
990 <td>visual
991 <tr>
992 <th>Computed value:
993 <td>as specified
994 <tr>
995 <th>Animatable:
996 <td>no
997 </table>
999 <p>This property describes where emphasis marks are drawn at.
1000 The values have following meanings:</p>
1002 <dl>
1003 <dt><dfn title="text-emphasis:over">''over''</dfn></dt>
1004 <dd>Draw marks over the text in horizontal writing mode.</dd>
1005 <dt><dfn title="text-emphasis:under">''under''</dfn></dt>
1006 <dd>Draw marks under the text in horizontal writing mode.</dd>
1007 <dt><dfn title="text-emphasis:right">''right''</dfn></dt>
1008 <dd>Draw marks to the right of the text in vertical writing mode.</dd>
1009 <dt><dfn title="text-emphasis:left">''left''</dfn></dt>
1010 <dd>Draw marks to the left of the text in vertical writing mode.</dd>
1011 </dl>
1013 <p>Emphasis marks are drawn exactly as if each character was
1014 assigned the mark as its ruby annotation text with the ruby position
1015 given by 'text-emphasis-position' and the ruby alignment as centered.
1017 <p>The effect of emphasis marks on the line height is the same as for
1018 ruby text.</p>
1020 <div class="note">
1021 <p>Note, the preferred position of emphasis marks depends on the
1022 language. In Japanese for example, the preferred position is
1023 ''over right''. In Chinese, on the other hand, the preferred
1024 position is ''under right''.
1025 The informative table below summarizes the preferred
1026 emphasis mark positions for Chinese and Japanese:</p>
1028 <table class="data">
1029 <caption>Preferred emphasis mark and ruby position</caption>
1030 <thead>
1031 <tr>
1032 <th scope="col" rowspan=2>Language
1033 <th scope="col" colspan=2>Preferred position
1034 <th scope="col" colspan=2 rowspan=2>Illustration
1035 <tr>
1036 <th>Horizontal
1037 <th>Vertical
1038 </thead>
1039 <tbody>
1040 <tr>
1041 <td scope="row">Japanese
1042 <td rowspan="2">over
1043 <td rowspan="2">right
1044 <td rowspan="2">
1045 <img alt="Emphasis marks appear over each emphasized character in horizontal Japanese text."
1046 title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text"
1047 src="text-emphasis-ja.gif" height="28" width="225">
1049 <td rowspan="3">
1050 <img alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text."
1051 title="Emphasis applied on the right of a fragment of Japanese text"
1052 src="text-emphasis-v.gif" height="89" width="34">
1054 <tr>
1055 <td scope="row">Mongolian
1056 <tr>
1057 <td scope="row">Chinese
1058 <td>under
1059 <td>right
1060 <td>
1061 <img alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text."
1062 title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text"
1063 src="text-emphasis-zh.gif" height="28" width="133">
1064 </tbody>
1065 </table>
1066 </div>
1068 <h2 id="text-shadow-property">
1069 Text Shadows: the 'text-shadow' property</h2>
1071 <table class="propdef">
1072 <tr>
1073 <th>Name:
1074 <td><dfn>text-shadow</dfn>
1075 <tr>
1076 <th><a href="#values">Value</a>:
1077 <td>none | [ <length>{2,3} && <color>? ]#
1078 <tr>
1079 <th>Initial:
1080 <td>none
1081 <tr>
1082 <th>Applies to:
1083 <td>all elements
1084 <tr>
1085 <th>Inherited:
1086 <td>yes
1087 <tr>
1088 <th>Percentages:
1089 <td>N/A
1090 <tr>
1091 <th>Media:
1092 <td>visual
1093 <tr>
1094 <th>Computed value:
1095 <td>a color plus three absolute <length>s
1096 <tr>
1097 <th>Animatable:
1098 <td>as <a href="http://dev.w3.org/csswg/css3-transitions/#animtype-shadow-list">shadow list</a>
1099 </table>
1101 <p>This property accepts a comma-separated list of shadow effects to
1102 be applied to the text of the element. Values are interpreted as for
1103 <a href="http://www.w3.org/TR/css3-background/#the-box-shadow">'box-shadow'</a>
1104 [[!CSS3BG]]. (But note that spread values are not allowed.)
1105 The shadow is applied to all of the element's text as well as any
1106 text decorations it specifies.
1108 <p>The shadow effects are applied front-to-back: the first shadow is on
1109 top. The shadows may thus overlay each other, but they never overlay
1110 the text itself. The shadow must be painted at a stack level between
1111 the element's border and/or background, if present, and the elements
1112 text and text decoration. UAs should avoid painting text shadows over
1113 text in adjacent elements belonging to the same stack level and stacking
1114 context. (This may mean that the exact stack level of the shadows depends
1115 on whether the element has a border or background: the exact stacking
1116 behavior of text shadows is thus UA-defined.)</p>
1118 <p>Unlike 'box-shadow', text shadows are not clipped to the shadowed
1119 shape and may show through if the text is partially-transparent.
1120 Like 'box-shadow', text shadows do not influence layout, and do not
1121 trigger scrolling or increase the size of the scrollable area.
1123 <p class="note">The painting order of shadows defined here is the opposite
1124 of that defined in the 1998
1125 <a href="http://www.w3.org/TR/1998/REC-CSS2-19980512">CSS2 Recommendation</a>.</p>
1127 <p>The ''text-shadow'' property applies to both the
1128 <code>::first-line</code> and <code>::first-letter</code>
1129 pseudo-elements.</p>
1131 <h2 id="conformance">
1132 Conformance</h2>
1134 <h3 id="conventions">
1135 Document Conventions</h3>
1137 <p>Conformance requirements are expressed with a combination of
1138 descriptive assertions and RFC 2119 terminology. The key words “MUST”,
1139 “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
1140 “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
1141 document are to be interpreted as described in RFC 2119.
1142 However, for readability, these words do not appear in all uppercase
1143 letters in this specification.
1145 <p>All of the text of this specification is normative except sections
1146 explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p>
1148 <p>Examples in this specification are introduced with the words “for example”
1149 or are set apart from the normative text with <code>class="example"</code>,
1150 like this:
1152 <div class="example">
1153 <p>This is an example of an informative example.</p>
1154 </div>
1156 <p>Informative notes begin with the word “Note” and are set apart from the
1157 normative text with <code>class="note"</code>, like this:
1159 <p class="note">Note, this is an informative note.</p>
1161 <h3 id="conformance-classes">
1162 Conformance Classes</h3>
1164 <p>Conformance to CSS Text Level 3
1165 is defined for three conformance classes:
1166 <dl>
1167 <dt><dfn title="style sheet!!as conformance class">style sheet</dfn>
1168 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
1169 style sheet</a>.
1170 <dt><dfn>renderer</dfn></dt>
1171 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
1172 that interprets the semantics of a style sheet and renders
1173 documents that use them.
1174 <dt><dfn id="authoring-tool">authoring tool</dfn></dt>
1175 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
1176 that writes a style sheet.
1177 </dl>
1179 <p>A style sheet is conformant to CSS Text Level 3
1180 if all of its declarations that use properties defined in this module
1181 have values that are valid according to the generic CSS grammar and the
1182 individual grammars of each property as given in this module.
1184 <p>A renderer is conformant to CSS Text Level 3
1185 if, in addition to interpreting the style sheet as defined by the
1186 appropriate specifications, it supports all the features defined
1187 by CSS Text Level 3 by parsing them correctly
1188 and rendering the document accordingly. However, the inability of a
1189 UA to correctly render a document due to limitations of the device
1190 does not make the UA non-conformant. (For example, a UA is not
1191 required to render color on a monochrome monitor.)
1193 <p>An authoring tool is conformant to CSS Text Level 3
1194 if it writes style sheets that are syntactically correct according to the
1195 generic CSS grammar and the individual grammars of each feature in
1196 this module, and meet all other conformance requirements of style sheets
1197 as described in this module.
1199 <h3 id="partial">
1200 Partial Implementations</h3>
1202 <p>So that authors can exploit the forward-compatible parsing rules to
1203 assign fallback values, CSS renderers <strong>must</strong>
1204 treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
1205 as appropriate</a>) any at-rules, properties, property values, keywords,
1206 and other syntactic constructs for which they have no usable level of
1207 support. In particular, user agents <strong>must not</strong> selectively
1208 ignore unsupported component values and honor supported values in a single
1209 multi-value property declaration: if any value is considered invalid
1210 (as unsupported values must be), CSS requires that the entire declaration
1211 be ignored.</p>
1213 <h3 id="experimental">
1214 Experimental Implementations</h3>
1216 <p>To avoid clashes with future CSS features, the CSS2.1 specification
1217 reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
1218 syntax</a> for proprietary and experimental extensions to CSS.
1220 <p>Prior to a specification reaching the Candidate Recommendation stage
1221 in the W3C process, all implementations of a CSS feature are considered
1222 experimental. The CSS Working Group recommends that implementations
1223 use a vendor-prefixed syntax for such features, including those in
1224 W3C Working Drafts. This avoids incompatibilities with future changes
1225 in the draft.
1226 </p>
1228 <h3 id="testing">Non-Experimental Implementations</h3>
1230 <p>Once a specification reaches the Candidate Recommendation stage,
1231 non-experimental implementations are possible, and implementors should
1232 release an unprefixed implementation of any CR-level feature they
1233 can demonstrate to be correctly implemented according to spec.
1235 <p>To establish and maintain the interoperability of CSS across
1236 implementations, the CSS Working Group requests that non-experimental
1237 CSS renderers submit an implementation report (and, if necessary, the
1238 testcases used for that implementation report) to the W3C before
1239 releasing an unprefixed implementation of any CSS features. Testcases
1240 submitted to W3C are subject to review and correction by the CSS
1241 Working Group.
1243 <p>Further information on submitting testcases and implementation reports
1244 can be found from on the CSS Working Group's website at
1245 <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
1246 Questions should be directed to the
1247 <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
1248 mailing list.
1250 <h3 id="cr-exit-criteria">
1251 CR Exit Criteria</h3>
1253 <p>
1254 For this specification to be advanced to Proposed Recommendation,
1255 there must be at least two independent, interoperable implementations
1256 of each feature. Each feature may be implemented by a different set of
1257 products, there is no requirement that all features be implemented by
1258 a single product. For the purposes of this criterion, we define the
1259 following terms:
1261 <dl>
1262 <dt>independent <dd>each implementation must be developed by a
1263 different party and cannot share, reuse, or derive from code
1264 used by another qualifying implementation. Sections of code that
1265 have no bearing on the implementation of this specification are
1266 exempt from this requirement.
1268 <dt>interoperable <dd>passing the respective test case(s) in the
1269 official CSS test suite, or, if the implementation is not a Web
1270 browser, an equivalent test. Every relevant test in the test
1271 suite should have an equivalent test created if such a user
1272 agent (UA) is to be used to claim interoperability. In addition
1273 if such a UA is to be used to claim interoperability, then there
1274 must one or more additional UAs which can also pass those
1275 equivalent tests in the same way for the purpose of
1276 interoperability. The equivalent tests must be made publicly
1277 available for the purposes of peer review.
1279 <dt>implementation <dd>a user agent which:
1281 <ol class=inline>
1282 <li>implements the specification.
1284 <li>is available to the general public. The implementation may
1285 be a shipping product or other publicly available version
1286 (i.e., beta version, preview release, or “nightly build”).
1287 Non-shipping product releases must have implemented the
1288 feature(s) for a period of at least one month in order to
1289 demonstrate stability.
1291 <li>is not experimental (i.e., a version specifically designed
1292 to pass the test suite and is not intended for normal usage
1293 going forward).
1294 </ol>
1295 </dl>
1297 <p>The specification will remain Candidate Recommendation for at least
1298 six months.
1300 <h2 class="no-num" id="acknowledgements">
1301 Appendix A: Acknowledgements</h2>
1303 <p>This specification would not have been possible without the help from:
1304 Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett,
1305 Martin Dürst,
1306 Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye Gittelman, Ian
1307 Hickson, Martin Heijdra, Richard Ishida, Masayasu Ishikawa,
1308 Michael Jochimsen, Eric LeVine, Ambrose Li, Håkon Wium Lie, Chris Lilley,
1309 Ken Lunde, Nat McCully, Shinyu Murakami, Paul Nelson, Chris Pratley, Marcin Sawicki,
1310 Arnold Schrijver, Rahul Sonnad, Michel Suignard, Takao Suzuki,
1311 Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi Yabe
1312 and Steve Zilles.</p>
1314 <h2 class="no-num">Appendix B: References</h2>
1316 <h3 class="no-num" id="normative-ref">Normative references</h3>
1317 <!--normative-->
1319 <h3 class="no-num" id="informative-ref">Informative references</h3>
1320 <!--informative-->
1322 <h2 class="no-num" id="changes">Appendix C:
1323 Changes</h2>
1325 <h3 class="no-num" id="recent-changes">
1326 Changes since the <a href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/">May
1327 2012 CSS Writing Modes Module Level 3 <abbr title="Working Draft">WD</abbr></a></h3>
1329 <p>Significant changes include:</p>
1331 <ul>
1332 <li>Changed line decorations to not skip margins/padding/borders of descendents' inline boxes.
1333 <li>Clarified and corrected the definitions for <a href="#line-decoration">line decoration propagation</a>
1334 <li>Changed the definitions for averaging <a href="#line-position">line decoration positions</a>
1335 to better accommodate changes in font size.
1336 <li>Changed ''above'' and ''below'' values of 'text-emphasis-position' and 'text-underline-position'
1337 to ''over'' and ''under'' to match terminology in 'text-decoration-line'.
1338 <li>Define interaction of 'text-shadow' and 'text-decoration'.
1339 </ul>
1342 <h2 class="no-num" id="default-stylesheet">
1343 Appendix D: Default UA Stylesheet</h2>
1345 <p>
1346 This appendix is informative,
1347 and is to help UA developers to implement default stylesheet,
1348 but UA developers are free to ignore or change.
1350 <div class="example">
1351 <pre><code class="css">
1352 <!-- -->s, strike, del {
1353 <!-- --> text-decoration: line-through;
1354 <!-- -->}
1355 <!-- -->
1356 <!-- -->u, ins, :link, :visited {
1357 <!-- --> text-decoration: underline;
1358 <!-- -->}
1359 <!-- -->
1360 <!-- -->abbr[title], acronym[title] {
1361 <!-- --> text-decoration: dotted underline;
1362 <!-- -->}
1363 <!-- -->
1364 <!-- -->/* disable inheritance of text-emphasis marks to ruby text:
1365 <!-- --> emphasis marks should only apply to base text */
1366 <!-- -->rt { text-emphasis: none; }
1367 <!-- -->
1368 <!-- -->:root:lang(zh), [lang|=zh] {
1369 <!-- -->/* default emphasis mark position is 'under right' for Chinese */
1370 <!-- --> text-emphasis-position: under right;
1371 <!-- -->}
1372 <!-- -->
1373 <!-- -->:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] {
1374 <!-- -->/* default underline position is 'under right' for Japanese and Korean */
1375 <!-- --> text-underline-position: under right;
1376 <!-- -->}
1377 <!-- -->
1378 <!-- -->:root:lang(zh), [lang|=zh] {
1379 <!-- -->/* default underline position is 'under left' for Chinese */
1380 <!-- --> text-underline-position: under left;
1381 <!-- -->}
1382 <!-- -->
1383 <!-- -->blink {
1384 <!-- --> text-decoration-line: blink;
1385 <!-- -->}
1386 </code></pre>
1387 </div>
1389 <p class="issue">
1390 If you find any issues, recommendations to add, or corrections,
1391 please send the information to <a href="mailto:www-style@w3.org">www-style@w3.org</a>
1392 with <kbd>[[SHORTNAME]]</kbd> in the subject line.
1394 <div class='example'>
1395 <p>
1396 While ''text-decoration-line: blink'' can't be fully reproduced with other existing properties,
1397 authors can achieve a very similar effect with the following CSS:
1399 <pre>
1400 <!-- -->@keyframes blink {
1401 <!-- --> 0% {
1402 <!-- --> visibility: hidden;
1403 <!-- --> animation-timing-function: step-end;
1404 <!-- --> }
1405 <!-- --> 25%, 100% {
1406 <!-- --> visibility: visible;
1407 <!-- --> }
1408 <!-- -->}
1409 <!-- -->blink {
1410 <!-- --> animation: blink 1s infinite;
1411 <!-- -->}</pre>
1412 </div>
