Mon, 15 Oct 2012 14:56:45 -0700
Move it correctly this time.
1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 1.2 +++ b/css-text-decor-3/Overview.html Mon Oct 15 14:56:45 2012 -0700 1.3 @@ -0,0 +1,1780 @@ 1.4 +<!DOCTYPE html> 1.5 + 1.6 +<html lang=en> 1.7 + <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ "> 1.8 + <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 1.9 + <title>CSS Text Decoration Module Level 3 (CSS3 Text Decoration)</title> 1.10 + 1.11 + <link href="http://purl.org/dc/terms/" rel=schema.DC> 1.12 + <meta content="CSS Text Decoration Module Level 3 (CSS3 Text Decoration)" 1.13 + name=DC.title> 1.14 + <meta content=text name=DC.type> 1.15 + <meta content=2012-09-23 name=DC.issued> 1.16 + <meta content="Elika J. Etemad" name=DC.creator> 1.17 + <meta content="Koji Ishii" name=DC.creator> 1.18 + <meta content=W3C name=DC.publisher> 1.19 + <meta content="http://www.w3.org/TR/2012/WD-css3-text-20120923/" 1.20 + name=DC.identifier> 1.21 + <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 1.22 + rel=DC.rights> 1.23 + <link href="#contents" rel=contents> 1.24 + <link href="#index" rel=index> 1.25 + <link href="../default.css" rel=stylesheet type="text/css"> 1.26 + <link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel=stylesheet 1.27 + type="text/css"> 1.28 + 1.29 + <body> 1.30 + <div class=head> <!--begin-logo--> 1.31 + <p><a href="http://www.w3.org/"><img alt=W3C height=48 1.32 + src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--> 1.33 + 1.34 + <h1>CSS Text Decoration Module Level 3</h1> 1.35 + 1.36 + <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 23 1.37 + September 2012</h2> 1.38 + 1.39 + <dl> 1.40 + <dt>This version:</dt> 1.41 + <!-- 1.42 + <dd><a href="http://dev.w3.org/csswg/css3-text/">$Date$ (CVS $Revision$)</a> 1.43 + --> 1.44 + 1.45 + <dd><a 1.46 + href="http://www.w3.org/TR/2012/WD-css3-text-20120923/">http://www.w3.org/TR/2012/WD-css3-text-20120923/</a> 1.47 + 1.48 + <dt>Latest version: 1.49 + 1.50 + <dd><a 1.51 + href="http://www.w3.org/TR/css3-text/">http://www.w3.org/TR/css3-text/</a> 1.52 + 1.53 + <dt>Latest editor's draft: 1.54 + 1.55 + <dd><a 1.56 + href="http://dev.w3.org/csswg/css3-text/">http://dev.w3.org/csswg/css3-text/</a> 1.57 + 1.58 + <dt>Previous version: 1.59 + 1.60 + <dd><a 1.61 + href="http://www.w3.org/TR/2012/WD-css3-text-20120119/">http://www.w3.org/TR/2012/WD-css3-text-20120119/</a> 1.62 + 1.63 + <dt>Issues List: 1.64 + 1.65 + <dd><a 1.66 + href="http://www.w3.org/Style/CSS/Tracker/products/10">http://www.w3.org/Style/CSS/Tracker/products/10</a> 1.67 + 1.68 + <dt>Discussion: 1.69 + 1.70 + <dd><a 1.71 + href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> 1.72 + with subject line “<kbd>[css3-text] <var>… message topic 1.73 + …</var></kbd>” 1.74 + 1.75 + <dt>Editors: 1.76 + 1.77 + <dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> 1.78 + (Mozilla) 1.79 + 1.80 + <dd><a href="mailto:koji.a.ishii@mail.rakuten.com">Koji Ishii</a> 1.81 + (Rakuten, Inc.) 1.82 + </dl> 1.83 + <!--begin-copyright--> 1.84 + <p class=copyright><a 1.85 + href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 1.86 + rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr 1.87 + title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a 1.88 + href="http://www.csail.mit.edu/"><abbr 1.89 + title="Massachusetts Institute of Technology">MIT</abbr></a>, <a 1.90 + href="http://www.ercim.eu/"><abbr 1.91 + title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, 1.92 + <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a 1.93 + href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, 1.94 + <a 1.95 + href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> 1.96 + and <a 1.97 + href="http://www.w3.org/Consortium/Legal/copyright-documents">document 1.98 + use</a> rules apply.</p> 1.99 + <!--end-copyright--> 1.100 + <hr title="Separator for header"> 1.101 + </div> 1.102 + 1.103 + <h2 class="no-num no-toc" id=abstract>Abstract</h2> 1.104 + 1.105 + <p>This module contains the features of CSS relating to text decoration, 1.106 + such as underlines, text shadows, and emphasis marks. <a 1.107 + href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing the 1.108 + rendering of structured documents (such as HTML and XML) on screen, on 1.109 + paper, in speech, etc. 1.110 + 1.111 + <h2 class="no-num no-toc" id=status>Status of this document</h2> 1.112 + 1.113 + <p><em>This section describes the status of this document at the time of 1.114 + its publication. Other documents may supersede this document. A list of 1.115 + current W3C publications and the latest revision of this technical report 1.116 + can be found in the <a href="http://www.w3.org/TR/">W3C technical reports 1.117 + index at http://www.w3.org/TR/.</a></em> 1.118 + 1.119 + <p>Publication as a Working Draft does not imply endorsement by the W3C 1.120 + Membership. This is a draft document and may be updated, replaced or 1.121 + obsoleted by other documents at any time. It is inappropriate to cite this 1.122 + document as other than work in progress. 1.123 + 1.124 + <p>This CSS module has been produced as a combined effort of the <a 1.125 + href="http://www.w3.org/International/Activity">W3C Internationalization 1.126 + Activity</a>, and the <a href="http://www.w3.org/Style/Activity">Style 1.127 + Activity</a> and is maintained by the <a 1.128 + href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>. It also 1.129 + includes contributions made by participants in the <a 1.130 + href="http://www.w3.org/Style/XSL/Group/">XSL Working Group</a> (<a 1.131 + href="http://cgi.w3.org/MemberAccess/AccessRequest">members only</a>). 1.132 + 1.133 + <p>This document was produced by a group operating under the <a 1.134 + href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 1.135 + 2004 W3C Patent Policy</a>. W3C maintains a <a 1.136 + href="http://www.w3.org/2004/01/pp-impl/32061/status" 1.137 + rel=disclosure>public list of any patent disclosures</a> made in 1.138 + connection with the deliverables of the group; that page also includes 1.139 + instructions for disclosing a patent. An individual who has actual 1.140 + knowledge of a patent which the individual believes contains <a 1.141 + href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential 1.142 + Claim(s)</a> must disclose the information in accordance with <a 1.143 + href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 1.144 + 6 of the W3C Patent Policy</a>. 1.145 + 1.146 + <p><strong>Feedback on this draft should be posted to the (<a 1.147 + href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public 1.148 + mailing list <a 1.149 + href="mailto:www-style@w3.org">www-style@w3.org</a></strong> (see <a 1.150 + href="http://www.w3.org/Mail/Request">instructions</a>) <strong>with 1.151 + <kbd>[css3-text-decor]</kbd> in the subject line.</strong> You are 1.152 + strongly encouraged to complain if you see something stupid in this draft. 1.153 + The editors will do their best to respond to all feedback. 1.154 + 1.155 + <p>The following features are at risk and may be cut from the spec during 1.156 + its CR period if there are no (correct) implementations: 1.157 + 1.158 + <p>The following features are at risk and may be cut from the spec during 1.159 + its CR period if there are no (correct) implementations: 1.160 + 1.161 + <ul> 1.162 + <li>the ‘<a href="#text-decoration-skip"><code 1.163 + class=property>text-decoration-skip</code></a>’ property / ‘<code 1.164 + class=css>ink</code>’ value 1.165 + </ul> 1.166 + 1.167 + <h2 class="no-num no-toc" id=contents> Table of Contents</h2> 1.168 + <!--begin-toc--> 1.169 + 1.170 + <ul class=toc> 1.171 + <li><a href="#intro"><span class=secno>1. </span> Introduction</a> 1.172 + <ul class=toc> 1.173 + <li><a href="#placement"><span class=secno>1.1. </span> Module 1.174 + Interactions</a> 1.175 + 1.176 + <li><a href="#values"><span class=secno>1.2. </span> Values</a> 1.177 + 1.178 + <li><a href="#terms"><span class=secno>1.3. </span>Terminology</a> 1.179 + </ul> 1.180 + 1.181 + <li><a href="#line-decoration"><span class=secno>2. </span> Line 1.182 + Decoration: Underline, Overline, and Strike-Through</a> 1.183 + <ul class=toc> 1.184 + <li><a href="#text-decoration-line-property"><span class=secno>2.1. 1.185 + </span> Text Decoration Lines: the ‘<code 1.186 + class=property>text-decoration-line</code>’ property</a> 1.187 + 1.188 + <li><a href="#text-decoration-color-property"><span class=secno>2.2. 1.189 + </span> Text Decoration Color: the ‘<code 1.190 + class=property>text-decoration-color</code>’ property</a> 1.191 + 1.192 + <li><a href="#text-decoration-style-property"><span class=secno>2.3. 1.193 + </span> Text Decoration Style: the ‘<code 1.194 + class=property>text-decoration-style</code>’ property</a> 1.195 + 1.196 + <li><a href="#text-decoration-property"><span class=secno>2.4. </span> 1.197 + Text Decoration Shorthand: the ‘<code 1.198 + class=property>text-decoration</code>’ property</a> 1.199 + 1.200 + <li><a href="#text-decoration-skip-property"><span class=secno>2.5. 1.201 + </span> Text Decoration Line Continuity: the ‘<code 1.202 + class=property>text-decoration-skip</code>’ property</a> 1.203 + <ul class=toc> 1.204 + <li><a href="#text-underline-position-property"><span 1.205 + class=secno>2.5.1. </span> Text Underline Position: the ‘<code 1.206 + class=property>text-underline-position</code>’ property</a> 1.207 + </ul> 1.208 + 1.209 + <li><a href="#emphasis-marks"><span class=secno>2.6. </span> Emphasis 1.210 + Marks</a> 1.211 + <ul class=toc> 1.212 + <li><a href="#text-emphasis-style-property"><span class=secno>2.6.1. 1.213 + </span> Emphasis Mark Style: the ‘<code 1.214 + class=property>text-emphasis-style</code>’ property</a> 1.215 + 1.216 + <li><a href="#text-emphasis-color-property"><span class=secno>2.6.2. 1.217 + </span> Emphasis Mark Color: the ‘<code 1.218 + class=property>text-emphasis-color</code>’ property</a> 1.219 + 1.220 + <li><a href="#text-emphasis-property"><span class=secno>2.6.3. </span> 1.221 + Emphasis Mark Shorthand: the ‘<code 1.222 + class=property>text-emphasis</code>’ property</a> 1.223 + 1.224 + <li><a href="#text-emphasis-position-property"><span 1.225 + class=secno>2.6.4. </span> Emphasis Mark Position: the ‘<code 1.226 + class=property>text-emphasis-position</code>’ property</a> 1.227 + </ul> 1.228 + 1.229 + <li><a href="#text-shadow-property"><span class=secno>2.7. </span> Text 1.230 + Shadows: the ‘<code class=property>text-shadow</code>’ property</a> 1.231 + </ul> 1.232 + 1.233 + <li><a href="#conformance"><span class=secno>3. </span> Conformance</a> 1.234 + <ul class=toc> 1.235 + <li><a href="#conventions"><span class=secno>3.1. </span> Document 1.236 + Conventions</a> 1.237 + 1.238 + <li><a href="#conformance-classes"><span class=secno>3.2. </span> 1.239 + Conformance Classes</a> 1.240 + 1.241 + <li><a href="#partial"><span class=secno>3.3. </span> Partial 1.242 + Implementations</a> 1.243 + 1.244 + <li><a href="#experimental"><span class=secno>3.4. </span> Experimental 1.245 + Implementations</a> 1.246 + 1.247 + <li><a href="#testing"><span class=secno>3.5. </span>Non-Experimental 1.248 + Implementations</a> 1.249 + 1.250 + <li><a href="#cr-exit-criteria"><span class=secno>3.6. </span> CR Exit 1.251 + Criteria</a> 1.252 + </ul> 1.253 + 1.254 + <li class=no-num><a href="#acknowledgements"> Appendix A: 1.255 + Acknowledgements</a> 1.256 + 1.257 + <li class=no-num><a href="#appendix-b-references">Appendix B: 1.258 + References</a> 1.259 + <ul class=toc> 1.260 + <li class=no-num><a href="#normative-ref">Normative references</a> 1.261 + 1.262 + <li class=no-num><a href="#informative-ref">Informative references</a> 1.263 + </ul> 1.264 + 1.265 + <li class=no-num><a href="#changes">Appendix C: Changes</a> 1.266 + </ul> 1.267 + <!--end-toc--> 1.268 + 1.269 + <h2 id=intro><span class=secno>1. </span> Introduction</h2> 1.270 + 1.271 + <p>[document here] 1.272 + 1.273 + <p class=issue>This draft describes features that are specific to certain 1.274 + scripts. There is an ongoing discussion about where these features belong: 1.275 + in existing CSS properties, in new CSS properties, or perhaps in other 1.276 + specifications. 1.277 + 1.278 + <h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3> 1.279 + 1.280 + <p>This module replaces and extends the text-level features defined in <a 1.281 + href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> chapter 16. 1.282 + 1.283 + <h3 id=values><span class=secno>1.2. </span> Values</h3> 1.284 + 1.285 + <p>This specification follows the <a 1.286 + href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property 1.287 + definition conventions</a> from <a href="#CSS21" 1.288 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in 1.289 + this specification are defined in CSS Level 2 Revision 1 <a 1.290 + href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS 1.291 + modules may expand the definitions of these value types: for example <a 1.292 + href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>, 1.293 + when combined with this module, expands the definition of the 1.294 + <color> value type as used in this specification. 1.295 + 1.296 + <p>In addition to the property-specific values listed in their definitions, 1.297 + all properties defined in this specification also accept the <a 1.298 + href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> 1.299 + keyword as their property value. For readability it has not been repeated 1.300 + explicitly. 1.301 + 1.302 + <p>The <dfn id=currentcolor>‘<code class=css>currentcolor</code>’</dfn> 1.303 + keyword here computes to itself and is resolved to the value of ‘<code 1.304 + class=property>color</code>’ after inheritance is performed. This is so 1.305 + that the ‘<a href="#text-emphasis-color"><code 1.306 + class=property>text-emphasis-color</code></a>’ by default matches the 1.307 + text ‘<code class=property>color</code>’. <span class=issue>CSS3 Color 1.308 + has not yet been errata'd to define it this way; currentcolor there is 1.309 + defined to compute to the value of ‘<code 1.310 + class=property>color</code>’, which gives it the wrong inheritance 1.311 + behavior.</span> 1.312 + 1.313 + <h3 id=terms><span class=secno>1.3. </span>Terminology</h3> 1.314 + 1.315 + <p>The terms <a 1.316 + href="http://www.w3.org/TR/css3-text/#grapheme-cluster"><dfn 1.317 + id=character>character</dfn></a>, <a 1.318 + href="http://www.w3.org/TR/css3-text/#letter"><dfn 1.319 + id=letter>letter</dfn></a>, and <a 1.320 + href="http://www.w3.org/TR/css3-text/#content-language"><dfn 1.321 + id=content-language>content language</dfn></a> as used in this 1.322 + specification are defined in <a href="#CSS3TEXT" 1.323 + rel=biblioentry>[CSS3TEXT]<!--{{!CSS3TEXT}}--></a>. Other terminology and 1.324 + concepts used in this specification are defined in <a href="#CSS21" 1.325 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> and <a 1.326 + href="#CSS3-WRITING-MODES" 1.327 + rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>. 1.328 + 1.329 + <h2 id=line-decoration><span class=secno>2. </span> Line Decoration: 1.330 + Underline, Overline, and Strike-Through</h2> 1.331 + 1.332 + <p>The following properties describe line decorations that are added to the 1.333 + content of an element. When specified on or propagated to an inline box, 1.334 + such decoration affects all the boxes generated by that element, and is 1.335 + further propagated to any in-flow block-level boxes that split the inline 1.336 + (see <a 1.337 + href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">CSS2.1 1.338 + section 9.2.1.1</a>) When specified on or propagated to a ruby box, the 1.339 + decorations are further propagated only to the ruby base. When specified 1.340 + on or propagated to a a block container that establishes an inline 1.341 + formatting context, the decorations are propagated to an anonymous inline 1.342 + element that wraps all the in-flow inline-level children of the block 1.343 + container. For all other elements, the decorations are propagated to any 1.344 + in-flow children. 1.345 + 1.346 + <p class=note>Note that text decorations are not propagated to any 1.347 + out-of-flow descendants, nor to the contents of atomic inline-level 1.348 + descendants such as inline blocks and inline tables. 1.349 + 1.350 + <p>By default underlines, overlines, and line-throughs are applied only to 1.351 + text (including white space, letter spacing, and word spacing): margins, 1.352 + borders, and padding are skipped. Elements containing no text, such as 1.353 + images, are likewise not decorated. The ‘<a 1.354 + href="#text-decoration-skip"><code 1.355 + class=property>text-decoration-skip</code></a>’ property can be used to 1.356 + modify this behavior, for example allowing inline replaced elements to be 1.357 + underlined or requiring that white space be skipped. 1.358 + 1.359 + <p>In determining the position and thickness of text decoration lines, user 1.360 + agents may consider the font sizes and dominant baselines of descendants, 1.361 + but for a given element's decoration must use the same position and 1.362 + thickness throughout each line box. The <a 1.363 + href="#text-decoration-color">color</a> and <a 1.364 + href="#text-decoration-style">line style</a> of decorations must remain 1.365 + the same on all decorations applied by a given element, even if descendant 1.366 + elements have different color or line style values. 1.367 + 1.368 + <div class=example> 1.369 + <p>The following figure shows the averaging for underline: 1.370 + 1.371 + <p><img 1.372 + alt="In the first rendering of the underlined text '1st a' with 'st' as a superscript, both the '1st' and the 'a' are rendered in a small font. In the second rendering, the 'a' is rendered in a larger font. In the third, both '1st' and 'a' are large." 1.373 + height=105 src=underline-averaging.gif width=326> 1.374 + 1.375 + <p>In the three fragments of underlined text, the underline is drawn 1.376 + consecutively lower and thicker as the ratio of large text to small text 1.377 + increases. 1.378 + </div> 1.379 + 1.380 + <p>Relatively positioning a descendant moves all text decorations affecting 1.381 + it along with the descendant's text; it does not affect calculation of the 1.382 + decoration's initial position on that line. The ‘<code 1.383 + class=property>visibility</code>’ property, filters, and other graphical 1.384 + transformations likewise affect text decorations as part of the text 1.385 + they're drawn on, even if the decorations were specified on an ancestor 1.386 + element. <span class=issue>Does this include ‘<a 1.387 + href="#text-shadow"><code class=property>text-shadow</code></a>’? What 1.388 + about text-fill etc.?</span> 1.389 + 1.390 + <div class=example> 1.391 + <p>In the following style sheet and document fragment: 1.392 + 1.393 + <pre><code class=css> 1.394 +<!-- --> blockquote { text-decoration: underline; color: blue; } 1.395 +<!-- --> em { display: block; } 1.396 +<!-- --> cite { color: fuchsia; } 1.397 +<!----></code></pre> 1.398 + 1.399 + <pre class=html><code> 1.400 +<!-- --> <blockquote> 1.401 +<!-- --> <p> 1.402 +<!-- --> <span> 1.403 +<!-- --> Help, help! 1.404 +<!-- --> <em> I am under a hat! </em> 1.405 +<!-- --> 1.406 +<!-- --> <cite> —GwieF </cite> 1.407 +<!-- --> </span> 1.408 +<!-- --> </p> 1.409 +<!-- --> </blockquote> 1.410 +<!----></code></pre> 1.411 + 1.412 + <p>...the underlining for the blockquote element is propagated to an 1.413 + anonymous inline element that surrounds the span element, causing the 1.414 + text "Help, help!" to be blue, with the blue underlining from the 1.415 + anonymous inline underneath it, the color being taken from the blockquote 1.416 + element. The <code><em>text</em></code> in the em block is 1.417 + also underlined, as it is in an in-flow block to which the underline is 1.418 + propagated. The final line of text is fuchsia, but the underline 1.419 + underneath it is still the blue underline from the anonymous inline 1.420 + element. 1.421 + 1.422 + <p><img alt="Sample rendering of the above underline example" 1.423 + src=underline-example.png> 1.424 + 1.425 + <p>This diagram shows the boxes involved in the example above. The rounded 1.426 + aqua line represents the anonymous inline element wrapping the inline 1.427 + contents of the paragraph element, the rounded blue line represents the 1.428 + span element, and the orange lines represent the blocks. 1.429 + </div> 1.430 + 1.431 + <h3 id=text-decoration-line-property><span class=secno>2.1. </span> Text 1.432 + Decoration Lines: the ‘<a href="#text-decoration-line"><code 1.433 + class=property>text-decoration-line</code></a>’ property</h3> 1.434 + 1.435 + <table class=propdef> 1.436 + <tbody> 1.437 + <tr> 1.438 + <th>Name: 1.439 + 1.440 + <td><dfn id=text-decoration-line>text-decoration-line</dfn> 1.441 + 1.442 + <tr> 1.443 + <th><a href="#values">Value</a>: 1.444 + 1.445 + <td>none | [ underline || overline || line-through ] 1.446 + 1.447 + <tr> 1.448 + <th>Initial: 1.449 + 1.450 + <td>none 1.451 + 1.452 + <tr> 1.453 + <th>Applies to: 1.454 + 1.455 + <td>all elements 1.456 + 1.457 + <tr> 1.458 + <th>Inherited: 1.459 + 1.460 + <td>no (but see prose) 1.461 + 1.462 + <tr> 1.463 + <th>Percentages: 1.464 + 1.465 + <td>N/A 1.466 + 1.467 + <tr> 1.468 + <th>Media: 1.469 + 1.470 + <td>visual 1.471 + 1.472 + <tr> 1.473 + <th>Computed value: 1.474 + 1.475 + <td>as specified 1.476 + </table> 1.477 + 1.478 + <p>Specifies what line decorations, if any, are added to the element. 1.479 + Values have the following meanings: 1.480 + 1.481 + <dl> 1.482 + <dt><dfn id=none title="text-decoration-line:none">‘<code 1.483 + class=css>none</code>’</dfn> 1.484 + 1.485 + <dd>Neither produces nor inhibits text decoration. 1.486 + 1.487 + <dt><dfn id=underline>‘<code class=css>underline</code>’</dfn> 1.488 + 1.489 + <dd>Each line of text is underlined. 1.490 + 1.491 + <dt><dfn id=overline>‘<code class=css>overline</code>’</dfn> 1.492 + 1.493 + <dd>Each line of text has a line above it (i.e. on the opposite side from 1.494 + an underline). 1.495 + 1.496 + <dt><dfn id=line-through>‘<code class=css>line-through</code>’</dfn> 1.497 + 1.498 + <dd>Each line of text has a line through the middle. 1.499 + </dl> 1.500 + 1.501 + <h3 id=text-decoration-color-property><span class=secno>2.2. </span> Text 1.502 + Decoration Color: the ‘<a href="#text-decoration-color"><code 1.503 + class=property>text-decoration-color</code></a>’ property</h3> 1.504 + 1.505 + <table class=propdef> 1.506 + <tbody> 1.507 + <tr> 1.508 + <th>Name: 1.509 + 1.510 + <td><dfn id=text-decoration-color>text-decoration-color</dfn> 1.511 + 1.512 + <tr> 1.513 + <th><a href="#values">Value</a>: 1.514 + 1.515 + <td><a href="http://www.w3.org/TR/css3-color/#color0"><span 1.516 + class=value-inst-color><color></span></a> 1.517 + 1.518 + <tr> 1.519 + <th>Initial: 1.520 + 1.521 + <td><a 1.522 + href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> 1.523 + 1.524 + <tr> 1.525 + <th>Applies to: 1.526 + 1.527 + <td>all elements 1.528 + 1.529 + <tr> 1.530 + <th>Inherited: 1.531 + 1.532 + <td>no 1.533 + 1.534 + <tr> 1.535 + <th>Percentages: 1.536 + 1.537 + <td>N/A 1.538 + 1.539 + <tr> 1.540 + <th>Media: 1.541 + 1.542 + <td>visual 1.543 + 1.544 + <tr> 1.545 + <th>Computed value: 1.546 + 1.547 + <td>the computed color 1.548 + </table> 1.549 + 1.550 + <p>This property specifies the color of text decoration (underlines 1.551 + overlines, and line-throughs) set on the element with ‘<a 1.552 + href="#text-decoration-line"><code 1.553 + class=property>text-decoration-line</code></a>’. 1.554 + 1.555 + <h3 id=text-decoration-style-property><span class=secno>2.3. </span> Text 1.556 + Decoration Style: the ‘<a href="#text-decoration-style"><code 1.557 + class=property>text-decoration-style</code></a>’ property</h3> 1.558 + 1.559 + <table class=propdef> 1.560 + <tbody> 1.561 + <tr> 1.562 + <th>Name: 1.563 + 1.564 + <td><dfn id=text-decoration-style>text-decoration-style</dfn> 1.565 + 1.566 + <tr> 1.567 + <th><a href="#values">Value</a>: 1.568 + 1.569 + <td>solid | double | dotted | dashed | wavy 1.570 + 1.571 + <tr> 1.572 + <th>Initial: 1.573 + 1.574 + <td>solid 1.575 + 1.576 + <tr> 1.577 + <th>Applies to: 1.578 + 1.579 + <td>all elements 1.580 + 1.581 + <tr> 1.582 + <th>Inherited: 1.583 + 1.584 + <td>no 1.585 + 1.586 + <tr> 1.587 + <th>Percentages: 1.588 + 1.589 + <td>N/A 1.590 + 1.591 + <tr> 1.592 + <th>Media: 1.593 + 1.594 + <td>visual 1.595 + 1.596 + <tr> 1.597 + <th>Computed value: 1.598 + 1.599 + <td>as specified 1.600 + </table> 1.601 + 1.602 + <p>This property specifies the style of the line(s) drawn for text 1.603 + decoration specified on the element. Values have the same meaning as for 1.604 + the <a 1.605 + href="http://www.w3.org/TR/css3-background/#the-border-style">border-style 1.606 + properties</a> <a href="#CSS3BG" 1.607 + rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. ‘<code 1.608 + class=css>wavy</code>’ indicates a wavy line. 1.609 + 1.610 + <h3 id=text-decoration-property><span class=secno>2.4. </span> Text 1.611 + Decoration Shorthand: the ‘<a href="#text-decoration"><code 1.612 + class=property>text-decoration</code></a>’ property</h3> 1.613 + 1.614 + <table class=propdef> 1.615 + <tbody> 1.616 + <tr> 1.617 + <th>Name: 1.618 + 1.619 + <td><dfn id=text-decoration>text-decoration</dfn> 1.620 + 1.621 + <tr> 1.622 + <th><a href="#values">Value</a>: 1.623 + 1.624 + <td><var><a 1.625 + href="#text-decoration-line"><text-decoration-line></a></var> || 1.626 + <var><a 1.627 + href="#text-decoration-style"><text-decoration-style></a></var> 1.628 + || <var><a 1.629 + href="#text-decoration-color"><text-decoration-color></a></var> 1.630 + || blink 1.631 + 1.632 + <tr> 1.633 + <th>Initial: 1.634 + 1.635 + <td>none 1.636 + 1.637 + <tr> 1.638 + <th>Applies to: 1.639 + 1.640 + <td>all elements 1.641 + 1.642 + <tr> 1.643 + <th>Inherited: 1.644 + 1.645 + <td>no 1.646 + 1.647 + <tr> 1.648 + <th>Percentages: 1.649 + 1.650 + <td>N/A 1.651 + 1.652 + <tr> 1.653 + <th>Media: 1.654 + 1.655 + <td>visual 1.656 + 1.657 + <tr> 1.658 + <th>Computed value: 1.659 + 1.660 + <td>as specified 1.661 + </table> 1.662 + 1.663 + <p>This property is a shorthand for setting ‘<a 1.664 + href="#text-decoration-line"><code 1.665 + class=property>text-decoration-line</code></a>’, ‘<a 1.666 + href="#text-decoration-color"><code 1.667 + class=property>text-decoration-color</code></a>’, and ‘<a 1.668 + href="#text-decoration-style"><code 1.669 + class=property>text-decoration-style</code></a>’ in one declaration. 1.670 + Omitted values are set to their initial values. A ‘<a 1.671 + href="#text-decoration"><code class=property>text-decoration</code></a>’ 1.672 + declaration that omits both the ‘<a href="#text-decoration-color"><code 1.673 + class=property>text-decoration-color</code></a>’ and ‘<a 1.674 + href="#text-decoration-style"><code 1.675 + class=property>text-decoration-style</code></a>’ values is 1.676 + backwards-compatible with CSS Levels 1 and 2. 1.677 + 1.678 + <p>If the ‘<code class=css>blink</code>’ keyword is specified the text 1.679 + blinks (alternates between visible and invisible). Conforming user agents 1.680 + may simply not blink the text. Note that not blinking the text is one 1.681 + technique to satisfy <a 1.682 + href="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">checkpoint 1.683 + 3.3 of WAI-UAAG</a>. 1.684 + 1.685 + <div class=example> 1.686 + <p>The following example underlines unvisited links with a solid blue 1.687 + underline in CSS1 and CSS2 UAs and a navy dotted underline in CSS3 UAs. 1.688 + 1.689 + <pre><code class=css> 1.690 +<!-- -->:link { 1.691 +<!-- --> color: blue; 1.692 +<!-- --> text-decoration: underline; 1.693 +<!-- --> text-decoration: navy dotted underline; /* <a 1.694 + href="http://www.w3.org/TR/CSS21/syndata.html#ignore">Ignored</a> in CSS1/CSS2 UAs */ 1.695 +<!-- -->}</code></pre> 1.696 + </div> 1.697 + 1.698 + <h3 id=text-decoration-skip-property><span class=secno>2.5. </span> Text 1.699 + Decoration Line Continuity: the ‘<a href="#text-decoration-skip"><code 1.700 + class=property>text-decoration-skip</code></a>’ property</h3> 1.701 + 1.702 + <table class=propdef> 1.703 + <tbody> 1.704 + <tr> 1.705 + <th>Name: 1.706 + 1.707 + <td><dfn id=text-decoration-skip>text-decoration-skip</dfn> 1.708 + 1.709 + <tr> 1.710 + <th><a href="#values">Value</a>: 1.711 + 1.712 + <td>none | [ objects || spaces || ink || edges ] 1.713 + 1.714 + <tr> 1.715 + <th>Initial: 1.716 + 1.717 + <td>objects 1.718 + 1.719 + <tr> 1.720 + <th>Applies to: 1.721 + 1.722 + <td>all elements 1.723 + 1.724 + <tr> 1.725 + <th>Inherited: 1.726 + 1.727 + <td>yes 1.728 + 1.729 + <tr> 1.730 + <th>Percentages: 1.731 + 1.732 + <td>N/A 1.733 + 1.734 + <tr> 1.735 + <th>Media: 1.736 + 1.737 + <td>visual 1.738 + 1.739 + <tr> 1.740 + <th>Computed value: 1.741 + 1.742 + <td>as specified 1.743 + </table> 1.744 + 1.745 + <p>This property specifies what parts of the element's content any text 1.746 + decoration affecting the element must skip over. It controls all text 1.747 + decoration lines drawn by the element and also any text decoration lines 1.748 + drawn by its ancestors. Values have the following meanings: 1.749 + 1.750 + <dl> 1.751 + <dt><dfn id=none0 title="text-decoration-skip:none">‘<code 1.752 + class=css>none</code>’</dfn> 1.753 + 1.754 + <dd>Skip nothing: text-decoration is drawn for all text content and for 1.755 + inline replaced elements. 1.756 + 1.757 + <dt><dfn id=objects title="text-decoration-skip:objects">‘<code 1.758 + class=css>objects</code>’</dfn> 1.759 + 1.760 + <dd>Skip this element if it is an atomic inline (such as an image or 1.761 + inline-block). 1.762 + 1.763 + <dt><dfn id=spaces title="text-decoration-skip:spaces">‘<code 1.764 + class=css>spaces</code>’</dfn> 1.765 + 1.766 + <dd>Skip white space: this includes regular spaces (U+0020) and tabs 1.767 + (U+0009), as well as nbsp (U+00A0), ideographic space (U+3000), all fixed 1.768 + width spaces (such as U+2000–U+200A, U+202F and U+205F), and any 1.769 + adjacent letter-spacing or word-spacing. 1.770 + 1.771 + <dt><dfn id=ink title="text-decoration-skip:ink">‘<code 1.772 + class=css>ink</code>’</dfn> 1.773 + 1.774 + <dd>Skip over where glyphs are drawn: interrupt the decoration line to let 1.775 + text show through where the text decoration would otherwise cross over a 1.776 + glyph. The UA may also skip a small distance to either side of the glyph 1.777 + outline. 1.778 + 1.779 + <dt><dfn id=edges title="text-decoration-skip:edges">‘<code 1.780 + class=css>edges</code>’</dfn> 1.781 + 1.782 + <dd>The UA should place the start and end of the line inwards from the 1.783 + content edge of the decorating element so that, e.g. two underlined 1.784 + elements side-by-side do not appear to have a single underline. (This is 1.785 + important in Chinese, where underlining is a form of punctuation.) 1.786 + </dl> 1.787 + 1.788 + <p class=issue>Do we need a value that <em>doesn't</em> skip margins and 1.789 + padding? 1.790 + 1.791 + <p class=note>Note that this property inherits and that descendant elements 1.792 + can have a different setting. 1.793 + 1.794 + <h4 id=text-underline-position-property><span class=secno>2.5.1. </span> 1.795 + Text Underline Position: the ‘<a href="#text-underline-position"><code 1.796 + class=property>text-underline-position</code></a>’ property</h4> 1.797 + 1.798 + <table class=propdef> 1.799 + <tbody> 1.800 + <tr> 1.801 + <th>Name: 1.802 + 1.803 + <td><dfn id=text-underline-position>text-underline-position</dfn> 1.804 + 1.805 + <tr> 1.806 + <th><a href="#values">Value</a>: 1.807 + 1.808 + <td>auto | alphabetic | [ below || [ left | right ] ] 1.809 + 1.810 + <tr> 1.811 + <th>Initial: 1.812 + 1.813 + <td>auto 1.814 + 1.815 + <tr> 1.816 + <th>Applies to: 1.817 + 1.818 + <td>all elements 1.819 + 1.820 + <tr> 1.821 + <th>Inherited: 1.822 + 1.823 + <td>yes 1.824 + 1.825 + <tr> 1.826 + <th>Percentages: 1.827 + 1.828 + <td>N/A 1.829 + 1.830 + <tr> 1.831 + <th>Media: 1.832 + 1.833 + <td>visual 1.834 + 1.835 + <tr> 1.836 + <th>Computed value: 1.837 + 1.838 + <td>as specified 1.839 + </table> 1.840 + 1.841 + <p>This property sets the position of an underline specified on the same 1.842 + element: it does not affect underlines specified by ancestor elements. 1.843 + Values have the following meanings: 1.844 + 1.845 + <dl> 1.846 + <dt><dfn id=auto>‘<code class=css>auto</code>’</dfn> 1.847 + 1.848 + <dd>The user agent may use any algorithm to determine the underline's 1.849 + position; however it must be placed at or below the alphabetic baseline. 1.850 + <p class=note>It is suggested that the underline position be ‘<a 1.851 + href="#alphabetic"><code class=css>alphabetic</code></a>’ unless it 1.852 + crosses either subscripted (or otherwise lowered) text, or it affects 1.853 + characters from Asian scripts such as Han or Tibetan, for which an 1.854 + alphabetic underline is too high: in such cases, aligning to the em box 1.855 + edge as described for ‘<code class=css>below left</code>’ is more 1.856 + appropriate. 1.857 + 1.858 + <dt><dfn id=alphabetic>‘<code class=css>alphabetic</code>’</dfn> 1.859 + 1.860 + <dd>The underline is positioned relative to the alphabetic baseline. In 1.861 + this case the underline is likely to cross some descenders. 1.862 + <div class=figure> 1.863 + <p><img 1.864 + alt="In a typical Latin font, the underline is positioned slightly below the alphabetic baseline, leaving a gap between the line and the bottom of most Latin letters, but crossing through descenders such as the stem of a 'p'." 1.865 + src=underline-position-alphabetic.png 1.866 + title="text-underline-position: alphabetic"> 1.867 + 1.868 + <p class=caption>‘<code class=css>text-underline-position: 1.869 + alphabetic</code>’ 1.870 + </div> 1.871 + 1.872 + <dt><dfn id=below>‘<code class=css>below</code>’</dfn> 1.873 + 1.874 + <dd>In horizontal writing modes, the underline is positioned relative to 1.875 + the under edge of the element's content box. In this case the underline 1.876 + usually does not cross the descenders. (This is sometimes called 1.877 + "accounting" underline.) If the underline affects descendants with a 1.878 + lower content edge, the user agent should shift the underline down 1.879 + further to the lowest underlined content box edge. The user agent may 1.880 + ignore elements with ‘<code class=css>vertical-align</code>’ values 1.881 + given as lengths, percentages, ‘<code class=css>top</code>’, or 1.882 + ‘<code class=css>bottom</code>’ when making this adjustment. (Note 1.883 + that images that are not affected by the underline per ‘<a 1.884 + href="#text-decoration-skip"><code 1.885 + class=property>text-decoration-skip</code></a>’ will not affect the 1.886 + position of the underline.) 1.887 + <div class=figure> 1.888 + <p><img 1.889 + alt="In a typical Latin font, the underline is far enough below the text that it does not cross the bottom of a 'g'." 1.890 + src=underline-position-below.png 1.891 + title="text-underline-position: below"> 1.892 + 1.893 + <p class=caption>‘<code class=css>text-underline-position: 1.894 + below</code>’ 1.895 + </div> 1.896 + 1.897 + <div class=example> 1.898 + <p>Because ‘<a href="#text-underline-position"><code 1.899 + class=property>text-underline-position</code></a>’ inherits, and is 1.900 + not reset by the ‘<a href="#text-decoration"><code 1.901 + class=property>text-decoration</code></a>’ shorthand, the following 1.902 + example switches the document to use ‘<a href="#below"><code 1.903 + class=css>below</code></a>’ underlining, which can be more 1.904 + appropriate for writing systems with long, complicated descenders. It 1.905 + is also often useful for mathematical or chemical texts that use many 1.906 + subscripts. 1.907 + 1.908 + <pre>:root { text-underline-position: below; }</pre> 1.909 + </div> 1.910 + 1.911 + <dt><dfn id=left>‘<code class=css>left</code>’</dfn> 1.912 + 1.913 + <dd>In vertical writing modes, the underline is aligned as for ‘<a 1.914 + href="#below"><code class=css>below</code></a>’, on the left edge of 1.915 + the text. 1.916 + 1.917 + <dt><dfn id=right>‘<code class=css>right</code>’</dfn> 1.918 + 1.919 + <dd>In vertical writing modes, the underline is aligned as for ‘<a 1.920 + href="#below"><code class=css>below</code></a>’, except it is aligned 1.921 + to the right edge of the text. If this causes the underline to be drawn 1.922 + on the "over" side of the text, then an overline also switches sides and 1.923 + is drawn on the "under" side. 1.924 + </dl> 1.925 + 1.926 + <p>If ‘<a href="#below"><code class=css>below</code></a>’ is specified 1.927 + alone, ‘<a href="#left"><code class=css>left</code></a>’ is also 1.928 + implied. If ‘<a href="#left"><code class=css>left</code></a>’ or ‘<a 1.929 + href="#right"><code class=css>right</code></a>’ is specified alone, 1.930 + ‘<a href="#below"><code class=css>below</code></a>’ is also implied. 1.931 + 1.932 + <p class=issue> Should ‘<code class=css>above</code>’/‘<a 1.933 + href="#below"><code class=css>below</code></a>’ be ‘<code 1.934 + class=css>over</code>’/‘<code class=css>under</code>’ to match text 1.935 + decoration names? 1.936 + 1.937 + <div class=figure id=fig-text-underline-position> 1.938 + <table> 1.939 + <tbody> 1.940 + <tr> 1.941 + <td> <img 1.942 + alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left' places the underline on the left side of the text." 1.943 + src=underline-position-left.png title="text-underline-position: left"> 1.944 + 1.945 + <td> <img 1.946 + alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right' places the underline on the right side of the text." 1.947 + src=underline-position-right.png 1.948 + title="text-underline-position: right"> 1.949 + 1.950 + <tr> 1.951 + <td>‘<a href="#left"><code class=css>left</code></a>’ 1.952 + 1.953 + <td>‘<a href="#right"><code class=css>right</code></a>’ 1.954 + </table> 1.955 + 1.956 + <p class=caption>In vertical writing modes, the ‘<a 1.957 + href="#text-underline-position"><code 1.958 + class=property>text-underline-position</code></a>’ values ‘<a 1.959 + href="#left"><code class=css>left</code></a>’ and ‘<a 1.960 + href="#right"><code class=css>right</code></a>’ allow placing the 1.961 + underline on either side of the text. (In horizontal writing modes, both 1.962 + values are treated as ‘<a href="#below"><code 1.963 + class=css>below</code></a>’.) 1.964 + </div> 1.965 + 1.966 + <div class=example> 1.967 + <p>The following example styles modern Chinese, Japanese, and Korean texts 1.968 + with the appropriate underline positions in both horizontal and vertical 1.969 + text: 1.970 + 1.971 + <pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: below right; } 1.972 +<!-- -->:root:lang(zh), [lang|=zh] { text-underline-position: below left; }</pre> 1.973 + </div> 1.974 + 1.975 + <div class=note> 1.976 + <p>In some cases (such as in OpenType) the font format can offer 1.977 + information about the appropriate position of an underline. Typically 1.978 + this information gives the position of an ‘<a href="#alphabetic"><code 1.979 + class=css>alphabetic</code></a>’ underline; in some cases (especially 1.980 + in CJK fonts), it gives the position of a ‘<code class=css>below 1.981 + left</code>’ underline. (In this case, the font's underline metrics 1.982 + typically touch the bottom edge of the em box). The UA is encouraged to 1.983 + use information (such as the underline thickness, or appropriate 1.984 + alphabetic alignment) from the font wherever appropriate. 1.985 + </div> 1.986 + 1.987 + <h3 id=emphasis-marks><span class=secno>2.6. </span> Emphasis Marks</h3> 1.988 + 1.989 + <p>East Asian documents traditionally use small symbols next to each glyph 1.990 + to emphasize a run of text. For example: 1.991 + 1.992 + <div class=figure> 1.993 + <p> <img alt="Example of emphasis in Japanese appearing above the text" 1.994 + class=example height=28 src=text-emphasis-ja.gif width=225> 1.995 + 1.996 + <p class=caption>Accent emphasis (shown in blue for clarity) applied to 1.997 + Japanese text 1.998 + </div> 1.999 + 1.1000 + <h4 id=text-emphasis-style-property><span class=secno>2.6.1. </span> 1.1001 + Emphasis Mark Style: the ‘<a href="#text-emphasis-style"><code 1.1002 + class=property>text-emphasis-style</code></a>’ property</h4> 1.1003 + 1.1004 + <table class=propdef> 1.1005 + <tbody> 1.1006 + <tr> 1.1007 + <th>Name: 1.1008 + 1.1009 + <td><dfn id=text-emphasis-style>text-emphasis-style</dfn> 1.1010 + 1.1011 + <tr> 1.1012 + <th><a href="#values">Value</a>: 1.1013 + 1.1014 + <td>none | [ [ filled | open ] || [ dot | circle | double-circle | 1.1015 + triangle | sesame ] ] | <a class=noxref 1.1016 + href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string"><span 1.1017 + class=value-inst-string><string></span></a> 1.1018 + 1.1019 + <tr> 1.1020 + <th>Initial: 1.1021 + 1.1022 + <td>none 1.1023 + 1.1024 + <tr> 1.1025 + <th>Applies to: 1.1026 + 1.1027 + <td>all elements 1.1028 + 1.1029 + <tr> 1.1030 + <th>Inherited: 1.1031 + 1.1032 + <td>yes 1.1033 + 1.1034 + <tr> 1.1035 + <th>Percentages: 1.1036 + 1.1037 + <td>N/A 1.1038 + 1.1039 + <tr> 1.1040 + <th>Media: 1.1041 + 1.1042 + <td>visual 1.1043 + 1.1044 + <tr> 1.1045 + <th>Computed value: 1.1046 + 1.1047 + <td>‘<code class=property>none</code>’, a pair of keywords 1.1048 + representing the shape and fill, or a string 1.1049 + </table> 1.1050 + 1.1051 + <p>This property applies emphasis marks to the element's text. Values have 1.1052 + the following meanings: 1.1053 + 1.1054 + <dl> 1.1055 + <dt><dfn id=none1 title="text-emphasis:none">‘<code 1.1056 + class=css>none</code>’</dfn> 1.1057 + 1.1058 + <dd>No emphasis marks. 1.1059 + 1.1060 + <dt><dfn id=filled title="text-emphasis:filled">‘<code 1.1061 + class=css>filled</code>’</dfn> 1.1062 + 1.1063 + <dd>The shape is filled with solid color. 1.1064 + 1.1065 + <dt><dfn id=open title="text-emphasis:open">‘<code 1.1066 + class=css>open</code>’</dfn> 1.1067 + 1.1068 + <dd>The shape is hollow. 1.1069 + 1.1070 + <dt><dfn id=dot title="text-emphasis:dot">‘<code 1.1071 + class=css>dot</code>’</dfn> 1.1072 + 1.1073 + <dd>Display small circles as marks. The filled dot is U+2022 ‘<code 1.1074 + class=css>•</code>’, and the open dot is U+25E6 ‘<code 1.1075 + class=css>◦</code>’. 1.1076 + 1.1077 + <dt><dfn id=circle title="text-emphasis:circle">‘<code 1.1078 + class=css>circle</code>’</dfn> 1.1079 + 1.1080 + <dd>Display large circles as marks. The filled circle is U+25CF ‘<code 1.1081 + class=css>●</code>’, and the open circle is U+25CB ‘<code 1.1082 + class=css>○</code>’. 1.1083 + 1.1084 + <dt><dfn id=double-circle title="text-emphasis:double-circle">‘<code 1.1085 + class=css>double-circle</code>’</dfn> 1.1086 + 1.1087 + <dd>Display double circles as marks. The filled double-circle is U+25C9 1.1088 + ‘<code class=css>◉</code>’, and the open double-circle is U+25CE 1.1089 + ‘<code class=css>◎</code>’. 1.1090 + 1.1091 + <dt><dfn id=triangle title="text-emphasis:triangle">‘<code 1.1092 + class=css>triangle</code>’</dfn> 1.1093 + 1.1094 + <dd>Display triangles as marks. The filled triangle is U+25B2 ‘<code 1.1095 + class=css>▲</code>’, and the open triangle is U+25B3 ‘<code 1.1096 + class=css>△</code>’. 1.1097 + 1.1098 + <dt><dfn id=sesame title="text-emphasis:sesame">‘<code 1.1099 + class=css>sesame</code>’</dfn> 1.1100 + 1.1101 + <dd>Display sesames as marks. The filled sesame is U+FE45 ‘<code 1.1102 + class=css>﹅</code>’, and the open sesame is U+FE46 ‘<code 1.1103 + class=css>﹆</code>’. 1.1104 + 1.1105 + <dt><dfn id=ltstringgt title="text-emphasis:sesame">‘<code 1.1106 + class=css><var><string></var></code>’</dfn> 1.1107 + 1.1108 + <dd>Display the given string as marks. Authors should not specify more 1.1109 + than one <a href="#character"><i>character</i></a> in <string>. The 1.1110 + UA may truncate or ignore strings consisting of more than one grapheme 1.1111 + cluster. 1.1112 + </dl> 1.1113 + 1.1114 + <p>If a shape keyword is specified but neither of ‘<code 1.1115 + class=css>filled</code>’ nor ‘<code class=css>open</code>’ is 1.1116 + specified, ‘<code class=css>filled</code>’ is assumed. If only 1.1117 + ‘<code class=css>filled</code>’ or ‘<code class=css>open</code>’ 1.1118 + is specified, the shape keyword computes to ‘<code 1.1119 + class=css>circle</code>’ in horizontal writing mode and ‘<code 1.1120 + class=css>sesame</code>’ in vertical writing mode. 1.1121 + 1.1122 + <p>The marks should be drawn using the element's font settings with its 1.1123 + size scaled down to 50%. However, not all fonts have all these glyphs, and 1.1124 + some fonts use inappropriate sizes for emphasis marks in these code 1.1125 + points. The UA may opt to use a font known to be good for emphasis marks, 1.1126 + or the marks may instead be synthesized by the UA. Marks must remain 1.1127 + upright in vertical writing modes: like CJK characters, they do not rotate 1.1128 + to match the writing mode. 1.1129 + 1.1130 + <p class=note> One example of good fonts for emphasis marks is Adobe's 1.1131 + opensource project, <a 1.1132 + href="http://sourceforge.net/adobe/kenten-generic/">Kenten Generic 1.1133 + OpenType Font</a>, which is specially designed for the emphasis marks. 1.1134 + 1.1135 + <p>The marks are drawn once for each <a 1.1136 + href="#character"><i>character</i></a>. However, emphasis marks are not 1.1137 + drawn for characters that are: 1.1138 + 1.1139 + <ul> 1.1140 + <li><a href="http://www.w3.org/TR/css3-text/#word-separator">Word 1.1141 + separators</a> or that belong to the Unicode separator classes (Z*). (But 1.1142 + note that emphasis marks <em>are</em> drawn for a space that combines 1.1143 + with any combining characters.) 1.1144 + 1.1145 + <li>Characters belonging to the Unicode classes for control codes and 1.1146 + unassigned characters (Cc, Cf, Cn). 1.1147 + </ul> 1.1148 + 1.1149 + <p>If emphasis marks are drawn for characters for which ruby is drawn in 1.1150 + the same position as the emphasis mark, the ruby should be stacked between 1.1151 + the emphasis marks and the base text. In this case, the position of the 1.1152 + emphasis marks for a given element should be determined as if all 1.1153 + characters have ruby boxes of the same height as the highest ruby box in 1.1154 + the element. If the UA is not capable of drawing ruby and emphasis marks 1.1155 + on the same side, the UA may hide ruby and draw only emphasis marks. 1.1156 + 1.1157 + <div class=figure> 1.1158 + <p><img 1.1159 + alt="Example of emphasis marks applied to 4 characters, and ruby to 2 of them" 1.1160 + height=50 src=text-emphasis-ruby.png width=134> 1.1161 + 1.1162 + <p class=caption>Emphasis marks applied to 4 characters, and ruby to 2 of 1.1163 + them 1.1164 + </div> 1.1165 + 1.1166 + <p class=note>A future level of CSS may define controls to specify what to 1.1167 + do when emphasis marks and ruby text coincide. 1.1168 + 1.1169 + <h4 id=text-emphasis-color-property><span class=secno>2.6.2. </span> 1.1170 + Emphasis Mark Color: the ‘<a href="#text-emphasis-color"><code 1.1171 + class=property>text-emphasis-color</code></a>’ property</h4> 1.1172 + 1.1173 + <table class=propdef> 1.1174 + <tbody> 1.1175 + <tr> 1.1176 + <th>Name: 1.1177 + 1.1178 + <td><dfn id=text-emphasis-color>text-emphasis-color</dfn> 1.1179 + 1.1180 + <tr> 1.1181 + <th><a href="#values">Value</a>: 1.1182 + 1.1183 + <td><color> 1.1184 + 1.1185 + <tr> 1.1186 + <th>Initial: 1.1187 + 1.1188 + <td><a 1.1189 + href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> 1.1190 + 1.1191 + <tr> 1.1192 + <th>Applies to: 1.1193 + 1.1194 + <td>all elements 1.1195 + 1.1196 + <tr> 1.1197 + <th>Inherited: 1.1198 + 1.1199 + <td>yes 1.1200 + 1.1201 + <tr> 1.1202 + <th>Percentages: 1.1203 + 1.1204 + <td>N/A 1.1205 + 1.1206 + <tr> 1.1207 + <th>Media: 1.1208 + 1.1209 + <td>visual 1.1210 + 1.1211 + <tr> 1.1212 + <th>Computed value: 1.1213 + 1.1214 + <td>as specified 1.1215 + </table> 1.1216 + 1.1217 + <p>This property specifies the foreground color of the emphasis marks. 1.1218 + 1.1219 + <p class=note> The correct behavior of this property depends on an 1.1220 + outstanding erratum on <a href="#CSS3COLOR" 1.1221 + rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a> that has the ‘<a 1.1222 + href="#currentcolor"><code class=css>currentColor</code></a>’ keyword 1.1223 + inherit as itself, and to take the value of the ‘<code 1.1224 + class=property>color</code>’ property as its <em>used</em> (not 1.1225 + computed) value. 1.1226 + 1.1227 + <h4 id=text-emphasis-property><span class=secno>2.6.3. </span> Emphasis 1.1228 + Mark Shorthand: the ‘<a href="#text-emphasis"><code 1.1229 + class=property>text-emphasis</code></a>’ property</h4> 1.1230 + 1.1231 + <table class=propdef> 1.1232 + <tbody> 1.1233 + <tr> 1.1234 + <th>Name: 1.1235 + 1.1236 + <td><dfn id=text-emphasis>text-emphasis</dfn> 1.1237 + 1.1238 + <tr> 1.1239 + <th><a href="#values">Value</a>: 1.1240 + 1.1241 + <td>‘<code class=css><<a 1.1242 + href="#text-emphasis-style">text-emphasis-style</a>></code>’ || 1.1243 + ‘<code class=css><<a 1.1244 + href="#text-emphasis-color">text-emphasis-color</a>></code>’ 1.1245 + 1.1246 + <tr> 1.1247 + <th>Initial: 1.1248 + 1.1249 + <td>see individual properties 1.1250 + 1.1251 + <tr> 1.1252 + <th>Applies to: 1.1253 + 1.1254 + <td>all elements 1.1255 + 1.1256 + <tr> 1.1257 + <th>Inherited: 1.1258 + 1.1259 + <td>yes 1.1260 + 1.1261 + <tr> 1.1262 + <th>Percentages: 1.1263 + 1.1264 + <td>N/A 1.1265 + 1.1266 + <tr> 1.1267 + <th>Media: 1.1268 + 1.1269 + <td>visual 1.1270 + 1.1271 + <tr> 1.1272 + <th>Computed value: 1.1273 + 1.1274 + <td>see individual properties 1.1275 + </table> 1.1276 + 1.1277 + <p>This property is a shorthand for setting ‘<a 1.1278 + href="#text-emphasis-style"><code 1.1279 + class=property>text-emphasis-style</code></a>’ and ‘<a 1.1280 + href="#text-emphasis-color"><code 1.1281 + class=property>text-emphasis-color</code></a>’ in one declaration. 1.1282 + Omitted values are set to their initial values. 1.1283 + 1.1284 + <p class=note>Note that ‘<a href="#text-emphasis-position"><code 1.1285 + class=property>text-emphasis-position</code></a>’ is not reset in this 1.1286 + shorthand. This is because typically the shape and color vary, but the 1.1287 + position is consistent for a particular language throughout the document. 1.1288 + Therefore the position should inherit independently. 1.1289 + 1.1290 + <h4 id=text-emphasis-position-property><span class=secno>2.6.4. </span> 1.1291 + Emphasis Mark Position: the ‘<a href="#text-emphasis-position"><code 1.1292 + class=property>text-emphasis-position</code></a>’ property</h4> 1.1293 + 1.1294 + <table class=propdef> 1.1295 + <tbody> 1.1296 + <tr> 1.1297 + <th>Name: 1.1298 + 1.1299 + <td><dfn id=text-emphasis-position>text-emphasis-position</dfn> 1.1300 + 1.1301 + <tr> 1.1302 + <th><a href="#values">Value</a>: 1.1303 + 1.1304 + <td>[ above | below ] && [ right | left ] 1.1305 + 1.1306 + <tr> 1.1307 + <th>Initial: 1.1308 + 1.1309 + <td>above right 1.1310 + 1.1311 + <tr> 1.1312 + <th>Applies to: 1.1313 + 1.1314 + <td>all elements 1.1315 + 1.1316 + <tr> 1.1317 + <th>Inherited: 1.1318 + 1.1319 + <td>yes 1.1320 + 1.1321 + <tr> 1.1322 + <th>Percentages: 1.1323 + 1.1324 + <td>N/A 1.1325 + 1.1326 + <tr> 1.1327 + <th>Media: 1.1328 + 1.1329 + <td>visual 1.1330 + 1.1331 + <tr> 1.1332 + <th>Computed value: 1.1333 + 1.1334 + <td>as specified 1.1335 + </table> 1.1336 + 1.1337 + <p>This property describes where emphasis marks are drawn at. The values 1.1338 + have following meanings: 1.1339 + 1.1340 + <dl> 1.1341 + <dt><dfn id=above title="text-emphasis:above">‘<code 1.1342 + class=css>above</code>’</dfn> 1.1343 + 1.1344 + <dd>Draw marks over the text in horizontal writing mode. 1.1345 + 1.1346 + <dt><dfn id=below0 title="text-emphasis:below">‘<code 1.1347 + class=css>below</code>’</dfn> 1.1348 + 1.1349 + <dd>Draw marks under the text in horizontal writing mode. 1.1350 + 1.1351 + <dt><dfn id=right0 title="text-emphasis:right">‘<code 1.1352 + class=css>right</code>’</dfn> 1.1353 + 1.1354 + <dd>Draw marks to the right of the text in vertical writing mode. 1.1355 + 1.1356 + <dt><dfn id=left0 title="text-emphasis:left">‘<code 1.1357 + class=css>left</code>’</dfn> 1.1358 + 1.1359 + <dd>Draw marks to the left of the text in vertical writing mode. 1.1360 + </dl> 1.1361 + 1.1362 + <p class=issue> Should ‘<code class=css>above</code>’/‘<a 1.1363 + href="#below"><code class=css>below</code></a>’ be ‘<code 1.1364 + class=css>over</code>’/‘<code class=css>under</code>’ to match text 1.1365 + decoration names? 1.1366 + 1.1367 + <p>Emphasis marks are drawn exactly as if each character was assigned the 1.1368 + mark as its ruby annotation text with the ruby position given by ‘<a 1.1369 + href="#text-emphasis-position"><code 1.1370 + class=property>text-emphasis-position</code></a>’ and the ruby alignment 1.1371 + as centered. 1.1372 + 1.1373 + <p>The effect of emphasis marks on the line height is the same as for ruby 1.1374 + text. 1.1375 + 1.1376 + <div class=note> 1.1377 + <p>Note, the preferred position of emphasis marks depends on the language. 1.1378 + In Japanese for example, the preferred position is ‘<code 1.1379 + class=css>above right</code>’. In Chinese, on the other hand, the 1.1380 + preferred position is ‘<code class=css>below right</code>’. The 1.1381 + informative table below summarizes the preferred emphasis mark positions 1.1382 + for Chinese and Japanese: 1.1383 + 1.1384 + <table class=data> 1.1385 + <caption>Preferred emphasis mark and ruby position</caption> 1.1386 + 1.1387 + <thead> 1.1388 + <tr> 1.1389 + <th rowspan=2 scope=col>Language 1.1390 + 1.1391 + <th colspan=2 scope=col>Preferred mark position 1.1392 + 1.1393 + <th colspan=2 rowspan=2 scope=col>Illustration 1.1394 + 1.1395 + <tr> 1.1396 + <th>Horizontal 1.1397 + 1.1398 + <th>Vertical 1.1399 + 1.1400 + <tbody> 1.1401 + <tr> 1.1402 + <td scope=row>Japanese 1.1403 + 1.1404 + <td>above 1.1405 + 1.1406 + <td>right 1.1407 + 1.1408 + <td> <img 1.1409 + alt="Emphasis marks appear above each emphasized character in horizontal Japanese text." 1.1410 + height=28 src=text-emphasis-ja.gif 1.1411 + title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text" 1.1412 + width=225> 1.1413 + 1.1414 + <td rowspan=2> <img 1.1415 + alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text." 1.1416 + height=89 src=text-emphasis-v.gif 1.1417 + title="Emphasis applied on the right of a fragment of Japanese text" 1.1418 + width=34> <!-- 1.1419 + <tr> 1.1420 + <td scope="row">Mongolian 1.1421 + <td><span class="issue">?</span> 1.1422 + <td>right 1.1423 + --> 1.1424 + 1.1425 + <tr> 1.1426 + <td scope=row>Chinese 1.1427 + 1.1428 + <td>below 1.1429 + 1.1430 + <td>right 1.1431 + 1.1432 + <td> <img 1.1433 + alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text." 1.1434 + height=28 src=text-emphasis-zh.gif 1.1435 + title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text" 1.1436 + width=133> 1.1437 + </table> 1.1438 + </div> 1.1439 + 1.1440 + <h3 id=text-shadow-property><span class=secno>2.7. </span> Text Shadows: 1.1441 + the ‘<a href="#text-shadow"><code 1.1442 + class=property>text-shadow</code></a>’ property</h3> 1.1443 + 1.1444 + <table class=propdef> 1.1445 + <tbody> 1.1446 + <tr> 1.1447 + <th>Name: 1.1448 + 1.1449 + <td><dfn id=text-shadow>text-shadow</dfn> 1.1450 + 1.1451 + <tr> 1.1452 + <th><a href="#values">Value</a>: 1.1453 + 1.1454 + <td>none | [ <length>{2,3} && <color>? ]# 1.1455 + 1.1456 + <tr> 1.1457 + <th>Initial: 1.1458 + 1.1459 + <td>none 1.1460 + 1.1461 + <tr> 1.1462 + <th>Applies to: 1.1463 + 1.1464 + <td>all elements 1.1465 + 1.1466 + <tr> 1.1467 + <th>Inherited: 1.1468 + 1.1469 + <td>yes 1.1470 + 1.1471 + <tr> 1.1472 + <th>Percentages: 1.1473 + 1.1474 + <td>N/A 1.1475 + 1.1476 + <tr> 1.1477 + <th>Media: 1.1478 + 1.1479 + <td>visual 1.1480 + 1.1481 + <tr> 1.1482 + <th>Computed value: 1.1483 + 1.1484 + <td>a color plus three absolute <length>s 1.1485 + </table> 1.1486 + 1.1487 + <p>This property accepts a comma-separated list of shadow effects to be 1.1488 + applied to the text of the element. Values are interpreted as for <a 1.1489 + href="http://www.w3.org/TR/css3-background/#the-box-shadow">‘<code 1.1490 + class=property>box-shadow</code>’</a> <a href="#CSS3BG" 1.1491 + rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. (But note that spread 1.1492 + values are not allowed.) The shadow is applied to all of the element's 1.1493 + text as well as any text decorations it specifies. 1.1494 + 1.1495 + <p>The shadow effects are applied front-to-back: the first shadow is on 1.1496 + top. The shadows may thus overlay each other, but they never overlay the 1.1497 + text itself. The shadow must be painted at a stack level between the 1.1498 + element's border and/or background, if present, and the elements text and 1.1499 + text decoration. UAs should avoid painting text shadows over text in 1.1500 + adjacent elements belonging to the same stack level and stacking context. 1.1501 + (This may mean that the exact stack level of the shadows depends on 1.1502 + whether the element has a border or background: the exact stacking 1.1503 + behavior of text shadows is thus UA-defined.) 1.1504 + 1.1505 + <p>Unlike ‘<code class=property>box-shadow</code>’, text shadows are 1.1506 + not clipped to the shadowed shape and may show through if the text is 1.1507 + partially-transparent. Like ‘<code class=property>box-shadow</code>’, 1.1508 + text shadows do not influence layout, and do not trigger scrolling or 1.1509 + increase the size of the scrollable area. 1.1510 + 1.1511 + <p class=note>The painting order of shadows defined here is the opposite of 1.1512 + that defined in the 1998 <a 1.1513 + href="http://www.w3.org/TR/1998/REC-CSS2-19980512">CSS2 1.1514 + Recommendation</a>. 1.1515 + 1.1516 + <p>The ‘<a href="#text-shadow"><code class=css>text-shadow</code></a>’ 1.1517 + property applies to both the <code>::first-line</code> and 1.1518 + <code>::first-letter</code> pseudo-elements. 1.1519 + 1.1520 + <h2 id=conformance><span class=secno>3. </span> Conformance</h2> 1.1521 + 1.1522 + <h3 id=conventions><span class=secno>3.1. </span> Document Conventions</h3> 1.1523 + 1.1524 + <p>Conformance requirements are expressed with a combination of descriptive 1.1525 + assertions and RFC 2119 terminology. The key words “MUST”, “MUST 1.1526 + NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, 1.1527 + “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the 1.1528 + normative parts of this document are to be interpreted as described in RFC 1.1529 + 2119. However, for readability, these words do not appear in all uppercase 1.1530 + letters in this specification. 1.1531 + 1.1532 + <p>All of the text of this specification is normative except sections 1.1533 + explicitly marked as non-normative, examples, and notes. <a 1.1534 + href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a> 1.1535 + 1.1536 + <p>Examples in this specification are introduced with the words “for 1.1537 + example” or are set apart from the normative text with 1.1538 + <code>class="example"</code>, like this: 1.1539 + 1.1540 + <div class=example> 1.1541 + <p>This is an example of an informative example. 1.1542 + </div> 1.1543 + 1.1544 + <p>Informative notes begin with the word “Note” and are set apart from 1.1545 + the normative text with <code>class="note"</code>, like this: 1.1546 + 1.1547 + <p class=note>Note, this is an informative note. 1.1548 + 1.1549 + <h3 id=conformance-classes><span class=secno>3.2. </span> Conformance 1.1550 + Classes</h3> 1.1551 + 1.1552 + <p>Conformance to CSS Text Level 3 is defined for three conformance 1.1553 + classes: 1.1554 + 1.1555 + <dl> 1.1556 + <dt><dfn id=style-sheet title="style sheet!!as conformance class">style 1.1557 + sheet</dfn> 1.1558 + 1.1559 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 1.1560 + style sheet</a>. 1.1561 + 1.1562 + <dt><dfn id=renderer>renderer</dfn> 1.1563 + 1.1564 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 1.1565 + that interprets the semantics of a style sheet and renders documents that 1.1566 + use them. 1.1567 + 1.1568 + <dt><dfn id=authoring-tool>authoring tool</dfn> 1.1569 + 1.1570 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 1.1571 + that writes a style sheet. 1.1572 + </dl> 1.1573 + 1.1574 + <p>A style sheet is conformant to CSS Text Level 3 if all of its 1.1575 + declarations that use properties defined in this module have values that 1.1576 + are valid according to the generic CSS grammar and the individual grammars 1.1577 + of each property as given in this module. 1.1578 + 1.1579 + <p>A renderer is conformant to CSS Text Level 3 if, in addition to 1.1580 + interpreting the style sheet as defined by the appropriate specifications, 1.1581 + it supports all the features defined by CSS Text Level 3 by parsing them 1.1582 + correctly and rendering the document accordingly. However, the inability 1.1583 + of a UA to correctly render a document due to limitations of the device 1.1584 + does not make the UA non-conformant. (For example, a UA is not required to 1.1585 + render color on a monochrome monitor.) 1.1586 + 1.1587 + <p>An authoring tool is conformant to CSS Text Level 3 if it writes style 1.1588 + sheets that are syntactically correct according to the generic CSS grammar 1.1589 + and the individual grammars of each feature in this module, and meet all 1.1590 + other conformance requirements of style sheets as described in this 1.1591 + module. 1.1592 + 1.1593 + <h3 id=partial><span class=secno>3.3. </span> Partial Implementations</h3> 1.1594 + 1.1595 + <p>So that authors can exploit the forward-compatible parsing rules to 1.1596 + assign fallback values, CSS renderers <strong>must</strong> treat as 1.1597 + invalid (and <a 1.1598 + href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as 1.1599 + appropriate</a>) any at-rules, properties, property values, keywords, and 1.1600 + other syntactic constructs for which they have no usable level of support. 1.1601 + In particular, user agents <strong>must not</strong> selectively ignore 1.1602 + unsupported component values and honor supported values in a single 1.1603 + multi-value property declaration: if any value is considered invalid (as 1.1604 + unsupported values must be), CSS requires that the entire declaration be 1.1605 + ignored. 1.1606 + 1.1607 + <h3 id=experimental><span class=secno>3.4. </span> Experimental 1.1608 + Implementations</h3> 1.1609 + 1.1610 + <p>To avoid clashes with future CSS features, the CSS2.1 specification 1.1611 + reserves a <a 1.1612 + href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 1.1613 + syntax</a> for proprietary and experimental extensions to CSS. 1.1614 + 1.1615 + <p>Prior to a specification reaching the Candidate Recommendation stage in 1.1616 + the W3C process, all implementations of a CSS feature are considered 1.1617 + experimental. The CSS Working Group recommends that implementations use a 1.1618 + vendor-prefixed syntax for such features, including those in W3C Working 1.1619 + Drafts. This avoids incompatibilities with future changes in the draft. 1.1620 + 1.1621 + <h3 id=testing><span class=secno>3.5. </span>Non-Experimental 1.1622 + Implementations</h3> 1.1623 + 1.1624 + <p>Once a specification reaches the Candidate Recommendation stage, 1.1625 + non-experimental implementations are possible, and implementors should 1.1626 + release an unprefixed implementation of any CR-level feature they can 1.1627 + demonstrate to be correctly implemented according to spec. 1.1628 + 1.1629 + <p>To establish and maintain the interoperability of CSS across 1.1630 + implementations, the CSS Working Group requests that non-experimental CSS 1.1631 + renderers submit an implementation report (and, if necessary, the 1.1632 + testcases used for that implementation report) to the W3C before releasing 1.1633 + an unprefixed implementation of any CSS features. Testcases submitted to 1.1634 + W3C are subject to review and correction by the CSS Working Group. 1.1635 + 1.1636 + <p>Further information on submitting testcases and implementation reports 1.1637 + can be found from on the CSS Working Group's website at <a 1.1638 + href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 1.1639 + Questions should be directed to the <a 1.1640 + href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> 1.1641 + mailing list. 1.1642 + 1.1643 + <h3 id=cr-exit-criteria><span class=secno>3.6. </span> CR Exit Criteria</h3> 1.1644 + 1.1645 + <p> For this specification to be advanced to Proposed Recommendation, there 1.1646 + must be at least two independent, interoperable implementations of each 1.1647 + feature. Each feature may be implemented by a different set of products, 1.1648 + there is no requirement that all features be implemented by a single 1.1649 + product. For the purposes of this criterion, we define the following 1.1650 + terms: 1.1651 + 1.1652 + <dl> 1.1653 + <dt>independent 1.1654 + 1.1655 + <dd>each implementation must be developed by a different party and cannot 1.1656 + share, reuse, or derive from code used by another qualifying 1.1657 + implementation. Sections of code that have no bearing on the 1.1658 + implementation of this specification are exempt from this requirement. 1.1659 + 1.1660 + <dt>interoperable 1.1661 + 1.1662 + <dd>passing the respective test case(s) in the official CSS test suite, 1.1663 + or, if the implementation is not a Web browser, an equivalent test. Every 1.1664 + relevant test in the test suite should have an equivalent test created if 1.1665 + such a user agent (UA) is to be used to claim interoperability. In 1.1666 + addition if such a UA is to be used to claim interoperability, then there 1.1667 + must one or more additional UAs which can also pass those equivalent 1.1668 + tests in the same way for the purpose of interoperability. The equivalent 1.1669 + tests must be made publicly available for the purposes of peer review. 1.1670 + 1.1671 + <dt>implementation 1.1672 + 1.1673 + <dd>a user agent which: 1.1674 + <ol class=inline> 1.1675 + <li>implements the specification. 1.1676 + 1.1677 + <li>is available to the general public. The implementation may be a 1.1678 + shipping product or other publicly available version (i.e., beta 1.1679 + version, preview release, or “nightly build”). Non-shipping product 1.1680 + releases must have implemented the feature(s) for a period of at least 1.1681 + one month in order to demonstrate stability. 1.1682 + 1.1683 + <li>is not experimental (i.e., a version specifically designed to pass 1.1684 + the test suite and is not intended for normal usage going forward). 1.1685 + </ol> 1.1686 + </dl> 1.1687 + 1.1688 + <p>The specification will remain Candidate Recommendation for at least six 1.1689 + months. 1.1690 + 1.1691 + <h2 class=no-num id=acknowledgements> Appendix A: Acknowledgements</h2> 1.1692 + 1.1693 + <p>This specification would not have been possible without the help from: 1.1694 + Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett, 1.1695 + Martin Dürst, Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye 1.1696 + Gittelman, Ian Hickson, Martin Heijdra, Richard Ishida, Masayasu Ishikawa, 1.1697 + Michael Jochimsen, Eric LeVine, Ambrose Li, Håkon Wium Lie, Chris Lilley, 1.1698 + Ken Lunde, Nat McCully, Shinyu Murakami, Paul Nelson, Chris Pratley, 1.1699 + Marcin Sawicki, Arnold Schrijver, Rahul Sonnad, Michel Suignard, Takao 1.1700 + Suzuki, Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi 1.1701 + Yabe and Steve Zilles. 1.1702 + 1.1703 + <h2 class=no-num id=appendix-b-references>Appendix B: References</h2> 1.1704 + 1.1705 + <h3 class=no-num id=normative-ref>Normative references</h3> 1.1706 + <!--begin-normative--> 1.1707 + <!-- Sorted by label --> 1.1708 + 1.1709 + <dl class=bibliography> 1.1710 + <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 1.1711 + <!----> 1.1712 + 1.1713 + <dt id=CSS21>[CSS21] 1.1714 + 1.1715 + <dd>Bert Bos; et al. <a 1.1716 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style 1.1717 + Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June 1.1718 + 2011. W3C Recommendation. URL: <a 1.1719 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> 1.1720 + </dd> 1.1721 + <!----> 1.1722 + 1.1723 + <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES] 1.1724 + 1.1725 + <dd>Elika J. Etemad; Koji Ishii. <a 1.1726 + href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/"><cite>CSS 1.1727 + Writing Modes Module Level 3.</cite></a> 1 May 2012. W3C Working Draft. 1.1728 + (Work in progress.) URL: <a 1.1729 + href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/</a> 1.1730 + </dd> 1.1731 + <!----> 1.1732 + 1.1733 + <dt id=CSS3BG>[CSS3BG] 1.1734 + 1.1735 + <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a 1.1736 + href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS 1.1737 + Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C 1.1738 + Candidate Recommendation. (Work in progress.) URL: <a 1.1739 + href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a> 1.1740 + </dd> 1.1741 + <!----> 1.1742 + 1.1743 + <dt id=CSS3TEXT>[CSS3TEXT] 1.1744 + 1.1745 + <dd>Elika J. Etemad; Koji Ishii. <a 1.1746 + href="http://www.w3.org/TR/2012/WD-css3-text-20120814/"><cite>CSS Text 1.1747 + Level 3.</cite></a> 14 August 2012. W3C Working Draft. (Work in 1.1748 + progress.) URL: <a 1.1749 + href="http://www.w3.org/TR/2012/WD-css3-text-20120814/">http://www.w3.org/TR/2012/WD-css3-text-20120814/</a> 1.1750 + </dd> 1.1751 + <!----> 1.1752 + 1.1753 + <dt id=RFC2119>[RFC2119] 1.1754 + 1.1755 + <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key 1.1756 + words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet 1.1757 + RFC 2119. URL: <a 1.1758 + href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a> 1.1759 + </dd> 1.1760 + <!----> 1.1761 + </dl> 1.1762 + <!--end-normative--> 1.1763 + 1.1764 + <h3 class=no-num id=informative-ref>Informative references</h3> 1.1765 + <!--begin-informative--> 1.1766 + <!-- Sorted by label --> 1.1767 + 1.1768 + <dl class=bibliography> 1.1769 + <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 1.1770 + <!----> 1.1771 + 1.1772 + <dt id=CSS3COLOR>[CSS3COLOR] 1.1773 + 1.1774 + <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a 1.1775 + href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color 1.1776 + Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a 1.1777 + href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a> 1.1778 + </dd> 1.1779 + <!----> 1.1780 + </dl> 1.1781 + <!--end-informative--> 1.1782 + 1.1783 + <h2 class=no-num id=changes>Appendix C: Changes</h2>
2.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 2.2 +++ b/css-text-decor-3/Overview.src.html Mon Oct 15 14:56:45 2012 -0700 2.3 @@ -0,0 +1,1228 @@ 2.4 +<!DOCTYPE html> 2.5 +<html lang="en"> 2.6 +<head> 2.7 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 2.8 + <title>CSS Text Decoration Module Level 3 (CSS3 Text Decoration)</title> 2.9 + <link rel=contents href="#contents"> 2.10 + <link rel=index href="#index"> 2.11 + <link rel="stylesheet" type="text/css" href="../default.css"> 2.12 + <link rel="stylesheet" type="text/css" 2.13 + href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css"> 2.14 + 2.15 +</head> 2.16 + 2.17 +<div class="head"> 2.18 +<!--logo--> 2.19 + 2.20 +<h1>CSS Text Decoration Module Level 3</h1> 2.21 + 2.22 +<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2> 2.23 +<dl> 2.24 + <dt>This version:</dt> 2.25 + <!-- 2.26 + <dd><a href="http://dev.w3.org/csswg/css3-text/">$Date$ (CVS $Revision$)</a> 2.27 + --> 2.28 + <dd><a href="http://www.w3.org/TR/[YEAR]/WD-css3-text-[CDATE]/">http://www.w3.org/TR/[YEAR]/WD-css3-text-[CDATE]/</a></dd> 2.29 + 2.30 + <dt>Latest version:</dt> 2.31 + <dd><a href="http://www.w3.org/TR/css3-text/">http://www.w3.org/TR/css3-text/</a></dd> 2.32 + <dt>Latest editor's draft:</dt> 2.33 + <dd><a href="http://dev.w3.org/csswg/css3-text/">http://dev.w3.org/csswg/css3-text/</a></dd> 2.34 + <dt>Previous version:</dt> 2.35 + <dd><a 2.36 + href="http://www.w3.org/TR/2012/WD-css3-text-20120119/">http://www.w3.org/TR/2012/WD-css3-text-20120119/</a> 2.37 + 2.38 + <dt>Issues List:</dt> 2.39 + <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/10">http://www.w3.org/Style/CSS/Tracker/products/10</a> 2.40 + 2.41 + <dt>Discussion:</dt> 2.42 + <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line “<kbd>[[SHORTNAME]] <var>… message topic …</var></kbd>” 2.43 + 2.44 + <dt>Editors:</dt> 2.45 + <dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> (Mozilla)</dd> 2.46 + <dd><a href="mailto:koji.a.ishii@mail.rakuten.com">Koji Ishii</a> (Rakuten, Inc.)</dd> 2.47 +</dl> 2.48 + 2.49 +<!--copyright--> 2.50 + 2.51 +<hr title="Separator for header"> 2.52 +</div> 2.53 + 2.54 +<h2 class="no-num no-toc" id="abstract">Abstract</h2> 2.55 + 2.56 + <p>This module contains the features of CSS relating to 2.57 + text decoration, such as underlines, text shadows, and emphasis marks. 2.58 + <a href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing 2.59 + the rendering of structured documents (such as HTML and XML) on screen, on 2.60 + paper, in speech, etc. 2.61 + 2.62 +<h2 class="no-num no-toc" id="status">Status of this document</h2> 2.63 + 2.64 + 2.65 + <p><em>This section describes the status of this document at the time of 2.66 + its publication. Other documents may supersede this document. A list of 2.67 + current W3C publications and the latest revision of this technical report 2.68 + can be found in the <a href="http://www.w3.org/TR/">W3C technical reports 2.69 + index at http://www.w3.org/TR/.</a></em> 2.70 + 2.71 + <p>Publication as a Working Draft does not imply endorsement by the W3C 2.72 + Membership. This is a draft document and may be updated, replaced or 2.73 + obsoleted by other documents at any time. It is inappropriate to cite this 2.74 + document as other than work in progress. 2.75 + 2.76 + <p>This CSS module has been produced as a combined effort of the <a 2.77 + href="http://www.w3.org/International/Activity">W3C Internationalization Activity</a>, 2.78 + and the <a href="http://www.w3.org/Style/Activity">Style Activity</a> and is maintained 2.79 + by the <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>. It also 2.80 + includes contributions made by participants in the <a 2.81 + href="http://www.w3.org/Style/XSL/Group/">XSL Working Group</a> (<a 2.82 + href="http://cgi.w3.org/MemberAccess/AccessRequest">members 2.83 + only</a>). 2.84 + 2.85 + <p>This document was produced by a group operating under the <a 2.86 + href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2.87 + 2004 W3C Patent Policy</a>. W3C maintains a <a 2.88 + href="http://www.w3.org/2004/01/pp-impl/32061/status" 2.89 + rel=disclosure>public list of any patent disclosures</a> made in 2.90 + connection with the deliverables of the group; that page also includes 2.91 + instructions for disclosing a patent. An individual who has actual 2.92 + knowledge of a patent which the individual believes contains <a 2.93 + href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential 2.94 + Claim(s)</a> must disclose the information in accordance with <a 2.95 + href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 2.96 + 6 of the W3C Patent Policy</a>.</p> 2.97 + 2.98 + <p><strong>Feedback on this draft should be posted to the 2.99 + (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) 2.100 + public mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a></strong> 2.101 + (see <a href="http://www.w3.org/Mail/Request">instructions</a>) <strong>with 2.102 + <kbd>[css3-text-decor]</kbd> in the subject line.</strong> 2.103 + You are strongly encouraged to complain if you see something stupid 2.104 + in this draft. The editors will do their best to respond to all feedback.</p> 2.105 + 2.106 + <p>The following features are at risk and may be cut from the spec during 2.107 + its CR period if there are no (correct) implementations:</p> 2.108 + 2.109 + <p>The following features are at risk and may be cut from the spec during 2.110 + its CR period if there are no (correct) implementations:</p> 2.111 + <ul> 2.112 + <li>the 'text-decoration-skip' property / ''ink'' value 2.113 + </ul> 2.114 + 2.115 +<h2 class="no-num no-toc" id="contents"> 2.116 +Table of Contents</h2> 2.117 + 2.118 +<!--toc--> 2.119 + 2.120 +<h2 id="intro"> 2.121 +Introduction</h2> 2.122 + 2.123 + <p>[document here]</p> 2.124 + 2.125 + <p class="issue">This draft describes features that are specific to certain scripts. 2.126 + There is an ongoing discussion about where these features belong: in 2.127 + existing CSS properties, in new CSS properties, or perhaps in other 2.128 + specifications. 2.129 + 2.130 + 2.131 +<h3 id="placement"> 2.132 +Module Interactions</h3> 2.133 + 2.134 + <p>This module replaces and extends the text-level 2.135 + features defined in [[!CSS21]] chapter 16. 2.136 + 2.137 +<h3 id="values"> 2.138 +Values</h3> 2.139 + 2.140 + <p>This specification follows the 2.141 + <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property 2.142 + definition conventions</a> from [[!CSS21]]. Value types not defined in 2.143 + this specification are defined in CSS Level 2 Revision 1 [[!CSS21]]. 2.144 + Other CSS modules may expand the definitions of these value types: for 2.145 + example [[CSS3COLOR]], when combined with this module, expands the 2.146 + definition of the <color> value type as used in this specification.</p> 2.147 + 2.148 + <p>In addition to the property-specific values listed in their definitions, 2.149 + all properties defined in this specification also accept the 2.150 + <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> 2.151 + keyword as their property value. For readability it has not been repeated 2.152 + explicitly. 2.153 + 2.154 + <p>The <dfn>''currentcolor''</dfn> keyword here computes to itself and is 2.155 + resolved to the value of 'color' after inheritance is performed. This is 2.156 + so that the 'text-emphasis-color' by default matches the text 'color'. 2.157 + <span class="issue">CSS3 Color has not yet been errata'd to define it this way; 2.158 + currentcolor there is defined to compute to the value of 'color', 2.159 + which gives it the wrong inheritance behavior.</span> 2.160 + 2.161 +<h3 id="terms">Terminology</h3> 2.162 + 2.163 + <p>The terms <a href="http://www.w3.org/TR/css3-text/#grapheme-cluster"><dfn>character</dfn></a>, 2.164 + <a href="http://www.w3.org/TR/css3-text/#letter"><dfn>letter</dfn></a>, and 2.165 + <a href="http://www.w3.org/TR/css3-text/#content-language"><dfn>content language</dfn></a> 2.166 + as used in this specification are defined in [[!CSS3TEXT]]. 2.167 + Other terminology and concepts used in this specification are defined 2.168 + in [[!CSS21]] and [[!CSS3-WRITING-MODES]]. 2.169 + 2.170 +<h2 id="line-decoration"> 2.171 +Line Decoration: Underline, Overline, and Strike-Through</h2> 2.172 + 2.173 + <p>The following properties describe line decorations that are added 2.174 + to the content of an element. When specified on or propagated to 2.175 + an inline box, such decoration affects all the boxes generated 2.176 + by that element, and is further propagated to any in-flow block-level 2.177 + boxes that split the inline 2.178 + (see <a href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">CSS2.1 section 9.2.1.1</a>) 2.179 + When specified on or propagated to a ruby box, the decorations are 2.180 + further propagated only to the ruby base. 2.181 + When specified on or propagated to a a block container that establishes 2.182 + an inline formatting context, the decorations are propagated to an 2.183 + anonymous inline element that wraps all the in-flow inline-level children 2.184 + of the block container. For all other elements, the decorations are 2.185 + propagated to any in-flow children. 2.186 + 2.187 + <p class="note">Note that text decorations are not propagated to any 2.188 + out-of-flow descendants, nor to the contents of atomic inline-level 2.189 + descendants such as inline blocks and inline tables. 2.190 + 2.191 + <p>By default underlines, overlines, and line-throughs are applied only 2.192 + to text (including white space, letter spacing, and word spacing): 2.193 + margins, borders, and padding are skipped. Elements containing 2.194 + no text, such as images, are likewise not decorated. 2.195 + The 'text-decoration-skip' 2.196 + property can be used to modify this behavior, for example allowing 2.197 + inline replaced elements to be underlined or requiring that white 2.198 + space be skipped. 2.199 + 2.200 + <p>In determining the position and thickness of text decoration lines, 2.201 + user agents may consider the font sizes and dominant baselines of 2.202 + descendants, but for a given element's decoration must use the same 2.203 + position and thickness throughout each line box. The 2.204 + <a href="#text-decoration-color">color</a> and 2.205 + <a href="#text-decoration-style">line style</a> of decorations must 2.206 + remain the same on all decorations applied by a given element, even 2.207 + if descendant elements have different color or line style values.</p> 2.208 + 2.209 + <div class="example"> 2.210 + <p>The following figure shows the averaging for underline: 2.211 + <p><img alt="In the first rendering of the underlined text '1st a' 2.212 + with 'st' as a superscript, both the '1st' and the 'a' 2.213 + are rendered in a small font. In the second rendering, 2.214 + the 'a' is rendered in a larger font. In the third, both 2.215 + '1st' and 'a' are large." 2.216 + height="105" src="underline-averaging.gif" width="326"> 2.217 + <p>In the three fragments of underlined text, the underline is drawn 2.218 + consecutively lower and thicker as the ratio of large text to small 2.219 + text increases.</p> 2.220 + </div> 2.221 + 2.222 + <p>Relatively positioning a descendant moves all text decorations 2.223 + affecting it along with the descendant's text; it does not affect 2.224 + calculation of the decoration's initial position on that line. 2.225 + The 'visibility' property, filters, and other graphical transformations 2.226 + likewise affect text decorations as part of the text they're drawn on, 2.227 + even if the decorations were specified on an ancestor element. 2.228 + <span class="issue">Does this include 'text-shadow'? What about text-fill etc.?</span> 2.229 + 2.230 + <div class="example"> 2.231 + <p>In the following style sheet and document fragment:</p> 2.232 + <pre><code class="css"> 2.233 +<!-- --> blockquote { text-decoration: underline; color: blue; } 2.234 +<!-- --> em { display: block; } 2.235 +<!-- --> cite { color: fuchsia; } 2.236 +<!----></code></pre> 2.237 + <pre class="html"><code> 2.238 +<!-- --> <blockquote> 2.239 +<!-- --> <p> 2.240 +<!-- --> <span> 2.241 +<!-- --> Help, help! 2.242 +<!-- --> <em> I am under a hat! </em> 2.243 +<!-- --> 2.244 +<!-- --> <cite> —GwieF </cite> 2.245 +<!-- --> </span> 2.246 +<!-- --> </p> 2.247 +<!-- --> </blockquote> 2.248 +<!----></code></pre> 2.249 + <p>...the underlining for the blockquote element is propagated to an 2.250 + anonymous inline element that surrounds the span element, causing 2.251 + the text "Help, help!" to be blue, with the blue underlining from 2.252 + the anonymous inline underneath it, the color being taken from the 2.253 + blockquote element. The <code><em>text</em></code> 2.254 + in the em block is also underlined, as it is in an in-flow block to 2.255 + which the underline is propagated. The final line of text is fuchsia, 2.256 + but the underline underneath it is still the blue underline from the 2.257 + anonymous inline element.</p> 2.258 + <p><img src="underline-example.png" alt="Sample rendering of the above underline example"></p> 2.259 + <p>This diagram shows the boxes involved in the example above. The 2.260 + rounded aqua line represents the anonymous inline element wrapping 2.261 + the inline contents of the paragraph element, the rounded blue line 2.262 + represents the span element, and the orange lines represent the 2.263 + blocks.</p> 2.264 + </div> 2.265 + 2.266 +<h3 id="text-decoration-line-property"> 2.267 +Text Decoration Lines: the 'text-decoration-line' property</h3> 2.268 + 2.269 + <table class="propdef"> 2.270 + <tr> 2.271 + <th>Name: 2.272 + <td><dfn>text-decoration-line</dfn> 2.273 + <tr> 2.274 + <th><a href="#values">Value</a>: 2.275 + <td>none | [ underline || overline || line-through ] 2.276 + 2.277 + <tr> 2.278 + <th>Initial: 2.279 + <td>none 2.280 + <tr> 2.281 + <th>Applies to: 2.282 + <td>all elements 2.283 + <tr> 2.284 + <th>Inherited: 2.285 + <td>no (but see prose) 2.286 + <tr> 2.287 + <th>Percentages: 2.288 + <td>N/A 2.289 + <tr> 2.290 + <th>Media: 2.291 + <td>visual 2.292 + <tr> 2.293 + <th>Computed value: 2.294 + <td>as specified 2.295 + </table> 2.296 + 2.297 + <p>Specifies what line decorations, if any, are added to the element. 2.298 + Values have the following meanings:</p> 2.299 + 2.300 + <dl> 2.301 + <dt><dfn title="text-decoration-line:none">''none''</dfn> 2.302 + <dd>Neither produces nor inhibits text decoration. 2.303 + <dt><dfn>''underline''</dfn> 2.304 + <dd>Each line of text is underlined. 2.305 + <dt><dfn>''overline''</dfn> 2.306 + <dd>Each line of text has a line above it (i.e. on the opposite 2.307 + side from an underline). 2.308 + <dt><dfn>''line-through''</dfn> 2.309 + <dd>Each line of text has a line through the middle. 2.310 + </dl> 2.311 + 2.312 +<h3 id="text-decoration-color-property"> 2.313 +Text Decoration Color: the 'text-decoration-color' property</h3> 2.314 + 2.315 + <table class="propdef"> 2.316 + <tr> 2.317 + <th>Name: 2.318 + <td><dfn>text-decoration-color</dfn> 2.319 + <tr> 2.320 + <th><a href="#values">Value</a>: 2.321 + <td><a href="http://www.w3.org/TR/css3-color/#color0"><span class="value-inst-color"><color></span></a> 2.322 + 2.323 + <tr> 2.324 + <th>Initial: 2.325 + <td><a href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> 2.326 + <tr> 2.327 + <th>Applies to: 2.328 + <td>all elements 2.329 + <tr> 2.330 + <th>Inherited: 2.331 + <td>no 2.332 + <tr> 2.333 + <th>Percentages: 2.334 + <td>N/A 2.335 + <tr> 2.336 + <th>Media: 2.337 + <td>visual 2.338 + <tr> 2.339 + <th>Computed value: 2.340 + <td>the computed color 2.341 + </table> 2.342 + 2.343 + <p>This property specifies the color of text decoration (underlines 2.344 + overlines, and line-throughs) set on the element with 2.345 + 'text-decoration-line'.</p> 2.346 + 2.347 +<h3 id="text-decoration-style-property"> 2.348 +Text Decoration Style: the 'text-decoration-style' property</h3> 2.349 + 2.350 + <table class="propdef"> 2.351 + <tr> 2.352 + <th>Name: 2.353 + <td><dfn>text-decoration-style</dfn> 2.354 + <tr> 2.355 + <th><a href="#values">Value</a>: 2.356 + <td>solid | double | dotted | dashed | wavy 2.357 + 2.358 + <tr> 2.359 + <th>Initial: 2.360 + <td>solid 2.361 + <tr> 2.362 + <th>Applies to: 2.363 + <td>all elements 2.364 + <tr> 2.365 + <th>Inherited: 2.366 + <td>no 2.367 + <tr> 2.368 + <th>Percentages: 2.369 + <td>N/A 2.370 + <tr> 2.371 + <th>Media: 2.372 + <td>visual 2.373 + <tr> 2.374 + <th>Computed value: 2.375 + <td>as specified 2.376 + </table> 2.377 + 2.378 + <p>This property specifies the style of the line(s) drawn for 2.379 + text decoration specified on the element. Values have the 2.380 + same meaning as for the 2.381 + <a href="http://www.w3.org/TR/css3-background/#the-border-style">border-style 2.382 + properties</a> [[!CSS3BG]]. ''wavy'' indicates a wavy line.</p> 2.383 + 2.384 +<h3 id="text-decoration-property"> 2.385 +Text Decoration Shorthand: the 'text-decoration' property</h3> 2.386 + 2.387 + <table class="propdef"> 2.388 + <tr> 2.389 + <th>Name: 2.390 + <td><dfn>text-decoration</dfn> 2.391 + <tr> 2.392 + <th><a href="#values">Value</a>: 2.393 + <td><var><a href="#text-decoration-line"><text-decoration-line></a></var> || 2.394 + <var><a href="#text-decoration-style"><text-decoration-style></a></var> || 2.395 + <var><a href="#text-decoration-color"><text-decoration-color></a></var> || blink 2.396 + 2.397 + <tr> 2.398 + <th>Initial: 2.399 + <td>none 2.400 + <tr> 2.401 + <th>Applies to: 2.402 + <td>all elements 2.403 + <tr> 2.404 + <th>Inherited: 2.405 + <td>no 2.406 + <tr> 2.407 + <th>Percentages: 2.408 + <td>N/A 2.409 + <tr> 2.410 + <th>Media: 2.411 + <td>visual 2.412 + <tr> 2.413 + <th>Computed value: 2.414 + <td>as specified 2.415 + </table> 2.416 + 2.417 + <p>This property is a shorthand for setting 'text-decoration-line', 2.418 + 'text-decoration-color', and 'text-decoration-style' in one declaration. 2.419 + Omitted values are set to their initial values. A 'text-decoration' 2.420 + declaration that omits both the 'text-decoration-color' 2.421 + and 'text-decoration-style' values is backwards-compatible 2.422 + with CSS Levels 1 and 2.</p> 2.423 + 2.424 + <p>If the ''blink'' keyword is specified the text blinks 2.425 + (alternates between visible and invisible). Conforming user agents 2.426 + may simply not blink the text. Note that not blinking the text is 2.427 + one technique to satisfy 2.428 + <a href="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">checkpoint 3.3 of WAI-UAAG</a>.</p> 2.429 + 2.430 + <div class="example"> 2.431 + <p>The following example underlines unvisited links with a solid blue 2.432 + underline in CSS1 and CSS2 UAs and a navy dotted underline in CSS3 UAs.</p> 2.433 + 2.434 + <pre><code class="css"> 2.435 +<!-- -->:link { 2.436 +<!-- --> color: blue; 2.437 +<!-- --> text-decoration: underline; 2.438 +<!-- --> text-decoration: navy dotted underline; /* <a href="http://www.w3.org/TR/CSS21/syndata.html#ignore">Ignored</a> in CSS1/CSS2 UAs */ 2.439 +<!-- -->}</code></pre> 2.440 + </div> 2.441 + 2.442 +<h3 id="text-decoration-skip-property"> 2.443 +Text Decoration Line Continuity: the 'text-decoration-skip' property</h3> 2.444 + 2.445 + <table class="propdef"> 2.446 + <tr> 2.447 + <th>Name: 2.448 + <td><dfn>text-decoration-skip</dfn> 2.449 + <tr> 2.450 + <th><a href="#values">Value</a>: 2.451 + <td>none | [ objects || spaces || ink || edges ] 2.452 + 2.453 + <tr> 2.454 + <th>Initial: 2.455 + <td>objects 2.456 + <tr> 2.457 + <th>Applies to: 2.458 + <td>all elements 2.459 + <tr> 2.460 + <th>Inherited: 2.461 + <td>yes 2.462 + <tr> 2.463 + <th>Percentages: 2.464 + <td>N/A 2.465 + <tr> 2.466 + <th>Media: 2.467 + <td>visual 2.468 + <tr> 2.469 + <th>Computed value: 2.470 + <td>as specified 2.471 + </table> 2.472 + 2.473 + <p>This property specifies what parts of the element's content 2.474 + any text decoration affecting the element must skip over. It 2.475 + controls all text decoration lines drawn by the element 2.476 + and also any text decoration lines drawn by its ancestors. 2.477 + Values have the following meanings:</p> 2.478 + 2.479 + <dl> 2.480 + <dt><dfn title="text-decoration-skip:none">''none''</dfn></dt> 2.481 + <dd>Skip nothing: text-decoration is drawn for all text content 2.482 + and for inline replaced elements.</dd> 2.483 + <dt><dfn title="text-decoration-skip:objects">''objects''</dfn></dt> 2.484 + <dd>Skip this element if it is an atomic inline (such as an 2.485 + image or inline-block).</dd> 2.486 + <dt><dfn title="text-decoration-skip:spaces">''spaces''</dfn></dt> 2.487 + <dd>Skip white space: this includes regular spaces (U+0020) and 2.488 + tabs (U+0009), as well as nbsp (U+00A0), ideographic space 2.489 + (U+3000), all fixed width spaces (such as U+2000–U+200A, 2.490 + U+202F and U+205F), and any adjacent letter-spacing or 2.491 + word-spacing.</dd> 2.492 + <dt><dfn title="text-decoration-skip:ink">''ink''</dfn></dt> 2.493 + <dd>Skip over where glyphs are drawn: interrupt the decoration 2.494 + line to let text show through where the text decoration would 2.495 + otherwise cross over a glyph. The UA may also skip a small 2.496 + distance to either side of the glyph outline.</dd> 2.497 + <dt><dfn title="text-decoration-skip:edges">''edges''</dfn></dt> 2.498 + <dd>The UA should place the start and end of the line inwards from 2.499 + the content edge of the decorating element so that, e.g. two 2.500 + underlined elements side-by-side do not appear to have a single 2.501 + underline. (This is important in Chinese, where underlining is a 2.502 + form of punctuation.)</dd> 2.503 + </dl> 2.504 + 2.505 + <p class="issue">Do we need a value that <em>doesn't</em> skip 2.506 + margins and padding?</p> 2.507 + 2.508 + <p class="note">Note that this property inherits and that descendant 2.509 + elements can have a different setting.</p> 2.510 + 2.511 +<h4 id="text-underline-position-property"> 2.512 +Text Underline Position: the 'text-underline-position' property</h4> 2.513 + 2.514 + <table class="propdef"> 2.515 + <tr> 2.516 + <th>Name: 2.517 + <td><dfn>text-underline-position</dfn> 2.518 + <tr> 2.519 + <th><a href="#values">Value</a>: 2.520 + <td>auto | alphabetic | [ below || [ left | right ] ] 2.521 + 2.522 + <tr> 2.523 + <th>Initial: 2.524 + <td>auto 2.525 + <tr> 2.526 + <th>Applies to: 2.527 + <td>all elements 2.528 + <tr> 2.529 + <th>Inherited: 2.530 + <td>yes 2.531 + <tr> 2.532 + <th>Percentages: 2.533 + <td>N/A 2.534 + <tr> 2.535 + <th>Media: 2.536 + <td>visual 2.537 + <tr> 2.538 + <th>Computed value: 2.539 + <td>as specified 2.540 + </table> 2.541 + 2.542 + <p>This property sets the position of an underline specified 2.543 + on the same element: it does not affect underlines specified by 2.544 + ancestor elements. Values have the following meanings:</p> 2.545 + 2.546 + <dl> 2.547 + <dt><dfn>''auto''</dfn></dt> 2.548 + <dd>The user agent may use any algorithm to determine the 2.549 + underline's position; however it must be placed at or below 2.550 + the alphabetic baseline. 2.551 + <p class="note">It is suggested that the underline position 2.552 + be ''alphabetic'' unless it crosses either subscripted (or 2.553 + otherwise lowered) text, or it affects characters from Asian 2.554 + scripts such as Han or Tibetan, for which an alphabetic 2.555 + underline is too high: in such cases, aligning to the em box 2.556 + edge as described for ''below left'' is more appropriate. 2.557 + <dt><dfn>''alphabetic''</dfn></dt> 2.558 + <dd>The underline is positioned relative to the alphabetic baseline. In 2.559 + this case the underline is likely to cross some descenders. 2.560 + <div class="figure"> 2.561 + <p><img title="text-underline-position: alphabetic" 2.562 + alt="In a typical Latin font, the underline is positioned slightly 2.563 + below the alphabetic baseline, leaving a gap between the line 2.564 + and the bottom of most Latin letters, but crossing through 2.565 + descenders such as the stem of a 'p'." 2.566 + src="underline-position-alphabetic.png" 2.567 + > 2.568 + <p class="caption">''text-underline-position: alphabetic''</p> 2.569 + </div> 2.570 + <dt><dfn>''below''</dfn></dt> 2.571 + <dd>In horizontal writing modes, the underline is positioned 2.572 + relative to the under edge of the element's content box. 2.573 + In this case the underline usually does not cross the descenders. 2.574 + (This is sometimes called "accounting" underline.) 2.575 + If the underline affects descendants with a lower content edge, 2.576 + the user agent should shift the underline down further to the 2.577 + lowest underlined content box edge. 2.578 + The user agent may ignore elements with ''vertical-align'' 2.579 + values given as lengths, percentages, ''top'', or ''bottom'' 2.580 + when making this adjustment. 2.581 + (Note that images that are not affected by the underline per 2.582 + 'text-decoration-skip' will not affect the position of the 2.583 + underline.) 2.584 + <div class="figure"> 2.585 + <p><img title="text-underline-position: below" 2.586 + alt="In a typical Latin font, the underline is far enough 2.587 + below the text that it does not cross the bottom of a 'g'." 2.588 + src="underline-position-below.png" 2.589 + > 2.590 + <p class="caption">''text-underline-position: below''</p> 2.591 + </div> 2.592 + <div class="example"> 2.593 + <p>Because 'text-underline-position' inherits, and is not reset 2.594 + by the 'text-decoration' shorthand, the following example 2.595 + switches the document to use ''below'' underlining, which can 2.596 + be more appropriate for writing systems with long, complicated 2.597 + descenders. It is also often useful for mathematical or chemical 2.598 + texts that use many subscripts. 2.599 + <pre>:root { text-underline-position: below; }</pre> 2.600 + </div> 2.601 + <dt><dfn>''left''</dfn></dt> 2.602 + <dd>In vertical writing modes, the underline is aligned as for 2.603 + ''below'', on the left edge of the text.</dd> 2.604 + <dt><dfn>''right''</dfn></dt> 2.605 + <dd>In vertical writing modes, the underline is aligned as for 2.606 + ''below'', except it is aligned to the right edge of the text. 2.607 + If this causes the underline to be drawn on the "over" side of 2.608 + the text, then an overline also switches sides and is drawn on 2.609 + the "under" side.</dd> 2.610 + </dl> 2.611 + 2.612 + <p>If ''below'' is specified alone, ''left'' is also implied. 2.613 + If ''left'' or ''right'' is specified alone, ''below'' is also 2.614 + implied. 2.615 + 2.616 + <p class="issue"> 2.617 + Should ''above''/''below'' be ''over''/''under'' to match text decoration names? 2.618 + 2.619 + <div class="figure" id="fig-text-underline-position"> 2.620 + <table> 2.621 + <tr> 2.622 + <td> 2.623 + <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left' 2.624 + places the underline on the left side of the text." 2.625 + title="text-underline-position: left" 2.626 + src="underline-position-left.png" 2.627 + > 2.628 + 2.629 + <td> 2.630 + <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right' 2.631 + places the underline on the right side of the text." 2.632 + title="text-underline-position: right" 2.633 + src="underline-position-right.png" 2.634 + > 2.635 + 2.636 + <tr> 2.637 + <td>''left'' 2.638 + <td>''right'' 2.639 + </table> 2.640 + <p class="caption">In vertical writing modes, the 'text-underline-position' 2.641 + values ''left'' and ''right'' allow placing the underline on either 2.642 + side of the text. (In horizontal writing modes, both values are 2.643 + treated as ''below''.)</p> 2.644 + </div> 2.645 + 2.646 + <div class="example"> 2.647 + <p>The following example styles modern Chinese, Japanese, and Korean 2.648 + texts with the appropriate underline positions in both horizontal 2.649 + and vertical text: 2.650 + <pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: below right; } 2.651 +<!-- -->:root:lang(zh), [lang|=zh] { text-underline-position: below left; }</pre> 2.652 + </div> 2.653 + 2.654 + <div class="note"> 2.655 + <p>In some cases (such as in OpenType) the font format can offer 2.656 + information about the appropriate position of an underline. 2.657 + Typically this information gives the position of an ''alphabetic'' 2.658 + underline; in some cases (especially in CJK fonts), it gives 2.659 + the position of a ''below left'' underline. (In this case, 2.660 + the font's underline metrics typically touch the bottom edge 2.661 + of the em box). 2.662 + The UA is encouraged to use information (such as the underline 2.663 + thickness, or appropriate alphabetic alignment) from the font 2.664 + wherever appropriate. 2.665 + </p> 2.666 + </div> 2.667 + 2.668 +<h3 id="emphasis-marks"> 2.669 +Emphasis Marks</h3> 2.670 + 2.671 + <p>East Asian documents traditionally use small symbols next to each glyph to emphasize 2.672 + a run of text. For example:</p> 2.673 + 2.674 + <div class="figure"> 2.675 + <p> 2.676 + <img alt="Example of emphasis in Japanese appearing above the text" 2.677 + class="example" src="text-emphasis-ja.gif" height="28" width="225"></p> 2.678 + <p class="caption">Accent emphasis (shown in blue for clarity) applied to Japanese text</p> 2.679 + </div> 2.680 + 2.681 +<h4 id="text-emphasis-style-property"> 2.682 +Emphasis Mark Style: the 'text-emphasis-style' property</h4> 2.683 + 2.684 + <table class="propdef"> 2.685 + <tr> 2.686 + <th>Name: 2.687 + <td><dfn>text-emphasis-style</dfn> 2.688 + <tr> 2.689 + <th><a href="#values">Value</a>: 2.690 + <td>none | 2.691 + [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | 2.692 + <a class="noxref" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string"><span class="value-inst-string"><string></span></a> 2.693 + 2.694 + <tr> 2.695 + <th>Initial: 2.696 + <td>none 2.697 + <tr> 2.698 + <th>Applies to: 2.699 + <td>all elements 2.700 + <tr> 2.701 + <th>Inherited: 2.702 + <td>yes 2.703 + <tr> 2.704 + <th>Percentages: 2.705 + <td>N/A 2.706 + <tr> 2.707 + <th>Media: 2.708 + <td>visual 2.709 + <tr> 2.710 + <th>Computed value: 2.711 + <td>'none', a pair of keywords representing the shape and fill, or 2.712 + a string 2.713 + </table> 2.714 + 2.715 + <p>This property applies emphasis marks to the element's text. 2.716 + Values have the following meanings:</p> 2.717 + 2.718 + <dl> 2.719 + <dt><dfn title="text-emphasis:none">''none''</dfn></dt> 2.720 + <dd>No emphasis marks.</dd> 2.721 + <dt><dfn title="text-emphasis:filled">''filled''</dfn></dt> 2.722 + <dd>The shape is filled with solid color.</dd> 2.723 + <dt><dfn title="text-emphasis:open">''open''</dfn></dt> 2.724 + <dd>The shape is hollow.</dd> 2.725 + <dt><dfn title="text-emphasis:dot">''dot''</dfn></dt> 2.726 + <dd>Display small circles as marks. 2.727 + The filled dot is U+2022 '•', and the open dot is U+25E6 '◦'.</dd> 2.728 + <dt><dfn title="text-emphasis:circle">''circle''</dfn></dt> 2.729 + <dd>Display large circles as marks. 2.730 + The filled circle is U+25CF '●', and the open circle is U+25CB '○'.</dd> 2.731 + <dt><dfn title="text-emphasis:double-circle">''double-circle''</dfn></dt> 2.732 + <dd>Display double circles as marks. 2.733 + The filled double-circle is U+25C9 '◉', and the open double-circle is U+25CE '◎'.</dd> 2.734 + <dt><dfn title="text-emphasis:triangle">''triangle''</dfn></dt> 2.735 + <dd>Display triangles as marks. 2.736 + The filled triangle is U+25B2 '▲', and the open triangle is U+25B3 '△'.</dd> 2.737 + <dt><dfn title="text-emphasis:sesame">''sesame''</dfn></dt> 2.738 + <dd>Display sesames as marks. 2.739 + The filled sesame is U+FE45 '﹅', and the open sesame is U+FE46 '﹆'.</dd> 2.740 + <dt><dfn title="text-emphasis:sesame">''<var><string></var>''</dfn></dt> 2.741 + <dd>Display the given string as marks. 2.742 + Authors should not specify more than one <i>character</i> in <string>. 2.743 + The UA may truncate or ignore strings consisting of more than one grapheme cluster.</dd> 2.744 + </dl> 2.745 + 2.746 + <p>If a shape keyword is specified but neither of ''filled'' nor ''open'' is 2.747 + specified, ''filled'' is assumed. If only ''filled'' or ''open'' is specified, 2.748 + the shape keyword computes to ''circle'' in horizontal writing mode and 2.749 + ''sesame'' in vertical writing mode.</p> 2.750 + 2.751 + <p>The marks should be drawn using the element's font settings with its 2.752 + size scaled down to 50%. However, not all fonts have all these glyphs, 2.753 + and some fonts use inappropriate sizes for emphasis marks in these 2.754 + code points. The UA may opt to use a font known to be good for 2.755 + emphasis marks, or the marks may instead be synthesized by the UA. 2.756 + Marks must remain upright in vertical writing modes: like CJK 2.757 + characters, they do not rotate to match the writing mode.</p> 2.758 + 2.759 + <p class="note"> 2.760 + One example of good fonts for emphasis marks is Adobe's opensource project, 2.761 + <a href="http://sourceforge.net/adobe/kenten-generic/">Kenten Generic OpenType Font</a>, 2.762 + which is specially designed for the emphasis marks. 2.763 + </p> 2.764 + 2.765 + <p>The marks are drawn once for each <i>character</i>. However, 2.766 + emphasis marks are not drawn for characters that are:</p> 2.767 + <ul> 2.768 + <li><a href="http://www.w3.org/TR/css3-text/#word-separator">Word separators</a> or that 2.769 + belong to the Unicode separator classes (Z*). 2.770 + (But note that emphasis marks <em>are</em> drawn for a space 2.771 + that combines with any combining characters.)</li> 2.772 + <li>Characters belonging to the Unicode classes for control codes 2.773 + and unassigned characters (Cc, Cf, Cn).</li> 2.774 + </ul> 2.775 + 2.776 + <p>If emphasis marks are drawn for characters 2.777 + for which ruby is drawn in the same position as the emphasis mark, 2.778 + the ruby should be stacked between the emphasis marks and the base text. 2.779 + In this case, the position of the emphasis marks for a given element 2.780 + should be determined as if all characters have ruby boxes 2.781 + of the same height as the highest ruby box in the element. 2.782 + If the UA is not capable of drawing ruby and emphasis marks on the same side, 2.783 + the UA may hide ruby and draw only emphasis marks.</p> 2.784 + <div class="figure"> 2.785 + <p><img 2.786 + alt="Example of emphasis marks applied to 4 characters, and ruby to 2 of them" 2.787 + src="text-emphasis-ruby.png" width="134" height="50"></p> 2.788 + <p class="caption">Emphasis marks applied to 4 characters, and ruby to 2 of them</p> 2.789 + </div> 2.790 + 2.791 + <p class="note">A future level of CSS may define controls to specify 2.792 + what to do when emphasis marks and ruby text coincide.</p> 2.793 + 2.794 +<h4 id="text-emphasis-color-property"> 2.795 +Emphasis Mark Color: the 'text-emphasis-color' property</h4> 2.796 + 2.797 + <table class="propdef"> 2.798 + <tr> 2.799 + <th>Name: 2.800 + <td><dfn>text-emphasis-color</dfn> 2.801 + <tr> 2.802 + <th><a href="#values">Value</a>: 2.803 + <td><color> 2.804 + <tr> 2.805 + <th>Initial: 2.806 + <td><a href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> 2.807 + <tr> 2.808 + <th>Applies to: 2.809 + <td>all elements 2.810 + <tr> 2.811 + <th>Inherited: 2.812 + <td>yes 2.813 + <tr> 2.814 + <th>Percentages: 2.815 + <td>N/A 2.816 + <tr> 2.817 + <th>Media: 2.818 + <td>visual 2.819 + <tr> 2.820 + <th>Computed value: 2.821 + <td>as specified 2.822 + </table> 2.823 + 2.824 + <p>This property specifies the foreground color of the emphasis marks.</p> 2.825 + 2.826 + <p class="note"> 2.827 + The correct behavior of this property depends on an outstanding erratum on [[CSS3COLOR]] 2.828 + that has the ''currentColor'' keyword inherit as itself, 2.829 + and to take the value of the 'color' property as its <em>used</em> (not computed) value. 2.830 + 2.831 +<h4 id="text-emphasis-property"> 2.832 +Emphasis Mark Shorthand: the 'text-emphasis' property</h4> 2.833 + 2.834 + <table class="propdef"> 2.835 + <tr> 2.836 + <th>Name: 2.837 + <td><dfn>text-emphasis</dfn> 2.838 + <tr> 2.839 + <th><a href="#values">Value</a>: 2.840 + <td>'<<a href="#text-emphasis-style">text-emphasis-style</a>>' || '<<a href="#text-emphasis-color">text-emphasis-color</a>>' 2.841 + 2.842 + <tr> 2.843 + <th>Initial: 2.844 + <td>see individual properties 2.845 + <tr> 2.846 + <th>Applies to: 2.847 + <td>all elements 2.848 + <tr> 2.849 + <th>Inherited: 2.850 + <td>yes 2.851 + <tr> 2.852 + <th>Percentages: 2.853 + <td>N/A 2.854 + <tr> 2.855 + <th>Media: 2.856 + <td>visual 2.857 + <tr> 2.858 + <th>Computed value: 2.859 + <td>see individual properties 2.860 + </table> 2.861 + 2.862 + <p>This property is a shorthand for setting 2.863 + 'text-emphasis-style' and 'text-emphasis-color' 2.864 + in one declaration. 2.865 + Omitted values are set to their initial values.</p> 2.866 + 2.867 + <p class="note">Note that 'text-emphasis-position' is not reset in this 2.868 + shorthand. This is because typically the shape and color vary, but the 2.869 + position is consistent for a particular language throughout the document. 2.870 + Therefore the position should inherit independently.</p> 2.871 + 2.872 +<h4 id="text-emphasis-position-property"> 2.873 +Emphasis Mark Position: the 'text-emphasis-position' property</h4> 2.874 + 2.875 + <table class="propdef"> 2.876 + <tr> 2.877 + <th>Name: 2.878 + <td><dfn>text-emphasis-position</dfn> 2.879 + <tr> 2.880 + <th><a href="#values">Value</a>: 2.881 + <td>[ above | below ] && [ right | left ] 2.882 + 2.883 + <tr> 2.884 + <th>Initial: 2.885 + <td>above right 2.886 + <tr> 2.887 + <th>Applies to: 2.888 + <td>all elements 2.889 + <tr> 2.890 + <th>Inherited: 2.891 + <td>yes 2.892 + <tr> 2.893 + <th>Percentages: 2.894 + <td>N/A 2.895 + <tr> 2.896 + <th>Media: 2.897 + <td>visual 2.898 + <tr> 2.899 + <th>Computed value: 2.900 + <td>as specified 2.901 + </table> 2.902 + 2.903 + <p>This property describes where emphasis marks are drawn at. 2.904 + The values have following meanings:</p> 2.905 + 2.906 + <dl> 2.907 + <dt><dfn title="text-emphasis:above">''above''</dfn></dt> 2.908 + <dd>Draw marks over the text in horizontal writing mode.</dd> 2.909 + <dt><dfn title="text-emphasis:below">''below''</dfn></dt> 2.910 + <dd>Draw marks under the text in horizontal writing mode.</dd> 2.911 + <dt><dfn title="text-emphasis:right">''right''</dfn></dt> 2.912 + <dd>Draw marks to the right of the text in vertical writing mode.</dd> 2.913 + <dt><dfn title="text-emphasis:left">''left''</dfn></dt> 2.914 + <dd>Draw marks to the left of the text in vertical writing mode.</dd> 2.915 + </dl> 2.916 + 2.917 + <p class="issue"> 2.918 + Should ''above''/''below'' be ''over''/''under'' to match text decoration names? 2.919 + 2.920 + <p>Emphasis marks are drawn exactly as if each character was 2.921 + assigned the mark as its ruby annotation text with the ruby position 2.922 + given by 'text-emphasis-position' and the ruby alignment as centered. 2.923 + 2.924 + <p>The effect of emphasis marks on the line height is the same as for 2.925 + ruby text.</p> 2.926 + 2.927 + <div class="note"> 2.928 + <p>Note, the preferred position of emphasis marks depends on the 2.929 + language. In Japanese for example, the preferred position is 2.930 + ''above right''. In Chinese, on the other hand, the preferred 2.931 + position is ''below right''. 2.932 + The informative table below summarizes the preferred 2.933 + emphasis mark positions for Chinese and Japanese:</p> 2.934 + 2.935 + <table class="data"> 2.936 + <caption>Preferred emphasis mark and ruby position</caption> 2.937 + <thead> 2.938 + <tr> 2.939 + <th scope="col" rowspan=2>Language 2.940 + <th scope="col" colspan=2>Preferred mark position 2.941 + <th scope="col" colspan=2 rowspan=2>Illustration 2.942 + <tr> 2.943 + <th>Horizontal 2.944 + <th>Vertical 2.945 + </thead> 2.946 + <tbody> 2.947 + <tr> 2.948 + <td scope="row">Japanese 2.949 + <td>above 2.950 + <td>right 2.951 + <td> 2.952 + <img alt="Emphasis marks appear above each emphasized character in horizontal Japanese text." 2.953 + title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text" 2.954 + src="text-emphasis-ja.gif" height="28" width="225"> 2.955 + 2.956 + <td rowspan="2"> 2.957 + <img alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text." 2.958 + title="Emphasis applied on the right of a fragment of Japanese text" 2.959 + src="text-emphasis-v.gif" height="89" width="34"> 2.960 + 2.961 + <!-- 2.962 + <tr> 2.963 + <td scope="row">Mongolian 2.964 + <td><span class="issue">?</span> 2.965 + <td>right 2.966 + --> 2.967 + <tr> 2.968 + <td scope="row">Chinese 2.969 + <td>below 2.970 + <td>right 2.971 + <td> 2.972 + <img alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text." 2.973 + title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text" 2.974 + src="text-emphasis-zh.gif" height="28" width="133"> 2.975 + </tbody> 2.976 + </table> 2.977 + </div> 2.978 + 2.979 +<h3 id="text-shadow-property"> 2.980 +Text Shadows: the 'text-shadow' property</h3> 2.981 + 2.982 + <table class="propdef"> 2.983 + <tr> 2.984 + <th>Name: 2.985 + <td><dfn>text-shadow</dfn> 2.986 + <tr> 2.987 + <th><a href="#values">Value</a>: 2.988 + <td>none | [ <length>{2,3} && <color>? ]# 2.989 + <tr> 2.990 + <th>Initial: 2.991 + <td>none 2.992 + <tr> 2.993 + <th>Applies to: 2.994 + <td>all elements 2.995 + <tr> 2.996 + <th>Inherited: 2.997 + <td>yes 2.998 + <tr> 2.999 + <th>Percentages: 2.1000 + <td>N/A 2.1001 + <tr> 2.1002 + <th>Media: 2.1003 + <td>visual 2.1004 + <tr> 2.1005 + <th>Computed value: 2.1006 + <td>a color plus three absolute <length>s 2.1007 + </table> 2.1008 + 2.1009 + <p>This property accepts a comma-separated list of shadow effects to 2.1010 + be applied to the text of the element. Values are interpreted as for 2.1011 + <a href="http://www.w3.org/TR/css3-background/#the-box-shadow">'box-shadow'</a> 2.1012 + [[!CSS3BG]]. (But note that spread values are not allowed.) 2.1013 + The shadow is applied to all of the element's text as well as any 2.1014 + text decorations it specifies. 2.1015 + 2.1016 + <p>The shadow effects are applied front-to-back: the first shadow is on 2.1017 + top. The shadows may thus overlay each other, but they never overlay 2.1018 + the text itself. The shadow must be painted at a stack level between 2.1019 + the element's border and/or background, if present, and the elements 2.1020 + text and text decoration. UAs should avoid painting text shadows over 2.1021 + text in adjacent elements belonging to the same stack level and stacking 2.1022 + context. (This may mean that the exact stack level of the shadows depends 2.1023 + on whether the element has a border or background: the exact stacking 2.1024 + behavior of text shadows is thus UA-defined.)</p> 2.1025 + 2.1026 + <p>Unlike 'box-shadow', text shadows are not clipped to the shadowed 2.1027 + shape and may show through if the text is partially-transparent. 2.1028 + Like 'box-shadow', text shadows do not influence layout, and do not 2.1029 + trigger scrolling or increase the size of the scrollable area. 2.1030 + 2.1031 + <p class="note">The painting order of shadows defined here is the opposite 2.1032 + of that defined in the 1998 2.1033 + <a href="http://www.w3.org/TR/1998/REC-CSS2-19980512">CSS2 Recommendation</a>.</p> 2.1034 + 2.1035 + <p>The ''text-shadow'' property applies to both the 2.1036 + <code>::first-line</code> and <code>::first-letter</code> 2.1037 + pseudo-elements.</p> 2.1038 + 2.1039 +<h2 id="conformance"> 2.1040 +Conformance</h2> 2.1041 + 2.1042 +<h3 id="conventions"> 2.1043 +Document Conventions</h3> 2.1044 + 2.1045 + <p>Conformance requirements are expressed with a combination of 2.1046 + descriptive assertions and RFC 2119 terminology. The key words “MUST”, 2.1047 + “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, 2.1048 + “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this 2.1049 + document are to be interpreted as described in RFC 2119. 2.1050 + However, for readability, these words do not appear in all uppercase 2.1051 + letters in this specification. 2.1052 + 2.1053 + <p>All of the text of this specification is normative except sections 2.1054 + explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p> 2.1055 + 2.1056 + <p>Examples in this specification are introduced with the words “for example” 2.1057 + or are set apart from the normative text with <code>class="example"</code>, 2.1058 + like this: 2.1059 + 2.1060 + <div class="example"> 2.1061 + <p>This is an example of an informative example.</p> 2.1062 + </div> 2.1063 + 2.1064 + <p>Informative notes begin with the word “Note” and are set apart from the 2.1065 + normative text with <code>class="note"</code>, like this: 2.1066 + 2.1067 + <p class="note">Note, this is an informative note.</p> 2.1068 + 2.1069 +<h3 id="conformance-classes"> 2.1070 +Conformance Classes</h3> 2.1071 + 2.1072 + <p>Conformance to CSS Text Level 3 2.1073 + is defined for three conformance classes: 2.1074 + <dl> 2.1075 + <dt><dfn title="style sheet!!as conformance class">style sheet</dfn> 2.1076 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 2.1077 + style sheet</a>. 2.1078 + <dt><dfn>renderer</dfn></dt> 2.1079 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 2.1080 + that interprets the semantics of a style sheet and renders 2.1081 + documents that use them. 2.1082 + <dt><dfn id="authoring-tool">authoring tool</dfn></dt> 2.1083 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 2.1084 + that writes a style sheet. 2.1085 + </dl> 2.1086 + 2.1087 + <p>A style sheet is conformant to CSS Text Level 3 2.1088 + if all of its declarations that use properties defined in this module 2.1089 + have values that are valid according to the generic CSS grammar and the 2.1090 + individual grammars of each property as given in this module. 2.1091 + 2.1092 + <p>A renderer is conformant to CSS Text Level 3 2.1093 + if, in addition to interpreting the style sheet as defined by the 2.1094 + appropriate specifications, it supports all the features defined 2.1095 + by CSS Text Level 3 by parsing them correctly 2.1096 + and rendering the document accordingly. However, the inability of a 2.1097 + UA to correctly render a document due to limitations of the device 2.1098 + does not make the UA non-conformant. (For example, a UA is not 2.1099 + required to render color on a monochrome monitor.) 2.1100 + 2.1101 + <p>An authoring tool is conformant to CSS Text Level 3 2.1102 + if it writes style sheets that are syntactically correct according to the 2.1103 + generic CSS grammar and the individual grammars of each feature in 2.1104 + this module, and meet all other conformance requirements of style sheets 2.1105 + as described in this module. 2.1106 + 2.1107 +<h3 id="partial"> 2.1108 +Partial Implementations</h3> 2.1109 + 2.1110 + <p>So that authors can exploit the forward-compatible parsing rules to 2.1111 + assign fallback values, CSS renderers <strong>must</strong> 2.1112 + treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore 2.1113 + as appropriate</a>) any at-rules, properties, property values, keywords, 2.1114 + and other syntactic constructs for which they have no usable level of 2.1115 + support. In particular, user agents <strong>must not</strong> selectively 2.1116 + ignore unsupported component values and honor supported values in a single 2.1117 + multi-value property declaration: if any value is considered invalid 2.1118 + (as unsupported values must be), CSS requires that the entire declaration 2.1119 + be ignored.</p> 2.1120 + 2.1121 +<h3 id="experimental"> 2.1122 +Experimental Implementations</h3> 2.1123 + 2.1124 + <p>To avoid clashes with future CSS features, the CSS2.1 specification 2.1125 + reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 2.1126 + syntax</a> for proprietary and experimental extensions to CSS. 2.1127 + 2.1128 + <p>Prior to a specification reaching the Candidate Recommendation stage 2.1129 + in the W3C process, all implementations of a CSS feature are considered 2.1130 + experimental. The CSS Working Group recommends that implementations 2.1131 + use a vendor-prefixed syntax for such features, including those in 2.1132 + W3C Working Drafts. This avoids incompatibilities with future changes 2.1133 + in the draft. 2.1134 + </p> 2.1135 + 2.1136 +<h3 id="testing">Non-Experimental Implementations</h3> 2.1137 + 2.1138 + <p>Once a specification reaches the Candidate Recommendation stage, 2.1139 + non-experimental implementations are possible, and implementors should 2.1140 + release an unprefixed implementation of any CR-level feature they 2.1141 + can demonstrate to be correctly implemented according to spec. 2.1142 + 2.1143 + <p>To establish and maintain the interoperability of CSS across 2.1144 + implementations, the CSS Working Group requests that non-experimental 2.1145 + CSS renderers submit an implementation report (and, if necessary, the 2.1146 + testcases used for that implementation report) to the W3C before 2.1147 + releasing an unprefixed implementation of any CSS features. Testcases 2.1148 + submitted to W3C are subject to review and correction by the CSS 2.1149 + Working Group. 2.1150 + 2.1151 + <p>Further information on submitting testcases and implementation reports 2.1152 + can be found from on the CSS Working Group's website at 2.1153 + <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 2.1154 + Questions should be directed to the 2.1155 + <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> 2.1156 + mailing list. 2.1157 + 2.1158 +<h3 id="cr-exit-criteria"> 2.1159 +CR Exit Criteria</h3> 2.1160 + 2.1161 + <p> 2.1162 + For this specification to be advanced to Proposed Recommendation, 2.1163 + there must be at least two independent, interoperable implementations 2.1164 + of each feature. Each feature may be implemented by a different set of 2.1165 + products, there is no requirement that all features be implemented by 2.1166 + a single product. For the purposes of this criterion, we define the 2.1167 + following terms: 2.1168 + 2.1169 + <dl> 2.1170 + <dt>independent <dd>each implementation must be developed by a 2.1171 + different party and cannot share, reuse, or derive from code 2.1172 + used by another qualifying implementation. Sections of code that 2.1173 + have no bearing on the implementation of this specification are 2.1174 + exempt from this requirement. 2.1175 + 2.1176 + <dt>interoperable <dd>passing the respective test case(s) in the 2.1177 + official CSS test suite, or, if the implementation is not a Web 2.1178 + browser, an equivalent test. Every relevant test in the test 2.1179 + suite should have an equivalent test created if such a user 2.1180 + agent (UA) is to be used to claim interoperability. In addition 2.1181 + if such a UA is to be used to claim interoperability, then there 2.1182 + must one or more additional UAs which can also pass those 2.1183 + equivalent tests in the same way for the purpose of 2.1184 + interoperability. The equivalent tests must be made publicly 2.1185 + available for the purposes of peer review. 2.1186 + 2.1187 + <dt>implementation <dd>a user agent which: 2.1188 + 2.1189 + <ol class=inline> 2.1190 + <li>implements the specification. 2.1191 + 2.1192 + <li>is available to the general public. The implementation may 2.1193 + be a shipping product or other publicly available version 2.1194 + (i.e., beta version, preview release, or “nightly build”). 2.1195 + Non-shipping product releases must have implemented the 2.1196 + feature(s) for a period of at least one month in order to 2.1197 + demonstrate stability. 2.1198 + 2.1199 + <li>is not experimental (i.e., a version specifically designed 2.1200 + to pass the test suite and is not intended for normal usage 2.1201 + going forward). 2.1202 + </ol> 2.1203 + </dl> 2.1204 + 2.1205 + <p>The specification will remain Candidate Recommendation for at least 2.1206 + six months. 2.1207 + 2.1208 +<h2 class="no-num" id="acknowledgements"> 2.1209 + Appendix A: Acknowledgements</h2> 2.1210 + 2.1211 + <p>This specification would not have been possible without the help from: 2.1212 + Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett, 2.1213 + Martin Dürst, 2.1214 + Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye Gittelman, Ian 2.1215 + Hickson, Martin Heijdra, Richard Ishida, Masayasu Ishikawa, 2.1216 + Michael Jochimsen, Eric LeVine, Ambrose Li, Håkon Wium Lie, Chris Lilley, 2.1217 + Ken Lunde, Nat McCully, Shinyu Murakami, Paul Nelson, Chris Pratley, Marcin Sawicki, 2.1218 + Arnold Schrijver, Rahul Sonnad, Michel Suignard, Takao Suzuki, 2.1219 + Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi Yabe 2.1220 + and Steve Zilles.</p> 2.1221 + 2.1222 +<h2 class="no-num">Appendix B: References</h2> 2.1223 + 2.1224 +<h3 class="no-num" id="normative-ref">Normative references</h3> 2.1225 +<!--normative--> 2.1226 + 2.1227 +<h3 class="no-num" id="informative-ref">Informative references</h3> 2.1228 +<!--informative--> 2.1229 + 2.1230 +<h2 class="no-num" id="changes">Appendix C: 2.1231 +Changes</h2>
3.1 Binary file css-text-decor-3/text-emphasis-ja.gif has changed
4.1 Binary file css-text-decor-3/text-emphasis-ruby.png has changed
5.1 Binary file css-text-decor-3/text-emphasis-v.gif has changed
6.1 Binary file css-text-decor-3/text-emphasis-zh.gif has changed
7.1 Binary file css-text-decor-3/underline-averaging.gif has changed
8.1 Binary file css-text-decor-3/underline-example.png has changed
9.1 Binary file css-text-decor-3/underline-position-alphabetic.png has changed
10.1 Binary file css-text-decor-3/underline-position-below.png has changed
11.1 Binary file css-text-decor-3/underline-position-left.png has changed
12.1 Binary file css-text-decor-3/underline-position-right.png has changed
13.1 --- a/css3-text-decor/css-text-decor-3/Overview.html Mon Oct 15 14:54:31 2012 -0700 13.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 13.3 @@ -1,1780 +0,0 @@ 13.4 -<!DOCTYPE html> 13.5 - 13.6 -<html lang=en> 13.7 - <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ "> 13.8 - <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 13.9 - <title>CSS Text Decoration Module Level 3 (CSS3 Text Decoration)</title> 13.10 - 13.11 - <link href="http://purl.org/dc/terms/" rel=schema.DC> 13.12 - <meta content="CSS Text Decoration Module Level 3 (CSS3 Text Decoration)" 13.13 - name=DC.title> 13.14 - <meta content=text name=DC.type> 13.15 - <meta content=2012-09-23 name=DC.issued> 13.16 - <meta content="Elika J. Etemad" name=DC.creator> 13.17 - <meta content="Koji Ishii" name=DC.creator> 13.18 - <meta content=W3C name=DC.publisher> 13.19 - <meta content="http://www.w3.org/TR/2012/WD-css3-text-20120923/" 13.20 - name=DC.identifier> 13.21 - <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 13.22 - rel=DC.rights> 13.23 - <link href="#contents" rel=contents> 13.24 - <link href="#index" rel=index> 13.25 - <link href="../default.css" rel=stylesheet type="text/css"> 13.26 - <link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel=stylesheet 13.27 - type="text/css"> 13.28 - 13.29 - <body> 13.30 - <div class=head> <!--begin-logo--> 13.31 - <p><a href="http://www.w3.org/"><img alt=W3C height=48 13.32 - src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--> 13.33 - 13.34 - <h1>CSS Text Decoration Module Level 3</h1> 13.35 - 13.36 - <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 23 13.37 - September 2012</h2> 13.38 - 13.39 - <dl> 13.40 - <dt>This version:</dt> 13.41 - <!-- 13.42 - <dd><a href="http://dev.w3.org/csswg/css3-text/">$Date$ (CVS $Revision$)</a> 13.43 - --> 13.44 - 13.45 - <dd><a 13.46 - href="http://www.w3.org/TR/2012/WD-css3-text-20120923/">http://www.w3.org/TR/2012/WD-css3-text-20120923/</a> 13.47 - 13.48 - <dt>Latest version: 13.49 - 13.50 - <dd><a 13.51 - href="http://www.w3.org/TR/css3-text/">http://www.w3.org/TR/css3-text/</a> 13.52 - 13.53 - <dt>Latest editor's draft: 13.54 - 13.55 - <dd><a 13.56 - href="http://dev.w3.org/csswg/css3-text/">http://dev.w3.org/csswg/css3-text/</a> 13.57 - 13.58 - <dt>Previous version: 13.59 - 13.60 - <dd><a 13.61 - href="http://www.w3.org/TR/2012/WD-css3-text-20120119/">http://www.w3.org/TR/2012/WD-css3-text-20120119/</a> 13.62 - 13.63 - <dt>Issues List: 13.64 - 13.65 - <dd><a 13.66 - href="http://www.w3.org/Style/CSS/Tracker/products/10">http://www.w3.org/Style/CSS/Tracker/products/10</a> 13.67 - 13.68 - <dt>Discussion: 13.69 - 13.70 - <dd><a 13.71 - href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> 13.72 - with subject line “<kbd>[css3-text] <var>… message topic 13.73 - …</var></kbd>” 13.74 - 13.75 - <dt>Editors: 13.76 - 13.77 - <dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> 13.78 - (Mozilla) 13.79 - 13.80 - <dd><a href="mailto:koji.a.ishii@mail.rakuten.com">Koji Ishii</a> 13.81 - (Rakuten, Inc.) 13.82 - </dl> 13.83 - <!--begin-copyright--> 13.84 - <p class=copyright><a 13.85 - href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 13.86 - rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr 13.87 - title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a 13.88 - href="http://www.csail.mit.edu/"><abbr 13.89 - title="Massachusetts Institute of Technology">MIT</abbr></a>, <a 13.90 - href="http://www.ercim.eu/"><abbr 13.91 - title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, 13.92 - <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a 13.93 - href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, 13.94 - <a 13.95 - href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> 13.96 - and <a 13.97 - href="http://www.w3.org/Consortium/Legal/copyright-documents">document 13.98 - use</a> rules apply.</p> 13.99 - <!--end-copyright--> 13.100 - <hr title="Separator for header"> 13.101 - </div> 13.102 - 13.103 - <h2 class="no-num no-toc" id=abstract>Abstract</h2> 13.104 - 13.105 - <p>This module contains the features of CSS relating to text decoration, 13.106 - such as underlines, text shadows, and emphasis marks. <a 13.107 - href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing the 13.108 - rendering of structured documents (such as HTML and XML) on screen, on 13.109 - paper, in speech, etc. 13.110 - 13.111 - <h2 class="no-num no-toc" id=status>Status of this document</h2> 13.112 - 13.113 - <p><em>This section describes the status of this document at the time of 13.114 - its publication. Other documents may supersede this document. A list of 13.115 - current W3C publications and the latest revision of this technical report 13.116 - can be found in the <a href="http://www.w3.org/TR/">W3C technical reports 13.117 - index at http://www.w3.org/TR/.</a></em> 13.118 - 13.119 - <p>Publication as a Working Draft does not imply endorsement by the W3C 13.120 - Membership. This is a draft document and may be updated, replaced or 13.121 - obsoleted by other documents at any time. It is inappropriate to cite this 13.122 - document as other than work in progress. 13.123 - 13.124 - <p>This CSS module has been produced as a combined effort of the <a 13.125 - href="http://www.w3.org/International/Activity">W3C Internationalization 13.126 - Activity</a>, and the <a href="http://www.w3.org/Style/Activity">Style 13.127 - Activity</a> and is maintained by the <a 13.128 - href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>. It also 13.129 - includes contributions made by participants in the <a 13.130 - href="http://www.w3.org/Style/XSL/Group/">XSL Working Group</a> (<a 13.131 - href="http://cgi.w3.org/MemberAccess/AccessRequest">members only</a>). 13.132 - 13.133 - <p>This document was produced by a group operating under the <a 13.134 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 13.135 - 2004 W3C Patent Policy</a>. W3C maintains a <a 13.136 - href="http://www.w3.org/2004/01/pp-impl/32061/status" 13.137 - rel=disclosure>public list of any patent disclosures</a> made in 13.138 - connection with the deliverables of the group; that page also includes 13.139 - instructions for disclosing a patent. An individual who has actual 13.140 - knowledge of a patent which the individual believes contains <a 13.141 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential 13.142 - Claim(s)</a> must disclose the information in accordance with <a 13.143 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 13.144 - 6 of the W3C Patent Policy</a>. 13.145 - 13.146 - <p><strong>Feedback on this draft should be posted to the (<a 13.147 - href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public 13.148 - mailing list <a 13.149 - href="mailto:www-style@w3.org">www-style@w3.org</a></strong> (see <a 13.150 - href="http://www.w3.org/Mail/Request">instructions</a>) <strong>with 13.151 - <kbd>[css3-text-decor]</kbd> in the subject line.</strong> You are 13.152 - strongly encouraged to complain if you see something stupid in this draft. 13.153 - The editors will do their best to respond to all feedback. 13.154 - 13.155 - <p>The following features are at risk and may be cut from the spec during 13.156 - its CR period if there are no (correct) implementations: 13.157 - 13.158 - <p>The following features are at risk and may be cut from the spec during 13.159 - its CR period if there are no (correct) implementations: 13.160 - 13.161 - <ul> 13.162 - <li>the ‘<a href="#text-decoration-skip"><code 13.163 - class=property>text-decoration-skip</code></a>’ property / ‘<code 13.164 - class=css>ink</code>’ value 13.165 - </ul> 13.166 - 13.167 - <h2 class="no-num no-toc" id=contents> Table of Contents</h2> 13.168 - <!--begin-toc--> 13.169 - 13.170 - <ul class=toc> 13.171 - <li><a href="#intro"><span class=secno>1. </span> Introduction</a> 13.172 - <ul class=toc> 13.173 - <li><a href="#placement"><span class=secno>1.1. </span> Module 13.174 - Interactions</a> 13.175 - 13.176 - <li><a href="#values"><span class=secno>1.2. </span> Values</a> 13.177 - 13.178 - <li><a href="#terms"><span class=secno>1.3. </span>Terminology</a> 13.179 - </ul> 13.180 - 13.181 - <li><a href="#line-decoration"><span class=secno>2. </span> Line 13.182 - Decoration: Underline, Overline, and Strike-Through</a> 13.183 - <ul class=toc> 13.184 - <li><a href="#text-decoration-line-property"><span class=secno>2.1. 13.185 - </span> Text Decoration Lines: the ‘<code 13.186 - class=property>text-decoration-line</code>’ property</a> 13.187 - 13.188 - <li><a href="#text-decoration-color-property"><span class=secno>2.2. 13.189 - </span> Text Decoration Color: the ‘<code 13.190 - class=property>text-decoration-color</code>’ property</a> 13.191 - 13.192 - <li><a href="#text-decoration-style-property"><span class=secno>2.3. 13.193 - </span> Text Decoration Style: the ‘<code 13.194 - class=property>text-decoration-style</code>’ property</a> 13.195 - 13.196 - <li><a href="#text-decoration-property"><span class=secno>2.4. </span> 13.197 - Text Decoration Shorthand: the ‘<code 13.198 - class=property>text-decoration</code>’ property</a> 13.199 - 13.200 - <li><a href="#text-decoration-skip-property"><span class=secno>2.5. 13.201 - </span> Text Decoration Line Continuity: the ‘<code 13.202 - class=property>text-decoration-skip</code>’ property</a> 13.203 - <ul class=toc> 13.204 - <li><a href="#text-underline-position-property"><span 13.205 - class=secno>2.5.1. </span> Text Underline Position: the ‘<code 13.206 - class=property>text-underline-position</code>’ property</a> 13.207 - </ul> 13.208 - 13.209 - <li><a href="#emphasis-marks"><span class=secno>2.6. </span> Emphasis 13.210 - Marks</a> 13.211 - <ul class=toc> 13.212 - <li><a href="#text-emphasis-style-property"><span class=secno>2.6.1. 13.213 - </span> Emphasis Mark Style: the ‘<code 13.214 - class=property>text-emphasis-style</code>’ property</a> 13.215 - 13.216 - <li><a href="#text-emphasis-color-property"><span class=secno>2.6.2. 13.217 - </span> Emphasis Mark Color: the ‘<code 13.218 - class=property>text-emphasis-color</code>’ property</a> 13.219 - 13.220 - <li><a href="#text-emphasis-property"><span class=secno>2.6.3. </span> 13.221 - Emphasis Mark Shorthand: the ‘<code 13.222 - class=property>text-emphasis</code>’ property</a> 13.223 - 13.224 - <li><a href="#text-emphasis-position-property"><span 13.225 - class=secno>2.6.4. </span> Emphasis Mark Position: the ‘<code 13.226 - class=property>text-emphasis-position</code>’ property</a> 13.227 - </ul> 13.228 - 13.229 - <li><a href="#text-shadow-property"><span class=secno>2.7. </span> Text 13.230 - Shadows: the ‘<code class=property>text-shadow</code>’ property</a> 13.231 - </ul> 13.232 - 13.233 - <li><a href="#conformance"><span class=secno>3. </span> Conformance</a> 13.234 - <ul class=toc> 13.235 - <li><a href="#conventions"><span class=secno>3.1. </span> Document 13.236 - Conventions</a> 13.237 - 13.238 - <li><a href="#conformance-classes"><span class=secno>3.2. </span> 13.239 - Conformance Classes</a> 13.240 - 13.241 - <li><a href="#partial"><span class=secno>3.3. </span> Partial 13.242 - Implementations</a> 13.243 - 13.244 - <li><a href="#experimental"><span class=secno>3.4. </span> Experimental 13.245 - Implementations</a> 13.246 - 13.247 - <li><a href="#testing"><span class=secno>3.5. </span>Non-Experimental 13.248 - Implementations</a> 13.249 - 13.250 - <li><a href="#cr-exit-criteria"><span class=secno>3.6. </span> CR Exit 13.251 - Criteria</a> 13.252 - </ul> 13.253 - 13.254 - <li class=no-num><a href="#acknowledgements"> Appendix A: 13.255 - Acknowledgements</a> 13.256 - 13.257 - <li class=no-num><a href="#appendix-b-references">Appendix B: 13.258 - References</a> 13.259 - <ul class=toc> 13.260 - <li class=no-num><a href="#normative-ref">Normative references</a> 13.261 - 13.262 - <li class=no-num><a href="#informative-ref">Informative references</a> 13.263 - </ul> 13.264 - 13.265 - <li class=no-num><a href="#changes">Appendix C: Changes</a> 13.266 - </ul> 13.267 - <!--end-toc--> 13.268 - 13.269 - <h2 id=intro><span class=secno>1. </span> Introduction</h2> 13.270 - 13.271 - <p>[document here] 13.272 - 13.273 - <p class=issue>This draft describes features that are specific to certain 13.274 - scripts. There is an ongoing discussion about where these features belong: 13.275 - in existing CSS properties, in new CSS properties, or perhaps in other 13.276 - specifications. 13.277 - 13.278 - <h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3> 13.279 - 13.280 - <p>This module replaces and extends the text-level features defined in <a 13.281 - href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> chapter 16. 13.282 - 13.283 - <h3 id=values><span class=secno>1.2. </span> Values</h3> 13.284 - 13.285 - <p>This specification follows the <a 13.286 - href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property 13.287 - definition conventions</a> from <a href="#CSS21" 13.288 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in 13.289 - this specification are defined in CSS Level 2 Revision 1 <a 13.290 - href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS 13.291 - modules may expand the definitions of these value types: for example <a 13.292 - href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>, 13.293 - when combined with this module, expands the definition of the 13.294 - <color> value type as used in this specification. 13.295 - 13.296 - <p>In addition to the property-specific values listed in their definitions, 13.297 - all properties defined in this specification also accept the <a 13.298 - href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> 13.299 - keyword as their property value. For readability it has not been repeated 13.300 - explicitly. 13.301 - 13.302 - <p>The <dfn id=currentcolor>‘<code class=css>currentcolor</code>’</dfn> 13.303 - keyword here computes to itself and is resolved to the value of ‘<code 13.304 - class=property>color</code>’ after inheritance is performed. This is so 13.305 - that the ‘<a href="#text-emphasis-color"><code 13.306 - class=property>text-emphasis-color</code></a>’ by default matches the 13.307 - text ‘<code class=property>color</code>’. <span class=issue>CSS3 Color 13.308 - has not yet been errata'd to define it this way; currentcolor there is 13.309 - defined to compute to the value of ‘<code 13.310 - class=property>color</code>’, which gives it the wrong inheritance 13.311 - behavior.</span> 13.312 - 13.313 - <h3 id=terms><span class=secno>1.3. </span>Terminology</h3> 13.314 - 13.315 - <p>The terms <a 13.316 - href="http://www.w3.org/TR/css3-text/#grapheme-cluster"><dfn 13.317 - id=character>character</dfn></a>, <a 13.318 - href="http://www.w3.org/TR/css3-text/#letter"><dfn 13.319 - id=letter>letter</dfn></a>, and <a 13.320 - href="http://www.w3.org/TR/css3-text/#content-language"><dfn 13.321 - id=content-language>content language</dfn></a> as used in this 13.322 - specification are defined in <a href="#CSS3TEXT" 13.323 - rel=biblioentry>[CSS3TEXT]<!--{{!CSS3TEXT}}--></a>. Other terminology and 13.324 - concepts used in this specification are defined in <a href="#CSS21" 13.325 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> and <a 13.326 - href="#CSS3-WRITING-MODES" 13.327 - rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>. 13.328 - 13.329 - <h2 id=line-decoration><span class=secno>2. </span> Line Decoration: 13.330 - Underline, Overline, and Strike-Through</h2> 13.331 - 13.332 - <p>The following properties describe line decorations that are added to the 13.333 - content of an element. When specified on or propagated to an inline box, 13.334 - such decoration affects all the boxes generated by that element, and is 13.335 - further propagated to any in-flow block-level boxes that split the inline 13.336 - (see <a 13.337 - href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">CSS2.1 13.338 - section 9.2.1.1</a>) When specified on or propagated to a ruby box, the 13.339 - decorations are further propagated only to the ruby base. When specified 13.340 - on or propagated to a a block container that establishes an inline 13.341 - formatting context, the decorations are propagated to an anonymous inline 13.342 - element that wraps all the in-flow inline-level children of the block 13.343 - container. For all other elements, the decorations are propagated to any 13.344 - in-flow children. 13.345 - 13.346 - <p class=note>Note that text decorations are not propagated to any 13.347 - out-of-flow descendants, nor to the contents of atomic inline-level 13.348 - descendants such as inline blocks and inline tables. 13.349 - 13.350 - <p>By default underlines, overlines, and line-throughs are applied only to 13.351 - text (including white space, letter spacing, and word spacing): margins, 13.352 - borders, and padding are skipped. Elements containing no text, such as 13.353 - images, are likewise not decorated. The ‘<a 13.354 - href="#text-decoration-skip"><code 13.355 - class=property>text-decoration-skip</code></a>’ property can be used to 13.356 - modify this behavior, for example allowing inline replaced elements to be 13.357 - underlined or requiring that white space be skipped. 13.358 - 13.359 - <p>In determining the position and thickness of text decoration lines, user 13.360 - agents may consider the font sizes and dominant baselines of descendants, 13.361 - but for a given element's decoration must use the same position and 13.362 - thickness throughout each line box. The <a 13.363 - href="#text-decoration-color">color</a> and <a 13.364 - href="#text-decoration-style">line style</a> of decorations must remain 13.365 - the same on all decorations applied by a given element, even if descendant 13.366 - elements have different color or line style values. 13.367 - 13.368 - <div class=example> 13.369 - <p>The following figure shows the averaging for underline: 13.370 - 13.371 - <p><img 13.372 - alt="In the first rendering of the underlined text '1st a' with 'st' as a superscript, both the '1st' and the 'a' are rendered in a small font. In the second rendering, the 'a' is rendered in a larger font. In the third, both '1st' and 'a' are large." 13.373 - height=105 src=underline-averaging.gif width=326> 13.374 - 13.375 - <p>In the three fragments of underlined text, the underline is drawn 13.376 - consecutively lower and thicker as the ratio of large text to small text 13.377 - increases. 13.378 - </div> 13.379 - 13.380 - <p>Relatively positioning a descendant moves all text decorations affecting 13.381 - it along with the descendant's text; it does not affect calculation of the 13.382 - decoration's initial position on that line. The ‘<code 13.383 - class=property>visibility</code>’ property, filters, and other graphical 13.384 - transformations likewise affect text decorations as part of the text 13.385 - they're drawn on, even if the decorations were specified on an ancestor 13.386 - element. <span class=issue>Does this include ‘<a 13.387 - href="#text-shadow"><code class=property>text-shadow</code></a>’? What 13.388 - about text-fill etc.?</span> 13.389 - 13.390 - <div class=example> 13.391 - <p>In the following style sheet and document fragment: 13.392 - 13.393 - <pre><code class=css> 13.394 -<!-- --> blockquote { text-decoration: underline; color: blue; } 13.395 -<!-- --> em { display: block; } 13.396 -<!-- --> cite { color: fuchsia; } 13.397 -<!----></code></pre> 13.398 - 13.399 - <pre class=html><code> 13.400 -<!-- --> <blockquote> 13.401 -<!-- --> <p> 13.402 -<!-- --> <span> 13.403 -<!-- --> Help, help! 13.404 -<!-- --> <em> I am under a hat! </em> 13.405 -<!-- --> 13.406 -<!-- --> <cite> —GwieF </cite> 13.407 -<!-- --> </span> 13.408 -<!-- --> </p> 13.409 -<!-- --> </blockquote> 13.410 -<!----></code></pre> 13.411 - 13.412 - <p>...the underlining for the blockquote element is propagated to an 13.413 - anonymous inline element that surrounds the span element, causing the 13.414 - text "Help, help!" to be blue, with the blue underlining from the 13.415 - anonymous inline underneath it, the color being taken from the blockquote 13.416 - element. The <code><em>text</em></code> in the em block is 13.417 - also underlined, as it is in an in-flow block to which the underline is 13.418 - propagated. The final line of text is fuchsia, but the underline 13.419 - underneath it is still the blue underline from the anonymous inline 13.420 - element. 13.421 - 13.422 - <p><img alt="Sample rendering of the above underline example" 13.423 - src=underline-example.png> 13.424 - 13.425 - <p>This diagram shows the boxes involved in the example above. The rounded 13.426 - aqua line represents the anonymous inline element wrapping the inline 13.427 - contents of the paragraph element, the rounded blue line represents the 13.428 - span element, and the orange lines represent the blocks. 13.429 - </div> 13.430 - 13.431 - <h3 id=text-decoration-line-property><span class=secno>2.1. </span> Text 13.432 - Decoration Lines: the ‘<a href="#text-decoration-line"><code 13.433 - class=property>text-decoration-line</code></a>’ property</h3> 13.434 - 13.435 - <table class=propdef> 13.436 - <tbody> 13.437 - <tr> 13.438 - <th>Name: 13.439 - 13.440 - <td><dfn id=text-decoration-line>text-decoration-line</dfn> 13.441 - 13.442 - <tr> 13.443 - <th><a href="#values">Value</a>: 13.444 - 13.445 - <td>none | [ underline || overline || line-through ] 13.446 - 13.447 - <tr> 13.448 - <th>Initial: 13.449 - 13.450 - <td>none 13.451 - 13.452 - <tr> 13.453 - <th>Applies to: 13.454 - 13.455 - <td>all elements 13.456 - 13.457 - <tr> 13.458 - <th>Inherited: 13.459 - 13.460 - <td>no (but see prose) 13.461 - 13.462 - <tr> 13.463 - <th>Percentages: 13.464 - 13.465 - <td>N/A 13.466 - 13.467 - <tr> 13.468 - <th>Media: 13.469 - 13.470 - <td>visual 13.471 - 13.472 - <tr> 13.473 - <th>Computed value: 13.474 - 13.475 - <td>as specified 13.476 - </table> 13.477 - 13.478 - <p>Specifies what line decorations, if any, are added to the element. 13.479 - Values have the following meanings: 13.480 - 13.481 - <dl> 13.482 - <dt><dfn id=none title="text-decoration-line:none">‘<code 13.483 - class=css>none</code>’</dfn> 13.484 - 13.485 - <dd>Neither produces nor inhibits text decoration. 13.486 - 13.487 - <dt><dfn id=underline>‘<code class=css>underline</code>’</dfn> 13.488 - 13.489 - <dd>Each line of text is underlined. 13.490 - 13.491 - <dt><dfn id=overline>‘<code class=css>overline</code>’</dfn> 13.492 - 13.493 - <dd>Each line of text has a line above it (i.e. on the opposite side from 13.494 - an underline). 13.495 - 13.496 - <dt><dfn id=line-through>‘<code class=css>line-through</code>’</dfn> 13.497 - 13.498 - <dd>Each line of text has a line through the middle. 13.499 - </dl> 13.500 - 13.501 - <h3 id=text-decoration-color-property><span class=secno>2.2. </span> Text 13.502 - Decoration Color: the ‘<a href="#text-decoration-color"><code 13.503 - class=property>text-decoration-color</code></a>’ property</h3> 13.504 - 13.505 - <table class=propdef> 13.506 - <tbody> 13.507 - <tr> 13.508 - <th>Name: 13.509 - 13.510 - <td><dfn id=text-decoration-color>text-decoration-color</dfn> 13.511 - 13.512 - <tr> 13.513 - <th><a href="#values">Value</a>: 13.514 - 13.515 - <td><a href="http://www.w3.org/TR/css3-color/#color0"><span 13.516 - class=value-inst-color><color></span></a> 13.517 - 13.518 - <tr> 13.519 - <th>Initial: 13.520 - 13.521 - <td><a 13.522 - href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> 13.523 - 13.524 - <tr> 13.525 - <th>Applies to: 13.526 - 13.527 - <td>all elements 13.528 - 13.529 - <tr> 13.530 - <th>Inherited: 13.531 - 13.532 - <td>no 13.533 - 13.534 - <tr> 13.535 - <th>Percentages: 13.536 - 13.537 - <td>N/A 13.538 - 13.539 - <tr> 13.540 - <th>Media: 13.541 - 13.542 - <td>visual 13.543 - 13.544 - <tr> 13.545 - <th>Computed value: 13.546 - 13.547 - <td>the computed color 13.548 - </table> 13.549 - 13.550 - <p>This property specifies the color of text decoration (underlines 13.551 - overlines, and line-throughs) set on the element with ‘<a 13.552 - href="#text-decoration-line"><code 13.553 - class=property>text-decoration-line</code></a>’. 13.554 - 13.555 - <h3 id=text-decoration-style-property><span class=secno>2.3. </span> Text 13.556 - Decoration Style: the ‘<a href="#text-decoration-style"><code 13.557 - class=property>text-decoration-style</code></a>’ property</h3> 13.558 - 13.559 - <table class=propdef> 13.560 - <tbody> 13.561 - <tr> 13.562 - <th>Name: 13.563 - 13.564 - <td><dfn id=text-decoration-style>text-decoration-style</dfn> 13.565 - 13.566 - <tr> 13.567 - <th><a href="#values">Value</a>: 13.568 - 13.569 - <td>solid | double | dotted | dashed | wavy 13.570 - 13.571 - <tr> 13.572 - <th>Initial: 13.573 - 13.574 - <td>solid 13.575 - 13.576 - <tr> 13.577 - <th>Applies to: 13.578 - 13.579 - <td>all elements 13.580 - 13.581 - <tr> 13.582 - <th>Inherited: 13.583 - 13.584 - <td>no 13.585 - 13.586 - <tr> 13.587 - <th>Percentages: 13.588 - 13.589 - <td>N/A 13.590 - 13.591 - <tr> 13.592 - <th>Media: 13.593 - 13.594 - <td>visual 13.595 - 13.596 - <tr> 13.597 - <th>Computed value: 13.598 - 13.599 - <td>as specified 13.600 - </table> 13.601 - 13.602 - <p>This property specifies the style of the line(s) drawn for text 13.603 - decoration specified on the element. Values have the same meaning as for 13.604 - the <a 13.605 - href="http://www.w3.org/TR/css3-background/#the-border-style">border-style 13.606 - properties</a> <a href="#CSS3BG" 13.607 - rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. ‘<code 13.608 - class=css>wavy</code>’ indicates a wavy line. 13.609 - 13.610 - <h3 id=text-decoration-property><span class=secno>2.4. </span> Text 13.611 - Decoration Shorthand: the ‘<a href="#text-decoration"><code 13.612 - class=property>text-decoration</code></a>’ property</h3> 13.613 - 13.614 - <table class=propdef> 13.615 - <tbody> 13.616 - <tr> 13.617 - <th>Name: 13.618 - 13.619 - <td><dfn id=text-decoration>text-decoration</dfn> 13.620 - 13.621 - <tr> 13.622 - <th><a href="#values">Value</a>: 13.623 - 13.624 - <td><var><a 13.625 - href="#text-decoration-line"><text-decoration-line></a></var> || 13.626 - <var><a 13.627 - href="#text-decoration-style"><text-decoration-style></a></var> 13.628 - || <var><a 13.629 - href="#text-decoration-color"><text-decoration-color></a></var> 13.630 - || blink 13.631 - 13.632 - <tr> 13.633 - <th>Initial: 13.634 - 13.635 - <td>none 13.636 - 13.637 - <tr> 13.638 - <th>Applies to: 13.639 - 13.640 - <td>all elements 13.641 - 13.642 - <tr> 13.643 - <th>Inherited: 13.644 - 13.645 - <td>no 13.646 - 13.647 - <tr> 13.648 - <th>Percentages: 13.649 - 13.650 - <td>N/A 13.651 - 13.652 - <tr> 13.653 - <th>Media: 13.654 - 13.655 - <td>visual 13.656 - 13.657 - <tr> 13.658 - <th>Computed value: 13.659 - 13.660 - <td>as specified 13.661 - </table> 13.662 - 13.663 - <p>This property is a shorthand for setting ‘<a 13.664 - href="#text-decoration-line"><code 13.665 - class=property>text-decoration-line</code></a>’, ‘<a 13.666 - href="#text-decoration-color"><code 13.667 - class=property>text-decoration-color</code></a>’, and ‘<a 13.668 - href="#text-decoration-style"><code 13.669 - class=property>text-decoration-style</code></a>’ in one declaration. 13.670 - Omitted values are set to their initial values. A ‘<a 13.671 - href="#text-decoration"><code class=property>text-decoration</code></a>’ 13.672 - declaration that omits both the ‘<a href="#text-decoration-color"><code 13.673 - class=property>text-decoration-color</code></a>’ and ‘<a 13.674 - href="#text-decoration-style"><code 13.675 - class=property>text-decoration-style</code></a>’ values is 13.676 - backwards-compatible with CSS Levels 1 and 2. 13.677 - 13.678 - <p>If the ‘<code class=css>blink</code>’ keyword is specified the text 13.679 - blinks (alternates between visible and invisible). Conforming user agents 13.680 - may simply not blink the text. Note that not blinking the text is one 13.681 - technique to satisfy <a 13.682 - href="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">checkpoint 13.683 - 3.3 of WAI-UAAG</a>. 13.684 - 13.685 - <div class=example> 13.686 - <p>The following example underlines unvisited links with a solid blue 13.687 - underline in CSS1 and CSS2 UAs and a navy dotted underline in CSS3 UAs. 13.688 - 13.689 - <pre><code class=css> 13.690 -<!-- -->:link { 13.691 -<!-- --> color: blue; 13.692 -<!-- --> text-decoration: underline; 13.693 -<!-- --> text-decoration: navy dotted underline; /* <a 13.694 - href="http://www.w3.org/TR/CSS21/syndata.html#ignore">Ignored</a> in CSS1/CSS2 UAs */ 13.695 -<!-- -->}</code></pre> 13.696 - </div> 13.697 - 13.698 - <h3 id=text-decoration-skip-property><span class=secno>2.5. </span> Text 13.699 - Decoration Line Continuity: the ‘<a href="#text-decoration-skip"><code 13.700 - class=property>text-decoration-skip</code></a>’ property</h3> 13.701 - 13.702 - <table class=propdef> 13.703 - <tbody> 13.704 - <tr> 13.705 - <th>Name: 13.706 - 13.707 - <td><dfn id=text-decoration-skip>text-decoration-skip</dfn> 13.708 - 13.709 - <tr> 13.710 - <th><a href="#values">Value</a>: 13.711 - 13.712 - <td>none | [ objects || spaces || ink || edges ] 13.713 - 13.714 - <tr> 13.715 - <th>Initial: 13.716 - 13.717 - <td>objects 13.718 - 13.719 - <tr> 13.720 - <th>Applies to: 13.721 - 13.722 - <td>all elements 13.723 - 13.724 - <tr> 13.725 - <th>Inherited: 13.726 - 13.727 - <td>yes 13.728 - 13.729 - <tr> 13.730 - <th>Percentages: 13.731 - 13.732 - <td>N/A 13.733 - 13.734 - <tr> 13.735 - <th>Media: 13.736 - 13.737 - <td>visual 13.738 - 13.739 - <tr> 13.740 - <th>Computed value: 13.741 - 13.742 - <td>as specified 13.743 - </table> 13.744 - 13.745 - <p>This property specifies what parts of the element's content any text 13.746 - decoration affecting the element must skip over. It controls all text 13.747 - decoration lines drawn by the element and also any text decoration lines 13.748 - drawn by its ancestors. Values have the following meanings: 13.749 - 13.750 - <dl> 13.751 - <dt><dfn id=none0 title="text-decoration-skip:none">‘<code 13.752 - class=css>none</code>’</dfn> 13.753 - 13.754 - <dd>Skip nothing: text-decoration is drawn for all text content and for 13.755 - inline replaced elements. 13.756 - 13.757 - <dt><dfn id=objects title="text-decoration-skip:objects">‘<code 13.758 - class=css>objects</code>’</dfn> 13.759 - 13.760 - <dd>Skip this element if it is an atomic inline (such as an image or 13.761 - inline-block). 13.762 - 13.763 - <dt><dfn id=spaces title="text-decoration-skip:spaces">‘<code 13.764 - class=css>spaces</code>’</dfn> 13.765 - 13.766 - <dd>Skip white space: this includes regular spaces (U+0020) and tabs 13.767 - (U+0009), as well as nbsp (U+00A0), ideographic space (U+3000), all fixed 13.768 - width spaces (such as U+2000–U+200A, U+202F and U+205F), and any 13.769 - adjacent letter-spacing or word-spacing. 13.770 - 13.771 - <dt><dfn id=ink title="text-decoration-skip:ink">‘<code 13.772 - class=css>ink</code>’</dfn> 13.773 - 13.774 - <dd>Skip over where glyphs are drawn: interrupt the decoration line to let 13.775 - text show through where the text decoration would otherwise cross over a 13.776 - glyph. The UA may also skip a small distance to either side of the glyph 13.777 - outline. 13.778 - 13.779 - <dt><dfn id=edges title="text-decoration-skip:edges">‘<code 13.780 - class=css>edges</code>’</dfn> 13.781 - 13.782 - <dd>The UA should place the start and end of the line inwards from the 13.783 - content edge of the decorating element so that, e.g. two underlined 13.784 - elements side-by-side do not appear to have a single underline. (This is 13.785 - important in Chinese, where underlining is a form of punctuation.) 13.786 - </dl> 13.787 - 13.788 - <p class=issue>Do we need a value that <em>doesn't</em> skip margins and 13.789 - padding? 13.790 - 13.791 - <p class=note>Note that this property inherits and that descendant elements 13.792 - can have a different setting. 13.793 - 13.794 - <h4 id=text-underline-position-property><span class=secno>2.5.1. </span> 13.795 - Text Underline Position: the ‘<a href="#text-underline-position"><code 13.796 - class=property>text-underline-position</code></a>’ property</h4> 13.797 - 13.798 - <table class=propdef> 13.799 - <tbody> 13.800 - <tr> 13.801 - <th>Name: 13.802 - 13.803 - <td><dfn id=text-underline-position>text-underline-position</dfn> 13.804 - 13.805 - <tr> 13.806 - <th><a href="#values">Value</a>: 13.807 - 13.808 - <td>auto | alphabetic | [ below || [ left | right ] ] 13.809 - 13.810 - <tr> 13.811 - <th>Initial: 13.812 - 13.813 - <td>auto 13.814 - 13.815 - <tr> 13.816 - <th>Applies to: 13.817 - 13.818 - <td>all elements 13.819 - 13.820 - <tr> 13.821 - <th>Inherited: 13.822 - 13.823 - <td>yes 13.824 - 13.825 - <tr> 13.826 - <th>Percentages: 13.827 - 13.828 - <td>N/A 13.829 - 13.830 - <tr> 13.831 - <th>Media: 13.832 - 13.833 - <td>visual 13.834 - 13.835 - <tr> 13.836 - <th>Computed value: 13.837 - 13.838 - <td>as specified 13.839 - </table> 13.840 - 13.841 - <p>This property sets the position of an underline specified on the same 13.842 - element: it does not affect underlines specified by ancestor elements. 13.843 - Values have the following meanings: 13.844 - 13.845 - <dl> 13.846 - <dt><dfn id=auto>‘<code class=css>auto</code>’</dfn> 13.847 - 13.848 - <dd>The user agent may use any algorithm to determine the underline's 13.849 - position; however it must be placed at or below the alphabetic baseline. 13.850 - <p class=note>It is suggested that the underline position be ‘<a 13.851 - href="#alphabetic"><code class=css>alphabetic</code></a>’ unless it 13.852 - crosses either subscripted (or otherwise lowered) text, or it affects 13.853 - characters from Asian scripts such as Han or Tibetan, for which an 13.854 - alphabetic underline is too high: in such cases, aligning to the em box 13.855 - edge as described for ‘<code class=css>below left</code>’ is more 13.856 - appropriate. 13.857 - 13.858 - <dt><dfn id=alphabetic>‘<code class=css>alphabetic</code>’</dfn> 13.859 - 13.860 - <dd>The underline is positioned relative to the alphabetic baseline. In 13.861 - this case the underline is likely to cross some descenders. 13.862 - <div class=figure> 13.863 - <p><img 13.864 - alt="In a typical Latin font, the underline is positioned slightly below the alphabetic baseline, leaving a gap between the line and the bottom of most Latin letters, but crossing through descenders such as the stem of a 'p'." 13.865 - src=underline-position-alphabetic.png 13.866 - title="text-underline-position: alphabetic"> 13.867 - 13.868 - <p class=caption>‘<code class=css>text-underline-position: 13.869 - alphabetic</code>’ 13.870 - </div> 13.871 - 13.872 - <dt><dfn id=below>‘<code class=css>below</code>’</dfn> 13.873 - 13.874 - <dd>In horizontal writing modes, the underline is positioned relative to 13.875 - the under edge of the element's content box. In this case the underline 13.876 - usually does not cross the descenders. (This is sometimes called 13.877 - "accounting" underline.) If the underline affects descendants with a 13.878 - lower content edge, the user agent should shift the underline down 13.879 - further to the lowest underlined content box edge. The user agent may 13.880 - ignore elements with ‘<code class=css>vertical-align</code>’ values 13.881 - given as lengths, percentages, ‘<code class=css>top</code>’, or 13.882 - ‘<code class=css>bottom</code>’ when making this adjustment. (Note 13.883 - that images that are not affected by the underline per ‘<a 13.884 - href="#text-decoration-skip"><code 13.885 - class=property>text-decoration-skip</code></a>’ will not affect the 13.886 - position of the underline.) 13.887 - <div class=figure> 13.888 - <p><img 13.889 - alt="In a typical Latin font, the underline is far enough below the text that it does not cross the bottom of a 'g'." 13.890 - src=underline-position-below.png 13.891 - title="text-underline-position: below"> 13.892 - 13.893 - <p class=caption>‘<code class=css>text-underline-position: 13.894 - below</code>’ 13.895 - </div> 13.896 - 13.897 - <div class=example> 13.898 - <p>Because ‘<a href="#text-underline-position"><code 13.899 - class=property>text-underline-position</code></a>’ inherits, and is 13.900 - not reset by the ‘<a href="#text-decoration"><code 13.901 - class=property>text-decoration</code></a>’ shorthand, the following 13.902 - example switches the document to use ‘<a href="#below"><code 13.903 - class=css>below</code></a>’ underlining, which can be more 13.904 - appropriate for writing systems with long, complicated descenders. It 13.905 - is also often useful for mathematical or chemical texts that use many 13.906 - subscripts. 13.907 - 13.908 - <pre>:root { text-underline-position: below; }</pre> 13.909 - </div> 13.910 - 13.911 - <dt><dfn id=left>‘<code class=css>left</code>’</dfn> 13.912 - 13.913 - <dd>In vertical writing modes, the underline is aligned as for ‘<a 13.914 - href="#below"><code class=css>below</code></a>’, on the left edge of 13.915 - the text. 13.916 - 13.917 - <dt><dfn id=right>‘<code class=css>right</code>’</dfn> 13.918 - 13.919 - <dd>In vertical writing modes, the underline is aligned as for ‘<a 13.920 - href="#below"><code class=css>below</code></a>’, except it is aligned 13.921 - to the right edge of the text. If this causes the underline to be drawn 13.922 - on the "over" side of the text, then an overline also switches sides and 13.923 - is drawn on the "under" side. 13.924 - </dl> 13.925 - 13.926 - <p>If ‘<a href="#below"><code class=css>below</code></a>’ is specified 13.927 - alone, ‘<a href="#left"><code class=css>left</code></a>’ is also 13.928 - implied. If ‘<a href="#left"><code class=css>left</code></a>’ or ‘<a 13.929 - href="#right"><code class=css>right</code></a>’ is specified alone, 13.930 - ‘<a href="#below"><code class=css>below</code></a>’ is also implied. 13.931 - 13.932 - <p class=issue> Should ‘<code class=css>above</code>’/‘<a 13.933 - href="#below"><code class=css>below</code></a>’ be ‘<code 13.934 - class=css>over</code>’/‘<code class=css>under</code>’ to match text 13.935 - decoration names? 13.936 - 13.937 - <div class=figure id=fig-text-underline-position> 13.938 - <table> 13.939 - <tbody> 13.940 - <tr> 13.941 - <td> <img 13.942 - alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left' places the underline on the left side of the text." 13.943 - src=underline-position-left.png title="text-underline-position: left"> 13.944 - 13.945 - <td> <img 13.946 - alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right' places the underline on the right side of the text." 13.947 - src=underline-position-right.png 13.948 - title="text-underline-position: right"> 13.949 - 13.950 - <tr> 13.951 - <td>‘<a href="#left"><code class=css>left</code></a>’ 13.952 - 13.953 - <td>‘<a href="#right"><code class=css>right</code></a>’ 13.954 - </table> 13.955 - 13.956 - <p class=caption>In vertical writing modes, the ‘<a 13.957 - href="#text-underline-position"><code 13.958 - class=property>text-underline-position</code></a>’ values ‘<a 13.959 - href="#left"><code class=css>left</code></a>’ and ‘<a 13.960 - href="#right"><code class=css>right</code></a>’ allow placing the 13.961 - underline on either side of the text. (In horizontal writing modes, both 13.962 - values are treated as ‘<a href="#below"><code 13.963 - class=css>below</code></a>’.) 13.964 - </div> 13.965 - 13.966 - <div class=example> 13.967 - <p>The following example styles modern Chinese, Japanese, and Korean texts 13.968 - with the appropriate underline positions in both horizontal and vertical 13.969 - text: 13.970 - 13.971 - <pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: below right; } 13.972 -<!-- -->:root:lang(zh), [lang|=zh] { text-underline-position: below left; }</pre> 13.973 - </div> 13.974 - 13.975 - <div class=note> 13.976 - <p>In some cases (such as in OpenType) the font format can offer 13.977 - information about the appropriate position of an underline. Typically 13.978 - this information gives the position of an ‘<a href="#alphabetic"><code 13.979 - class=css>alphabetic</code></a>’ underline; in some cases (especially 13.980 - in CJK fonts), it gives the position of a ‘<code class=css>below 13.981 - left</code>’ underline. (In this case, the font's underline metrics 13.982 - typically touch the bottom edge of the em box). The UA is encouraged to 13.983 - use information (such as the underline thickness, or appropriate 13.984 - alphabetic alignment) from the font wherever appropriate. 13.985 - </div> 13.986 - 13.987 - <h3 id=emphasis-marks><span class=secno>2.6. </span> Emphasis Marks</h3> 13.988 - 13.989 - <p>East Asian documents traditionally use small symbols next to each glyph 13.990 - to emphasize a run of text. For example: 13.991 - 13.992 - <div class=figure> 13.993 - <p> <img alt="Example of emphasis in Japanese appearing above the text" 13.994 - class=example height=28 src=text-emphasis-ja.gif width=225> 13.995 - 13.996 - <p class=caption>Accent emphasis (shown in blue for clarity) applied to 13.997 - Japanese text 13.998 - </div> 13.999 - 13.1000 - <h4 id=text-emphasis-style-property><span class=secno>2.6.1. </span> 13.1001 - Emphasis Mark Style: the ‘<a href="#text-emphasis-style"><code 13.1002 - class=property>text-emphasis-style</code></a>’ property</h4> 13.1003 - 13.1004 - <table class=propdef> 13.1005 - <tbody> 13.1006 - <tr> 13.1007 - <th>Name: 13.1008 - 13.1009 - <td><dfn id=text-emphasis-style>text-emphasis-style</dfn> 13.1010 - 13.1011 - <tr> 13.1012 - <th><a href="#values">Value</a>: 13.1013 - 13.1014 - <td>none | [ [ filled | open ] || [ dot | circle | double-circle | 13.1015 - triangle | sesame ] ] | <a class=noxref 13.1016 - href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string"><span 13.1017 - class=value-inst-string><string></span></a> 13.1018 - 13.1019 - <tr> 13.1020 - <th>Initial: 13.1021 - 13.1022 - <td>none 13.1023 - 13.1024 - <tr> 13.1025 - <th>Applies to: 13.1026 - 13.1027 - <td>all elements 13.1028 - 13.1029 - <tr> 13.1030 - <th>Inherited: 13.1031 - 13.1032 - <td>yes 13.1033 - 13.1034 - <tr> 13.1035 - <th>Percentages: 13.1036 - 13.1037 - <td>N/A 13.1038 - 13.1039 - <tr> 13.1040 - <th>Media: 13.1041 - 13.1042 - <td>visual 13.1043 - 13.1044 - <tr> 13.1045 - <th>Computed value: 13.1046 - 13.1047 - <td>‘<code class=property>none</code>’, a pair of keywords 13.1048 - representing the shape and fill, or a string 13.1049 - </table> 13.1050 - 13.1051 - <p>This property applies emphasis marks to the element's text. Values have 13.1052 - the following meanings: 13.1053 - 13.1054 - <dl> 13.1055 - <dt><dfn id=none1 title="text-emphasis:none">‘<code 13.1056 - class=css>none</code>’</dfn> 13.1057 - 13.1058 - <dd>No emphasis marks. 13.1059 - 13.1060 - <dt><dfn id=filled title="text-emphasis:filled">‘<code 13.1061 - class=css>filled</code>’</dfn> 13.1062 - 13.1063 - <dd>The shape is filled with solid color. 13.1064 - 13.1065 - <dt><dfn id=open title="text-emphasis:open">‘<code 13.1066 - class=css>open</code>’</dfn> 13.1067 - 13.1068 - <dd>The shape is hollow. 13.1069 - 13.1070 - <dt><dfn id=dot title="text-emphasis:dot">‘<code 13.1071 - class=css>dot</code>’</dfn> 13.1072 - 13.1073 - <dd>Display small circles as marks. The filled dot is U+2022 ‘<code 13.1074 - class=css>•</code>’, and the open dot is U+25E6 ‘<code 13.1075 - class=css>◦</code>’. 13.1076 - 13.1077 - <dt><dfn id=circle title="text-emphasis:circle">‘<code 13.1078 - class=css>circle</code>’</dfn> 13.1079 - 13.1080 - <dd>Display large circles as marks. The filled circle is U+25CF ‘<code 13.1081 - class=css>●</code>’, and the open circle is U+25CB ‘<code 13.1082 - class=css>○</code>’. 13.1083 - 13.1084 - <dt><dfn id=double-circle title="text-emphasis:double-circle">‘<code 13.1085 - class=css>double-circle</code>’</dfn> 13.1086 - 13.1087 - <dd>Display double circles as marks. The filled double-circle is U+25C9 13.1088 - ‘<code class=css>◉</code>’, and the open double-circle is U+25CE 13.1089 - ‘<code class=css>◎</code>’. 13.1090 - 13.1091 - <dt><dfn id=triangle title="text-emphasis:triangle">‘<code 13.1092 - class=css>triangle</code>’</dfn> 13.1093 - 13.1094 - <dd>Display triangles as marks. The filled triangle is U+25B2 ‘<code 13.1095 - class=css>▲</code>’, and the open triangle is U+25B3 ‘<code 13.1096 - class=css>△</code>’. 13.1097 - 13.1098 - <dt><dfn id=sesame title="text-emphasis:sesame">‘<code 13.1099 - class=css>sesame</code>’</dfn> 13.1100 - 13.1101 - <dd>Display sesames as marks. The filled sesame is U+FE45 ‘<code 13.1102 - class=css>﹅</code>’, and the open sesame is U+FE46 ‘<code 13.1103 - class=css>﹆</code>’. 13.1104 - 13.1105 - <dt><dfn id=ltstringgt title="text-emphasis:sesame">‘<code 13.1106 - class=css><var><string></var></code>’</dfn> 13.1107 - 13.1108 - <dd>Display the given string as marks. Authors should not specify more 13.1109 - than one <a href="#character"><i>character</i></a> in <string>. The 13.1110 - UA may truncate or ignore strings consisting of more than one grapheme 13.1111 - cluster. 13.1112 - </dl> 13.1113 - 13.1114 - <p>If a shape keyword is specified but neither of ‘<code 13.1115 - class=css>filled</code>’ nor ‘<code class=css>open</code>’ is 13.1116 - specified, ‘<code class=css>filled</code>’ is assumed. If only 13.1117 - ‘<code class=css>filled</code>’ or ‘<code class=css>open</code>’ 13.1118 - is specified, the shape keyword computes to ‘<code 13.1119 - class=css>circle</code>’ in horizontal writing mode and ‘<code 13.1120 - class=css>sesame</code>’ in vertical writing mode. 13.1121 - 13.1122 - <p>The marks should be drawn using the element's font settings with its 13.1123 - size scaled down to 50%. However, not all fonts have all these glyphs, and 13.1124 - some fonts use inappropriate sizes for emphasis marks in these code 13.1125 - points. The UA may opt to use a font known to be good for emphasis marks, 13.1126 - or the marks may instead be synthesized by the UA. Marks must remain 13.1127 - upright in vertical writing modes: like CJK characters, they do not rotate 13.1128 - to match the writing mode. 13.1129 - 13.1130 - <p class=note> One example of good fonts for emphasis marks is Adobe's 13.1131 - opensource project, <a 13.1132 - href="http://sourceforge.net/adobe/kenten-generic/">Kenten Generic 13.1133 - OpenType Font</a>, which is specially designed for the emphasis marks. 13.1134 - 13.1135 - <p>The marks are drawn once for each <a 13.1136 - href="#character"><i>character</i></a>. However, emphasis marks are not 13.1137 - drawn for characters that are: 13.1138 - 13.1139 - <ul> 13.1140 - <li><a href="http://www.w3.org/TR/css3-text/#word-separator">Word 13.1141 - separators</a> or that belong to the Unicode separator classes (Z*). (But 13.1142 - note that emphasis marks <em>are</em> drawn for a space that combines 13.1143 - with any combining characters.) 13.1144 - 13.1145 - <li>Characters belonging to the Unicode classes for control codes and 13.1146 - unassigned characters (Cc, Cf, Cn). 13.1147 - </ul> 13.1148 - 13.1149 - <p>If emphasis marks are drawn for characters for which ruby is drawn in 13.1150 - the same position as the emphasis mark, the ruby should be stacked between 13.1151 - the emphasis marks and the base text. In this case, the position of the 13.1152 - emphasis marks for a given element should be determined as if all 13.1153 - characters have ruby boxes of the same height as the highest ruby box in 13.1154 - the element. If the UA is not capable of drawing ruby and emphasis marks 13.1155 - on the same side, the UA may hide ruby and draw only emphasis marks. 13.1156 - 13.1157 - <div class=figure> 13.1158 - <p><img 13.1159 - alt="Example of emphasis marks applied to 4 characters, and ruby to 2 of them" 13.1160 - height=50 src=text-emphasis-ruby.png width=134> 13.1161 - 13.1162 - <p class=caption>Emphasis marks applied to 4 characters, and ruby to 2 of 13.1163 - them 13.1164 - </div> 13.1165 - 13.1166 - <p class=note>A future level of CSS may define controls to specify what to 13.1167 - do when emphasis marks and ruby text coincide. 13.1168 - 13.1169 - <h4 id=text-emphasis-color-property><span class=secno>2.6.2. </span> 13.1170 - Emphasis Mark Color: the ‘<a href="#text-emphasis-color"><code 13.1171 - class=property>text-emphasis-color</code></a>’ property</h4> 13.1172 - 13.1173 - <table class=propdef> 13.1174 - <tbody> 13.1175 - <tr> 13.1176 - <th>Name: 13.1177 - 13.1178 - <td><dfn id=text-emphasis-color>text-emphasis-color</dfn> 13.1179 - 13.1180 - <tr> 13.1181 - <th><a href="#values">Value</a>: 13.1182 - 13.1183 - <td><color> 13.1184 - 13.1185 - <tr> 13.1186 - <th>Initial: 13.1187 - 13.1188 - <td><a 13.1189 - href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> 13.1190 - 13.1191 - <tr> 13.1192 - <th>Applies to: 13.1193 - 13.1194 - <td>all elements 13.1195 - 13.1196 - <tr> 13.1197 - <th>Inherited: 13.1198 - 13.1199 - <td>yes 13.1200 - 13.1201 - <tr> 13.1202 - <th>Percentages: 13.1203 - 13.1204 - <td>N/A 13.1205 - 13.1206 - <tr> 13.1207 - <th>Media: 13.1208 - 13.1209 - <td>visual 13.1210 - 13.1211 - <tr> 13.1212 - <th>Computed value: 13.1213 - 13.1214 - <td>as specified 13.1215 - </table> 13.1216 - 13.1217 - <p>This property specifies the foreground color of the emphasis marks. 13.1218 - 13.1219 - <p class=note> The correct behavior of this property depends on an 13.1220 - outstanding erratum on <a href="#CSS3COLOR" 13.1221 - rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a> that has the ‘<a 13.1222 - href="#currentcolor"><code class=css>currentColor</code></a>’ keyword 13.1223 - inherit as itself, and to take the value of the ‘<code 13.1224 - class=property>color</code>’ property as its <em>used</em> (not 13.1225 - computed) value. 13.1226 - 13.1227 - <h4 id=text-emphasis-property><span class=secno>2.6.3. </span> Emphasis 13.1228 - Mark Shorthand: the ‘<a href="#text-emphasis"><code 13.1229 - class=property>text-emphasis</code></a>’ property</h4> 13.1230 - 13.1231 - <table class=propdef> 13.1232 - <tbody> 13.1233 - <tr> 13.1234 - <th>Name: 13.1235 - 13.1236 - <td><dfn id=text-emphasis>text-emphasis</dfn> 13.1237 - 13.1238 - <tr> 13.1239 - <th><a href="#values">Value</a>: 13.1240 - 13.1241 - <td>‘<code class=css><<a 13.1242 - href="#text-emphasis-style">text-emphasis-style</a>></code>’ || 13.1243 - ‘<code class=css><<a 13.1244 - href="#text-emphasis-color">text-emphasis-color</a>></code>’ 13.1245 - 13.1246 - <tr> 13.1247 - <th>Initial: 13.1248 - 13.1249 - <td>see individual properties 13.1250 - 13.1251 - <tr> 13.1252 - <th>Applies to: 13.1253 - 13.1254 - <td>all elements 13.1255 - 13.1256 - <tr> 13.1257 - <th>Inherited: 13.1258 - 13.1259 - <td>yes 13.1260 - 13.1261 - <tr> 13.1262 - <th>Percentages: 13.1263 - 13.1264 - <td>N/A 13.1265 - 13.1266 - <tr> 13.1267 - <th>Media: 13.1268 - 13.1269 - <td>visual 13.1270 - 13.1271 - <tr> 13.1272 - <th>Computed value: 13.1273 - 13.1274 - <td>see individual properties 13.1275 - </table> 13.1276 - 13.1277 - <p>This property is a shorthand for setting ‘<a 13.1278 - href="#text-emphasis-style"><code 13.1279 - class=property>text-emphasis-style</code></a>’ and ‘<a 13.1280 - href="#text-emphasis-color"><code 13.1281 - class=property>text-emphasis-color</code></a>’ in one declaration. 13.1282 - Omitted values are set to their initial values. 13.1283 - 13.1284 - <p class=note>Note that ‘<a href="#text-emphasis-position"><code 13.1285 - class=property>text-emphasis-position</code></a>’ is not reset in this 13.1286 - shorthand. This is because typically the shape and color vary, but the 13.1287 - position is consistent for a particular language throughout the document. 13.1288 - Therefore the position should inherit independently. 13.1289 - 13.1290 - <h4 id=text-emphasis-position-property><span class=secno>2.6.4. </span> 13.1291 - Emphasis Mark Position: the ‘<a href="#text-emphasis-position"><code 13.1292 - class=property>text-emphasis-position</code></a>’ property</h4> 13.1293 - 13.1294 - <table class=propdef> 13.1295 - <tbody> 13.1296 - <tr> 13.1297 - <th>Name: 13.1298 - 13.1299 - <td><dfn id=text-emphasis-position>text-emphasis-position</dfn> 13.1300 - 13.1301 - <tr> 13.1302 - <th><a href="#values">Value</a>: 13.1303 - 13.1304 - <td>[ above | below ] && [ right | left ] 13.1305 - 13.1306 - <tr> 13.1307 - <th>Initial: 13.1308 - 13.1309 - <td>above right 13.1310 - 13.1311 - <tr> 13.1312 - <th>Applies to: 13.1313 - 13.1314 - <td>all elements 13.1315 - 13.1316 - <tr> 13.1317 - <th>Inherited: 13.1318 - 13.1319 - <td>yes 13.1320 - 13.1321 - <tr> 13.1322 - <th>Percentages: 13.1323 - 13.1324 - <td>N/A 13.1325 - 13.1326 - <tr> 13.1327 - <th>Media: 13.1328 - 13.1329 - <td>visual 13.1330 - 13.1331 - <tr> 13.1332 - <th>Computed value: 13.1333 - 13.1334 - <td>as specified 13.1335 - </table> 13.1336 - 13.1337 - <p>This property describes where emphasis marks are drawn at. The values 13.1338 - have following meanings: 13.1339 - 13.1340 - <dl> 13.1341 - <dt><dfn id=above title="text-emphasis:above">‘<code 13.1342 - class=css>above</code>’</dfn> 13.1343 - 13.1344 - <dd>Draw marks over the text in horizontal writing mode. 13.1345 - 13.1346 - <dt><dfn id=below0 title="text-emphasis:below">‘<code 13.1347 - class=css>below</code>’</dfn> 13.1348 - 13.1349 - <dd>Draw marks under the text in horizontal writing mode. 13.1350 - 13.1351 - <dt><dfn id=right0 title="text-emphasis:right">‘<code 13.1352 - class=css>right</code>’</dfn> 13.1353 - 13.1354 - <dd>Draw marks to the right of the text in vertical writing mode. 13.1355 - 13.1356 - <dt><dfn id=left0 title="text-emphasis:left">‘<code 13.1357 - class=css>left</code>’</dfn> 13.1358 - 13.1359 - <dd>Draw marks to the left of the text in vertical writing mode. 13.1360 - </dl> 13.1361 - 13.1362 - <p class=issue> Should ‘<code class=css>above</code>’/‘<a 13.1363 - href="#below"><code class=css>below</code></a>’ be ‘<code 13.1364 - class=css>over</code>’/‘<code class=css>under</code>’ to match text 13.1365 - decoration names? 13.1366 - 13.1367 - <p>Emphasis marks are drawn exactly as if each character was assigned the 13.1368 - mark as its ruby annotation text with the ruby position given by ‘<a 13.1369 - href="#text-emphasis-position"><code 13.1370 - class=property>text-emphasis-position</code></a>’ and the ruby alignment 13.1371 - as centered. 13.1372 - 13.1373 - <p>The effect of emphasis marks on the line height is the same as for ruby 13.1374 - text. 13.1375 - 13.1376 - <div class=note> 13.1377 - <p>Note, the preferred position of emphasis marks depends on the language. 13.1378 - In Japanese for example, the preferred position is ‘<code 13.1379 - class=css>above right</code>’. In Chinese, on the other hand, the 13.1380 - preferred position is ‘<code class=css>below right</code>’. The 13.1381 - informative table below summarizes the preferred emphasis mark positions 13.1382 - for Chinese and Japanese: 13.1383 - 13.1384 - <table class=data> 13.1385 - <caption>Preferred emphasis mark and ruby position</caption> 13.1386 - 13.1387 - <thead> 13.1388 - <tr> 13.1389 - <th rowspan=2 scope=col>Language 13.1390 - 13.1391 - <th colspan=2 scope=col>Preferred mark position 13.1392 - 13.1393 - <th colspan=2 rowspan=2 scope=col>Illustration 13.1394 - 13.1395 - <tr> 13.1396 - <th>Horizontal 13.1397 - 13.1398 - <th>Vertical 13.1399 - 13.1400 - <tbody> 13.1401 - <tr> 13.1402 - <td scope=row>Japanese 13.1403 - 13.1404 - <td>above 13.1405 - 13.1406 - <td>right 13.1407 - 13.1408 - <td> <img 13.1409 - alt="Emphasis marks appear above each emphasized character in horizontal Japanese text." 13.1410 - height=28 src=text-emphasis-ja.gif 13.1411 - title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text" 13.1412 - width=225> 13.1413 - 13.1414 - <td rowspan=2> <img 13.1415 - alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text." 13.1416 - height=89 src=text-emphasis-v.gif 13.1417 - title="Emphasis applied on the right of a fragment of Japanese text" 13.1418 - width=34> <!-- 13.1419 - <tr> 13.1420 - <td scope="row">Mongolian 13.1421 - <td><span class="issue">?</span> 13.1422 - <td>right 13.1423 - --> 13.1424 - 13.1425 - <tr> 13.1426 - <td scope=row>Chinese 13.1427 - 13.1428 - <td>below 13.1429 - 13.1430 - <td>right 13.1431 - 13.1432 - <td> <img 13.1433 - alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text." 13.1434 - height=28 src=text-emphasis-zh.gif 13.1435 - title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text" 13.1436 - width=133> 13.1437 - </table> 13.1438 - </div> 13.1439 - 13.1440 - <h3 id=text-shadow-property><span class=secno>2.7. </span> Text Shadows: 13.1441 - the ‘<a href="#text-shadow"><code 13.1442 - class=property>text-shadow</code></a>’ property</h3> 13.1443 - 13.1444 - <table class=propdef> 13.1445 - <tbody> 13.1446 - <tr> 13.1447 - <th>Name: 13.1448 - 13.1449 - <td><dfn id=text-shadow>text-shadow</dfn> 13.1450 - 13.1451 - <tr> 13.1452 - <th><a href="#values">Value</a>: 13.1453 - 13.1454 - <td>none | [ <length>{2,3} && <color>? ]# 13.1455 - 13.1456 - <tr> 13.1457 - <th>Initial: 13.1458 - 13.1459 - <td>none 13.1460 - 13.1461 - <tr> 13.1462 - <th>Applies to: 13.1463 - 13.1464 - <td>all elements 13.1465 - 13.1466 - <tr> 13.1467 - <th>Inherited: 13.1468 - 13.1469 - <td>yes 13.1470 - 13.1471 - <tr> 13.1472 - <th>Percentages: 13.1473 - 13.1474 - <td>N/A 13.1475 - 13.1476 - <tr> 13.1477 - <th>Media: 13.1478 - 13.1479 - <td>visual 13.1480 - 13.1481 - <tr> 13.1482 - <th>Computed value: 13.1483 - 13.1484 - <td>a color plus three absolute <length>s 13.1485 - </table> 13.1486 - 13.1487 - <p>This property accepts a comma-separated list of shadow effects to be 13.1488 - applied to the text of the element. Values are interpreted as for <a 13.1489 - href="http://www.w3.org/TR/css3-background/#the-box-shadow">‘<code 13.1490 - class=property>box-shadow</code>’</a> <a href="#CSS3BG" 13.1491 - rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. (But note that spread 13.1492 - values are not allowed.) The shadow is applied to all of the element's 13.1493 - text as well as any text decorations it specifies. 13.1494 - 13.1495 - <p>The shadow effects are applied front-to-back: the first shadow is on 13.1496 - top. The shadows may thus overlay each other, but they never overlay the 13.1497 - text itself. The shadow must be painted at a stack level between the 13.1498 - element's border and/or background, if present, and the elements text and 13.1499 - text decoration. UAs should avoid painting text shadows over text in 13.1500 - adjacent elements belonging to the same stack level and stacking context. 13.1501 - (This may mean that the exact stack level of the shadows depends on 13.1502 - whether the element has a border or background: the exact stacking 13.1503 - behavior of text shadows is thus UA-defined.) 13.1504 - 13.1505 - <p>Unlike ‘<code class=property>box-shadow</code>’, text shadows are 13.1506 - not clipped to the shadowed shape and may show through if the text is 13.1507 - partially-transparent. Like ‘<code class=property>box-shadow</code>’, 13.1508 - text shadows do not influence layout, and do not trigger scrolling or 13.1509 - increase the size of the scrollable area. 13.1510 - 13.1511 - <p class=note>The painting order of shadows defined here is the opposite of 13.1512 - that defined in the 1998 <a 13.1513 - href="http://www.w3.org/TR/1998/REC-CSS2-19980512">CSS2 13.1514 - Recommendation</a>. 13.1515 - 13.1516 - <p>The ‘<a href="#text-shadow"><code class=css>text-shadow</code></a>’ 13.1517 - property applies to both the <code>::first-line</code> and 13.1518 - <code>::first-letter</code> pseudo-elements. 13.1519 - 13.1520 - <h2 id=conformance><span class=secno>3. </span> Conformance</h2> 13.1521 - 13.1522 - <h3 id=conventions><span class=secno>3.1. </span> Document Conventions</h3> 13.1523 - 13.1524 - <p>Conformance requirements are expressed with a combination of descriptive 13.1525 - assertions and RFC 2119 terminology. The key words “MUST”, “MUST 13.1526 - NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, 13.1527 - “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the 13.1528 - normative parts of this document are to be interpreted as described in RFC 13.1529 - 2119. However, for readability, these words do not appear in all uppercase 13.1530 - letters in this specification. 13.1531 - 13.1532 - <p>All of the text of this specification is normative except sections 13.1533 - explicitly marked as non-normative, examples, and notes. <a 13.1534 - href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a> 13.1535 - 13.1536 - <p>Examples in this specification are introduced with the words “for 13.1537 - example” or are set apart from the normative text with 13.1538 - <code>class="example"</code>, like this: 13.1539 - 13.1540 - <div class=example> 13.1541 - <p>This is an example of an informative example. 13.1542 - </div> 13.1543 - 13.1544 - <p>Informative notes begin with the word “Note” and are set apart from 13.1545 - the normative text with <code>class="note"</code>, like this: 13.1546 - 13.1547 - <p class=note>Note, this is an informative note. 13.1548 - 13.1549 - <h3 id=conformance-classes><span class=secno>3.2. </span> Conformance 13.1550 - Classes</h3> 13.1551 - 13.1552 - <p>Conformance to CSS Text Level 3 is defined for three conformance 13.1553 - classes: 13.1554 - 13.1555 - <dl> 13.1556 - <dt><dfn id=style-sheet title="style sheet!!as conformance class">style 13.1557 - sheet</dfn> 13.1558 - 13.1559 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 13.1560 - style sheet</a>. 13.1561 - 13.1562 - <dt><dfn id=renderer>renderer</dfn> 13.1563 - 13.1564 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 13.1565 - that interprets the semantics of a style sheet and renders documents that 13.1566 - use them. 13.1567 - 13.1568 - <dt><dfn id=authoring-tool>authoring tool</dfn> 13.1569 - 13.1570 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 13.1571 - that writes a style sheet. 13.1572 - </dl> 13.1573 - 13.1574 - <p>A style sheet is conformant to CSS Text Level 3 if all of its 13.1575 - declarations that use properties defined in this module have values that 13.1576 - are valid according to the generic CSS grammar and the individual grammars 13.1577 - of each property as given in this module. 13.1578 - 13.1579 - <p>A renderer is conformant to CSS Text Level 3 if, in addition to 13.1580 - interpreting the style sheet as defined by the appropriate specifications, 13.1581 - it supports all the features defined by CSS Text Level 3 by parsing them 13.1582 - correctly and rendering the document accordingly. However, the inability 13.1583 - of a UA to correctly render a document due to limitations of the device 13.1584 - does not make the UA non-conformant. (For example, a UA is not required to 13.1585 - render color on a monochrome monitor.) 13.1586 - 13.1587 - <p>An authoring tool is conformant to CSS Text Level 3 if it writes style 13.1588 - sheets that are syntactically correct according to the generic CSS grammar 13.1589 - and the individual grammars of each feature in this module, and meet all 13.1590 - other conformance requirements of style sheets as described in this 13.1591 - module. 13.1592 - 13.1593 - <h3 id=partial><span class=secno>3.3. </span> Partial Implementations</h3> 13.1594 - 13.1595 - <p>So that authors can exploit the forward-compatible parsing rules to 13.1596 - assign fallback values, CSS renderers <strong>must</strong> treat as 13.1597 - invalid (and <a 13.1598 - href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as 13.1599 - appropriate</a>) any at-rules, properties, property values, keywords, and 13.1600 - other syntactic constructs for which they have no usable level of support. 13.1601 - In particular, user agents <strong>must not</strong> selectively ignore 13.1602 - unsupported component values and honor supported values in a single 13.1603 - multi-value property declaration: if any value is considered invalid (as 13.1604 - unsupported values must be), CSS requires that the entire declaration be 13.1605 - ignored. 13.1606 - 13.1607 - <h3 id=experimental><span class=secno>3.4. </span> Experimental 13.1608 - Implementations</h3> 13.1609 - 13.1610 - <p>To avoid clashes with future CSS features, the CSS2.1 specification 13.1611 - reserves a <a 13.1612 - href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 13.1613 - syntax</a> for proprietary and experimental extensions to CSS. 13.1614 - 13.1615 - <p>Prior to a specification reaching the Candidate Recommendation stage in 13.1616 - the W3C process, all implementations of a CSS feature are considered 13.1617 - experimental. The CSS Working Group recommends that implementations use a 13.1618 - vendor-prefixed syntax for such features, including those in W3C Working 13.1619 - Drafts. This avoids incompatibilities with future changes in the draft. 13.1620 - 13.1621 - <h3 id=testing><span class=secno>3.5. </span>Non-Experimental 13.1622 - Implementations</h3> 13.1623 - 13.1624 - <p>Once a specification reaches the Candidate Recommendation stage, 13.1625 - non-experimental implementations are possible, and implementors should 13.1626 - release an unprefixed implementation of any CR-level feature they can 13.1627 - demonstrate to be correctly implemented according to spec. 13.1628 - 13.1629 - <p>To establish and maintain the interoperability of CSS across 13.1630 - implementations, the CSS Working Group requests that non-experimental CSS 13.1631 - renderers submit an implementation report (and, if necessary, the 13.1632 - testcases used for that implementation report) to the W3C before releasing 13.1633 - an unprefixed implementation of any CSS features. Testcases submitted to 13.1634 - W3C are subject to review and correction by the CSS Working Group. 13.1635 - 13.1636 - <p>Further information on submitting testcases and implementation reports 13.1637 - can be found from on the CSS Working Group's website at <a 13.1638 - href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 13.1639 - Questions should be directed to the <a 13.1640 - href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> 13.1641 - mailing list. 13.1642 - 13.1643 - <h3 id=cr-exit-criteria><span class=secno>3.6. </span> CR Exit Criteria</h3> 13.1644 - 13.1645 - <p> For this specification to be advanced to Proposed Recommendation, there 13.1646 - must be at least two independent, interoperable implementations of each 13.1647 - feature. Each feature may be implemented by a different set of products, 13.1648 - there is no requirement that all features be implemented by a single 13.1649 - product. For the purposes of this criterion, we define the following 13.1650 - terms: 13.1651 - 13.1652 - <dl> 13.1653 - <dt>independent 13.1654 - 13.1655 - <dd>each implementation must be developed by a different party and cannot 13.1656 - share, reuse, or derive from code used by another qualifying 13.1657 - implementation. Sections of code that have no bearing on the 13.1658 - implementation of this specification are exempt from this requirement. 13.1659 - 13.1660 - <dt>interoperable 13.1661 - 13.1662 - <dd>passing the respective test case(s) in the official CSS test suite, 13.1663 - or, if the implementation is not a Web browser, an equivalent test. Every 13.1664 - relevant test in the test suite should have an equivalent test created if 13.1665 - such a user agent (UA) is to be used to claim interoperability. In 13.1666 - addition if such a UA is to be used to claim interoperability, then there 13.1667 - must one or more additional UAs which can also pass those equivalent 13.1668 - tests in the same way for the purpose of interoperability. The equivalent 13.1669 - tests must be made publicly available for the purposes of peer review. 13.1670 - 13.1671 - <dt>implementation 13.1672 - 13.1673 - <dd>a user agent which: 13.1674 - <ol class=inline> 13.1675 - <li>implements the specification. 13.1676 - 13.1677 - <li>is available to the general public. The implementation may be a 13.1678 - shipping product or other publicly available version (i.e., beta 13.1679 - version, preview release, or “nightly build”). Non-shipping product 13.1680 - releases must have implemented the feature(s) for a period of at least 13.1681 - one month in order to demonstrate stability. 13.1682 - 13.1683 - <li>is not experimental (i.e., a version specifically designed to pass 13.1684 - the test suite and is not intended for normal usage going forward). 13.1685 - </ol> 13.1686 - </dl> 13.1687 - 13.1688 - <p>The specification will remain Candidate Recommendation for at least six 13.1689 - months. 13.1690 - 13.1691 - <h2 class=no-num id=acknowledgements> Appendix A: Acknowledgements</h2> 13.1692 - 13.1693 - <p>This specification would not have been possible without the help from: 13.1694 - Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett, 13.1695 - Martin Dürst, Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye 13.1696 - Gittelman, Ian Hickson, Martin Heijdra, Richard Ishida, Masayasu Ishikawa, 13.1697 - Michael Jochimsen, Eric LeVine, Ambrose Li, Håkon Wium Lie, Chris Lilley, 13.1698 - Ken Lunde, Nat McCully, Shinyu Murakami, Paul Nelson, Chris Pratley, 13.1699 - Marcin Sawicki, Arnold Schrijver, Rahul Sonnad, Michel Suignard, Takao 13.1700 - Suzuki, Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi 13.1701 - Yabe and Steve Zilles. 13.1702 - 13.1703 - <h2 class=no-num id=appendix-b-references>Appendix B: References</h2> 13.1704 - 13.1705 - <h3 class=no-num id=normative-ref>Normative references</h3> 13.1706 - <!--begin-normative--> 13.1707 - <!-- Sorted by label --> 13.1708 - 13.1709 - <dl class=bibliography> 13.1710 - <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 13.1711 - <!----> 13.1712 - 13.1713 - <dt id=CSS21>[CSS21] 13.1714 - 13.1715 - <dd>Bert Bos; et al. <a 13.1716 - href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style 13.1717 - Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June 13.1718 - 2011. W3C Recommendation. URL: <a 13.1719 - href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> 13.1720 - </dd> 13.1721 - <!----> 13.1722 - 13.1723 - <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES] 13.1724 - 13.1725 - <dd>Elika J. Etemad; Koji Ishii. <a 13.1726 - href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/"><cite>CSS 13.1727 - Writing Modes Module Level 3.</cite></a> 1 May 2012. W3C Working Draft. 13.1728 - (Work in progress.) URL: <a 13.1729 - href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/</a> 13.1730 - </dd> 13.1731 - <!----> 13.1732 - 13.1733 - <dt id=CSS3BG>[CSS3BG] 13.1734 - 13.1735 - <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a 13.1736 - href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS 13.1737 - Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C 13.1738 - Candidate Recommendation. (Work in progress.) URL: <a 13.1739 - href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a> 13.1740 - </dd> 13.1741 - <!----> 13.1742 - 13.1743 - <dt id=CSS3TEXT>[CSS3TEXT] 13.1744 - 13.1745 - <dd>Elika J. Etemad; Koji Ishii. <a 13.1746 - href="http://www.w3.org/TR/2012/WD-css3-text-20120814/"><cite>CSS Text 13.1747 - Level 3.</cite></a> 14 August 2012. W3C Working Draft. (Work in 13.1748 - progress.) URL: <a 13.1749 - href="http://www.w3.org/TR/2012/WD-css3-text-20120814/">http://www.w3.org/TR/2012/WD-css3-text-20120814/</a> 13.1750 - </dd> 13.1751 - <!----> 13.1752 - 13.1753 - <dt id=RFC2119>[RFC2119] 13.1754 - 13.1755 - <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key 13.1756 - words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet 13.1757 - RFC 2119. URL: <a 13.1758 - href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a> 13.1759 - </dd> 13.1760 - <!----> 13.1761 - </dl> 13.1762 - <!--end-normative--> 13.1763 - 13.1764 - <h3 class=no-num id=informative-ref>Informative references</h3> 13.1765 - <!--begin-informative--> 13.1766 - <!-- Sorted by label --> 13.1767 - 13.1768 - <dl class=bibliography> 13.1769 - <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 13.1770 - <!----> 13.1771 - 13.1772 - <dt id=CSS3COLOR>[CSS3COLOR] 13.1773 - 13.1774 - <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a 13.1775 - href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color 13.1776 - Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a 13.1777 - href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a> 13.1778 - </dd> 13.1779 - <!----> 13.1780 - </dl> 13.1781 - <!--end-informative--> 13.1782 - 13.1783 - <h2 class=no-num id=changes>Appendix C: Changes</h2>
14.1 --- a/css3-text-decor/css-text-decor-3/Overview.src.html Mon Oct 15 14:54:31 2012 -0700 14.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 14.3 @@ -1,1228 +0,0 @@ 14.4 -<!DOCTYPE html> 14.5 -<html lang="en"> 14.6 -<head> 14.7 - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 14.8 - <title>CSS Text Decoration Module Level 3 (CSS3 Text Decoration)</title> 14.9 - <link rel=contents href="#contents"> 14.10 - <link rel=index href="#index"> 14.11 - <link rel="stylesheet" type="text/css" href="../default.css"> 14.12 - <link rel="stylesheet" type="text/css" 14.13 - href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css"> 14.14 - 14.15 -</head> 14.16 - 14.17 -<div class="head"> 14.18 -<!--logo--> 14.19 - 14.20 -<h1>CSS Text Decoration Module Level 3</h1> 14.21 - 14.22 -<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2> 14.23 -<dl> 14.24 - <dt>This version:</dt> 14.25 - <!-- 14.26 - <dd><a href="http://dev.w3.org/csswg/css3-text/">$Date$ (CVS $Revision$)</a> 14.27 - --> 14.28 - <dd><a href="http://www.w3.org/TR/[YEAR]/WD-css3-text-[CDATE]/">http://www.w3.org/TR/[YEAR]/WD-css3-text-[CDATE]/</a></dd> 14.29 - 14.30 - <dt>Latest version:</dt> 14.31 - <dd><a href="http://www.w3.org/TR/css3-text/">http://www.w3.org/TR/css3-text/</a></dd> 14.32 - <dt>Latest editor's draft:</dt> 14.33 - <dd><a href="http://dev.w3.org/csswg/css3-text/">http://dev.w3.org/csswg/css3-text/</a></dd> 14.34 - <dt>Previous version:</dt> 14.35 - <dd><a 14.36 - href="http://www.w3.org/TR/2012/WD-css3-text-20120119/">http://www.w3.org/TR/2012/WD-css3-text-20120119/</a> 14.37 - 14.38 - <dt>Issues List:</dt> 14.39 - <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/10">http://www.w3.org/Style/CSS/Tracker/products/10</a> 14.40 - 14.41 - <dt>Discussion:</dt> 14.42 - <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line “<kbd>[[SHORTNAME]] <var>… message topic …</var></kbd>” 14.43 - 14.44 - <dt>Editors:</dt> 14.45 - <dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> (Mozilla)</dd> 14.46 - <dd><a href="mailto:koji.a.ishii@mail.rakuten.com">Koji Ishii</a> (Rakuten, Inc.)</dd> 14.47 -</dl> 14.48 - 14.49 -<!--copyright--> 14.50 - 14.51 -<hr title="Separator for header"> 14.52 -</div> 14.53 - 14.54 -<h2 class="no-num no-toc" id="abstract">Abstract</h2> 14.55 - 14.56 - <p>This module contains the features of CSS relating to 14.57 - text decoration, such as underlines, text shadows, and emphasis marks. 14.58 - <a href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing 14.59 - the rendering of structured documents (such as HTML and XML) on screen, on 14.60 - paper, in speech, etc. 14.61 - 14.62 -<h2 class="no-num no-toc" id="status">Status of this document</h2> 14.63 - 14.64 - 14.65 - <p><em>This section describes the status of this document at the time of 14.66 - its publication. Other documents may supersede this document. A list of 14.67 - current W3C publications and the latest revision of this technical report 14.68 - can be found in the <a href="http://www.w3.org/TR/">W3C technical reports 14.69 - index at http://www.w3.org/TR/.</a></em> 14.70 - 14.71 - <p>Publication as a Working Draft does not imply endorsement by the W3C 14.72 - Membership. This is a draft document and may be updated, replaced or 14.73 - obsoleted by other documents at any time. It is inappropriate to cite this 14.74 - document as other than work in progress. 14.75 - 14.76 - <p>This CSS module has been produced as a combined effort of the <a 14.77 - href="http://www.w3.org/International/Activity">W3C Internationalization Activity</a>, 14.78 - and the <a href="http://www.w3.org/Style/Activity">Style Activity</a> and is maintained 14.79 - by the <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>. It also 14.80 - includes contributions made by participants in the <a 14.81 - href="http://www.w3.org/Style/XSL/Group/">XSL Working Group</a> (<a 14.82 - href="http://cgi.w3.org/MemberAccess/AccessRequest">members 14.83 - only</a>). 14.84 - 14.85 - <p>This document was produced by a group operating under the <a 14.86 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 14.87 - 2004 W3C Patent Policy</a>. W3C maintains a <a 14.88 - href="http://www.w3.org/2004/01/pp-impl/32061/status" 14.89 - rel=disclosure>public list of any patent disclosures</a> made in 14.90 - connection with the deliverables of the group; that page also includes 14.91 - instructions for disclosing a patent. An individual who has actual 14.92 - knowledge of a patent which the individual believes contains <a 14.93 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential 14.94 - Claim(s)</a> must disclose the information in accordance with <a 14.95 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 14.96 - 6 of the W3C Patent Policy</a>.</p> 14.97 - 14.98 - <p><strong>Feedback on this draft should be posted to the 14.99 - (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) 14.100 - public mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a></strong> 14.101 - (see <a href="http://www.w3.org/Mail/Request">instructions</a>) <strong>with 14.102 - <kbd>[css3-text-decor]</kbd> in the subject line.</strong> 14.103 - You are strongly encouraged to complain if you see something stupid 14.104 - in this draft. The editors will do their best to respond to all feedback.</p> 14.105 - 14.106 - <p>The following features are at risk and may be cut from the spec during 14.107 - its CR period if there are no (correct) implementations:</p> 14.108 - 14.109 - <p>The following features are at risk and may be cut from the spec during 14.110 - its CR period if there are no (correct) implementations:</p> 14.111 - <ul> 14.112 - <li>the 'text-decoration-skip' property / ''ink'' value 14.113 - </ul> 14.114 - 14.115 -<h2 class="no-num no-toc" id="contents"> 14.116 -Table of Contents</h2> 14.117 - 14.118 -<!--toc--> 14.119 - 14.120 -<h2 id="intro"> 14.121 -Introduction</h2> 14.122 - 14.123 - <p>[document here]</p> 14.124 - 14.125 - <p class="issue">This draft describes features that are specific to certain scripts. 14.126 - There is an ongoing discussion about where these features belong: in 14.127 - existing CSS properties, in new CSS properties, or perhaps in other 14.128 - specifications. 14.129 - 14.130 - 14.131 -<h3 id="placement"> 14.132 -Module Interactions</h3> 14.133 - 14.134 - <p>This module replaces and extends the text-level 14.135 - features defined in [[!CSS21]] chapter 16. 14.136 - 14.137 -<h3 id="values"> 14.138 -Values</h3> 14.139 - 14.140 - <p>This specification follows the 14.141 - <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property 14.142 - definition conventions</a> from [[!CSS21]]. Value types not defined in 14.143 - this specification are defined in CSS Level 2 Revision 1 [[!CSS21]]. 14.144 - Other CSS modules may expand the definitions of these value types: for 14.145 - example [[CSS3COLOR]], when combined with this module, expands the 14.146 - definition of the <color> value type as used in this specification.</p> 14.147 - 14.148 - <p>In addition to the property-specific values listed in their definitions, 14.149 - all properties defined in this specification also accept the 14.150 - <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> 14.151 - keyword as their property value. For readability it has not been repeated 14.152 - explicitly. 14.153 - 14.154 - <p>The <dfn>''currentcolor''</dfn> keyword here computes to itself and is 14.155 - resolved to the value of 'color' after inheritance is performed. This is 14.156 - so that the 'text-emphasis-color' by default matches the text 'color'. 14.157 - <span class="issue">CSS3 Color has not yet been errata'd to define it this way; 14.158 - currentcolor there is defined to compute to the value of 'color', 14.159 - which gives it the wrong inheritance behavior.</span> 14.160 - 14.161 -<h3 id="terms">Terminology</h3> 14.162 - 14.163 - <p>The terms <a href="http://www.w3.org/TR/css3-text/#grapheme-cluster"><dfn>character</dfn></a>, 14.164 - <a href="http://www.w3.org/TR/css3-text/#letter"><dfn>letter</dfn></a>, and 14.165 - <a href="http://www.w3.org/TR/css3-text/#content-language"><dfn>content language</dfn></a> 14.166 - as used in this specification are defined in [[!CSS3TEXT]]. 14.167 - Other terminology and concepts used in this specification are defined 14.168 - in [[!CSS21]] and [[!CSS3-WRITING-MODES]]. 14.169 - 14.170 -<h2 id="line-decoration"> 14.171 -Line Decoration: Underline, Overline, and Strike-Through</h2> 14.172 - 14.173 - <p>The following properties describe line decorations that are added 14.174 - to the content of an element. When specified on or propagated to 14.175 - an inline box, such decoration affects all the boxes generated 14.176 - by that element, and is further propagated to any in-flow block-level 14.177 - boxes that split the inline 14.178 - (see <a href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">CSS2.1 section 9.2.1.1</a>) 14.179 - When specified on or propagated to a ruby box, the decorations are 14.180 - further propagated only to the ruby base. 14.181 - When specified on or propagated to a a block container that establishes 14.182 - an inline formatting context, the decorations are propagated to an 14.183 - anonymous inline element that wraps all the in-flow inline-level children 14.184 - of the block container. For all other elements, the decorations are 14.185 - propagated to any in-flow children. 14.186 - 14.187 - <p class="note">Note that text decorations are not propagated to any 14.188 - out-of-flow descendants, nor to the contents of atomic inline-level 14.189 - descendants such as inline blocks and inline tables. 14.190 - 14.191 - <p>By default underlines, overlines, and line-throughs are applied only 14.192 - to text (including white space, letter spacing, and word spacing): 14.193 - margins, borders, and padding are skipped. Elements containing 14.194 - no text, such as images, are likewise not decorated. 14.195 - The 'text-decoration-skip' 14.196 - property can be used to modify this behavior, for example allowing 14.197 - inline replaced elements to be underlined or requiring that white 14.198 - space be skipped. 14.199 - 14.200 - <p>In determining the position and thickness of text decoration lines, 14.201 - user agents may consider the font sizes and dominant baselines of 14.202 - descendants, but for a given element's decoration must use the same 14.203 - position and thickness throughout each line box. The 14.204 - <a href="#text-decoration-color">color</a> and 14.205 - <a href="#text-decoration-style">line style</a> of decorations must 14.206 - remain the same on all decorations applied by a given element, even 14.207 - if descendant elements have different color or line style values.</p> 14.208 - 14.209 - <div class="example"> 14.210 - <p>The following figure shows the averaging for underline: 14.211 - <p><img alt="In the first rendering of the underlined text '1st a' 14.212 - with 'st' as a superscript, both the '1st' and the 'a' 14.213 - are rendered in a small font. In the second rendering, 14.214 - the 'a' is rendered in a larger font. In the third, both 14.215 - '1st' and 'a' are large." 14.216 - height="105" src="underline-averaging.gif" width="326"> 14.217 - <p>In the three fragments of underlined text, the underline is drawn 14.218 - consecutively lower and thicker as the ratio of large text to small 14.219 - text increases.</p> 14.220 - </div> 14.221 - 14.222 - <p>Relatively positioning a descendant moves all text decorations 14.223 - affecting it along with the descendant's text; it does not affect 14.224 - calculation of the decoration's initial position on that line. 14.225 - The 'visibility' property, filters, and other graphical transformations 14.226 - likewise affect text decorations as part of the text they're drawn on, 14.227 - even if the decorations were specified on an ancestor element. 14.228 - <span class="issue">Does this include 'text-shadow'? What about text-fill etc.?</span> 14.229 - 14.230 - <div class="example"> 14.231 - <p>In the following style sheet and document fragment:</p> 14.232 - <pre><code class="css"> 14.233 -<!-- --> blockquote { text-decoration: underline; color: blue; } 14.234 -<!-- --> em { display: block; } 14.235 -<!-- --> cite { color: fuchsia; } 14.236 -<!----></code></pre> 14.237 - <pre class="html"><code> 14.238 -<!-- --> <blockquote> 14.239 -<!-- --> <p> 14.240 -<!-- --> <span> 14.241 -<!-- --> Help, help! 14.242 -<!-- --> <em> I am under a hat! </em> 14.243 -<!-- --> 14.244 -<!-- --> <cite> —GwieF </cite> 14.245 -<!-- --> </span> 14.246 -<!-- --> </p> 14.247 -<!-- --> </blockquote> 14.248 -<!----></code></pre> 14.249 - <p>...the underlining for the blockquote element is propagated to an 14.250 - anonymous inline element that surrounds the span element, causing 14.251 - the text "Help, help!" to be blue, with the blue underlining from 14.252 - the anonymous inline underneath it, the color being taken from the 14.253 - blockquote element. The <code><em>text</em></code> 14.254 - in the em block is also underlined, as it is in an in-flow block to 14.255 - which the underline is propagated. The final line of text is fuchsia, 14.256 - but the underline underneath it is still the blue underline from the 14.257 - anonymous inline element.</p> 14.258 - <p><img src="underline-example.png" alt="Sample rendering of the above underline example"></p> 14.259 - <p>This diagram shows the boxes involved in the example above. The 14.260 - rounded aqua line represents the anonymous inline element wrapping 14.261 - the inline contents of the paragraph element, the rounded blue line 14.262 - represents the span element, and the orange lines represent the 14.263 - blocks.</p> 14.264 - </div> 14.265 - 14.266 -<h3 id="text-decoration-line-property"> 14.267 -Text Decoration Lines: the 'text-decoration-line' property</h3> 14.268 - 14.269 - <table class="propdef"> 14.270 - <tr> 14.271 - <th>Name: 14.272 - <td><dfn>text-decoration-line</dfn> 14.273 - <tr> 14.274 - <th><a href="#values">Value</a>: 14.275 - <td>none | [ underline || overline || line-through ] 14.276 - 14.277 - <tr> 14.278 - <th>Initial: 14.279 - <td>none 14.280 - <tr> 14.281 - <th>Applies to: 14.282 - <td>all elements 14.283 - <tr> 14.284 - <th>Inherited: 14.285 - <td>no (but see prose) 14.286 - <tr> 14.287 - <th>Percentages: 14.288 - <td>N/A 14.289 - <tr> 14.290 - <th>Media: 14.291 - <td>visual 14.292 - <tr> 14.293 - <th>Computed value: 14.294 - <td>as specified 14.295 - </table> 14.296 - 14.297 - <p>Specifies what line decorations, if any, are added to the element. 14.298 - Values have the following meanings:</p> 14.299 - 14.300 - <dl> 14.301 - <dt><dfn title="text-decoration-line:none">''none''</dfn> 14.302 - <dd>Neither produces nor inhibits text decoration. 14.303 - <dt><dfn>''underline''</dfn> 14.304 - <dd>Each line of text is underlined. 14.305 - <dt><dfn>''overline''</dfn> 14.306 - <dd>Each line of text has a line above it (i.e. on the opposite 14.307 - side from an underline). 14.308 - <dt><dfn>''line-through''</dfn> 14.309 - <dd>Each line of text has a line through the middle. 14.310 - </dl> 14.311 - 14.312 -<h3 id="text-decoration-color-property"> 14.313 -Text Decoration Color: the 'text-decoration-color' property</h3> 14.314 - 14.315 - <table class="propdef"> 14.316 - <tr> 14.317 - <th>Name: 14.318 - <td><dfn>text-decoration-color</dfn> 14.319 - <tr> 14.320 - <th><a href="#values">Value</a>: 14.321 - <td><a href="http://www.w3.org/TR/css3-color/#color0"><span class="value-inst-color"><color></span></a> 14.322 - 14.323 - <tr> 14.324 - <th>Initial: 14.325 - <td><a href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> 14.326 - <tr> 14.327 - <th>Applies to: 14.328 - <td>all elements 14.329 - <tr> 14.330 - <th>Inherited: 14.331 - <td>no 14.332 - <tr> 14.333 - <th>Percentages: 14.334 - <td>N/A 14.335 - <tr> 14.336 - <th>Media: 14.337 - <td>visual 14.338 - <tr> 14.339 - <th>Computed value: 14.340 - <td>the computed color 14.341 - </table> 14.342 - 14.343 - <p>This property specifies the color of text decoration (underlines 14.344 - overlines, and line-throughs) set on the element with 14.345 - 'text-decoration-line'.</p> 14.346 - 14.347 -<h3 id="text-decoration-style-property"> 14.348 -Text Decoration Style: the 'text-decoration-style' property</h3> 14.349 - 14.350 - <table class="propdef"> 14.351 - <tr> 14.352 - <th>Name: 14.353 - <td><dfn>text-decoration-style</dfn> 14.354 - <tr> 14.355 - <th><a href="#values">Value</a>: 14.356 - <td>solid | double | dotted | dashed | wavy 14.357 - 14.358 - <tr> 14.359 - <th>Initial: 14.360 - <td>solid 14.361 - <tr> 14.362 - <th>Applies to: 14.363 - <td>all elements 14.364 - <tr> 14.365 - <th>Inherited: 14.366 - <td>no 14.367 - <tr> 14.368 - <th>Percentages: 14.369 - <td>N/A 14.370 - <tr> 14.371 - <th>Media: 14.372 - <td>visual 14.373 - <tr> 14.374 - <th>Computed value: 14.375 - <td>as specified 14.376 - </table> 14.377 - 14.378 - <p>This property specifies the style of the line(s) drawn for 14.379 - text decoration specified on the element. Values have the 14.380 - same meaning as for the 14.381 - <a href="http://www.w3.org/TR/css3-background/#the-border-style">border-style 14.382 - properties</a> [[!CSS3BG]]. ''wavy'' indicates a wavy line.</p> 14.383 - 14.384 -<h3 id="text-decoration-property"> 14.385 -Text Decoration Shorthand: the 'text-decoration' property</h3> 14.386 - 14.387 - <table class="propdef"> 14.388 - <tr> 14.389 - <th>Name: 14.390 - <td><dfn>text-decoration</dfn> 14.391 - <tr> 14.392 - <th><a href="#values">Value</a>: 14.393 - <td><var><a href="#text-decoration-line"><text-decoration-line></a></var> || 14.394 - <var><a href="#text-decoration-style"><text-decoration-style></a></var> || 14.395 - <var><a href="#text-decoration-color"><text-decoration-color></a></var> || blink 14.396 - 14.397 - <tr> 14.398 - <th>Initial: 14.399 - <td>none 14.400 - <tr> 14.401 - <th>Applies to: 14.402 - <td>all elements 14.403 - <tr> 14.404 - <th>Inherited: 14.405 - <td>no 14.406 - <tr> 14.407 - <th>Percentages: 14.408 - <td>N/A 14.409 - <tr> 14.410 - <th>Media: 14.411 - <td>visual 14.412 - <tr> 14.413 - <th>Computed value: 14.414 - <td>as specified 14.415 - </table> 14.416 - 14.417 - <p>This property is a shorthand for setting 'text-decoration-line', 14.418 - 'text-decoration-color', and 'text-decoration-style' in one declaration. 14.419 - Omitted values are set to their initial values. A 'text-decoration' 14.420 - declaration that omits both the 'text-decoration-color' 14.421 - and 'text-decoration-style' values is backwards-compatible 14.422 - with CSS Levels 1 and 2.</p> 14.423 - 14.424 - <p>If the ''blink'' keyword is specified the text blinks 14.425 - (alternates between visible and invisible). Conforming user agents 14.426 - may simply not blink the text. Note that not blinking the text is 14.427 - one technique to satisfy 14.428 - <a href="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">checkpoint 3.3 of WAI-UAAG</a>.</p> 14.429 - 14.430 - <div class="example"> 14.431 - <p>The following example underlines unvisited links with a solid blue 14.432 - underline in CSS1 and CSS2 UAs and a navy dotted underline in CSS3 UAs.</p> 14.433 - 14.434 - <pre><code class="css"> 14.435 -<!-- -->:link { 14.436 -<!-- --> color: blue; 14.437 -<!-- --> text-decoration: underline; 14.438 -<!-- --> text-decoration: navy dotted underline; /* <a href="http://www.w3.org/TR/CSS21/syndata.html#ignore">Ignored</a> in CSS1/CSS2 UAs */ 14.439 -<!-- -->}</code></pre> 14.440 - </div> 14.441 - 14.442 -<h3 id="text-decoration-skip-property"> 14.443 -Text Decoration Line Continuity: the 'text-decoration-skip' property</h3> 14.444 - 14.445 - <table class="propdef"> 14.446 - <tr> 14.447 - <th>Name: 14.448 - <td><dfn>text-decoration-skip</dfn> 14.449 - <tr> 14.450 - <th><a href="#values">Value</a>: 14.451 - <td>none | [ objects || spaces || ink || edges ] 14.452 - 14.453 - <tr> 14.454 - <th>Initial: 14.455 - <td>objects 14.456 - <tr> 14.457 - <th>Applies to: 14.458 - <td>all elements 14.459 - <tr> 14.460 - <th>Inherited: 14.461 - <td>yes 14.462 - <tr> 14.463 - <th>Percentages: 14.464 - <td>N/A 14.465 - <tr> 14.466 - <th>Media: 14.467 - <td>visual 14.468 - <tr> 14.469 - <th>Computed value: 14.470 - <td>as specified 14.471 - </table> 14.472 - 14.473 - <p>This property specifies what parts of the element's content 14.474 - any text decoration affecting the element must skip over. It 14.475 - controls all text decoration lines drawn by the element 14.476 - and also any text decoration lines drawn by its ancestors. 14.477 - Values have the following meanings:</p> 14.478 - 14.479 - <dl> 14.480 - <dt><dfn title="text-decoration-skip:none">''none''</dfn></dt> 14.481 - <dd>Skip nothing: text-decoration is drawn for all text content 14.482 - and for inline replaced elements.</dd> 14.483 - <dt><dfn title="text-decoration-skip:objects">''objects''</dfn></dt> 14.484 - <dd>Skip this element if it is an atomic inline (such as an 14.485 - image or inline-block).</dd> 14.486 - <dt><dfn title="text-decoration-skip:spaces">''spaces''</dfn></dt> 14.487 - <dd>Skip white space: this includes regular spaces (U+0020) and 14.488 - tabs (U+0009), as well as nbsp (U+00A0), ideographic space 14.489 - (U+3000), all fixed width spaces (such as U+2000–U+200A, 14.490 - U+202F and U+205F), and any adjacent letter-spacing or 14.491 - word-spacing.</dd> 14.492 - <dt><dfn title="text-decoration-skip:ink">''ink''</dfn></dt> 14.493 - <dd>Skip over where glyphs are drawn: interrupt the decoration 14.494 - line to let text show through where the text decoration would 14.495 - otherwise cross over a glyph. The UA may also skip a small 14.496 - distance to either side of the glyph outline.</dd> 14.497 - <dt><dfn title="text-decoration-skip:edges">''edges''</dfn></dt> 14.498 - <dd>The UA should place the start and end of the line inwards from 14.499 - the content edge of the decorating element so that, e.g. two 14.500 - underlined elements side-by-side do not appear to have a single 14.501 - underline. (This is important in Chinese, where underlining is a 14.502 - form of punctuation.)</dd> 14.503 - </dl> 14.504 - 14.505 - <p class="issue">Do we need a value that <em>doesn't</em> skip 14.506 - margins and padding?</p> 14.507 - 14.508 - <p class="note">Note that this property inherits and that descendant 14.509 - elements can have a different setting.</p> 14.510 - 14.511 -<h4 id="text-underline-position-property"> 14.512 -Text Underline Position: the 'text-underline-position' property</h4> 14.513 - 14.514 - <table class="propdef"> 14.515 - <tr> 14.516 - <th>Name: 14.517 - <td><dfn>text-underline-position</dfn> 14.518 - <tr> 14.519 - <th><a href="#values">Value</a>: 14.520 - <td>auto | alphabetic | [ below || [ left | right ] ] 14.521 - 14.522 - <tr> 14.523 - <th>Initial: 14.524 - <td>auto 14.525 - <tr> 14.526 - <th>Applies to: 14.527 - <td>all elements 14.528 - <tr> 14.529 - <th>Inherited: 14.530 - <td>yes 14.531 - <tr> 14.532 - <th>Percentages: 14.533 - <td>N/A 14.534 - <tr> 14.535 - <th>Media: 14.536 - <td>visual 14.537 - <tr> 14.538 - <th>Computed value: 14.539 - <td>as specified 14.540 - </table> 14.541 - 14.542 - <p>This property sets the position of an underline specified 14.543 - on the same element: it does not affect underlines specified by 14.544 - ancestor elements. Values have the following meanings:</p> 14.545 - 14.546 - <dl> 14.547 - <dt><dfn>''auto''</dfn></dt> 14.548 - <dd>The user agent may use any algorithm to determine the 14.549 - underline's position; however it must be placed at or below 14.550 - the alphabetic baseline. 14.551 - <p class="note">It is suggested that the underline position 14.552 - be ''alphabetic'' unless it crosses either subscripted (or 14.553 - otherwise lowered) text, or it affects characters from Asian 14.554 - scripts such as Han or Tibetan, for which an alphabetic 14.555 - underline is too high: in such cases, aligning to the em box 14.556 - edge as described for ''below left'' is more appropriate. 14.557 - <dt><dfn>''alphabetic''</dfn></dt> 14.558 - <dd>The underline is positioned relative to the alphabetic baseline. In 14.559 - this case the underline is likely to cross some descenders. 14.560 - <div class="figure"> 14.561 - <p><img title="text-underline-position: alphabetic" 14.562 - alt="In a typical Latin font, the underline is positioned slightly 14.563 - below the alphabetic baseline, leaving a gap between the line 14.564 - and the bottom of most Latin letters, but crossing through 14.565 - descenders such as the stem of a 'p'." 14.566 - src="underline-position-alphabetic.png" 14.567 - > 14.568 - <p class="caption">''text-underline-position: alphabetic''</p> 14.569 - </div> 14.570 - <dt><dfn>''below''</dfn></dt> 14.571 - <dd>In horizontal writing modes, the underline is positioned 14.572 - relative to the under edge of the element's content box. 14.573 - In this case the underline usually does not cross the descenders. 14.574 - (This is sometimes called "accounting" underline.) 14.575 - If the underline affects descendants with a lower content edge, 14.576 - the user agent should shift the underline down further to the 14.577 - lowest underlined content box edge. 14.578 - The user agent may ignore elements with ''vertical-align'' 14.579 - values given as lengths, percentages, ''top'', or ''bottom'' 14.580 - when making this adjustment. 14.581 - (Note that images that are not affected by the underline per 14.582 - 'text-decoration-skip' will not affect the position of the 14.583 - underline.) 14.584 - <div class="figure"> 14.585 - <p><img title="text-underline-position: below" 14.586 - alt="In a typical Latin font, the underline is far enough 14.587 - below the text that it does not cross the bottom of a 'g'." 14.588 - src="underline-position-below.png" 14.589 - > 14.590 - <p class="caption">''text-underline-position: below''</p> 14.591 - </div> 14.592 - <div class="example"> 14.593 - <p>Because 'text-underline-position' inherits, and is not reset 14.594 - by the 'text-decoration' shorthand, the following example 14.595 - switches the document to use ''below'' underlining, which can 14.596 - be more appropriate for writing systems with long, complicated 14.597 - descenders. It is also often useful for mathematical or chemical 14.598 - texts that use many subscripts. 14.599 - <pre>:root { text-underline-position: below; }</pre> 14.600 - </div> 14.601 - <dt><dfn>''left''</dfn></dt> 14.602 - <dd>In vertical writing modes, the underline is aligned as for 14.603 - ''below'', on the left edge of the text.</dd> 14.604 - <dt><dfn>''right''</dfn></dt> 14.605 - <dd>In vertical writing modes, the underline is aligned as for 14.606 - ''below'', except it is aligned to the right edge of the text. 14.607 - If this causes the underline to be drawn on the "over" side of 14.608 - the text, then an overline also switches sides and is drawn on 14.609 - the "under" side.</dd> 14.610 - </dl> 14.611 - 14.612 - <p>If ''below'' is specified alone, ''left'' is also implied. 14.613 - If ''left'' or ''right'' is specified alone, ''below'' is also 14.614 - implied. 14.615 - 14.616 - <p class="issue"> 14.617 - Should ''above''/''below'' be ''over''/''under'' to match text decoration names? 14.618 - 14.619 - <div class="figure" id="fig-text-underline-position"> 14.620 - <table> 14.621 - <tr> 14.622 - <td> 14.623 - <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left' 14.624 - places the underline on the left side of the text." 14.625 - title="text-underline-position: left" 14.626 - src="underline-position-left.png" 14.627 - > 14.628 - 14.629 - <td> 14.630 - <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right' 14.631 - places the underline on the right side of the text." 14.632 - title="text-underline-position: right" 14.633 - src="underline-position-right.png" 14.634 - > 14.635 - 14.636 - <tr> 14.637 - <td>''left'' 14.638 - <td>''right'' 14.639 - </table> 14.640 - <p class="caption">In vertical writing modes, the 'text-underline-position' 14.641 - values ''left'' and ''right'' allow placing the underline on either 14.642 - side of the text. (In horizontal writing modes, both values are 14.643 - treated as ''below''.)</p> 14.644 - </div> 14.645 - 14.646 - <div class="example"> 14.647 - <p>The following example styles modern Chinese, Japanese, and Korean 14.648 - texts with the appropriate underline positions in both horizontal 14.649 - and vertical text: 14.650 - <pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: below right; } 14.651 -<!-- -->:root:lang(zh), [lang|=zh] { text-underline-position: below left; }</pre> 14.652 - </div> 14.653 - 14.654 - <div class="note"> 14.655 - <p>In some cases (such as in OpenType) the font format can offer 14.656 - information about the appropriate position of an underline. 14.657 - Typically this information gives the position of an ''alphabetic'' 14.658 - underline; in some cases (especially in CJK fonts), it gives 14.659 - the position of a ''below left'' underline. (In this case, 14.660 - the font's underline metrics typically touch the bottom edge 14.661 - of the em box). 14.662 - The UA is encouraged to use information (such as the underline 14.663 - thickness, or appropriate alphabetic alignment) from the font 14.664 - wherever appropriate. 14.665 - </p> 14.666 - </div> 14.667 - 14.668 -<h3 id="emphasis-marks"> 14.669 -Emphasis Marks</h3> 14.670 - 14.671 - <p>East Asian documents traditionally use small symbols next to each glyph to emphasize 14.672 - a run of text. For example:</p> 14.673 - 14.674 - <div class="figure"> 14.675 - <p> 14.676 - <img alt="Example of emphasis in Japanese appearing above the text" 14.677 - class="example" src="text-emphasis-ja.gif" height="28" width="225"></p> 14.678 - <p class="caption">Accent emphasis (shown in blue for clarity) applied to Japanese text</p> 14.679 - </div> 14.680 - 14.681 -<h4 id="text-emphasis-style-property"> 14.682 -Emphasis Mark Style: the 'text-emphasis-style' property</h4> 14.683 - 14.684 - <table class="propdef"> 14.685 - <tr> 14.686 - <th>Name: 14.687 - <td><dfn>text-emphasis-style</dfn> 14.688 - <tr> 14.689 - <th><a href="#values">Value</a>: 14.690 - <td>none | 14.691 - [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | 14.692 - <a class="noxref" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string"><span class="value-inst-string"><string></span></a> 14.693 - 14.694 - <tr> 14.695 - <th>Initial: 14.696 - <td>none 14.697 - <tr> 14.698 - <th>Applies to: 14.699 - <td>all elements 14.700 - <tr> 14.701 - <th>Inherited: 14.702 - <td>yes 14.703 - <tr> 14.704 - <th>Percentages: 14.705 - <td>N/A 14.706 - <tr> 14.707 - <th>Media: 14.708 - <td>visual 14.709 - <tr> 14.710 - <th>Computed value: 14.711 - <td>'none', a pair of keywords representing the shape and fill, or 14.712 - a string 14.713 - </table> 14.714 - 14.715 - <p>This property applies emphasis marks to the element's text. 14.716 - Values have the following meanings:</p> 14.717 - 14.718 - <dl> 14.719 - <dt><dfn title="text-emphasis:none">''none''</dfn></dt> 14.720 - <dd>No emphasis marks.</dd> 14.721 - <dt><dfn title="text-emphasis:filled">''filled''</dfn></dt> 14.722 - <dd>The shape is filled with solid color.</dd> 14.723 - <dt><dfn title="text-emphasis:open">''open''</dfn></dt> 14.724 - <dd>The shape is hollow.</dd> 14.725 - <dt><dfn title="text-emphasis:dot">''dot''</dfn></dt> 14.726 - <dd>Display small circles as marks. 14.727 - The filled dot is U+2022 '•', and the open dot is U+25E6 '◦'.</dd> 14.728 - <dt><dfn title="text-emphasis:circle">''circle''</dfn></dt> 14.729 - <dd>Display large circles as marks. 14.730 - The filled circle is U+25CF '●', and the open circle is U+25CB '○'.</dd> 14.731 - <dt><dfn title="text-emphasis:double-circle">''double-circle''</dfn></dt> 14.732 - <dd>Display double circles as marks. 14.733 - The filled double-circle is U+25C9 '◉', and the open double-circle is U+25CE '◎'.</dd> 14.734 - <dt><dfn title="text-emphasis:triangle">''triangle''</dfn></dt> 14.735 - <dd>Display triangles as marks. 14.736 - The filled triangle is U+25B2 '▲', and the open triangle is U+25B3 '△'.</dd> 14.737 - <dt><dfn title="text-emphasis:sesame">''sesame''</dfn></dt> 14.738 - <dd>Display sesames as marks. 14.739 - The filled sesame is U+FE45 '﹅', and the open sesame is U+FE46 '﹆'.</dd> 14.740 - <dt><dfn title="text-emphasis:sesame">''<var><string></var>''</dfn></dt> 14.741 - <dd>Display the given string as marks. 14.742 - Authors should not specify more than one <i>character</i> in <string>. 14.743 - The UA may truncate or ignore strings consisting of more than one grapheme cluster.</dd> 14.744 - </dl> 14.745 - 14.746 - <p>If a shape keyword is specified but neither of ''filled'' nor ''open'' is 14.747 - specified, ''filled'' is assumed. If only ''filled'' or ''open'' is specified, 14.748 - the shape keyword computes to ''circle'' in horizontal writing mode and 14.749 - ''sesame'' in vertical writing mode.</p> 14.750 - 14.751 - <p>The marks should be drawn using the element's font settings with its 14.752 - size scaled down to 50%. However, not all fonts have all these glyphs, 14.753 - and some fonts use inappropriate sizes for emphasis marks in these 14.754 - code points. The UA may opt to use a font known to be good for 14.755 - emphasis marks, or the marks may instead be synthesized by the UA. 14.756 - Marks must remain upright in vertical writing modes: like CJK 14.757 - characters, they do not rotate to match the writing mode.</p> 14.758 - 14.759 - <p class="note"> 14.760 - One example of good fonts for emphasis marks is Adobe's opensource project, 14.761 - <a href="http://sourceforge.net/adobe/kenten-generic/">Kenten Generic OpenType Font</a>, 14.762 - which is specially designed for the emphasis marks. 14.763 - </p> 14.764 - 14.765 - <p>The marks are drawn once for each <i>character</i>. However, 14.766 - emphasis marks are not drawn for characters that are:</p> 14.767 - <ul> 14.768 - <li><a href="http://www.w3.org/TR/css3-text/#word-separator">Word separators</a> or that 14.769 - belong to the Unicode separator classes (Z*). 14.770 - (But note that emphasis marks <em>are</em> drawn for a space 14.771 - that combines with any combining characters.)</li> 14.772 - <li>Characters belonging to the Unicode classes for control codes 14.773 - and unassigned characters (Cc, Cf, Cn).</li> 14.774 - </ul> 14.775 - 14.776 - <p>If emphasis marks are drawn for characters 14.777 - for which ruby is drawn in the same position as the emphasis mark, 14.778 - the ruby should be stacked between the emphasis marks and the base text. 14.779 - In this case, the position of the emphasis marks for a given element 14.780 - should be determined as if all characters have ruby boxes 14.781 - of the same height as the highest ruby box in the element. 14.782 - If the UA is not capable of drawing ruby and emphasis marks on the same side, 14.783 - the UA may hide ruby and draw only emphasis marks.</p> 14.784 - <div class="figure"> 14.785 - <p><img 14.786 - alt="Example of emphasis marks applied to 4 characters, and ruby to 2 of them" 14.787 - src="text-emphasis-ruby.png" width="134" height="50"></p> 14.788 - <p class="caption">Emphasis marks applied to 4 characters, and ruby to 2 of them</p> 14.789 - </div> 14.790 - 14.791 - <p class="note">A future level of CSS may define controls to specify 14.792 - what to do when emphasis marks and ruby text coincide.</p> 14.793 - 14.794 -<h4 id="text-emphasis-color-property"> 14.795 -Emphasis Mark Color: the 'text-emphasis-color' property</h4> 14.796 - 14.797 - <table class="propdef"> 14.798 - <tr> 14.799 - <th>Name: 14.800 - <td><dfn>text-emphasis-color</dfn> 14.801 - <tr> 14.802 - <th><a href="#values">Value</a>: 14.803 - <td><color> 14.804 - <tr> 14.805 - <th>Initial: 14.806 - <td><a href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> 14.807 - <tr> 14.808 - <th>Applies to: 14.809 - <td>all elements 14.810 - <tr> 14.811 - <th>Inherited: 14.812 - <td>yes 14.813 - <tr> 14.814 - <th>Percentages: 14.815 - <td>N/A 14.816 - <tr> 14.817 - <th>Media: 14.818 - <td>visual 14.819 - <tr> 14.820 - <th>Computed value: 14.821 - <td>as specified 14.822 - </table> 14.823 - 14.824 - <p>This property specifies the foreground color of the emphasis marks.</p> 14.825 - 14.826 - <p class="note"> 14.827 - The correct behavior of this property depends on an outstanding erratum on [[CSS3COLOR]] 14.828 - that has the ''currentColor'' keyword inherit as itself, 14.829 - and to take the value of the 'color' property as its <em>used</em> (not computed) value. 14.830 - 14.831 -<h4 id="text-emphasis-property"> 14.832 -Emphasis Mark Shorthand: the 'text-emphasis' property</h4> 14.833 - 14.834 - <table class="propdef"> 14.835 - <tr> 14.836 - <th>Name: 14.837 - <td><dfn>text-emphasis</dfn> 14.838 - <tr> 14.839 - <th><a href="#values">Value</a>: 14.840 - <td>'<<a href="#text-emphasis-style">text-emphasis-style</a>>' || '<<a href="#text-emphasis-color">text-emphasis-color</a>>' 14.841 - 14.842 - <tr> 14.843 - <th>Initial: 14.844 - <td>see individual properties 14.845 - <tr> 14.846 - <th>Applies to: 14.847 - <td>all elements 14.848 - <tr> 14.849 - <th>Inherited: 14.850 - <td>yes 14.851 - <tr> 14.852 - <th>Percentages: 14.853 - <td>N/A 14.854 - <tr> 14.855 - <th>Media: 14.856 - <td>visual 14.857 - <tr> 14.858 - <th>Computed value: 14.859 - <td>see individual properties 14.860 - </table> 14.861 - 14.862 - <p>This property is a shorthand for setting 14.863 - 'text-emphasis-style' and 'text-emphasis-color' 14.864 - in one declaration. 14.865 - Omitted values are set to their initial values.</p> 14.866 - 14.867 - <p class="note">Note that 'text-emphasis-position' is not reset in this 14.868 - shorthand. This is because typically the shape and color vary, but the 14.869 - position is consistent for a particular language throughout the document. 14.870 - Therefore the position should inherit independently.</p> 14.871 - 14.872 -<h4 id="text-emphasis-position-property"> 14.873 -Emphasis Mark Position: the 'text-emphasis-position' property</h4> 14.874 - 14.875 - <table class="propdef"> 14.876 - <tr> 14.877 - <th>Name: 14.878 - <td><dfn>text-emphasis-position</dfn> 14.879 - <tr> 14.880 - <th><a href="#values">Value</a>: 14.881 - <td>[ above | below ] && [ right | left ] 14.882 - 14.883 - <tr> 14.884 - <th>Initial: 14.885 - <td>above right 14.886 - <tr> 14.887 - <th>Applies to: 14.888 - <td>all elements 14.889 - <tr> 14.890 - <th>Inherited: 14.891 - <td>yes 14.892 - <tr> 14.893 - <th>Percentages: 14.894 - <td>N/A 14.895 - <tr> 14.896 - <th>Media: 14.897 - <td>visual 14.898 - <tr> 14.899 - <th>Computed value: 14.900 - <td>as specified 14.901 - </table> 14.902 - 14.903 - <p>This property describes where emphasis marks are drawn at. 14.904 - The values have following meanings:</p> 14.905 - 14.906 - <dl> 14.907 - <dt><dfn title="text-emphasis:above">''above''</dfn></dt> 14.908 - <dd>Draw marks over the text in horizontal writing mode.</dd> 14.909 - <dt><dfn title="text-emphasis:below">''below''</dfn></dt> 14.910 - <dd>Draw marks under the text in horizontal writing mode.</dd> 14.911 - <dt><dfn title="text-emphasis:right">''right''</dfn></dt> 14.912 - <dd>Draw marks to the right of the text in vertical writing mode.</dd> 14.913 - <dt><dfn title="text-emphasis:left">''left''</dfn></dt> 14.914 - <dd>Draw marks to the left of the text in vertical writing mode.</dd> 14.915 - </dl> 14.916 - 14.917 - <p class="issue"> 14.918 - Should ''above''/''below'' be ''over''/''under'' to match text decoration names? 14.919 - 14.920 - <p>Emphasis marks are drawn exactly as if each character was 14.921 - assigned the mark as its ruby annotation text with the ruby position 14.922 - given by 'text-emphasis-position' and the ruby alignment as centered. 14.923 - 14.924 - <p>The effect of emphasis marks on the line height is the same as for 14.925 - ruby text.</p> 14.926 - 14.927 - <div class="note"> 14.928 - <p>Note, the preferred position of emphasis marks depends on the 14.929 - language. In Japanese for example, the preferred position is 14.930 - ''above right''. In Chinese, on the other hand, the preferred 14.931 - position is ''below right''. 14.932 - The informative table below summarizes the preferred 14.933 - emphasis mark positions for Chinese and Japanese:</p> 14.934 - 14.935 - <table class="data"> 14.936 - <caption>Preferred emphasis mark and ruby position</caption> 14.937 - <thead> 14.938 - <tr> 14.939 - <th scope="col" rowspan=2>Language 14.940 - <th scope="col" colspan=2>Preferred mark position 14.941 - <th scope="col" colspan=2 rowspan=2>Illustration 14.942 - <tr> 14.943 - <th>Horizontal 14.944 - <th>Vertical 14.945 - </thead> 14.946 - <tbody> 14.947 - <tr> 14.948 - <td scope="row">Japanese 14.949 - <td>above 14.950 - <td>right 14.951 - <td> 14.952 - <img alt="Emphasis marks appear above each emphasized character in horizontal Japanese text." 14.953 - title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text" 14.954 - src="text-emphasis-ja.gif" height="28" width="225"> 14.955 - 14.956 - <td rowspan="2"> 14.957 - <img alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text." 14.958 - title="Emphasis applied on the right of a fragment of Japanese text" 14.959 - src="text-emphasis-v.gif" height="89" width="34"> 14.960 - 14.961 - <!-- 14.962 - <tr> 14.963 - <td scope="row">Mongolian 14.964 - <td><span class="issue">?</span> 14.965 - <td>right 14.966 - --> 14.967 - <tr> 14.968 - <td scope="row">Chinese 14.969 - <td>below 14.970 - <td>right 14.971 - <td> 14.972 - <img alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text." 14.973 - title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text" 14.974 - src="text-emphasis-zh.gif" height="28" width="133"> 14.975 - </tbody> 14.976 - </table> 14.977 - </div> 14.978 - 14.979 -<h3 id="text-shadow-property"> 14.980 -Text Shadows: the 'text-shadow' property</h3> 14.981 - 14.982 - <table class="propdef"> 14.983 - <tr> 14.984 - <th>Name: 14.985 - <td><dfn>text-shadow</dfn> 14.986 - <tr> 14.987 - <th><a href="#values">Value</a>: 14.988 - <td>none | [ <length>{2,3} && <color>? ]# 14.989 - <tr> 14.990 - <th>Initial: 14.991 - <td>none 14.992 - <tr> 14.993 - <th>Applies to: 14.994 - <td>all elements 14.995 - <tr> 14.996 - <th>Inherited: 14.997 - <td>yes 14.998 - <tr> 14.999 - <th>Percentages: 14.1000 - <td>N/A 14.1001 - <tr> 14.1002 - <th>Media: 14.1003 - <td>visual 14.1004 - <tr> 14.1005 - <th>Computed value: 14.1006 - <td>a color plus three absolute <length>s 14.1007 - </table> 14.1008 - 14.1009 - <p>This property accepts a comma-separated list of shadow effects to 14.1010 - be applied to the text of the element. Values are interpreted as for 14.1011 - <a href="http://www.w3.org/TR/css3-background/#the-box-shadow">'box-shadow'</a> 14.1012 - [[!CSS3BG]]. (But note that spread values are not allowed.) 14.1013 - The shadow is applied to all of the element's text as well as any 14.1014 - text decorations it specifies. 14.1015 - 14.1016 - <p>The shadow effects are applied front-to-back: the first shadow is on 14.1017 - top. The shadows may thus overlay each other, but they never overlay 14.1018 - the text itself. The shadow must be painted at a stack level between 14.1019 - the element's border and/or background, if present, and the elements 14.1020 - text and text decoration. UAs should avoid painting text shadows over 14.1021 - text in adjacent elements belonging to the same stack level and stacking 14.1022 - context. (This may mean that the exact stack level of the shadows depends 14.1023 - on whether the element has a border or background: the exact stacking 14.1024 - behavior of text shadows is thus UA-defined.)</p> 14.1025 - 14.1026 - <p>Unlike 'box-shadow', text shadows are not clipped to the shadowed 14.1027 - shape and may show through if the text is partially-transparent. 14.1028 - Like 'box-shadow', text shadows do not influence layout, and do not 14.1029 - trigger scrolling or increase the size of the scrollable area. 14.1030 - 14.1031 - <p class="note">The painting order of shadows defined here is the opposite 14.1032 - of that defined in the 1998 14.1033 - <a href="http://www.w3.org/TR/1998/REC-CSS2-19980512">CSS2 Recommendation</a>.</p> 14.1034 - 14.1035 - <p>The ''text-shadow'' property applies to both the 14.1036 - <code>::first-line</code> and <code>::first-letter</code> 14.1037 - pseudo-elements.</p> 14.1038 - 14.1039 -<h2 id="conformance"> 14.1040 -Conformance</h2> 14.1041 - 14.1042 -<h3 id="conventions"> 14.1043 -Document Conventions</h3> 14.1044 - 14.1045 - <p>Conformance requirements are expressed with a combination of 14.1046 - descriptive assertions and RFC 2119 terminology. The key words “MUST”, 14.1047 - “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, 14.1048 - “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this 14.1049 - document are to be interpreted as described in RFC 2119. 14.1050 - However, for readability, these words do not appear in all uppercase 14.1051 - letters in this specification. 14.1052 - 14.1053 - <p>All of the text of this specification is normative except sections 14.1054 - explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p> 14.1055 - 14.1056 - <p>Examples in this specification are introduced with the words “for example” 14.1057 - or are set apart from the normative text with <code>class="example"</code>, 14.1058 - like this: 14.1059 - 14.1060 - <div class="example"> 14.1061 - <p>This is an example of an informative example.</p> 14.1062 - </div> 14.1063 - 14.1064 - <p>Informative notes begin with the word “Note” and are set apart from the 14.1065 - normative text with <code>class="note"</code>, like this: 14.1066 - 14.1067 - <p class="note">Note, this is an informative note.</p> 14.1068 - 14.1069 -<h3 id="conformance-classes"> 14.1070 -Conformance Classes</h3> 14.1071 - 14.1072 - <p>Conformance to CSS Text Level 3 14.1073 - is defined for three conformance classes: 14.1074 - <dl> 14.1075 - <dt><dfn title="style sheet!!as conformance class">style sheet</dfn> 14.1076 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 14.1077 - style sheet</a>. 14.1078 - <dt><dfn>renderer</dfn></dt> 14.1079 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 14.1080 - that interprets the semantics of a style sheet and renders 14.1081 - documents that use them. 14.1082 - <dt><dfn id="authoring-tool">authoring tool</dfn></dt> 14.1083 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 14.1084 - that writes a style sheet. 14.1085 - </dl> 14.1086 - 14.1087 - <p>A style sheet is conformant to CSS Text Level 3 14.1088 - if all of its declarations that use properties defined in this module 14.1089 - have values that are valid according to the generic CSS grammar and the 14.1090 - individual grammars of each property as given in this module. 14.1091 - 14.1092 - <p>A renderer is conformant to CSS Text Level 3 14.1093 - if, in addition to interpreting the style sheet as defined by the 14.1094 - appropriate specifications, it supports all the features defined 14.1095 - by CSS Text Level 3 by parsing them correctly 14.1096 - and rendering the document accordingly. However, the inability of a 14.1097 - UA to correctly render a document due to limitations of the device 14.1098 - does not make the UA non-conformant. (For example, a UA is not 14.1099 - required to render color on a monochrome monitor.) 14.1100 - 14.1101 - <p>An authoring tool is conformant to CSS Text Level 3 14.1102 - if it writes style sheets that are syntactically correct according to the 14.1103 - generic CSS grammar and the individual grammars of each feature in 14.1104 - this module, and meet all other conformance requirements of style sheets 14.1105 - as described in this module. 14.1106 - 14.1107 -<h3 id="partial"> 14.1108 -Partial Implementations</h3> 14.1109 - 14.1110 - <p>So that authors can exploit the forward-compatible parsing rules to 14.1111 - assign fallback values, CSS renderers <strong>must</strong> 14.1112 - treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore 14.1113 - as appropriate</a>) any at-rules, properties, property values, keywords, 14.1114 - and other syntactic constructs for which they have no usable level of 14.1115 - support. In particular, user agents <strong>must not</strong> selectively 14.1116 - ignore unsupported component values and honor supported values in a single 14.1117 - multi-value property declaration: if any value is considered invalid 14.1118 - (as unsupported values must be), CSS requires that the entire declaration 14.1119 - be ignored.</p> 14.1120 - 14.1121 -<h3 id="experimental"> 14.1122 -Experimental Implementations</h3> 14.1123 - 14.1124 - <p>To avoid clashes with future CSS features, the CSS2.1 specification 14.1125 - reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 14.1126 - syntax</a> for proprietary and experimental extensions to CSS. 14.1127 - 14.1128 - <p>Prior to a specification reaching the Candidate Recommendation stage 14.1129 - in the W3C process, all implementations of a CSS feature are considered 14.1130 - experimental. The CSS Working Group recommends that implementations 14.1131 - use a vendor-prefixed syntax for such features, including those in 14.1132 - W3C Working Drafts. This avoids incompatibilities with future changes 14.1133 - in the draft. 14.1134 - </p> 14.1135 - 14.1136 -<h3 id="testing">Non-Experimental Implementations</h3> 14.1137 - 14.1138 - <p>Once a specification reaches the Candidate Recommendation stage, 14.1139 - non-experimental implementations are possible, and implementors should 14.1140 - release an unprefixed implementation of any CR-level feature they 14.1141 - can demonstrate to be correctly implemented according to spec. 14.1142 - 14.1143 - <p>To establish and maintain the interoperability of CSS across 14.1144 - implementations, the CSS Working Group requests that non-experimental 14.1145 - CSS renderers submit an implementation report (and, if necessary, the 14.1146 - testcases used for that implementation report) to the W3C before 14.1147 - releasing an unprefixed implementation of any CSS features. Testcases 14.1148 - submitted to W3C are subject to review and correction by the CSS 14.1149 - Working Group. 14.1150 - 14.1151 - <p>Further information on submitting testcases and implementation reports 14.1152 - can be found from on the CSS Working Group's website at 14.1153 - <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 14.1154 - Questions should be directed to the 14.1155 - <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> 14.1156 - mailing list. 14.1157 - 14.1158 -<h3 id="cr-exit-criteria"> 14.1159 -CR Exit Criteria</h3> 14.1160 - 14.1161 - <p> 14.1162 - For this specification to be advanced to Proposed Recommendation, 14.1163 - there must be at least two independent, interoperable implementations 14.1164 - of each feature. Each feature may be implemented by a different set of 14.1165 - products, there is no requirement that all features be implemented by 14.1166 - a single product. For the purposes of this criterion, we define the 14.1167 - following terms: 14.1168 - 14.1169 - <dl> 14.1170 - <dt>independent <dd>each implementation must be developed by a 14.1171 - different party and cannot share, reuse, or derive from code 14.1172 - used by another qualifying implementation. Sections of code that 14.1173 - have no bearing on the implementation of this specification are 14.1174 - exempt from this requirement. 14.1175 - 14.1176 - <dt>interoperable <dd>passing the respective test case(s) in the 14.1177 - official CSS test suite, or, if the implementation is not a Web 14.1178 - browser, an equivalent test. Every relevant test in the test 14.1179 - suite should have an equivalent test created if such a user 14.1180 - agent (UA) is to be used to claim interoperability. In addition 14.1181 - if such a UA is to be used to claim interoperability, then there 14.1182 - must one or more additional UAs which can also pass those 14.1183 - equivalent tests in the same way for the purpose of 14.1184 - interoperability. The equivalent tests must be made publicly 14.1185 - available for the purposes of peer review. 14.1186 - 14.1187 - <dt>implementation <dd>a user agent which: 14.1188 - 14.1189 - <ol class=inline> 14.1190 - <li>implements the specification. 14.1191 - 14.1192 - <li>is available to the general public. The implementation may 14.1193 - be a shipping product or other publicly available version 14.1194 - (i.e., beta version, preview release, or “nightly build”). 14.1195 - Non-shipping product releases must have implemented the 14.1196 - feature(s) for a period of at least one month in order to 14.1197 - demonstrate stability. 14.1198 - 14.1199 - <li>is not experimental (i.e., a version specifically designed 14.1200 - to pass the test suite and is not intended for normal usage 14.1201 - going forward). 14.1202 - </ol> 14.1203 - </dl> 14.1204 - 14.1205 - <p>The specification will remain Candidate Recommendation for at least 14.1206 - six months. 14.1207 - 14.1208 -<h2 class="no-num" id="acknowledgements"> 14.1209 - Appendix A: Acknowledgements</h2> 14.1210 - 14.1211 - <p>This specification would not have been possible without the help from: 14.1212 - Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett, 14.1213 - Martin Dürst, 14.1214 - Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye Gittelman, Ian 14.1215 - Hickson, Martin Heijdra, Richard Ishida, Masayasu Ishikawa, 14.1216 - Michael Jochimsen, Eric LeVine, Ambrose Li, Håkon Wium Lie, Chris Lilley, 14.1217 - Ken Lunde, Nat McCully, Shinyu Murakami, Paul Nelson, Chris Pratley, Marcin Sawicki, 14.1218 - Arnold Schrijver, Rahul Sonnad, Michel Suignard, Takao Suzuki, 14.1219 - Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi Yabe 14.1220 - and Steve Zilles.</p> 14.1221 - 14.1222 -<h2 class="no-num">Appendix B: References</h2> 14.1223 - 14.1224 -<h3 class="no-num" id="normative-ref">Normative references</h3> 14.1225 -<!--normative--> 14.1226 - 14.1227 -<h3 class="no-num" id="informative-ref">Informative references</h3> 14.1228 -<!--informative--> 14.1229 - 14.1230 -<h2 class="no-num" id="changes">Appendix C: 14.1231 -Changes</h2>
15.1 Binary file css3-text-decor/css-text-decor-3/text-emphasis-ja.gif has changed
16.1 Binary file css3-text-decor/css-text-decor-3/text-emphasis-ruby.png has changed
17.1 Binary file css3-text-decor/css-text-decor-3/text-emphasis-v.gif has changed
18.1 Binary file css3-text-decor/css-text-decor-3/text-emphasis-zh.gif has changed
19.1 Binary file css3-text-decor/css-text-decor-3/underline-averaging.gif has changed
20.1 Binary file css3-text-decor/css-text-decor-3/underline-example.png has changed
21.1 Binary file css3-text-decor/css-text-decor-3/underline-position-alphabetic.png has changed
22.1 Binary file css3-text-decor/css-text-decor-3/underline-position-below.png has changed
23.1 Binary file css3-text-decor/css-text-decor-3/underline-position-left.png has changed
24.1 Binary file css3-text-decor/css-text-decor-3/underline-position-right.png has changed