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.

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

mercurial