Mon, 15 Oct 2012 14:54:31 -0700
Move css3-text-decor to css-text-decor-3.
1.1 --- a/.htaccess Mon Oct 15 14:39:29 2012 -0700 1.2 +++ b/.htaccess Mon Oct 15 14:54:31 2012 -0700 1.3 @@ -12,7 +12,9 @@ 1.4 # Versioning System Switchover 1.5 1.6 #XXX insert rules here 1.7 +Redirect /csswg/css3-text-decor http://dev.w3.org/csswg/css-text-decor-3 1.8 1.9 # Unversioned URLs 1.10 1.11 Redirect /csswg/css-counter-styles http://dev.w3.org/csswg/css-counter-styles-3 1.12 +Redirect /csswg/css-text-decor http://dev.w3.org/csswg/css-text-decor-3 1.13 \ No newline at end of file
2.1 --- a/css3-text-decor/Overview.html Mon Oct 15 14:39:29 2012 -0700 2.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 2.3 @@ -1,1780 +0,0 @@ 2.4 -<!DOCTYPE html> 2.5 - 2.6 -<html lang=en> 2.7 - <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ "> 2.8 - <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 2.9 - <title>CSS Text Decoration Module Level 3 (CSS3 Text Decoration)</title> 2.10 - 2.11 - <link href="http://purl.org/dc/terms/" rel=schema.DC> 2.12 - <meta content="CSS Text Decoration Module Level 3 (CSS3 Text Decoration)" 2.13 - name=DC.title> 2.14 - <meta content=text name=DC.type> 2.15 - <meta content=2012-09-23 name=DC.issued> 2.16 - <meta content="Elika J. Etemad" name=DC.creator> 2.17 - <meta content="Koji Ishii" name=DC.creator> 2.18 - <meta content=W3C name=DC.publisher> 2.19 - <meta content="http://www.w3.org/TR/2012/WD-css3-text-20120923/" 2.20 - name=DC.identifier> 2.21 - <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 2.22 - rel=DC.rights> 2.23 - <link href="#contents" rel=contents> 2.24 - <link href="#index" rel=index> 2.25 - <link href="../default.css" rel=stylesheet type="text/css"> 2.26 - <link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel=stylesheet 2.27 - type="text/css"> 2.28 - 2.29 - <body> 2.30 - <div class=head> <!--begin-logo--> 2.31 - <p><a href="http://www.w3.org/"><img alt=W3C height=48 2.32 - src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--> 2.33 - 2.34 - <h1>CSS Text Decoration Module Level 3</h1> 2.35 - 2.36 - <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 23 2.37 - September 2012</h2> 2.38 - 2.39 - <dl> 2.40 - <dt>This version:</dt> 2.41 - <!-- 2.42 - <dd><a href="http://dev.w3.org/csswg/css3-text/">$Date$ (CVS $Revision$)</a> 2.43 - --> 2.44 - 2.45 - <dd><a 2.46 - href="http://www.w3.org/TR/2012/WD-css3-text-20120923/">http://www.w3.org/TR/2012/WD-css3-text-20120923/</a> 2.47 - 2.48 - <dt>Latest version: 2.49 - 2.50 - <dd><a 2.51 - href="http://www.w3.org/TR/css3-text/">http://www.w3.org/TR/css3-text/</a> 2.52 - 2.53 - <dt>Latest editor's draft: 2.54 - 2.55 - <dd><a 2.56 - href="http://dev.w3.org/csswg/css3-text/">http://dev.w3.org/csswg/css3-text/</a> 2.57 - 2.58 - <dt>Previous version: 2.59 - 2.60 - <dd><a 2.61 - href="http://www.w3.org/TR/2012/WD-css3-text-20120119/">http://www.w3.org/TR/2012/WD-css3-text-20120119/</a> 2.62 - 2.63 - <dt>Issues List: 2.64 - 2.65 - <dd><a 2.66 - href="http://www.w3.org/Style/CSS/Tracker/products/10">http://www.w3.org/Style/CSS/Tracker/products/10</a> 2.67 - 2.68 - <dt>Discussion: 2.69 - 2.70 - <dd><a 2.71 - href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> 2.72 - with subject line “<kbd>[css3-text] <var>… message topic 2.73 - …</var></kbd>” 2.74 - 2.75 - <dt>Editors: 2.76 - 2.77 - <dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> 2.78 - (Mozilla) 2.79 - 2.80 - <dd><a href="mailto:koji.a.ishii@mail.rakuten.com">Koji Ishii</a> 2.81 - (Rakuten, Inc.) 2.82 - </dl> 2.83 - <!--begin-copyright--> 2.84 - <p class=copyright><a 2.85 - href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 2.86 - rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr 2.87 - title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a 2.88 - href="http://www.csail.mit.edu/"><abbr 2.89 - title="Massachusetts Institute of Technology">MIT</abbr></a>, <a 2.90 - href="http://www.ercim.eu/"><abbr 2.91 - title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, 2.92 - <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a 2.93 - href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, 2.94 - <a 2.95 - href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> 2.96 - and <a 2.97 - href="http://www.w3.org/Consortium/Legal/copyright-documents">document 2.98 - use</a> rules apply.</p> 2.99 - <!--end-copyright--> 2.100 - <hr title="Separator for header"> 2.101 - </div> 2.102 - 2.103 - <h2 class="no-num no-toc" id=abstract>Abstract</h2> 2.104 - 2.105 - <p>This module contains the features of CSS relating to text decoration, 2.106 - such as underlines, text shadows, and emphasis marks. <a 2.107 - href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing the 2.108 - rendering of structured documents (such as HTML and XML) on screen, on 2.109 - paper, in speech, etc. 2.110 - 2.111 - <h2 class="no-num no-toc" id=status>Status of this document</h2> 2.112 - 2.113 - <p><em>This section describes the status of this document at the time of 2.114 - its publication. Other documents may supersede this document. A list of 2.115 - current W3C publications and the latest revision of this technical report 2.116 - can be found in the <a href="http://www.w3.org/TR/">W3C technical reports 2.117 - index at http://www.w3.org/TR/.</a></em> 2.118 - 2.119 - <p>Publication as a Working Draft does not imply endorsement by the W3C 2.120 - Membership. This is a draft document and may be updated, replaced or 2.121 - obsoleted by other documents at any time. It is inappropriate to cite this 2.122 - document as other than work in progress. 2.123 - 2.124 - <p>This CSS module has been produced as a combined effort of the <a 2.125 - href="http://www.w3.org/International/Activity">W3C Internationalization 2.126 - Activity</a>, and the <a href="http://www.w3.org/Style/Activity">Style 2.127 - Activity</a> and is maintained by the <a 2.128 - href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>. It also 2.129 - includes contributions made by participants in the <a 2.130 - href="http://www.w3.org/Style/XSL/Group/">XSL Working Group</a> (<a 2.131 - href="http://cgi.w3.org/MemberAccess/AccessRequest">members only</a>). 2.132 - 2.133 - <p>This document was produced by a group operating under the <a 2.134 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2.135 - 2004 W3C Patent Policy</a>. W3C maintains a <a 2.136 - href="http://www.w3.org/2004/01/pp-impl/32061/status" 2.137 - rel=disclosure>public list of any patent disclosures</a> made in 2.138 - connection with the deliverables of the group; that page also includes 2.139 - instructions for disclosing a patent. An individual who has actual 2.140 - knowledge of a patent which the individual believes contains <a 2.141 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential 2.142 - Claim(s)</a> must disclose the information in accordance with <a 2.143 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 2.144 - 6 of the W3C Patent Policy</a>. 2.145 - 2.146 - <p><strong>Feedback on this draft should be posted to the (<a 2.147 - href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public 2.148 - mailing list <a 2.149 - href="mailto:www-style@w3.org">www-style@w3.org</a></strong> (see <a 2.150 - href="http://www.w3.org/Mail/Request">instructions</a>) <strong>with 2.151 - <kbd>[css3-text-decor]</kbd> in the subject line.</strong> You are 2.152 - strongly encouraged to complain if you see something stupid in this draft. 2.153 - The editors will do their best to respond to all feedback. 2.154 - 2.155 - <p>The following features are at risk and may be cut from the spec during 2.156 - its CR period if there are no (correct) implementations: 2.157 - 2.158 - <p>The following features are at risk and may be cut from the spec during 2.159 - its CR period if there are no (correct) implementations: 2.160 - 2.161 - <ul> 2.162 - <li>the ‘<a href="#text-decoration-skip"><code 2.163 - class=property>text-decoration-skip</code></a>’ property / ‘<code 2.164 - class=css>ink</code>’ value 2.165 - </ul> 2.166 - 2.167 - <h2 class="no-num no-toc" id=contents> Table of Contents</h2> 2.168 - <!--begin-toc--> 2.169 - 2.170 - <ul class=toc> 2.171 - <li><a href="#intro"><span class=secno>1. </span> Introduction</a> 2.172 - <ul class=toc> 2.173 - <li><a href="#placement"><span class=secno>1.1. </span> Module 2.174 - Interactions</a> 2.175 - 2.176 - <li><a href="#values"><span class=secno>1.2. </span> Values</a> 2.177 - 2.178 - <li><a href="#terms"><span class=secno>1.3. </span>Terminology</a> 2.179 - </ul> 2.180 - 2.181 - <li><a href="#line-decoration"><span class=secno>2. </span> Line 2.182 - Decoration: Underline, Overline, and Strike-Through</a> 2.183 - <ul class=toc> 2.184 - <li><a href="#text-decoration-line-property"><span class=secno>2.1. 2.185 - </span> Text Decoration Lines: the ‘<code 2.186 - class=property>text-decoration-line</code>’ property</a> 2.187 - 2.188 - <li><a href="#text-decoration-color-property"><span class=secno>2.2. 2.189 - </span> Text Decoration Color: the ‘<code 2.190 - class=property>text-decoration-color</code>’ property</a> 2.191 - 2.192 - <li><a href="#text-decoration-style-property"><span class=secno>2.3. 2.193 - </span> Text Decoration Style: the ‘<code 2.194 - class=property>text-decoration-style</code>’ property</a> 2.195 - 2.196 - <li><a href="#text-decoration-property"><span class=secno>2.4. </span> 2.197 - Text Decoration Shorthand: the ‘<code 2.198 - class=property>text-decoration</code>’ property</a> 2.199 - 2.200 - <li><a href="#text-decoration-skip-property"><span class=secno>2.5. 2.201 - </span> Text Decoration Line Continuity: the ‘<code 2.202 - class=property>text-decoration-skip</code>’ property</a> 2.203 - <ul class=toc> 2.204 - <li><a href="#text-underline-position-property"><span 2.205 - class=secno>2.5.1. </span> Text Underline Position: the ‘<code 2.206 - class=property>text-underline-position</code>’ property</a> 2.207 - </ul> 2.208 - 2.209 - <li><a href="#emphasis-marks"><span class=secno>2.6. </span> Emphasis 2.210 - Marks</a> 2.211 - <ul class=toc> 2.212 - <li><a href="#text-emphasis-style-property"><span class=secno>2.6.1. 2.213 - </span> Emphasis Mark Style: the ‘<code 2.214 - class=property>text-emphasis-style</code>’ property</a> 2.215 - 2.216 - <li><a href="#text-emphasis-color-property"><span class=secno>2.6.2. 2.217 - </span> Emphasis Mark Color: the ‘<code 2.218 - class=property>text-emphasis-color</code>’ property</a> 2.219 - 2.220 - <li><a href="#text-emphasis-property"><span class=secno>2.6.3. </span> 2.221 - Emphasis Mark Shorthand: the ‘<code 2.222 - class=property>text-emphasis</code>’ property</a> 2.223 - 2.224 - <li><a href="#text-emphasis-position-property"><span 2.225 - class=secno>2.6.4. </span> Emphasis Mark Position: the ‘<code 2.226 - class=property>text-emphasis-position</code>’ property</a> 2.227 - </ul> 2.228 - 2.229 - <li><a href="#text-shadow-property"><span class=secno>2.7. </span> Text 2.230 - Shadows: the ‘<code class=property>text-shadow</code>’ property</a> 2.231 - </ul> 2.232 - 2.233 - <li><a href="#conformance"><span class=secno>3. </span> Conformance</a> 2.234 - <ul class=toc> 2.235 - <li><a href="#conventions"><span class=secno>3.1. </span> Document 2.236 - Conventions</a> 2.237 - 2.238 - <li><a href="#conformance-classes"><span class=secno>3.2. </span> 2.239 - Conformance Classes</a> 2.240 - 2.241 - <li><a href="#partial"><span class=secno>3.3. </span> Partial 2.242 - Implementations</a> 2.243 - 2.244 - <li><a href="#experimental"><span class=secno>3.4. </span> Experimental 2.245 - Implementations</a> 2.246 - 2.247 - <li><a href="#testing"><span class=secno>3.5. </span>Non-Experimental 2.248 - Implementations</a> 2.249 - 2.250 - <li><a href="#cr-exit-criteria"><span class=secno>3.6. </span> CR Exit 2.251 - Criteria</a> 2.252 - </ul> 2.253 - 2.254 - <li class=no-num><a href="#acknowledgements"> Appendix A: 2.255 - Acknowledgements</a> 2.256 - 2.257 - <li class=no-num><a href="#appendix-b-references">Appendix B: 2.258 - References</a> 2.259 - <ul class=toc> 2.260 - <li class=no-num><a href="#normative-ref">Normative references</a> 2.261 - 2.262 - <li class=no-num><a href="#informative-ref">Informative references</a> 2.263 - </ul> 2.264 - 2.265 - <li class=no-num><a href="#changes">Appendix C: Changes</a> 2.266 - </ul> 2.267 - <!--end-toc--> 2.268 - 2.269 - <h2 id=intro><span class=secno>1. </span> Introduction</h2> 2.270 - 2.271 - <p>[document here] 2.272 - 2.273 - <p class=issue>This draft describes features that are specific to certain 2.274 - scripts. There is an ongoing discussion about where these features belong: 2.275 - in existing CSS properties, in new CSS properties, or perhaps in other 2.276 - specifications. 2.277 - 2.278 - <h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3> 2.279 - 2.280 - <p>This module replaces and extends the text-level features defined in <a 2.281 - href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> chapter 16. 2.282 - 2.283 - <h3 id=values><span class=secno>1.2. </span> Values</h3> 2.284 - 2.285 - <p>This specification follows the <a 2.286 - href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property 2.287 - definition conventions</a> from <a href="#CSS21" 2.288 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in 2.289 - this specification are defined in CSS Level 2 Revision 1 <a 2.290 - href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS 2.291 - modules may expand the definitions of these value types: for example <a 2.292 - href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>, 2.293 - when combined with this module, expands the definition of the 2.294 - <color> value type as used in this specification. 2.295 - 2.296 - <p>In addition to the property-specific values listed in their definitions, 2.297 - all properties defined in this specification also accept the <a 2.298 - href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> 2.299 - keyword as their property value. For readability it has not been repeated 2.300 - explicitly. 2.301 - 2.302 - <p>The <dfn id=currentcolor>‘<code class=css>currentcolor</code>’</dfn> 2.303 - keyword here computes to itself and is resolved to the value of ‘<code 2.304 - class=property>color</code>’ after inheritance is performed. This is so 2.305 - that the ‘<a href="#text-emphasis-color"><code 2.306 - class=property>text-emphasis-color</code></a>’ by default matches the 2.307 - text ‘<code class=property>color</code>’. <span class=issue>CSS3 Color 2.308 - has not yet been errata'd to define it this way; currentcolor there is 2.309 - defined to compute to the value of ‘<code 2.310 - class=property>color</code>’, which gives it the wrong inheritance 2.311 - behavior.</span> 2.312 - 2.313 - <h3 id=terms><span class=secno>1.3. </span>Terminology</h3> 2.314 - 2.315 - <p>The terms <a 2.316 - href="http://www.w3.org/TR/css3-text/#grapheme-cluster"><dfn 2.317 - id=character>character</dfn></a>, <a 2.318 - href="http://www.w3.org/TR/css3-text/#letter"><dfn 2.319 - id=letter>letter</dfn></a>, and <a 2.320 - href="http://www.w3.org/TR/css3-text/#content-language"><dfn 2.321 - id=content-language>content language</dfn></a> as used in this 2.322 - specification are defined in <a href="#CSS3TEXT" 2.323 - rel=biblioentry>[CSS3TEXT]<!--{{!CSS3TEXT}}--></a>. Other terminology and 2.324 - concepts used in this specification are defined in <a href="#CSS21" 2.325 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> and <a 2.326 - href="#CSS3-WRITING-MODES" 2.327 - rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>. 2.328 - 2.329 - <h2 id=line-decoration><span class=secno>2. </span> Line Decoration: 2.330 - Underline, Overline, and Strike-Through</h2> 2.331 - 2.332 - <p>The following properties describe line decorations that are added to the 2.333 - content of an element. When specified on or propagated to an inline box, 2.334 - such decoration affects all the boxes generated by that element, and is 2.335 - further propagated to any in-flow block-level boxes that split the inline 2.336 - (see <a 2.337 - href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">CSS2.1 2.338 - section 9.2.1.1</a>) When specified on or propagated to a ruby box, the 2.339 - decorations are further propagated only to the ruby base. When specified 2.340 - on or propagated to a a block container that establishes an inline 2.341 - formatting context, the decorations are propagated to an anonymous inline 2.342 - element that wraps all the in-flow inline-level children of the block 2.343 - container. For all other elements, the decorations are propagated to any 2.344 - in-flow children. 2.345 - 2.346 - <p class=note>Note that text decorations are not propagated to any 2.347 - out-of-flow descendants, nor to the contents of atomic inline-level 2.348 - descendants such as inline blocks and inline tables. 2.349 - 2.350 - <p>By default underlines, overlines, and line-throughs are applied only to 2.351 - text (including white space, letter spacing, and word spacing): margins, 2.352 - borders, and padding are skipped. Elements containing no text, such as 2.353 - images, are likewise not decorated. The ‘<a 2.354 - href="#text-decoration-skip"><code 2.355 - class=property>text-decoration-skip</code></a>’ property can be used to 2.356 - modify this behavior, for example allowing inline replaced elements to be 2.357 - underlined or requiring that white space be skipped. 2.358 - 2.359 - <p>In determining the position and thickness of text decoration lines, user 2.360 - agents may consider the font sizes and dominant baselines of descendants, 2.361 - but for a given element's decoration must use the same position and 2.362 - thickness throughout each line box. The <a 2.363 - href="#text-decoration-color">color</a> and <a 2.364 - href="#text-decoration-style">line style</a> of decorations must remain 2.365 - the same on all decorations applied by a given element, even if descendant 2.366 - elements have different color or line style values. 2.367 - 2.368 - <div class=example> 2.369 - <p>The following figure shows the averaging for underline: 2.370 - 2.371 - <p><img 2.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." 2.373 - height=105 src=underline-averaging.gif width=326> 2.374 - 2.375 - <p>In the three fragments of underlined text, the underline is drawn 2.376 - consecutively lower and thicker as the ratio of large text to small text 2.377 - increases. 2.378 - </div> 2.379 - 2.380 - <p>Relatively positioning a descendant moves all text decorations affecting 2.381 - it along with the descendant's text; it does not affect calculation of the 2.382 - decoration's initial position on that line. The ‘<code 2.383 - class=property>visibility</code>’ property, filters, and other graphical 2.384 - transformations likewise affect text decorations as part of the text 2.385 - they're drawn on, even if the decorations were specified on an ancestor 2.386 - element. <span class=issue>Does this include ‘<a 2.387 - href="#text-shadow"><code class=property>text-shadow</code></a>’? What 2.388 - about text-fill etc.?</span> 2.389 - 2.390 - <div class=example> 2.391 - <p>In the following style sheet and document fragment: 2.392 - 2.393 - <pre><code class=css> 2.394 -<!-- --> blockquote { text-decoration: underline; color: blue; } 2.395 -<!-- --> em { display: block; } 2.396 -<!-- --> cite { color: fuchsia; } 2.397 -<!----></code></pre> 2.398 - 2.399 - <pre class=html><code> 2.400 -<!-- --> <blockquote> 2.401 -<!-- --> <p> 2.402 -<!-- --> <span> 2.403 -<!-- --> Help, help! 2.404 -<!-- --> <em> I am under a hat! </em> 2.405 -<!-- --> 2.406 -<!-- --> <cite> —GwieF </cite> 2.407 -<!-- --> </span> 2.408 -<!-- --> </p> 2.409 -<!-- --> </blockquote> 2.410 -<!----></code></pre> 2.411 - 2.412 - <p>...the underlining for the blockquote element is propagated to an 2.413 - anonymous inline element that surrounds the span element, causing the 2.414 - text "Help, help!" to be blue, with the blue underlining from the 2.415 - anonymous inline underneath it, the color being taken from the blockquote 2.416 - element. The <code><em>text</em></code> in the em block is 2.417 - also underlined, as it is in an in-flow block to which the underline is 2.418 - propagated. The final line of text is fuchsia, but the underline 2.419 - underneath it is still the blue underline from the anonymous inline 2.420 - element. 2.421 - 2.422 - <p><img alt="Sample rendering of the above underline example" 2.423 - src=underline-example.png> 2.424 - 2.425 - <p>This diagram shows the boxes involved in the example above. The rounded 2.426 - aqua line represents the anonymous inline element wrapping the inline 2.427 - contents of the paragraph element, the rounded blue line represents the 2.428 - span element, and the orange lines represent the blocks. 2.429 - </div> 2.430 - 2.431 - <h3 id=text-decoration-line-property><span class=secno>2.1. </span> Text 2.432 - Decoration Lines: the ‘<a href="#text-decoration-line"><code 2.433 - class=property>text-decoration-line</code></a>’ property</h3> 2.434 - 2.435 - <table class=propdef> 2.436 - <tbody> 2.437 - <tr> 2.438 - <th>Name: 2.439 - 2.440 - <td><dfn id=text-decoration-line>text-decoration-line</dfn> 2.441 - 2.442 - <tr> 2.443 - <th><a href="#values">Value</a>: 2.444 - 2.445 - <td>none | [ underline || overline || line-through ] 2.446 - 2.447 - <tr> 2.448 - <th>Initial: 2.449 - 2.450 - <td>none 2.451 - 2.452 - <tr> 2.453 - <th>Applies to: 2.454 - 2.455 - <td>all elements 2.456 - 2.457 - <tr> 2.458 - <th>Inherited: 2.459 - 2.460 - <td>no (but see prose) 2.461 - 2.462 - <tr> 2.463 - <th>Percentages: 2.464 - 2.465 - <td>N/A 2.466 - 2.467 - <tr> 2.468 - <th>Media: 2.469 - 2.470 - <td>visual 2.471 - 2.472 - <tr> 2.473 - <th>Computed value: 2.474 - 2.475 - <td>as specified 2.476 - </table> 2.477 - 2.478 - <p>Specifies what line decorations, if any, are added to the element. 2.479 - Values have the following meanings: 2.480 - 2.481 - <dl> 2.482 - <dt><dfn id=none title="text-decoration-line:none">‘<code 2.483 - class=css>none</code>’</dfn> 2.484 - 2.485 - <dd>Neither produces nor inhibits text decoration. 2.486 - 2.487 - <dt><dfn id=underline>‘<code class=css>underline</code>’</dfn> 2.488 - 2.489 - <dd>Each line of text is underlined. 2.490 - 2.491 - <dt><dfn id=overline>‘<code class=css>overline</code>’</dfn> 2.492 - 2.493 - <dd>Each line of text has a line above it (i.e. on the opposite side from 2.494 - an underline). 2.495 - 2.496 - <dt><dfn id=line-through>‘<code class=css>line-through</code>’</dfn> 2.497 - 2.498 - <dd>Each line of text has a line through the middle. 2.499 - </dl> 2.500 - 2.501 - <h3 id=text-decoration-color-property><span class=secno>2.2. </span> Text 2.502 - Decoration Color: the ‘<a href="#text-decoration-color"><code 2.503 - class=property>text-decoration-color</code></a>’ property</h3> 2.504 - 2.505 - <table class=propdef> 2.506 - <tbody> 2.507 - <tr> 2.508 - <th>Name: 2.509 - 2.510 - <td><dfn id=text-decoration-color>text-decoration-color</dfn> 2.511 - 2.512 - <tr> 2.513 - <th><a href="#values">Value</a>: 2.514 - 2.515 - <td><a href="http://www.w3.org/TR/css3-color/#color0"><span 2.516 - class=value-inst-color><color></span></a> 2.517 - 2.518 - <tr> 2.519 - <th>Initial: 2.520 - 2.521 - <td><a 2.522 - href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> 2.523 - 2.524 - <tr> 2.525 - <th>Applies to: 2.526 - 2.527 - <td>all elements 2.528 - 2.529 - <tr> 2.530 - <th>Inherited: 2.531 - 2.532 - <td>no 2.533 - 2.534 - <tr> 2.535 - <th>Percentages: 2.536 - 2.537 - <td>N/A 2.538 - 2.539 - <tr> 2.540 - <th>Media: 2.541 - 2.542 - <td>visual 2.543 - 2.544 - <tr> 2.545 - <th>Computed value: 2.546 - 2.547 - <td>the computed color 2.548 - </table> 2.549 - 2.550 - <p>This property specifies the color of text decoration (underlines 2.551 - overlines, and line-throughs) set on the element with ‘<a 2.552 - href="#text-decoration-line"><code 2.553 - class=property>text-decoration-line</code></a>’. 2.554 - 2.555 - <h3 id=text-decoration-style-property><span class=secno>2.3. </span> Text 2.556 - Decoration Style: the ‘<a href="#text-decoration-style"><code 2.557 - class=property>text-decoration-style</code></a>’ property</h3> 2.558 - 2.559 - <table class=propdef> 2.560 - <tbody> 2.561 - <tr> 2.562 - <th>Name: 2.563 - 2.564 - <td><dfn id=text-decoration-style>text-decoration-style</dfn> 2.565 - 2.566 - <tr> 2.567 - <th><a href="#values">Value</a>: 2.568 - 2.569 - <td>solid | double | dotted | dashed | wavy 2.570 - 2.571 - <tr> 2.572 - <th>Initial: 2.573 - 2.574 - <td>solid 2.575 - 2.576 - <tr> 2.577 - <th>Applies to: 2.578 - 2.579 - <td>all elements 2.580 - 2.581 - <tr> 2.582 - <th>Inherited: 2.583 - 2.584 - <td>no 2.585 - 2.586 - <tr> 2.587 - <th>Percentages: 2.588 - 2.589 - <td>N/A 2.590 - 2.591 - <tr> 2.592 - <th>Media: 2.593 - 2.594 - <td>visual 2.595 - 2.596 - <tr> 2.597 - <th>Computed value: 2.598 - 2.599 - <td>as specified 2.600 - </table> 2.601 - 2.602 - <p>This property specifies the style of the line(s) drawn for text 2.603 - decoration specified on the element. Values have the same meaning as for 2.604 - the <a 2.605 - href="http://www.w3.org/TR/css3-background/#the-border-style">border-style 2.606 - properties</a> <a href="#CSS3BG" 2.607 - rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. ‘<code 2.608 - class=css>wavy</code>’ indicates a wavy line. 2.609 - 2.610 - <h3 id=text-decoration-property><span class=secno>2.4. </span> Text 2.611 - Decoration Shorthand: the ‘<a href="#text-decoration"><code 2.612 - class=property>text-decoration</code></a>’ property</h3> 2.613 - 2.614 - <table class=propdef> 2.615 - <tbody> 2.616 - <tr> 2.617 - <th>Name: 2.618 - 2.619 - <td><dfn id=text-decoration>text-decoration</dfn> 2.620 - 2.621 - <tr> 2.622 - <th><a href="#values">Value</a>: 2.623 - 2.624 - <td><var><a 2.625 - href="#text-decoration-line"><text-decoration-line></a></var> || 2.626 - <var><a 2.627 - href="#text-decoration-style"><text-decoration-style></a></var> 2.628 - || <var><a 2.629 - href="#text-decoration-color"><text-decoration-color></a></var> 2.630 - || blink 2.631 - 2.632 - <tr> 2.633 - <th>Initial: 2.634 - 2.635 - <td>none 2.636 - 2.637 - <tr> 2.638 - <th>Applies to: 2.639 - 2.640 - <td>all elements 2.641 - 2.642 - <tr> 2.643 - <th>Inherited: 2.644 - 2.645 - <td>no 2.646 - 2.647 - <tr> 2.648 - <th>Percentages: 2.649 - 2.650 - <td>N/A 2.651 - 2.652 - <tr> 2.653 - <th>Media: 2.654 - 2.655 - <td>visual 2.656 - 2.657 - <tr> 2.658 - <th>Computed value: 2.659 - 2.660 - <td>as specified 2.661 - </table> 2.662 - 2.663 - <p>This property is a shorthand for setting ‘<a 2.664 - href="#text-decoration-line"><code 2.665 - class=property>text-decoration-line</code></a>’, ‘<a 2.666 - href="#text-decoration-color"><code 2.667 - class=property>text-decoration-color</code></a>’, and ‘<a 2.668 - href="#text-decoration-style"><code 2.669 - class=property>text-decoration-style</code></a>’ in one declaration. 2.670 - Omitted values are set to their initial values. A ‘<a 2.671 - href="#text-decoration"><code class=property>text-decoration</code></a>’ 2.672 - declaration that omits both the ‘<a href="#text-decoration-color"><code 2.673 - class=property>text-decoration-color</code></a>’ and ‘<a 2.674 - href="#text-decoration-style"><code 2.675 - class=property>text-decoration-style</code></a>’ values is 2.676 - backwards-compatible with CSS Levels 1 and 2. 2.677 - 2.678 - <p>If the ‘<code class=css>blink</code>’ keyword is specified the text 2.679 - blinks (alternates between visible and invisible). Conforming user agents 2.680 - may simply not blink the text. Note that not blinking the text is one 2.681 - technique to satisfy <a 2.682 - href="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">checkpoint 2.683 - 3.3 of WAI-UAAG</a>. 2.684 - 2.685 - <div class=example> 2.686 - <p>The following example underlines unvisited links with a solid blue 2.687 - underline in CSS1 and CSS2 UAs and a navy dotted underline in CSS3 UAs. 2.688 - 2.689 - <pre><code class=css> 2.690 -<!-- -->:link { 2.691 -<!-- --> color: blue; 2.692 -<!-- --> text-decoration: underline; 2.693 -<!-- --> text-decoration: navy dotted underline; /* <a 2.694 - href="http://www.w3.org/TR/CSS21/syndata.html#ignore">Ignored</a> in CSS1/CSS2 UAs */ 2.695 -<!-- -->}</code></pre> 2.696 - </div> 2.697 - 2.698 - <h3 id=text-decoration-skip-property><span class=secno>2.5. </span> Text 2.699 - Decoration Line Continuity: the ‘<a href="#text-decoration-skip"><code 2.700 - class=property>text-decoration-skip</code></a>’ property</h3> 2.701 - 2.702 - <table class=propdef> 2.703 - <tbody> 2.704 - <tr> 2.705 - <th>Name: 2.706 - 2.707 - <td><dfn id=text-decoration-skip>text-decoration-skip</dfn> 2.708 - 2.709 - <tr> 2.710 - <th><a href="#values">Value</a>: 2.711 - 2.712 - <td>none | [ objects || spaces || ink || edges ] 2.713 - 2.714 - <tr> 2.715 - <th>Initial: 2.716 - 2.717 - <td>objects 2.718 - 2.719 - <tr> 2.720 - <th>Applies to: 2.721 - 2.722 - <td>all elements 2.723 - 2.724 - <tr> 2.725 - <th>Inherited: 2.726 - 2.727 - <td>yes 2.728 - 2.729 - <tr> 2.730 - <th>Percentages: 2.731 - 2.732 - <td>N/A 2.733 - 2.734 - <tr> 2.735 - <th>Media: 2.736 - 2.737 - <td>visual 2.738 - 2.739 - <tr> 2.740 - <th>Computed value: 2.741 - 2.742 - <td>as specified 2.743 - </table> 2.744 - 2.745 - <p>This property specifies what parts of the element's content any text 2.746 - decoration affecting the element must skip over. It controls all text 2.747 - decoration lines drawn by the element and also any text decoration lines 2.748 - drawn by its ancestors. Values have the following meanings: 2.749 - 2.750 - <dl> 2.751 - <dt><dfn id=none0 title="text-decoration-skip:none">‘<code 2.752 - class=css>none</code>’</dfn> 2.753 - 2.754 - <dd>Skip nothing: text-decoration is drawn for all text content and for 2.755 - inline replaced elements. 2.756 - 2.757 - <dt><dfn id=objects title="text-decoration-skip:objects">‘<code 2.758 - class=css>objects</code>’</dfn> 2.759 - 2.760 - <dd>Skip this element if it is an atomic inline (such as an image or 2.761 - inline-block). 2.762 - 2.763 - <dt><dfn id=spaces title="text-decoration-skip:spaces">‘<code 2.764 - class=css>spaces</code>’</dfn> 2.765 - 2.766 - <dd>Skip white space: this includes regular spaces (U+0020) and tabs 2.767 - (U+0009), as well as nbsp (U+00A0), ideographic space (U+3000), all fixed 2.768 - width spaces (such as U+2000–U+200A, U+202F and U+205F), and any 2.769 - adjacent letter-spacing or word-spacing. 2.770 - 2.771 - <dt><dfn id=ink title="text-decoration-skip:ink">‘<code 2.772 - class=css>ink</code>’</dfn> 2.773 - 2.774 - <dd>Skip over where glyphs are drawn: interrupt the decoration line to let 2.775 - text show through where the text decoration would otherwise cross over a 2.776 - glyph. The UA may also skip a small distance to either side of the glyph 2.777 - outline. 2.778 - 2.779 - <dt><dfn id=edges title="text-decoration-skip:edges">‘<code 2.780 - class=css>edges</code>’</dfn> 2.781 - 2.782 - <dd>The UA should place the start and end of the line inwards from the 2.783 - content edge of the decorating element so that, e.g. two underlined 2.784 - elements side-by-side do not appear to have a single underline. (This is 2.785 - important in Chinese, where underlining is a form of punctuation.) 2.786 - </dl> 2.787 - 2.788 - <p class=issue>Do we need a value that <em>doesn't</em> skip margins and 2.789 - padding? 2.790 - 2.791 - <p class=note>Note that this property inherits and that descendant elements 2.792 - can have a different setting. 2.793 - 2.794 - <h4 id=text-underline-position-property><span class=secno>2.5.1. </span> 2.795 - Text Underline Position: the ‘<a href="#text-underline-position"><code 2.796 - class=property>text-underline-position</code></a>’ property</h4> 2.797 - 2.798 - <table class=propdef> 2.799 - <tbody> 2.800 - <tr> 2.801 - <th>Name: 2.802 - 2.803 - <td><dfn id=text-underline-position>text-underline-position</dfn> 2.804 - 2.805 - <tr> 2.806 - <th><a href="#values">Value</a>: 2.807 - 2.808 - <td>auto | alphabetic | [ below || [ left | right ] ] 2.809 - 2.810 - <tr> 2.811 - <th>Initial: 2.812 - 2.813 - <td>auto 2.814 - 2.815 - <tr> 2.816 - <th>Applies to: 2.817 - 2.818 - <td>all elements 2.819 - 2.820 - <tr> 2.821 - <th>Inherited: 2.822 - 2.823 - <td>yes 2.824 - 2.825 - <tr> 2.826 - <th>Percentages: 2.827 - 2.828 - <td>N/A 2.829 - 2.830 - <tr> 2.831 - <th>Media: 2.832 - 2.833 - <td>visual 2.834 - 2.835 - <tr> 2.836 - <th>Computed value: 2.837 - 2.838 - <td>as specified 2.839 - </table> 2.840 - 2.841 - <p>This property sets the position of an underline specified on the same 2.842 - element: it does not affect underlines specified by ancestor elements. 2.843 - Values have the following meanings: 2.844 - 2.845 - <dl> 2.846 - <dt><dfn id=auto>‘<code class=css>auto</code>’</dfn> 2.847 - 2.848 - <dd>The user agent may use any algorithm to determine the underline's 2.849 - position; however it must be placed at or below the alphabetic baseline. 2.850 - <p class=note>It is suggested that the underline position be ‘<a 2.851 - href="#alphabetic"><code class=css>alphabetic</code></a>’ unless it 2.852 - crosses either subscripted (or otherwise lowered) text, or it affects 2.853 - characters from Asian scripts such as Han or Tibetan, for which an 2.854 - alphabetic underline is too high: in such cases, aligning to the em box 2.855 - edge as described for ‘<code class=css>below left</code>’ is more 2.856 - appropriate. 2.857 - 2.858 - <dt><dfn id=alphabetic>‘<code class=css>alphabetic</code>’</dfn> 2.859 - 2.860 - <dd>The underline is positioned relative to the alphabetic baseline. In 2.861 - this case the underline is likely to cross some descenders. 2.862 - <div class=figure> 2.863 - <p><img 2.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'." 2.865 - src=underline-position-alphabetic.png 2.866 - title="text-underline-position: alphabetic"> 2.867 - 2.868 - <p class=caption>‘<code class=css>text-underline-position: 2.869 - alphabetic</code>’ 2.870 - </div> 2.871 - 2.872 - <dt><dfn id=below>‘<code class=css>below</code>’</dfn> 2.873 - 2.874 - <dd>In horizontal writing modes, the underline is positioned relative to 2.875 - the under edge of the element's content box. In this case the underline 2.876 - usually does not cross the descenders. (This is sometimes called 2.877 - "accounting" underline.) If the underline affects descendants with a 2.878 - lower content edge, the user agent should shift the underline down 2.879 - further to the lowest underlined content box edge. The user agent may 2.880 - ignore elements with ‘<code class=css>vertical-align</code>’ values 2.881 - given as lengths, percentages, ‘<code class=css>top</code>’, or 2.882 - ‘<code class=css>bottom</code>’ when making this adjustment. (Note 2.883 - that images that are not affected by the underline per ‘<a 2.884 - href="#text-decoration-skip"><code 2.885 - class=property>text-decoration-skip</code></a>’ will not affect the 2.886 - position of the underline.) 2.887 - <div class=figure> 2.888 - <p><img 2.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'." 2.890 - src=underline-position-below.png 2.891 - title="text-underline-position: below"> 2.892 - 2.893 - <p class=caption>‘<code class=css>text-underline-position: 2.894 - below</code>’ 2.895 - </div> 2.896 - 2.897 - <div class=example> 2.898 - <p>Because ‘<a href="#text-underline-position"><code 2.899 - class=property>text-underline-position</code></a>’ inherits, and is 2.900 - not reset by the ‘<a href="#text-decoration"><code 2.901 - class=property>text-decoration</code></a>’ shorthand, the following 2.902 - example switches the document to use ‘<a href="#below"><code 2.903 - class=css>below</code></a>’ underlining, which can be more 2.904 - appropriate for writing systems with long, complicated descenders. It 2.905 - is also often useful for mathematical or chemical texts that use many 2.906 - subscripts. 2.907 - 2.908 - <pre>:root { text-underline-position: below; }</pre> 2.909 - </div> 2.910 - 2.911 - <dt><dfn id=left>‘<code class=css>left</code>’</dfn> 2.912 - 2.913 - <dd>In vertical writing modes, the underline is aligned as for ‘<a 2.914 - href="#below"><code class=css>below</code></a>’, on the left edge of 2.915 - the text. 2.916 - 2.917 - <dt><dfn id=right>‘<code class=css>right</code>’</dfn> 2.918 - 2.919 - <dd>In vertical writing modes, the underline is aligned as for ‘<a 2.920 - href="#below"><code class=css>below</code></a>’, except it is aligned 2.921 - to the right edge of the text. If this causes the underline to be drawn 2.922 - on the "over" side of the text, then an overline also switches sides and 2.923 - is drawn on the "under" side. 2.924 - </dl> 2.925 - 2.926 - <p>If ‘<a href="#below"><code class=css>below</code></a>’ is specified 2.927 - alone, ‘<a href="#left"><code class=css>left</code></a>’ is also 2.928 - implied. If ‘<a href="#left"><code class=css>left</code></a>’ or ‘<a 2.929 - href="#right"><code class=css>right</code></a>’ is specified alone, 2.930 - ‘<a href="#below"><code class=css>below</code></a>’ is also implied. 2.931 - 2.932 - <p class=issue> Should ‘<code class=css>above</code>’/‘<a 2.933 - href="#below"><code class=css>below</code></a>’ be ‘<code 2.934 - class=css>over</code>’/‘<code class=css>under</code>’ to match text 2.935 - decoration names? 2.936 - 2.937 - <div class=figure id=fig-text-underline-position> 2.938 - <table> 2.939 - <tbody> 2.940 - <tr> 2.941 - <td> <img 2.942 - alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left' places the underline on the left side of the text." 2.943 - src=underline-position-left.png title="text-underline-position: left"> 2.944 - 2.945 - <td> <img 2.946 - alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right' places the underline on the right side of the text." 2.947 - src=underline-position-right.png 2.948 - title="text-underline-position: right"> 2.949 - 2.950 - <tr> 2.951 - <td>‘<a href="#left"><code class=css>left</code></a>’ 2.952 - 2.953 - <td>‘<a href="#right"><code class=css>right</code></a>’ 2.954 - </table> 2.955 - 2.956 - <p class=caption>In vertical writing modes, the ‘<a 2.957 - href="#text-underline-position"><code 2.958 - class=property>text-underline-position</code></a>’ values ‘<a 2.959 - href="#left"><code class=css>left</code></a>’ and ‘<a 2.960 - href="#right"><code class=css>right</code></a>’ allow placing the 2.961 - underline on either side of the text. (In horizontal writing modes, both 2.962 - values are treated as ‘<a href="#below"><code 2.963 - class=css>below</code></a>’.) 2.964 - </div> 2.965 - 2.966 - <div class=example> 2.967 - <p>The following example styles modern Chinese, Japanese, and Korean texts 2.968 - with the appropriate underline positions in both horizontal and vertical 2.969 - text: 2.970 - 2.971 - <pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: below right; } 2.972 -<!-- -->:root:lang(zh), [lang|=zh] { text-underline-position: below left; }</pre> 2.973 - </div> 2.974 - 2.975 - <div class=note> 2.976 - <p>In some cases (such as in OpenType) the font format can offer 2.977 - information about the appropriate position of an underline. Typically 2.978 - this information gives the position of an ‘<a href="#alphabetic"><code 2.979 - class=css>alphabetic</code></a>’ underline; in some cases (especially 2.980 - in CJK fonts), it gives the position of a ‘<code class=css>below 2.981 - left</code>’ underline. (In this case, the font's underline metrics 2.982 - typically touch the bottom edge of the em box). The UA is encouraged to 2.983 - use information (such as the underline thickness, or appropriate 2.984 - alphabetic alignment) from the font wherever appropriate. 2.985 - </div> 2.986 - 2.987 - <h3 id=emphasis-marks><span class=secno>2.6. </span> Emphasis Marks</h3> 2.988 - 2.989 - <p>East Asian documents traditionally use small symbols next to each glyph 2.990 - to emphasize a run of text. For example: 2.991 - 2.992 - <div class=figure> 2.993 - <p> <img alt="Example of emphasis in Japanese appearing above the text" 2.994 - class=example height=28 src=text-emphasis-ja.gif width=225> 2.995 - 2.996 - <p class=caption>Accent emphasis (shown in blue for clarity) applied to 2.997 - Japanese text 2.998 - </div> 2.999 - 2.1000 - <h4 id=text-emphasis-style-property><span class=secno>2.6.1. </span> 2.1001 - Emphasis Mark Style: the ‘<a href="#text-emphasis-style"><code 2.1002 - class=property>text-emphasis-style</code></a>’ property</h4> 2.1003 - 2.1004 - <table class=propdef> 2.1005 - <tbody> 2.1006 - <tr> 2.1007 - <th>Name: 2.1008 - 2.1009 - <td><dfn id=text-emphasis-style>text-emphasis-style</dfn> 2.1010 - 2.1011 - <tr> 2.1012 - <th><a href="#values">Value</a>: 2.1013 - 2.1014 - <td>none | [ [ filled | open ] || [ dot | circle | double-circle | 2.1015 - triangle | sesame ] ] | <a class=noxref 2.1016 - href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string"><span 2.1017 - class=value-inst-string><string></span></a> 2.1018 - 2.1019 - <tr> 2.1020 - <th>Initial: 2.1021 - 2.1022 - <td>none 2.1023 - 2.1024 - <tr> 2.1025 - <th>Applies to: 2.1026 - 2.1027 - <td>all elements 2.1028 - 2.1029 - <tr> 2.1030 - <th>Inherited: 2.1031 - 2.1032 - <td>yes 2.1033 - 2.1034 - <tr> 2.1035 - <th>Percentages: 2.1036 - 2.1037 - <td>N/A 2.1038 - 2.1039 - <tr> 2.1040 - <th>Media: 2.1041 - 2.1042 - <td>visual 2.1043 - 2.1044 - <tr> 2.1045 - <th>Computed value: 2.1046 - 2.1047 - <td>‘<code class=property>none</code>’, a pair of keywords 2.1048 - representing the shape and fill, or a string 2.1049 - </table> 2.1050 - 2.1051 - <p>This property applies emphasis marks to the element's text. Values have 2.1052 - the following meanings: 2.1053 - 2.1054 - <dl> 2.1055 - <dt><dfn id=none1 title="text-emphasis:none">‘<code 2.1056 - class=css>none</code>’</dfn> 2.1057 - 2.1058 - <dd>No emphasis marks. 2.1059 - 2.1060 - <dt><dfn id=filled title="text-emphasis:filled">‘<code 2.1061 - class=css>filled</code>’</dfn> 2.1062 - 2.1063 - <dd>The shape is filled with solid color. 2.1064 - 2.1065 - <dt><dfn id=open title="text-emphasis:open">‘<code 2.1066 - class=css>open</code>’</dfn> 2.1067 - 2.1068 - <dd>The shape is hollow. 2.1069 - 2.1070 - <dt><dfn id=dot title="text-emphasis:dot">‘<code 2.1071 - class=css>dot</code>’</dfn> 2.1072 - 2.1073 - <dd>Display small circles as marks. The filled dot is U+2022 ‘<code 2.1074 - class=css>•</code>’, and the open dot is U+25E6 ‘<code 2.1075 - class=css>◦</code>’. 2.1076 - 2.1077 - <dt><dfn id=circle title="text-emphasis:circle">‘<code 2.1078 - class=css>circle</code>’</dfn> 2.1079 - 2.1080 - <dd>Display large circles as marks. The filled circle is U+25CF ‘<code 2.1081 - class=css>●</code>’, and the open circle is U+25CB ‘<code 2.1082 - class=css>○</code>’. 2.1083 - 2.1084 - <dt><dfn id=double-circle title="text-emphasis:double-circle">‘<code 2.1085 - class=css>double-circle</code>’</dfn> 2.1086 - 2.1087 - <dd>Display double circles as marks. The filled double-circle is U+25C9 2.1088 - ‘<code class=css>◉</code>’, and the open double-circle is U+25CE 2.1089 - ‘<code class=css>◎</code>’. 2.1090 - 2.1091 - <dt><dfn id=triangle title="text-emphasis:triangle">‘<code 2.1092 - class=css>triangle</code>’</dfn> 2.1093 - 2.1094 - <dd>Display triangles as marks. The filled triangle is U+25B2 ‘<code 2.1095 - class=css>▲</code>’, and the open triangle is U+25B3 ‘<code 2.1096 - class=css>△</code>’. 2.1097 - 2.1098 - <dt><dfn id=sesame title="text-emphasis:sesame">‘<code 2.1099 - class=css>sesame</code>’</dfn> 2.1100 - 2.1101 - <dd>Display sesames as marks. The filled sesame is U+FE45 ‘<code 2.1102 - class=css>﹅</code>’, and the open sesame is U+FE46 ‘<code 2.1103 - class=css>﹆</code>’. 2.1104 - 2.1105 - <dt><dfn id=ltstringgt title="text-emphasis:sesame">‘<code 2.1106 - class=css><var><string></var></code>’</dfn> 2.1107 - 2.1108 - <dd>Display the given string as marks. Authors should not specify more 2.1109 - than one <a href="#character"><i>character</i></a> in <string>. The 2.1110 - UA may truncate or ignore strings consisting of more than one grapheme 2.1111 - cluster. 2.1112 - </dl> 2.1113 - 2.1114 - <p>If a shape keyword is specified but neither of ‘<code 2.1115 - class=css>filled</code>’ nor ‘<code class=css>open</code>’ is 2.1116 - specified, ‘<code class=css>filled</code>’ is assumed. If only 2.1117 - ‘<code class=css>filled</code>’ or ‘<code class=css>open</code>’ 2.1118 - is specified, the shape keyword computes to ‘<code 2.1119 - class=css>circle</code>’ in horizontal writing mode and ‘<code 2.1120 - class=css>sesame</code>’ in vertical writing mode. 2.1121 - 2.1122 - <p>The marks should be drawn using the element's font settings with its 2.1123 - size scaled down to 50%. However, not all fonts have all these glyphs, and 2.1124 - some fonts use inappropriate sizes for emphasis marks in these code 2.1125 - points. The UA may opt to use a font known to be good for emphasis marks, 2.1126 - or the marks may instead be synthesized by the UA. Marks must remain 2.1127 - upright in vertical writing modes: like CJK characters, they do not rotate 2.1128 - to match the writing mode. 2.1129 - 2.1130 - <p class=note> One example of good fonts for emphasis marks is Adobe's 2.1131 - opensource project, <a 2.1132 - href="http://sourceforge.net/adobe/kenten-generic/">Kenten Generic 2.1133 - OpenType Font</a>, which is specially designed for the emphasis marks. 2.1134 - 2.1135 - <p>The marks are drawn once for each <a 2.1136 - href="#character"><i>character</i></a>. However, emphasis marks are not 2.1137 - drawn for characters that are: 2.1138 - 2.1139 - <ul> 2.1140 - <li><a href="http://www.w3.org/TR/css3-text/#word-separator">Word 2.1141 - separators</a> or that belong to the Unicode separator classes (Z*). (But 2.1142 - note that emphasis marks <em>are</em> drawn for a space that combines 2.1143 - with any combining characters.) 2.1144 - 2.1145 - <li>Characters belonging to the Unicode classes for control codes and 2.1146 - unassigned characters (Cc, Cf, Cn). 2.1147 - </ul> 2.1148 - 2.1149 - <p>If emphasis marks are drawn for characters for which ruby is drawn in 2.1150 - the same position as the emphasis mark, the ruby should be stacked between 2.1151 - the emphasis marks and the base text. In this case, the position of the 2.1152 - emphasis marks for a given element should be determined as if all 2.1153 - characters have ruby boxes of the same height as the highest ruby box in 2.1154 - the element. If the UA is not capable of drawing ruby and emphasis marks 2.1155 - on the same side, the UA may hide ruby and draw only emphasis marks. 2.1156 - 2.1157 - <div class=figure> 2.1158 - <p><img 2.1159 - alt="Example of emphasis marks applied to 4 characters, and ruby to 2 of them" 2.1160 - height=50 src=text-emphasis-ruby.png width=134> 2.1161 - 2.1162 - <p class=caption>Emphasis marks applied to 4 characters, and ruby to 2 of 2.1163 - them 2.1164 - </div> 2.1165 - 2.1166 - <p class=note>A future level of CSS may define controls to specify what to 2.1167 - do when emphasis marks and ruby text coincide. 2.1168 - 2.1169 - <h4 id=text-emphasis-color-property><span class=secno>2.6.2. </span> 2.1170 - Emphasis Mark Color: the ‘<a href="#text-emphasis-color"><code 2.1171 - class=property>text-emphasis-color</code></a>’ property</h4> 2.1172 - 2.1173 - <table class=propdef> 2.1174 - <tbody> 2.1175 - <tr> 2.1176 - <th>Name: 2.1177 - 2.1178 - <td><dfn id=text-emphasis-color>text-emphasis-color</dfn> 2.1179 - 2.1180 - <tr> 2.1181 - <th><a href="#values">Value</a>: 2.1182 - 2.1183 - <td><color> 2.1184 - 2.1185 - <tr> 2.1186 - <th>Initial: 2.1187 - 2.1188 - <td><a 2.1189 - href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> 2.1190 - 2.1191 - <tr> 2.1192 - <th>Applies to: 2.1193 - 2.1194 - <td>all elements 2.1195 - 2.1196 - <tr> 2.1197 - <th>Inherited: 2.1198 - 2.1199 - <td>yes 2.1200 - 2.1201 - <tr> 2.1202 - <th>Percentages: 2.1203 - 2.1204 - <td>N/A 2.1205 - 2.1206 - <tr> 2.1207 - <th>Media: 2.1208 - 2.1209 - <td>visual 2.1210 - 2.1211 - <tr> 2.1212 - <th>Computed value: 2.1213 - 2.1214 - <td>as specified 2.1215 - </table> 2.1216 - 2.1217 - <p>This property specifies the foreground color of the emphasis marks. 2.1218 - 2.1219 - <p class=note> The correct behavior of this property depends on an 2.1220 - outstanding erratum on <a href="#CSS3COLOR" 2.1221 - rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a> that has the ‘<a 2.1222 - href="#currentcolor"><code class=css>currentColor</code></a>’ keyword 2.1223 - inherit as itself, and to take the value of the ‘<code 2.1224 - class=property>color</code>’ property as its <em>used</em> (not 2.1225 - computed) value. 2.1226 - 2.1227 - <h4 id=text-emphasis-property><span class=secno>2.6.3. </span> Emphasis 2.1228 - Mark Shorthand: the ‘<a href="#text-emphasis"><code 2.1229 - class=property>text-emphasis</code></a>’ property</h4> 2.1230 - 2.1231 - <table class=propdef> 2.1232 - <tbody> 2.1233 - <tr> 2.1234 - <th>Name: 2.1235 - 2.1236 - <td><dfn id=text-emphasis>text-emphasis</dfn> 2.1237 - 2.1238 - <tr> 2.1239 - <th><a href="#values">Value</a>: 2.1240 - 2.1241 - <td>‘<code class=css><<a 2.1242 - href="#text-emphasis-style">text-emphasis-style</a>></code>’ || 2.1243 - ‘<code class=css><<a 2.1244 - href="#text-emphasis-color">text-emphasis-color</a>></code>’ 2.1245 - 2.1246 - <tr> 2.1247 - <th>Initial: 2.1248 - 2.1249 - <td>see individual properties 2.1250 - 2.1251 - <tr> 2.1252 - <th>Applies to: 2.1253 - 2.1254 - <td>all elements 2.1255 - 2.1256 - <tr> 2.1257 - <th>Inherited: 2.1258 - 2.1259 - <td>yes 2.1260 - 2.1261 - <tr> 2.1262 - <th>Percentages: 2.1263 - 2.1264 - <td>N/A 2.1265 - 2.1266 - <tr> 2.1267 - <th>Media: 2.1268 - 2.1269 - <td>visual 2.1270 - 2.1271 - <tr> 2.1272 - <th>Computed value: 2.1273 - 2.1274 - <td>see individual properties 2.1275 - </table> 2.1276 - 2.1277 - <p>This property is a shorthand for setting ‘<a 2.1278 - href="#text-emphasis-style"><code 2.1279 - class=property>text-emphasis-style</code></a>’ and ‘<a 2.1280 - href="#text-emphasis-color"><code 2.1281 - class=property>text-emphasis-color</code></a>’ in one declaration. 2.1282 - Omitted values are set to their initial values. 2.1283 - 2.1284 - <p class=note>Note that ‘<a href="#text-emphasis-position"><code 2.1285 - class=property>text-emphasis-position</code></a>’ is not reset in this 2.1286 - shorthand. This is because typically the shape and color vary, but the 2.1287 - position is consistent for a particular language throughout the document. 2.1288 - Therefore the position should inherit independently. 2.1289 - 2.1290 - <h4 id=text-emphasis-position-property><span class=secno>2.6.4. </span> 2.1291 - Emphasis Mark Position: the ‘<a href="#text-emphasis-position"><code 2.1292 - class=property>text-emphasis-position</code></a>’ property</h4> 2.1293 - 2.1294 - <table class=propdef> 2.1295 - <tbody> 2.1296 - <tr> 2.1297 - <th>Name: 2.1298 - 2.1299 - <td><dfn id=text-emphasis-position>text-emphasis-position</dfn> 2.1300 - 2.1301 - <tr> 2.1302 - <th><a href="#values">Value</a>: 2.1303 - 2.1304 - <td>[ above | below ] && [ right | left ] 2.1305 - 2.1306 - <tr> 2.1307 - <th>Initial: 2.1308 - 2.1309 - <td>above right 2.1310 - 2.1311 - <tr> 2.1312 - <th>Applies to: 2.1313 - 2.1314 - <td>all elements 2.1315 - 2.1316 - <tr> 2.1317 - <th>Inherited: 2.1318 - 2.1319 - <td>yes 2.1320 - 2.1321 - <tr> 2.1322 - <th>Percentages: 2.1323 - 2.1324 - <td>N/A 2.1325 - 2.1326 - <tr> 2.1327 - <th>Media: 2.1328 - 2.1329 - <td>visual 2.1330 - 2.1331 - <tr> 2.1332 - <th>Computed value: 2.1333 - 2.1334 - <td>as specified 2.1335 - </table> 2.1336 - 2.1337 - <p>This property describes where emphasis marks are drawn at. The values 2.1338 - have following meanings: 2.1339 - 2.1340 - <dl> 2.1341 - <dt><dfn id=above title="text-emphasis:above">‘<code 2.1342 - class=css>above</code>’</dfn> 2.1343 - 2.1344 - <dd>Draw marks over the text in horizontal writing mode. 2.1345 - 2.1346 - <dt><dfn id=below0 title="text-emphasis:below">‘<code 2.1347 - class=css>below</code>’</dfn> 2.1348 - 2.1349 - <dd>Draw marks under the text in horizontal writing mode. 2.1350 - 2.1351 - <dt><dfn id=right0 title="text-emphasis:right">‘<code 2.1352 - class=css>right</code>’</dfn> 2.1353 - 2.1354 - <dd>Draw marks to the right of the text in vertical writing mode. 2.1355 - 2.1356 - <dt><dfn id=left0 title="text-emphasis:left">‘<code 2.1357 - class=css>left</code>’</dfn> 2.1358 - 2.1359 - <dd>Draw marks to the left of the text in vertical writing mode. 2.1360 - </dl> 2.1361 - 2.1362 - <p class=issue> Should ‘<code class=css>above</code>’/‘<a 2.1363 - href="#below"><code class=css>below</code></a>’ be ‘<code 2.1364 - class=css>over</code>’/‘<code class=css>under</code>’ to match text 2.1365 - decoration names? 2.1366 - 2.1367 - <p>Emphasis marks are drawn exactly as if each character was assigned the 2.1368 - mark as its ruby annotation text with the ruby position given by ‘<a 2.1369 - href="#text-emphasis-position"><code 2.1370 - class=property>text-emphasis-position</code></a>’ and the ruby alignment 2.1371 - as centered. 2.1372 - 2.1373 - <p>The effect of emphasis marks on the line height is the same as for ruby 2.1374 - text. 2.1375 - 2.1376 - <div class=note> 2.1377 - <p>Note, the preferred position of emphasis marks depends on the language. 2.1378 - In Japanese for example, the preferred position is ‘<code 2.1379 - class=css>above right</code>’. In Chinese, on the other hand, the 2.1380 - preferred position is ‘<code class=css>below right</code>’. The 2.1381 - informative table below summarizes the preferred emphasis mark positions 2.1382 - for Chinese and Japanese: 2.1383 - 2.1384 - <table class=data> 2.1385 - <caption>Preferred emphasis mark and ruby position</caption> 2.1386 - 2.1387 - <thead> 2.1388 - <tr> 2.1389 - <th rowspan=2 scope=col>Language 2.1390 - 2.1391 - <th colspan=2 scope=col>Preferred mark position 2.1392 - 2.1393 - <th colspan=2 rowspan=2 scope=col>Illustration 2.1394 - 2.1395 - <tr> 2.1396 - <th>Horizontal 2.1397 - 2.1398 - <th>Vertical 2.1399 - 2.1400 - <tbody> 2.1401 - <tr> 2.1402 - <td scope=row>Japanese 2.1403 - 2.1404 - <td>above 2.1405 - 2.1406 - <td>right 2.1407 - 2.1408 - <td> <img 2.1409 - alt="Emphasis marks appear above each emphasized character in horizontal Japanese text." 2.1410 - height=28 src=text-emphasis-ja.gif 2.1411 - title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text" 2.1412 - width=225> 2.1413 - 2.1414 - <td rowspan=2> <img 2.1415 - alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text." 2.1416 - height=89 src=text-emphasis-v.gif 2.1417 - title="Emphasis applied on the right of a fragment of Japanese text" 2.1418 - width=34> <!-- 2.1419 - <tr> 2.1420 - <td scope="row">Mongolian 2.1421 - <td><span class="issue">?</span> 2.1422 - <td>right 2.1423 - --> 2.1424 - 2.1425 - <tr> 2.1426 - <td scope=row>Chinese 2.1427 - 2.1428 - <td>below 2.1429 - 2.1430 - <td>right 2.1431 - 2.1432 - <td> <img 2.1433 - alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text." 2.1434 - height=28 src=text-emphasis-zh.gif 2.1435 - title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text" 2.1436 - width=133> 2.1437 - </table> 2.1438 - </div> 2.1439 - 2.1440 - <h3 id=text-shadow-property><span class=secno>2.7. </span> Text Shadows: 2.1441 - the ‘<a href="#text-shadow"><code 2.1442 - class=property>text-shadow</code></a>’ property</h3> 2.1443 - 2.1444 - <table class=propdef> 2.1445 - <tbody> 2.1446 - <tr> 2.1447 - <th>Name: 2.1448 - 2.1449 - <td><dfn id=text-shadow>text-shadow</dfn> 2.1450 - 2.1451 - <tr> 2.1452 - <th><a href="#values">Value</a>: 2.1453 - 2.1454 - <td>none | [ <length>{2,3} && <color>? ]# 2.1455 - 2.1456 - <tr> 2.1457 - <th>Initial: 2.1458 - 2.1459 - <td>none 2.1460 - 2.1461 - <tr> 2.1462 - <th>Applies to: 2.1463 - 2.1464 - <td>all elements 2.1465 - 2.1466 - <tr> 2.1467 - <th>Inherited: 2.1468 - 2.1469 - <td>yes 2.1470 - 2.1471 - <tr> 2.1472 - <th>Percentages: 2.1473 - 2.1474 - <td>N/A 2.1475 - 2.1476 - <tr> 2.1477 - <th>Media: 2.1478 - 2.1479 - <td>visual 2.1480 - 2.1481 - <tr> 2.1482 - <th>Computed value: 2.1483 - 2.1484 - <td>a color plus three absolute <length>s 2.1485 - </table> 2.1486 - 2.1487 - <p>This property accepts a comma-separated list of shadow effects to be 2.1488 - applied to the text of the element. Values are interpreted as for <a 2.1489 - href="http://www.w3.org/TR/css3-background/#the-box-shadow">‘<code 2.1490 - class=property>box-shadow</code>’</a> <a href="#CSS3BG" 2.1491 - rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. (But note that spread 2.1492 - values are not allowed.) The shadow is applied to all of the element's 2.1493 - text as well as any text decorations it specifies. 2.1494 - 2.1495 - <p>The shadow effects are applied front-to-back: the first shadow is on 2.1496 - top. The shadows may thus overlay each other, but they never overlay the 2.1497 - text itself. The shadow must be painted at a stack level between the 2.1498 - element's border and/or background, if present, and the elements text and 2.1499 - text decoration. UAs should avoid painting text shadows over text in 2.1500 - adjacent elements belonging to the same stack level and stacking context. 2.1501 - (This may mean that the exact stack level of the shadows depends on 2.1502 - whether the element has a border or background: the exact stacking 2.1503 - behavior of text shadows is thus UA-defined.) 2.1504 - 2.1505 - <p>Unlike ‘<code class=property>box-shadow</code>’, text shadows are 2.1506 - not clipped to the shadowed shape and may show through if the text is 2.1507 - partially-transparent. Like ‘<code class=property>box-shadow</code>’, 2.1508 - text shadows do not influence layout, and do not trigger scrolling or 2.1509 - increase the size of the scrollable area. 2.1510 - 2.1511 - <p class=note>The painting order of shadows defined here is the opposite of 2.1512 - that defined in the 1998 <a 2.1513 - href="http://www.w3.org/TR/1998/REC-CSS2-19980512">CSS2 2.1514 - Recommendation</a>. 2.1515 - 2.1516 - <p>The ‘<a href="#text-shadow"><code class=css>text-shadow</code></a>’ 2.1517 - property applies to both the <code>::first-line</code> and 2.1518 - <code>::first-letter</code> pseudo-elements. 2.1519 - 2.1520 - <h2 id=conformance><span class=secno>3. </span> Conformance</h2> 2.1521 - 2.1522 - <h3 id=conventions><span class=secno>3.1. </span> Document Conventions</h3> 2.1523 - 2.1524 - <p>Conformance requirements are expressed with a combination of descriptive 2.1525 - assertions and RFC 2119 terminology. The key words “MUST”, “MUST 2.1526 - NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, 2.1527 - “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the 2.1528 - normative parts of this document are to be interpreted as described in RFC 2.1529 - 2119. However, for readability, these words do not appear in all uppercase 2.1530 - letters in this specification. 2.1531 - 2.1532 - <p>All of the text of this specification is normative except sections 2.1533 - explicitly marked as non-normative, examples, and notes. <a 2.1534 - href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a> 2.1535 - 2.1536 - <p>Examples in this specification are introduced with the words “for 2.1537 - example” or are set apart from the normative text with 2.1538 - <code>class="example"</code>, like this: 2.1539 - 2.1540 - <div class=example> 2.1541 - <p>This is an example of an informative example. 2.1542 - </div> 2.1543 - 2.1544 - <p>Informative notes begin with the word “Note” and are set apart from 2.1545 - the normative text with <code>class="note"</code>, like this: 2.1546 - 2.1547 - <p class=note>Note, this is an informative note. 2.1548 - 2.1549 - <h3 id=conformance-classes><span class=secno>3.2. </span> Conformance 2.1550 - Classes</h3> 2.1551 - 2.1552 - <p>Conformance to CSS Text Level 3 is defined for three conformance 2.1553 - classes: 2.1554 - 2.1555 - <dl> 2.1556 - <dt><dfn id=style-sheet title="style sheet!!as conformance class">style 2.1557 - sheet</dfn> 2.1558 - 2.1559 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 2.1560 - style sheet</a>. 2.1561 - 2.1562 - <dt><dfn id=renderer>renderer</dfn> 2.1563 - 2.1564 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 2.1565 - that interprets the semantics of a style sheet and renders documents that 2.1566 - use them. 2.1567 - 2.1568 - <dt><dfn id=authoring-tool>authoring tool</dfn> 2.1569 - 2.1570 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 2.1571 - that writes a style sheet. 2.1572 - </dl> 2.1573 - 2.1574 - <p>A style sheet is conformant to CSS Text Level 3 if all of its 2.1575 - declarations that use properties defined in this module have values that 2.1576 - are valid according to the generic CSS grammar and the individual grammars 2.1577 - of each property as given in this module. 2.1578 - 2.1579 - <p>A renderer is conformant to CSS Text Level 3 if, in addition to 2.1580 - interpreting the style sheet as defined by the appropriate specifications, 2.1581 - it supports all the features defined by CSS Text Level 3 by parsing them 2.1582 - correctly and rendering the document accordingly. However, the inability 2.1583 - of a UA to correctly render a document due to limitations of the device 2.1584 - does not make the UA non-conformant. (For example, a UA is not required to 2.1585 - render color on a monochrome monitor.) 2.1586 - 2.1587 - <p>An authoring tool is conformant to CSS Text Level 3 if it writes style 2.1588 - sheets that are syntactically correct according to the generic CSS grammar 2.1589 - and the individual grammars of each feature in this module, and meet all 2.1590 - other conformance requirements of style sheets as described in this 2.1591 - module. 2.1592 - 2.1593 - <h3 id=partial><span class=secno>3.3. </span> Partial Implementations</h3> 2.1594 - 2.1595 - <p>So that authors can exploit the forward-compatible parsing rules to 2.1596 - assign fallback values, CSS renderers <strong>must</strong> treat as 2.1597 - invalid (and <a 2.1598 - href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as 2.1599 - appropriate</a>) any at-rules, properties, property values, keywords, and 2.1600 - other syntactic constructs for which they have no usable level of support. 2.1601 - In particular, user agents <strong>must not</strong> selectively ignore 2.1602 - unsupported component values and honor supported values in a single 2.1603 - multi-value property declaration: if any value is considered invalid (as 2.1604 - unsupported values must be), CSS requires that the entire declaration be 2.1605 - ignored. 2.1606 - 2.1607 - <h3 id=experimental><span class=secno>3.4. </span> Experimental 2.1608 - Implementations</h3> 2.1609 - 2.1610 - <p>To avoid clashes with future CSS features, the CSS2.1 specification 2.1611 - reserves a <a 2.1612 - href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 2.1613 - syntax</a> for proprietary and experimental extensions to CSS. 2.1614 - 2.1615 - <p>Prior to a specification reaching the Candidate Recommendation stage in 2.1616 - the W3C process, all implementations of a CSS feature are considered 2.1617 - experimental. The CSS Working Group recommends that implementations use a 2.1618 - vendor-prefixed syntax for such features, including those in W3C Working 2.1619 - Drafts. This avoids incompatibilities with future changes in the draft. 2.1620 - 2.1621 - <h3 id=testing><span class=secno>3.5. </span>Non-Experimental 2.1622 - Implementations</h3> 2.1623 - 2.1624 - <p>Once a specification reaches the Candidate Recommendation stage, 2.1625 - non-experimental implementations are possible, and implementors should 2.1626 - release an unprefixed implementation of any CR-level feature they can 2.1627 - demonstrate to be correctly implemented according to spec. 2.1628 - 2.1629 - <p>To establish and maintain the interoperability of CSS across 2.1630 - implementations, the CSS Working Group requests that non-experimental CSS 2.1631 - renderers submit an implementation report (and, if necessary, the 2.1632 - testcases used for that implementation report) to the W3C before releasing 2.1633 - an unprefixed implementation of any CSS features. Testcases submitted to 2.1634 - W3C are subject to review and correction by the CSS Working Group. 2.1635 - 2.1636 - <p>Further information on submitting testcases and implementation reports 2.1637 - can be found from on the CSS Working Group's website at <a 2.1638 - href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 2.1639 - Questions should be directed to the <a 2.1640 - href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> 2.1641 - mailing list. 2.1642 - 2.1643 - <h3 id=cr-exit-criteria><span class=secno>3.6. </span> CR Exit Criteria</h3> 2.1644 - 2.1645 - <p> For this specification to be advanced to Proposed Recommendation, there 2.1646 - must be at least two independent, interoperable implementations of each 2.1647 - feature. Each feature may be implemented by a different set of products, 2.1648 - there is no requirement that all features be implemented by a single 2.1649 - product. For the purposes of this criterion, we define the following 2.1650 - terms: 2.1651 - 2.1652 - <dl> 2.1653 - <dt>independent 2.1654 - 2.1655 - <dd>each implementation must be developed by a different party and cannot 2.1656 - share, reuse, or derive from code used by another qualifying 2.1657 - implementation. Sections of code that have no bearing on the 2.1658 - implementation of this specification are exempt from this requirement. 2.1659 - 2.1660 - <dt>interoperable 2.1661 - 2.1662 - <dd>passing the respective test case(s) in the official CSS test suite, 2.1663 - or, if the implementation is not a Web browser, an equivalent test. Every 2.1664 - relevant test in the test suite should have an equivalent test created if 2.1665 - such a user agent (UA) is to be used to claim interoperability. In 2.1666 - addition if such a UA is to be used to claim interoperability, then there 2.1667 - must one or more additional UAs which can also pass those equivalent 2.1668 - tests in the same way for the purpose of interoperability. The equivalent 2.1669 - tests must be made publicly available for the purposes of peer review. 2.1670 - 2.1671 - <dt>implementation 2.1672 - 2.1673 - <dd>a user agent which: 2.1674 - <ol class=inline> 2.1675 - <li>implements the specification. 2.1676 - 2.1677 - <li>is available to the general public. The implementation may be a 2.1678 - shipping product or other publicly available version (i.e., beta 2.1679 - version, preview release, or “nightly build”). Non-shipping product 2.1680 - releases must have implemented the feature(s) for a period of at least 2.1681 - one month in order to demonstrate stability. 2.1682 - 2.1683 - <li>is not experimental (i.e., a version specifically designed to pass 2.1684 - the test suite and is not intended for normal usage going forward). 2.1685 - </ol> 2.1686 - </dl> 2.1687 - 2.1688 - <p>The specification will remain Candidate Recommendation for at least six 2.1689 - months. 2.1690 - 2.1691 - <h2 class=no-num id=acknowledgements> Appendix A: Acknowledgements</h2> 2.1692 - 2.1693 - <p>This specification would not have been possible without the help from: 2.1694 - Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett, 2.1695 - Martin Dürst, Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye 2.1696 - Gittelman, Ian Hickson, Martin Heijdra, Richard Ishida, Masayasu Ishikawa, 2.1697 - Michael Jochimsen, Eric LeVine, Ambrose Li, Håkon Wium Lie, Chris Lilley, 2.1698 - Ken Lunde, Nat McCully, Shinyu Murakami, Paul Nelson, Chris Pratley, 2.1699 - Marcin Sawicki, Arnold Schrijver, Rahul Sonnad, Michel Suignard, Takao 2.1700 - Suzuki, Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi 2.1701 - Yabe and Steve Zilles. 2.1702 - 2.1703 - <h2 class=no-num id=appendix-b-references>Appendix B: References</h2> 2.1704 - 2.1705 - <h3 class=no-num id=normative-ref>Normative references</h3> 2.1706 - <!--begin-normative--> 2.1707 - <!-- Sorted by label --> 2.1708 - 2.1709 - <dl class=bibliography> 2.1710 - <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 2.1711 - <!----> 2.1712 - 2.1713 - <dt id=CSS21>[CSS21] 2.1714 - 2.1715 - <dd>Bert Bos; et al. <a 2.1716 - href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style 2.1717 - Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June 2.1718 - 2011. W3C Recommendation. URL: <a 2.1719 - href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> 2.1720 - </dd> 2.1721 - <!----> 2.1722 - 2.1723 - <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES] 2.1724 - 2.1725 - <dd>Elika J. Etemad; Koji Ishii. <a 2.1726 - href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/"><cite>CSS 2.1727 - Writing Modes Module Level 3.</cite></a> 1 May 2012. W3C Working Draft. 2.1728 - (Work in progress.) URL: <a 2.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> 2.1730 - </dd> 2.1731 - <!----> 2.1732 - 2.1733 - <dt id=CSS3BG>[CSS3BG] 2.1734 - 2.1735 - <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a 2.1736 - href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS 2.1737 - Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C 2.1738 - Candidate Recommendation. (Work in progress.) URL: <a 2.1739 - href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a> 2.1740 - </dd> 2.1741 - <!----> 2.1742 - 2.1743 - <dt id=CSS3TEXT>[CSS3TEXT] 2.1744 - 2.1745 - <dd>Elika J. Etemad; Koji Ishii. <a 2.1746 - href="http://www.w3.org/TR/2012/WD-css3-text-20120814/"><cite>CSS Text 2.1747 - Level 3.</cite></a> 14 August 2012. W3C Working Draft. (Work in 2.1748 - progress.) URL: <a 2.1749 - href="http://www.w3.org/TR/2012/WD-css3-text-20120814/">http://www.w3.org/TR/2012/WD-css3-text-20120814/</a> 2.1750 - </dd> 2.1751 - <!----> 2.1752 - 2.1753 - <dt id=RFC2119>[RFC2119] 2.1754 - 2.1755 - <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key 2.1756 - words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet 2.1757 - RFC 2119. URL: <a 2.1758 - href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a> 2.1759 - </dd> 2.1760 - <!----> 2.1761 - </dl> 2.1762 - <!--end-normative--> 2.1763 - 2.1764 - <h3 class=no-num id=informative-ref>Informative references</h3> 2.1765 - <!--begin-informative--> 2.1766 - <!-- Sorted by label --> 2.1767 - 2.1768 - <dl class=bibliography> 2.1769 - <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 2.1770 - <!----> 2.1771 - 2.1772 - <dt id=CSS3COLOR>[CSS3COLOR] 2.1773 - 2.1774 - <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a 2.1775 - href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color 2.1776 - Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a 2.1777 - href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a> 2.1778 - </dd> 2.1779 - <!----> 2.1780 - </dl> 2.1781 - <!--end-informative--> 2.1782 - 2.1783 - <h2 class=no-num id=changes>Appendix C: Changes</h2>
3.1 --- a/css3-text-decor/Overview.src.html Mon Oct 15 14:39:29 2012 -0700 3.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 3.3 @@ -1,1228 +0,0 @@ 3.4 -<!DOCTYPE html> 3.5 -<html lang="en"> 3.6 -<head> 3.7 - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 3.8 - <title>CSS Text Decoration Module Level 3 (CSS3 Text Decoration)</title> 3.9 - <link rel=contents href="#contents"> 3.10 - <link rel=index href="#index"> 3.11 - <link rel="stylesheet" type="text/css" href="../default.css"> 3.12 - <link rel="stylesheet" type="text/css" 3.13 - href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css"> 3.14 - 3.15 -</head> 3.16 - 3.17 -<div class="head"> 3.18 -<!--logo--> 3.19 - 3.20 -<h1>CSS Text Decoration Module Level 3</h1> 3.21 - 3.22 -<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2> 3.23 -<dl> 3.24 - <dt>This version:</dt> 3.25 - <!-- 3.26 - <dd><a href="http://dev.w3.org/csswg/css3-text/">$Date$ (CVS $Revision$)</a> 3.27 - --> 3.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> 3.29 - 3.30 - <dt>Latest version:</dt> 3.31 - <dd><a href="http://www.w3.org/TR/css3-text/">http://www.w3.org/TR/css3-text/</a></dd> 3.32 - <dt>Latest editor's draft:</dt> 3.33 - <dd><a href="http://dev.w3.org/csswg/css3-text/">http://dev.w3.org/csswg/css3-text/</a></dd> 3.34 - <dt>Previous version:</dt> 3.35 - <dd><a 3.36 - href="http://www.w3.org/TR/2012/WD-css3-text-20120119/">http://www.w3.org/TR/2012/WD-css3-text-20120119/</a> 3.37 - 3.38 - <dt>Issues List:</dt> 3.39 - <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/10">http://www.w3.org/Style/CSS/Tracker/products/10</a> 3.40 - 3.41 - <dt>Discussion:</dt> 3.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>” 3.43 - 3.44 - <dt>Editors:</dt> 3.45 - <dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> (Mozilla)</dd> 3.46 - <dd><a href="mailto:koji.a.ishii@mail.rakuten.com">Koji Ishii</a> (Rakuten, Inc.)</dd> 3.47 -</dl> 3.48 - 3.49 -<!--copyright--> 3.50 - 3.51 -<hr title="Separator for header"> 3.52 -</div> 3.53 - 3.54 -<h2 class="no-num no-toc" id="abstract">Abstract</h2> 3.55 - 3.56 - <p>This module contains the features of CSS relating to 3.57 - text decoration, such as underlines, text shadows, and emphasis marks. 3.58 - <a href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing 3.59 - the rendering of structured documents (such as HTML and XML) on screen, on 3.60 - paper, in speech, etc. 3.61 - 3.62 -<h2 class="no-num no-toc" id="status">Status of this document</h2> 3.63 - 3.64 - 3.65 - <p><em>This section describes the status of this document at the time of 3.66 - its publication. Other documents may supersede this document. A list of 3.67 - current W3C publications and the latest revision of this technical report 3.68 - can be found in the <a href="http://www.w3.org/TR/">W3C technical reports 3.69 - index at http://www.w3.org/TR/.</a></em> 3.70 - 3.71 - <p>Publication as a Working Draft does not imply endorsement by the W3C 3.72 - Membership. This is a draft document and may be updated, replaced or 3.73 - obsoleted by other documents at any time. It is inappropriate to cite this 3.74 - document as other than work in progress. 3.75 - 3.76 - <p>This CSS module has been produced as a combined effort of the <a 3.77 - href="http://www.w3.org/International/Activity">W3C Internationalization Activity</a>, 3.78 - and the <a href="http://www.w3.org/Style/Activity">Style Activity</a> and is maintained 3.79 - by the <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>. It also 3.80 - includes contributions made by participants in the <a 3.81 - href="http://www.w3.org/Style/XSL/Group/">XSL Working Group</a> (<a 3.82 - href="http://cgi.w3.org/MemberAccess/AccessRequest">members 3.83 - only</a>). 3.84 - 3.85 - <p>This document was produced by a group operating under the <a 3.86 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 3.87 - 2004 W3C Patent Policy</a>. W3C maintains a <a 3.88 - href="http://www.w3.org/2004/01/pp-impl/32061/status" 3.89 - rel=disclosure>public list of any patent disclosures</a> made in 3.90 - connection with the deliverables of the group; that page also includes 3.91 - instructions for disclosing a patent. An individual who has actual 3.92 - knowledge of a patent which the individual believes contains <a 3.93 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential 3.94 - Claim(s)</a> must disclose the information in accordance with <a 3.95 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 3.96 - 6 of the W3C Patent Policy</a>.</p> 3.97 - 3.98 - <p><strong>Feedback on this draft should be posted to the 3.99 - (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) 3.100 - public mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a></strong> 3.101 - (see <a href="http://www.w3.org/Mail/Request">instructions</a>) <strong>with 3.102 - <kbd>[css3-text-decor]</kbd> in the subject line.</strong> 3.103 - You are strongly encouraged to complain if you see something stupid 3.104 - in this draft. The editors will do their best to respond to all feedback.</p> 3.105 - 3.106 - <p>The following features are at risk and may be cut from the spec during 3.107 - its CR period if there are no (correct) implementations:</p> 3.108 - 3.109 - <p>The following features are at risk and may be cut from the spec during 3.110 - its CR period if there are no (correct) implementations:</p> 3.111 - <ul> 3.112 - <li>the 'text-decoration-skip' property / ''ink'' value 3.113 - </ul> 3.114 - 3.115 -<h2 class="no-num no-toc" id="contents"> 3.116 -Table of Contents</h2> 3.117 - 3.118 -<!--toc--> 3.119 - 3.120 -<h2 id="intro"> 3.121 -Introduction</h2> 3.122 - 3.123 - <p>[document here]</p> 3.124 - 3.125 - <p class="issue">This draft describes features that are specific to certain scripts. 3.126 - There is an ongoing discussion about where these features belong: in 3.127 - existing CSS properties, in new CSS properties, or perhaps in other 3.128 - specifications. 3.129 - 3.130 - 3.131 -<h3 id="placement"> 3.132 -Module Interactions</h3> 3.133 - 3.134 - <p>This module replaces and extends the text-level 3.135 - features defined in [[!CSS21]] chapter 16. 3.136 - 3.137 -<h3 id="values"> 3.138 -Values</h3> 3.139 - 3.140 - <p>This specification follows the 3.141 - <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property 3.142 - definition conventions</a> from [[!CSS21]]. Value types not defined in 3.143 - this specification are defined in CSS Level 2 Revision 1 [[!CSS21]]. 3.144 - Other CSS modules may expand the definitions of these value types: for 3.145 - example [[CSS3COLOR]], when combined with this module, expands the 3.146 - definition of the <color> value type as used in this specification.</p> 3.147 - 3.148 - <p>In addition to the property-specific values listed in their definitions, 3.149 - all properties defined in this specification also accept the 3.150 - <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> 3.151 - keyword as their property value. For readability it has not been repeated 3.152 - explicitly. 3.153 - 3.154 - <p>The <dfn>''currentcolor''</dfn> keyword here computes to itself and is 3.155 - resolved to the value of 'color' after inheritance is performed. This is 3.156 - so that the 'text-emphasis-color' by default matches the text 'color'. 3.157 - <span class="issue">CSS3 Color has not yet been errata'd to define it this way; 3.158 - currentcolor there is defined to compute to the value of 'color', 3.159 - which gives it the wrong inheritance behavior.</span> 3.160 - 3.161 -<h3 id="terms">Terminology</h3> 3.162 - 3.163 - <p>The terms <a href="http://www.w3.org/TR/css3-text/#grapheme-cluster"><dfn>character</dfn></a>, 3.164 - <a href="http://www.w3.org/TR/css3-text/#letter"><dfn>letter</dfn></a>, and 3.165 - <a href="http://www.w3.org/TR/css3-text/#content-language"><dfn>content language</dfn></a> 3.166 - as used in this specification are defined in [[!CSS3TEXT]]. 3.167 - Other terminology and concepts used in this specification are defined 3.168 - in [[!CSS21]] and [[!CSS3-WRITING-MODES]]. 3.169 - 3.170 -<h2 id="line-decoration"> 3.171 -Line Decoration: Underline, Overline, and Strike-Through</h2> 3.172 - 3.173 - <p>The following properties describe line decorations that are added 3.174 - to the content of an element. When specified on or propagated to 3.175 - an inline box, such decoration affects all the boxes generated 3.176 - by that element, and is further propagated to any in-flow block-level 3.177 - boxes that split the inline 3.178 - (see <a href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">CSS2.1 section 9.2.1.1</a>) 3.179 - When specified on or propagated to a ruby box, the decorations are 3.180 - further propagated only to the ruby base. 3.181 - When specified on or propagated to a a block container that establishes 3.182 - an inline formatting context, the decorations are propagated to an 3.183 - anonymous inline element that wraps all the in-flow inline-level children 3.184 - of the block container. For all other elements, the decorations are 3.185 - propagated to any in-flow children. 3.186 - 3.187 - <p class="note">Note that text decorations are not propagated to any 3.188 - out-of-flow descendants, nor to the contents of atomic inline-level 3.189 - descendants such as inline blocks and inline tables. 3.190 - 3.191 - <p>By default underlines, overlines, and line-throughs are applied only 3.192 - to text (including white space, letter spacing, and word spacing): 3.193 - margins, borders, and padding are skipped. Elements containing 3.194 - no text, such as images, are likewise not decorated. 3.195 - The 'text-decoration-skip' 3.196 - property can be used to modify this behavior, for example allowing 3.197 - inline replaced elements to be underlined or requiring that white 3.198 - space be skipped. 3.199 - 3.200 - <p>In determining the position and thickness of text decoration lines, 3.201 - user agents may consider the font sizes and dominant baselines of 3.202 - descendants, but for a given element's decoration must use the same 3.203 - position and thickness throughout each line box. The 3.204 - <a href="#text-decoration-color">color</a> and 3.205 - <a href="#text-decoration-style">line style</a> of decorations must 3.206 - remain the same on all decorations applied by a given element, even 3.207 - if descendant elements have different color or line style values.</p> 3.208 - 3.209 - <div class="example"> 3.210 - <p>The following figure shows the averaging for underline: 3.211 - <p><img alt="In the first rendering of the underlined text '1st a' 3.212 - with 'st' as a superscript, both the '1st' and the 'a' 3.213 - are rendered in a small font. In the second rendering, 3.214 - the 'a' is rendered in a larger font. In the third, both 3.215 - '1st' and 'a' are large." 3.216 - height="105" src="underline-averaging.gif" width="326"> 3.217 - <p>In the three fragments of underlined text, the underline is drawn 3.218 - consecutively lower and thicker as the ratio of large text to small 3.219 - text increases.</p> 3.220 - </div> 3.221 - 3.222 - <p>Relatively positioning a descendant moves all text decorations 3.223 - affecting it along with the descendant's text; it does not affect 3.224 - calculation of the decoration's initial position on that line. 3.225 - The 'visibility' property, filters, and other graphical transformations 3.226 - likewise affect text decorations as part of the text they're drawn on, 3.227 - even if the decorations were specified on an ancestor element. 3.228 - <span class="issue">Does this include 'text-shadow'? What about text-fill etc.?</span> 3.229 - 3.230 - <div class="example"> 3.231 - <p>In the following style sheet and document fragment:</p> 3.232 - <pre><code class="css"> 3.233 -<!-- --> blockquote { text-decoration: underline; color: blue; } 3.234 -<!-- --> em { display: block; } 3.235 -<!-- --> cite { color: fuchsia; } 3.236 -<!----></code></pre> 3.237 - <pre class="html"><code> 3.238 -<!-- --> <blockquote> 3.239 -<!-- --> <p> 3.240 -<!-- --> <span> 3.241 -<!-- --> Help, help! 3.242 -<!-- --> <em> I am under a hat! </em> 3.243 -<!-- --> 3.244 -<!-- --> <cite> —GwieF </cite> 3.245 -<!-- --> </span> 3.246 -<!-- --> </p> 3.247 -<!-- --> </blockquote> 3.248 -<!----></code></pre> 3.249 - <p>...the underlining for the blockquote element is propagated to an 3.250 - anonymous inline element that surrounds the span element, causing 3.251 - the text "Help, help!" to be blue, with the blue underlining from 3.252 - the anonymous inline underneath it, the color being taken from the 3.253 - blockquote element. The <code><em>text</em></code> 3.254 - in the em block is also underlined, as it is in an in-flow block to 3.255 - which the underline is propagated. The final line of text is fuchsia, 3.256 - but the underline underneath it is still the blue underline from the 3.257 - anonymous inline element.</p> 3.258 - <p><img src="underline-example.png" alt="Sample rendering of the above underline example"></p> 3.259 - <p>This diagram shows the boxes involved in the example above. The 3.260 - rounded aqua line represents the anonymous inline element wrapping 3.261 - the inline contents of the paragraph element, the rounded blue line 3.262 - represents the span element, and the orange lines represent the 3.263 - blocks.</p> 3.264 - </div> 3.265 - 3.266 -<h3 id="text-decoration-line-property"> 3.267 -Text Decoration Lines: the 'text-decoration-line' property</h3> 3.268 - 3.269 - <table class="propdef"> 3.270 - <tr> 3.271 - <th>Name: 3.272 - <td><dfn>text-decoration-line</dfn> 3.273 - <tr> 3.274 - <th><a href="#values">Value</a>: 3.275 - <td>none | [ underline || overline || line-through ] 3.276 - 3.277 - <tr> 3.278 - <th>Initial: 3.279 - <td>none 3.280 - <tr> 3.281 - <th>Applies to: 3.282 - <td>all elements 3.283 - <tr> 3.284 - <th>Inherited: 3.285 - <td>no (but see prose) 3.286 - <tr> 3.287 - <th>Percentages: 3.288 - <td>N/A 3.289 - <tr> 3.290 - <th>Media: 3.291 - <td>visual 3.292 - <tr> 3.293 - <th>Computed value: 3.294 - <td>as specified 3.295 - </table> 3.296 - 3.297 - <p>Specifies what line decorations, if any, are added to the element. 3.298 - Values have the following meanings:</p> 3.299 - 3.300 - <dl> 3.301 - <dt><dfn title="text-decoration-line:none">''none''</dfn> 3.302 - <dd>Neither produces nor inhibits text decoration. 3.303 - <dt><dfn>''underline''</dfn> 3.304 - <dd>Each line of text is underlined. 3.305 - <dt><dfn>''overline''</dfn> 3.306 - <dd>Each line of text has a line above it (i.e. on the opposite 3.307 - side from an underline). 3.308 - <dt><dfn>''line-through''</dfn> 3.309 - <dd>Each line of text has a line through the middle. 3.310 - </dl> 3.311 - 3.312 -<h3 id="text-decoration-color-property"> 3.313 -Text Decoration Color: the 'text-decoration-color' property</h3> 3.314 - 3.315 - <table class="propdef"> 3.316 - <tr> 3.317 - <th>Name: 3.318 - <td><dfn>text-decoration-color</dfn> 3.319 - <tr> 3.320 - <th><a href="#values">Value</a>: 3.321 - <td><a href="http://www.w3.org/TR/css3-color/#color0"><span class="value-inst-color"><color></span></a> 3.322 - 3.323 - <tr> 3.324 - <th>Initial: 3.325 - <td><a href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> 3.326 - <tr> 3.327 - <th>Applies to: 3.328 - <td>all elements 3.329 - <tr> 3.330 - <th>Inherited: 3.331 - <td>no 3.332 - <tr> 3.333 - <th>Percentages: 3.334 - <td>N/A 3.335 - <tr> 3.336 - <th>Media: 3.337 - <td>visual 3.338 - <tr> 3.339 - <th>Computed value: 3.340 - <td>the computed color 3.341 - </table> 3.342 - 3.343 - <p>This property specifies the color of text decoration (underlines 3.344 - overlines, and line-throughs) set on the element with 3.345 - 'text-decoration-line'.</p> 3.346 - 3.347 -<h3 id="text-decoration-style-property"> 3.348 -Text Decoration Style: the 'text-decoration-style' property</h3> 3.349 - 3.350 - <table class="propdef"> 3.351 - <tr> 3.352 - <th>Name: 3.353 - <td><dfn>text-decoration-style</dfn> 3.354 - <tr> 3.355 - <th><a href="#values">Value</a>: 3.356 - <td>solid | double | dotted | dashed | wavy 3.357 - 3.358 - <tr> 3.359 - <th>Initial: 3.360 - <td>solid 3.361 - <tr> 3.362 - <th>Applies to: 3.363 - <td>all elements 3.364 - <tr> 3.365 - <th>Inherited: 3.366 - <td>no 3.367 - <tr> 3.368 - <th>Percentages: 3.369 - <td>N/A 3.370 - <tr> 3.371 - <th>Media: 3.372 - <td>visual 3.373 - <tr> 3.374 - <th>Computed value: 3.375 - <td>as specified 3.376 - </table> 3.377 - 3.378 - <p>This property specifies the style of the line(s) drawn for 3.379 - text decoration specified on the element. Values have the 3.380 - same meaning as for the 3.381 - <a href="http://www.w3.org/TR/css3-background/#the-border-style">border-style 3.382 - properties</a> [[!CSS3BG]]. ''wavy'' indicates a wavy line.</p> 3.383 - 3.384 -<h3 id="text-decoration-property"> 3.385 -Text Decoration Shorthand: the 'text-decoration' property</h3> 3.386 - 3.387 - <table class="propdef"> 3.388 - <tr> 3.389 - <th>Name: 3.390 - <td><dfn>text-decoration</dfn> 3.391 - <tr> 3.392 - <th><a href="#values">Value</a>: 3.393 - <td><var><a href="#text-decoration-line"><text-decoration-line></a></var> || 3.394 - <var><a href="#text-decoration-style"><text-decoration-style></a></var> || 3.395 - <var><a href="#text-decoration-color"><text-decoration-color></a></var> || blink 3.396 - 3.397 - <tr> 3.398 - <th>Initial: 3.399 - <td>none 3.400 - <tr> 3.401 - <th>Applies to: 3.402 - <td>all elements 3.403 - <tr> 3.404 - <th>Inherited: 3.405 - <td>no 3.406 - <tr> 3.407 - <th>Percentages: 3.408 - <td>N/A 3.409 - <tr> 3.410 - <th>Media: 3.411 - <td>visual 3.412 - <tr> 3.413 - <th>Computed value: 3.414 - <td>as specified 3.415 - </table> 3.416 - 3.417 - <p>This property is a shorthand for setting 'text-decoration-line', 3.418 - 'text-decoration-color', and 'text-decoration-style' in one declaration. 3.419 - Omitted values are set to their initial values. A 'text-decoration' 3.420 - declaration that omits both the 'text-decoration-color' 3.421 - and 'text-decoration-style' values is backwards-compatible 3.422 - with CSS Levels 1 and 2.</p> 3.423 - 3.424 - <p>If the ''blink'' keyword is specified the text blinks 3.425 - (alternates between visible and invisible). Conforming user agents 3.426 - may simply not blink the text. Note that not blinking the text is 3.427 - one technique to satisfy 3.428 - <a href="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">checkpoint 3.3 of WAI-UAAG</a>.</p> 3.429 - 3.430 - <div class="example"> 3.431 - <p>The following example underlines unvisited links with a solid blue 3.432 - underline in CSS1 and CSS2 UAs and a navy dotted underline in CSS3 UAs.</p> 3.433 - 3.434 - <pre><code class="css"> 3.435 -<!-- -->:link { 3.436 -<!-- --> color: blue; 3.437 -<!-- --> text-decoration: underline; 3.438 -<!-- --> text-decoration: navy dotted underline; /* <a href="http://www.w3.org/TR/CSS21/syndata.html#ignore">Ignored</a> in CSS1/CSS2 UAs */ 3.439 -<!-- -->}</code></pre> 3.440 - </div> 3.441 - 3.442 -<h3 id="text-decoration-skip-property"> 3.443 -Text Decoration Line Continuity: the 'text-decoration-skip' property</h3> 3.444 - 3.445 - <table class="propdef"> 3.446 - <tr> 3.447 - <th>Name: 3.448 - <td><dfn>text-decoration-skip</dfn> 3.449 - <tr> 3.450 - <th><a href="#values">Value</a>: 3.451 - <td>none | [ objects || spaces || ink || edges ] 3.452 - 3.453 - <tr> 3.454 - <th>Initial: 3.455 - <td>objects 3.456 - <tr> 3.457 - <th>Applies to: 3.458 - <td>all elements 3.459 - <tr> 3.460 - <th>Inherited: 3.461 - <td>yes 3.462 - <tr> 3.463 - <th>Percentages: 3.464 - <td>N/A 3.465 - <tr> 3.466 - <th>Media: 3.467 - <td>visual 3.468 - <tr> 3.469 - <th>Computed value: 3.470 - <td>as specified 3.471 - </table> 3.472 - 3.473 - <p>This property specifies what parts of the element's content 3.474 - any text decoration affecting the element must skip over. It 3.475 - controls all text decoration lines drawn by the element 3.476 - and also any text decoration lines drawn by its ancestors. 3.477 - Values have the following meanings:</p> 3.478 - 3.479 - <dl> 3.480 - <dt><dfn title="text-decoration-skip:none">''none''</dfn></dt> 3.481 - <dd>Skip nothing: text-decoration is drawn for all text content 3.482 - and for inline replaced elements.</dd> 3.483 - <dt><dfn title="text-decoration-skip:objects">''objects''</dfn></dt> 3.484 - <dd>Skip this element if it is an atomic inline (such as an 3.485 - image or inline-block).</dd> 3.486 - <dt><dfn title="text-decoration-skip:spaces">''spaces''</dfn></dt> 3.487 - <dd>Skip white space: this includes regular spaces (U+0020) and 3.488 - tabs (U+0009), as well as nbsp (U+00A0), ideographic space 3.489 - (U+3000), all fixed width spaces (such as U+2000–U+200A, 3.490 - U+202F and U+205F), and any adjacent letter-spacing or 3.491 - word-spacing.</dd> 3.492 - <dt><dfn title="text-decoration-skip:ink">''ink''</dfn></dt> 3.493 - <dd>Skip over where glyphs are drawn: interrupt the decoration 3.494 - line to let text show through where the text decoration would 3.495 - otherwise cross over a glyph. The UA may also skip a small 3.496 - distance to either side of the glyph outline.</dd> 3.497 - <dt><dfn title="text-decoration-skip:edges">''edges''</dfn></dt> 3.498 - <dd>The UA should place the start and end of the line inwards from 3.499 - the content edge of the decorating element so that, e.g. two 3.500 - underlined elements side-by-side do not appear to have a single 3.501 - underline. (This is important in Chinese, where underlining is a 3.502 - form of punctuation.)</dd> 3.503 - </dl> 3.504 - 3.505 - <p class="issue">Do we need a value that <em>doesn't</em> skip 3.506 - margins and padding?</p> 3.507 - 3.508 - <p class="note">Note that this property inherits and that descendant 3.509 - elements can have a different setting.</p> 3.510 - 3.511 -<h4 id="text-underline-position-property"> 3.512 -Text Underline Position: the 'text-underline-position' property</h4> 3.513 - 3.514 - <table class="propdef"> 3.515 - <tr> 3.516 - <th>Name: 3.517 - <td><dfn>text-underline-position</dfn> 3.518 - <tr> 3.519 - <th><a href="#values">Value</a>: 3.520 - <td>auto | alphabetic | [ below || [ left | right ] ] 3.521 - 3.522 - <tr> 3.523 - <th>Initial: 3.524 - <td>auto 3.525 - <tr> 3.526 - <th>Applies to: 3.527 - <td>all elements 3.528 - <tr> 3.529 - <th>Inherited: 3.530 - <td>yes 3.531 - <tr> 3.532 - <th>Percentages: 3.533 - <td>N/A 3.534 - <tr> 3.535 - <th>Media: 3.536 - <td>visual 3.537 - <tr> 3.538 - <th>Computed value: 3.539 - <td>as specified 3.540 - </table> 3.541 - 3.542 - <p>This property sets the position of an underline specified 3.543 - on the same element: it does not affect underlines specified by 3.544 - ancestor elements. Values have the following meanings:</p> 3.545 - 3.546 - <dl> 3.547 - <dt><dfn>''auto''</dfn></dt> 3.548 - <dd>The user agent may use any algorithm to determine the 3.549 - underline's position; however it must be placed at or below 3.550 - the alphabetic baseline. 3.551 - <p class="note">It is suggested that the underline position 3.552 - be ''alphabetic'' unless it crosses either subscripted (or 3.553 - otherwise lowered) text, or it affects characters from Asian 3.554 - scripts such as Han or Tibetan, for which an alphabetic 3.555 - underline is too high: in such cases, aligning to the em box 3.556 - edge as described for ''below left'' is more appropriate. 3.557 - <dt><dfn>''alphabetic''</dfn></dt> 3.558 - <dd>The underline is positioned relative to the alphabetic baseline. In 3.559 - this case the underline is likely to cross some descenders. 3.560 - <div class="figure"> 3.561 - <p><img title="text-underline-position: alphabetic" 3.562 - alt="In a typical Latin font, the underline is positioned slightly 3.563 - below the alphabetic baseline, leaving a gap between the line 3.564 - and the bottom of most Latin letters, but crossing through 3.565 - descenders such as the stem of a 'p'." 3.566 - src="underline-position-alphabetic.png" 3.567 - > 3.568 - <p class="caption">''text-underline-position: alphabetic''</p> 3.569 - </div> 3.570 - <dt><dfn>''below''</dfn></dt> 3.571 - <dd>In horizontal writing modes, the underline is positioned 3.572 - relative to the under edge of the element's content box. 3.573 - In this case the underline usually does not cross the descenders. 3.574 - (This is sometimes called "accounting" underline.) 3.575 - If the underline affects descendants with a lower content edge, 3.576 - the user agent should shift the underline down further to the 3.577 - lowest underlined content box edge. 3.578 - The user agent may ignore elements with ''vertical-align'' 3.579 - values given as lengths, percentages, ''top'', or ''bottom'' 3.580 - when making this adjustment. 3.581 - (Note that images that are not affected by the underline per 3.582 - 'text-decoration-skip' will not affect the position of the 3.583 - underline.) 3.584 - <div class="figure"> 3.585 - <p><img title="text-underline-position: below" 3.586 - alt="In a typical Latin font, the underline is far enough 3.587 - below the text that it does not cross the bottom of a 'g'." 3.588 - src="underline-position-below.png" 3.589 - > 3.590 - <p class="caption">''text-underline-position: below''</p> 3.591 - </div> 3.592 - <div class="example"> 3.593 - <p>Because 'text-underline-position' inherits, and is not reset 3.594 - by the 'text-decoration' shorthand, the following example 3.595 - switches the document to use ''below'' underlining, which can 3.596 - be more appropriate for writing systems with long, complicated 3.597 - descenders. It is also often useful for mathematical or chemical 3.598 - texts that use many subscripts. 3.599 - <pre>:root { text-underline-position: below; }</pre> 3.600 - </div> 3.601 - <dt><dfn>''left''</dfn></dt> 3.602 - <dd>In vertical writing modes, the underline is aligned as for 3.603 - ''below'', on the left edge of the text.</dd> 3.604 - <dt><dfn>''right''</dfn></dt> 3.605 - <dd>In vertical writing modes, the underline is aligned as for 3.606 - ''below'', except it is aligned to the right edge of the text. 3.607 - If this causes the underline to be drawn on the "over" side of 3.608 - the text, then an overline also switches sides and is drawn on 3.609 - the "under" side.</dd> 3.610 - </dl> 3.611 - 3.612 - <p>If ''below'' is specified alone, ''left'' is also implied. 3.613 - If ''left'' or ''right'' is specified alone, ''below'' is also 3.614 - implied. 3.615 - 3.616 - <p class="issue"> 3.617 - Should ''above''/''below'' be ''over''/''under'' to match text decoration names? 3.618 - 3.619 - <div class="figure" id="fig-text-underline-position"> 3.620 - <table> 3.621 - <tr> 3.622 - <td> 3.623 - <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left' 3.624 - places the underline on the left side of the text." 3.625 - title="text-underline-position: left" 3.626 - src="underline-position-left.png" 3.627 - > 3.628 - 3.629 - <td> 3.630 - <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right' 3.631 - places the underline on the right side of the text." 3.632 - title="text-underline-position: right" 3.633 - src="underline-position-right.png" 3.634 - > 3.635 - 3.636 - <tr> 3.637 - <td>''left'' 3.638 - <td>''right'' 3.639 - </table> 3.640 - <p class="caption">In vertical writing modes, the 'text-underline-position' 3.641 - values ''left'' and ''right'' allow placing the underline on either 3.642 - side of the text. (In horizontal writing modes, both values are 3.643 - treated as ''below''.)</p> 3.644 - </div> 3.645 - 3.646 - <div class="example"> 3.647 - <p>The following example styles modern Chinese, Japanese, and Korean 3.648 - texts with the appropriate underline positions in both horizontal 3.649 - and vertical text: 3.650 - <pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: below right; } 3.651 -<!-- -->:root:lang(zh), [lang|=zh] { text-underline-position: below left; }</pre> 3.652 - </div> 3.653 - 3.654 - <div class="note"> 3.655 - <p>In some cases (such as in OpenType) the font format can offer 3.656 - information about the appropriate position of an underline. 3.657 - Typically this information gives the position of an ''alphabetic'' 3.658 - underline; in some cases (especially in CJK fonts), it gives 3.659 - the position of a ''below left'' underline. (In this case, 3.660 - the font's underline metrics typically touch the bottom edge 3.661 - of the em box). 3.662 - The UA is encouraged to use information (such as the underline 3.663 - thickness, or appropriate alphabetic alignment) from the font 3.664 - wherever appropriate. 3.665 - </p> 3.666 - </div> 3.667 - 3.668 -<h3 id="emphasis-marks"> 3.669 -Emphasis Marks</h3> 3.670 - 3.671 - <p>East Asian documents traditionally use small symbols next to each glyph to emphasize 3.672 - a run of text. For example:</p> 3.673 - 3.674 - <div class="figure"> 3.675 - <p> 3.676 - <img alt="Example of emphasis in Japanese appearing above the text" 3.677 - class="example" src="text-emphasis-ja.gif" height="28" width="225"></p> 3.678 - <p class="caption">Accent emphasis (shown in blue for clarity) applied to Japanese text</p> 3.679 - </div> 3.680 - 3.681 -<h4 id="text-emphasis-style-property"> 3.682 -Emphasis Mark Style: the 'text-emphasis-style' property</h4> 3.683 - 3.684 - <table class="propdef"> 3.685 - <tr> 3.686 - <th>Name: 3.687 - <td><dfn>text-emphasis-style</dfn> 3.688 - <tr> 3.689 - <th><a href="#values">Value</a>: 3.690 - <td>none | 3.691 - [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | 3.692 - <a class="noxref" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string"><span class="value-inst-string"><string></span></a> 3.693 - 3.694 - <tr> 3.695 - <th>Initial: 3.696 - <td>none 3.697 - <tr> 3.698 - <th>Applies to: 3.699 - <td>all elements 3.700 - <tr> 3.701 - <th>Inherited: 3.702 - <td>yes 3.703 - <tr> 3.704 - <th>Percentages: 3.705 - <td>N/A 3.706 - <tr> 3.707 - <th>Media: 3.708 - <td>visual 3.709 - <tr> 3.710 - <th>Computed value: 3.711 - <td>'none', a pair of keywords representing the shape and fill, or 3.712 - a string 3.713 - </table> 3.714 - 3.715 - <p>This property applies emphasis marks to the element's text. 3.716 - Values have the following meanings:</p> 3.717 - 3.718 - <dl> 3.719 - <dt><dfn title="text-emphasis:none">''none''</dfn></dt> 3.720 - <dd>No emphasis marks.</dd> 3.721 - <dt><dfn title="text-emphasis:filled">''filled''</dfn></dt> 3.722 - <dd>The shape is filled with solid color.</dd> 3.723 - <dt><dfn title="text-emphasis:open">''open''</dfn></dt> 3.724 - <dd>The shape is hollow.</dd> 3.725 - <dt><dfn title="text-emphasis:dot">''dot''</dfn></dt> 3.726 - <dd>Display small circles as marks. 3.727 - The filled dot is U+2022 '•', and the open dot is U+25E6 '◦'.</dd> 3.728 - <dt><dfn title="text-emphasis:circle">''circle''</dfn></dt> 3.729 - <dd>Display large circles as marks. 3.730 - The filled circle is U+25CF '●', and the open circle is U+25CB '○'.</dd> 3.731 - <dt><dfn title="text-emphasis:double-circle">''double-circle''</dfn></dt> 3.732 - <dd>Display double circles as marks. 3.733 - The filled double-circle is U+25C9 '◉', and the open double-circle is U+25CE '◎'.</dd> 3.734 - <dt><dfn title="text-emphasis:triangle">''triangle''</dfn></dt> 3.735 - <dd>Display triangles as marks. 3.736 - The filled triangle is U+25B2 '▲', and the open triangle is U+25B3 '△'.</dd> 3.737 - <dt><dfn title="text-emphasis:sesame">''sesame''</dfn></dt> 3.738 - <dd>Display sesames as marks. 3.739 - The filled sesame is U+FE45 '﹅', and the open sesame is U+FE46 '﹆'.</dd> 3.740 - <dt><dfn title="text-emphasis:sesame">''<var><string></var>''</dfn></dt> 3.741 - <dd>Display the given string as marks. 3.742 - Authors should not specify more than one <i>character</i> in <string>. 3.743 - The UA may truncate or ignore strings consisting of more than one grapheme cluster.</dd> 3.744 - </dl> 3.745 - 3.746 - <p>If a shape keyword is specified but neither of ''filled'' nor ''open'' is 3.747 - specified, ''filled'' is assumed. If only ''filled'' or ''open'' is specified, 3.748 - the shape keyword computes to ''circle'' in horizontal writing mode and 3.749 - ''sesame'' in vertical writing mode.</p> 3.750 - 3.751 - <p>The marks should be drawn using the element's font settings with its 3.752 - size scaled down to 50%. However, not all fonts have all these glyphs, 3.753 - and some fonts use inappropriate sizes for emphasis marks in these 3.754 - code points. The UA may opt to use a font known to be good for 3.755 - emphasis marks, or the marks may instead be synthesized by the UA. 3.756 - Marks must remain upright in vertical writing modes: like CJK 3.757 - characters, they do not rotate to match the writing mode.</p> 3.758 - 3.759 - <p class="note"> 3.760 - One example of good fonts for emphasis marks is Adobe's opensource project, 3.761 - <a href="http://sourceforge.net/adobe/kenten-generic/">Kenten Generic OpenType Font</a>, 3.762 - which is specially designed for the emphasis marks. 3.763 - </p> 3.764 - 3.765 - <p>The marks are drawn once for each <i>character</i>. However, 3.766 - emphasis marks are not drawn for characters that are:</p> 3.767 - <ul> 3.768 - <li><a href="http://www.w3.org/TR/css3-text/#word-separator">Word separators</a> or that 3.769 - belong to the Unicode separator classes (Z*). 3.770 - (But note that emphasis marks <em>are</em> drawn for a space 3.771 - that combines with any combining characters.)</li> 3.772 - <li>Characters belonging to the Unicode classes for control codes 3.773 - and unassigned characters (Cc, Cf, Cn).</li> 3.774 - </ul> 3.775 - 3.776 - <p>If emphasis marks are drawn for characters 3.777 - for which ruby is drawn in the same position as the emphasis mark, 3.778 - the ruby should be stacked between the emphasis marks and the base text. 3.779 - In this case, the position of the emphasis marks for a given element 3.780 - should be determined as if all characters have ruby boxes 3.781 - of the same height as the highest ruby box in the element. 3.782 - If the UA is not capable of drawing ruby and emphasis marks on the same side, 3.783 - the UA may hide ruby and draw only emphasis marks.</p> 3.784 - <div class="figure"> 3.785 - <p><img 3.786 - alt="Example of emphasis marks applied to 4 characters, and ruby to 2 of them" 3.787 - src="text-emphasis-ruby.png" width="134" height="50"></p> 3.788 - <p class="caption">Emphasis marks applied to 4 characters, and ruby to 2 of them</p> 3.789 - </div> 3.790 - 3.791 - <p class="note">A future level of CSS may define controls to specify 3.792 - what to do when emphasis marks and ruby text coincide.</p> 3.793 - 3.794 -<h4 id="text-emphasis-color-property"> 3.795 -Emphasis Mark Color: the 'text-emphasis-color' property</h4> 3.796 - 3.797 - <table class="propdef"> 3.798 - <tr> 3.799 - <th>Name: 3.800 - <td><dfn>text-emphasis-color</dfn> 3.801 - <tr> 3.802 - <th><a href="#values">Value</a>: 3.803 - <td><color> 3.804 - <tr> 3.805 - <th>Initial: 3.806 - <td><a href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> 3.807 - <tr> 3.808 - <th>Applies to: 3.809 - <td>all elements 3.810 - <tr> 3.811 - <th>Inherited: 3.812 - <td>yes 3.813 - <tr> 3.814 - <th>Percentages: 3.815 - <td>N/A 3.816 - <tr> 3.817 - <th>Media: 3.818 - <td>visual 3.819 - <tr> 3.820 - <th>Computed value: 3.821 - <td>as specified 3.822 - </table> 3.823 - 3.824 - <p>This property specifies the foreground color of the emphasis marks.</p> 3.825 - 3.826 - <p class="note"> 3.827 - The correct behavior of this property depends on an outstanding erratum on [[CSS3COLOR]] 3.828 - that has the ''currentColor'' keyword inherit as itself, 3.829 - and to take the value of the 'color' property as its <em>used</em> (not computed) value. 3.830 - 3.831 -<h4 id="text-emphasis-property"> 3.832 -Emphasis Mark Shorthand: the 'text-emphasis' property</h4> 3.833 - 3.834 - <table class="propdef"> 3.835 - <tr> 3.836 - <th>Name: 3.837 - <td><dfn>text-emphasis</dfn> 3.838 - <tr> 3.839 - <th><a href="#values">Value</a>: 3.840 - <td>'<<a href="#text-emphasis-style">text-emphasis-style</a>>' || '<<a href="#text-emphasis-color">text-emphasis-color</a>>' 3.841 - 3.842 - <tr> 3.843 - <th>Initial: 3.844 - <td>see individual properties 3.845 - <tr> 3.846 - <th>Applies to: 3.847 - <td>all elements 3.848 - <tr> 3.849 - <th>Inherited: 3.850 - <td>yes 3.851 - <tr> 3.852 - <th>Percentages: 3.853 - <td>N/A 3.854 - <tr> 3.855 - <th>Media: 3.856 - <td>visual 3.857 - <tr> 3.858 - <th>Computed value: 3.859 - <td>see individual properties 3.860 - </table> 3.861 - 3.862 - <p>This property is a shorthand for setting 3.863 - 'text-emphasis-style' and 'text-emphasis-color' 3.864 - in one declaration. 3.865 - Omitted values are set to their initial values.</p> 3.866 - 3.867 - <p class="note">Note that 'text-emphasis-position' is not reset in this 3.868 - shorthand. This is because typically the shape and color vary, but the 3.869 - position is consistent for a particular language throughout the document. 3.870 - Therefore the position should inherit independently.</p> 3.871 - 3.872 -<h4 id="text-emphasis-position-property"> 3.873 -Emphasis Mark Position: the 'text-emphasis-position' property</h4> 3.874 - 3.875 - <table class="propdef"> 3.876 - <tr> 3.877 - <th>Name: 3.878 - <td><dfn>text-emphasis-position</dfn> 3.879 - <tr> 3.880 - <th><a href="#values">Value</a>: 3.881 - <td>[ above | below ] && [ right | left ] 3.882 - 3.883 - <tr> 3.884 - <th>Initial: 3.885 - <td>above right 3.886 - <tr> 3.887 - <th>Applies to: 3.888 - <td>all elements 3.889 - <tr> 3.890 - <th>Inherited: 3.891 - <td>yes 3.892 - <tr> 3.893 - <th>Percentages: 3.894 - <td>N/A 3.895 - <tr> 3.896 - <th>Media: 3.897 - <td>visual 3.898 - <tr> 3.899 - <th>Computed value: 3.900 - <td>as specified 3.901 - </table> 3.902 - 3.903 - <p>This property describes where emphasis marks are drawn at. 3.904 - The values have following meanings:</p> 3.905 - 3.906 - <dl> 3.907 - <dt><dfn title="text-emphasis:above">''above''</dfn></dt> 3.908 - <dd>Draw marks over the text in horizontal writing mode.</dd> 3.909 - <dt><dfn title="text-emphasis:below">''below''</dfn></dt> 3.910 - <dd>Draw marks under the text in horizontal writing mode.</dd> 3.911 - <dt><dfn title="text-emphasis:right">''right''</dfn></dt> 3.912 - <dd>Draw marks to the right of the text in vertical writing mode.</dd> 3.913 - <dt><dfn title="text-emphasis:left">''left''</dfn></dt> 3.914 - <dd>Draw marks to the left of the text in vertical writing mode.</dd> 3.915 - </dl> 3.916 - 3.917 - <p class="issue"> 3.918 - Should ''above''/''below'' be ''over''/''under'' to match text decoration names? 3.919 - 3.920 - <p>Emphasis marks are drawn exactly as if each character was 3.921 - assigned the mark as its ruby annotation text with the ruby position 3.922 - given by 'text-emphasis-position' and the ruby alignment as centered. 3.923 - 3.924 - <p>The effect of emphasis marks on the line height is the same as for 3.925 - ruby text.</p> 3.926 - 3.927 - <div class="note"> 3.928 - <p>Note, the preferred position of emphasis marks depends on the 3.929 - language. In Japanese for example, the preferred position is 3.930 - ''above right''. In Chinese, on the other hand, the preferred 3.931 - position is ''below right''. 3.932 - The informative table below summarizes the preferred 3.933 - emphasis mark positions for Chinese and Japanese:</p> 3.934 - 3.935 - <table class="data"> 3.936 - <caption>Preferred emphasis mark and ruby position</caption> 3.937 - <thead> 3.938 - <tr> 3.939 - <th scope="col" rowspan=2>Language 3.940 - <th scope="col" colspan=2>Preferred mark position 3.941 - <th scope="col" colspan=2 rowspan=2>Illustration 3.942 - <tr> 3.943 - <th>Horizontal 3.944 - <th>Vertical 3.945 - </thead> 3.946 - <tbody> 3.947 - <tr> 3.948 - <td scope="row">Japanese 3.949 - <td>above 3.950 - <td>right 3.951 - <td> 3.952 - <img alt="Emphasis marks appear above each emphasized character in horizontal Japanese text." 3.953 - title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text" 3.954 - src="text-emphasis-ja.gif" height="28" width="225"> 3.955 - 3.956 - <td rowspan="2"> 3.957 - <img alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text." 3.958 - title="Emphasis applied on the right of a fragment of Japanese text" 3.959 - src="text-emphasis-v.gif" height="89" width="34"> 3.960 - 3.961 - <!-- 3.962 - <tr> 3.963 - <td scope="row">Mongolian 3.964 - <td><span class="issue">?</span> 3.965 - <td>right 3.966 - --> 3.967 - <tr> 3.968 - <td scope="row">Chinese 3.969 - <td>below 3.970 - <td>right 3.971 - <td> 3.972 - <img alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text." 3.973 - title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text" 3.974 - src="text-emphasis-zh.gif" height="28" width="133"> 3.975 - </tbody> 3.976 - </table> 3.977 - </div> 3.978 - 3.979 -<h3 id="text-shadow-property"> 3.980 -Text Shadows: the 'text-shadow' property</h3> 3.981 - 3.982 - <table class="propdef"> 3.983 - <tr> 3.984 - <th>Name: 3.985 - <td><dfn>text-shadow</dfn> 3.986 - <tr> 3.987 - <th><a href="#values">Value</a>: 3.988 - <td>none | [ <length>{2,3} && <color>? ]# 3.989 - <tr> 3.990 - <th>Initial: 3.991 - <td>none 3.992 - <tr> 3.993 - <th>Applies to: 3.994 - <td>all elements 3.995 - <tr> 3.996 - <th>Inherited: 3.997 - <td>yes 3.998 - <tr> 3.999 - <th>Percentages: 3.1000 - <td>N/A 3.1001 - <tr> 3.1002 - <th>Media: 3.1003 - <td>visual 3.1004 - <tr> 3.1005 - <th>Computed value: 3.1006 - <td>a color plus three absolute <length>s 3.1007 - </table> 3.1008 - 3.1009 - <p>This property accepts a comma-separated list of shadow effects to 3.1010 - be applied to the text of the element. Values are interpreted as for 3.1011 - <a href="http://www.w3.org/TR/css3-background/#the-box-shadow">'box-shadow'</a> 3.1012 - [[!CSS3BG]]. (But note that spread values are not allowed.) 3.1013 - The shadow is applied to all of the element's text as well as any 3.1014 - text decorations it specifies. 3.1015 - 3.1016 - <p>The shadow effects are applied front-to-back: the first shadow is on 3.1017 - top. The shadows may thus overlay each other, but they never overlay 3.1018 - the text itself. The shadow must be painted at a stack level between 3.1019 - the element's border and/or background, if present, and the elements 3.1020 - text and text decoration. UAs should avoid painting text shadows over 3.1021 - text in adjacent elements belonging to the same stack level and stacking 3.1022 - context. (This may mean that the exact stack level of the shadows depends 3.1023 - on whether the element has a border or background: the exact stacking 3.1024 - behavior of text shadows is thus UA-defined.)</p> 3.1025 - 3.1026 - <p>Unlike 'box-shadow', text shadows are not clipped to the shadowed 3.1027 - shape and may show through if the text is partially-transparent. 3.1028 - Like 'box-shadow', text shadows do not influence layout, and do not 3.1029 - trigger scrolling or increase the size of the scrollable area. 3.1030 - 3.1031 - <p class="note">The painting order of shadows defined here is the opposite 3.1032 - of that defined in the 1998 3.1033 - <a href="http://www.w3.org/TR/1998/REC-CSS2-19980512">CSS2 Recommendation</a>.</p> 3.1034 - 3.1035 - <p>The ''text-shadow'' property applies to both the 3.1036 - <code>::first-line</code> and <code>::first-letter</code> 3.1037 - pseudo-elements.</p> 3.1038 - 3.1039 -<h2 id="conformance"> 3.1040 -Conformance</h2> 3.1041 - 3.1042 -<h3 id="conventions"> 3.1043 -Document Conventions</h3> 3.1044 - 3.1045 - <p>Conformance requirements are expressed with a combination of 3.1046 - descriptive assertions and RFC 2119 terminology. The key words “MUST”, 3.1047 - “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, 3.1048 - “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this 3.1049 - document are to be interpreted as described in RFC 2119. 3.1050 - However, for readability, these words do not appear in all uppercase 3.1051 - letters in this specification. 3.1052 - 3.1053 - <p>All of the text of this specification is normative except sections 3.1054 - explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p> 3.1055 - 3.1056 - <p>Examples in this specification are introduced with the words “for example” 3.1057 - or are set apart from the normative text with <code>class="example"</code>, 3.1058 - like this: 3.1059 - 3.1060 - <div class="example"> 3.1061 - <p>This is an example of an informative example.</p> 3.1062 - </div> 3.1063 - 3.1064 - <p>Informative notes begin with the word “Note” and are set apart from the 3.1065 - normative text with <code>class="note"</code>, like this: 3.1066 - 3.1067 - <p class="note">Note, this is an informative note.</p> 3.1068 - 3.1069 -<h3 id="conformance-classes"> 3.1070 -Conformance Classes</h3> 3.1071 - 3.1072 - <p>Conformance to CSS Text Level 3 3.1073 - is defined for three conformance classes: 3.1074 - <dl> 3.1075 - <dt><dfn title="style sheet!!as conformance class">style sheet</dfn> 3.1076 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 3.1077 - style sheet</a>. 3.1078 - <dt><dfn>renderer</dfn></dt> 3.1079 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 3.1080 - that interprets the semantics of a style sheet and renders 3.1081 - documents that use them. 3.1082 - <dt><dfn id="authoring-tool">authoring tool</dfn></dt> 3.1083 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 3.1084 - that writes a style sheet. 3.1085 - </dl> 3.1086 - 3.1087 - <p>A style sheet is conformant to CSS Text Level 3 3.1088 - if all of its declarations that use properties defined in this module 3.1089 - have values that are valid according to the generic CSS grammar and the 3.1090 - individual grammars of each property as given in this module. 3.1091 - 3.1092 - <p>A renderer is conformant to CSS Text Level 3 3.1093 - if, in addition to interpreting the style sheet as defined by the 3.1094 - appropriate specifications, it supports all the features defined 3.1095 - by CSS Text Level 3 by parsing them correctly 3.1096 - and rendering the document accordingly. However, the inability of a 3.1097 - UA to correctly render a document due to limitations of the device 3.1098 - does not make the UA non-conformant. (For example, a UA is not 3.1099 - required to render color on a monochrome monitor.) 3.1100 - 3.1101 - <p>An authoring tool is conformant to CSS Text Level 3 3.1102 - if it writes style sheets that are syntactically correct according to the 3.1103 - generic CSS grammar and the individual grammars of each feature in 3.1104 - this module, and meet all other conformance requirements of style sheets 3.1105 - as described in this module. 3.1106 - 3.1107 -<h3 id="partial"> 3.1108 -Partial Implementations</h3> 3.1109 - 3.1110 - <p>So that authors can exploit the forward-compatible parsing rules to 3.1111 - assign fallback values, CSS renderers <strong>must</strong> 3.1112 - treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore 3.1113 - as appropriate</a>) any at-rules, properties, property values, keywords, 3.1114 - and other syntactic constructs for which they have no usable level of 3.1115 - support. In particular, user agents <strong>must not</strong> selectively 3.1116 - ignore unsupported component values and honor supported values in a single 3.1117 - multi-value property declaration: if any value is considered invalid 3.1118 - (as unsupported values must be), CSS requires that the entire declaration 3.1119 - be ignored.</p> 3.1120 - 3.1121 -<h3 id="experimental"> 3.1122 -Experimental Implementations</h3> 3.1123 - 3.1124 - <p>To avoid clashes with future CSS features, the CSS2.1 specification 3.1125 - reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 3.1126 - syntax</a> for proprietary and experimental extensions to CSS. 3.1127 - 3.1128 - <p>Prior to a specification reaching the Candidate Recommendation stage 3.1129 - in the W3C process, all implementations of a CSS feature are considered 3.1130 - experimental. The CSS Working Group recommends that implementations 3.1131 - use a vendor-prefixed syntax for such features, including those in 3.1132 - W3C Working Drafts. This avoids incompatibilities with future changes 3.1133 - in the draft. 3.1134 - </p> 3.1135 - 3.1136 -<h3 id="testing">Non-Experimental Implementations</h3> 3.1137 - 3.1138 - <p>Once a specification reaches the Candidate Recommendation stage, 3.1139 - non-experimental implementations are possible, and implementors should 3.1140 - release an unprefixed implementation of any CR-level feature they 3.1141 - can demonstrate to be correctly implemented according to spec. 3.1142 - 3.1143 - <p>To establish and maintain the interoperability of CSS across 3.1144 - implementations, the CSS Working Group requests that non-experimental 3.1145 - CSS renderers submit an implementation report (and, if necessary, the 3.1146 - testcases used for that implementation report) to the W3C before 3.1147 - releasing an unprefixed implementation of any CSS features. Testcases 3.1148 - submitted to W3C are subject to review and correction by the CSS 3.1149 - Working Group. 3.1150 - 3.1151 - <p>Further information on submitting testcases and implementation reports 3.1152 - can be found from on the CSS Working Group's website at 3.1153 - <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 3.1154 - Questions should be directed to the 3.1155 - <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> 3.1156 - mailing list. 3.1157 - 3.1158 -<h3 id="cr-exit-criteria"> 3.1159 -CR Exit Criteria</h3> 3.1160 - 3.1161 - <p> 3.1162 - For this specification to be advanced to Proposed Recommendation, 3.1163 - there must be at least two independent, interoperable implementations 3.1164 - of each feature. Each feature may be implemented by a different set of 3.1165 - products, there is no requirement that all features be implemented by 3.1166 - a single product. For the purposes of this criterion, we define the 3.1167 - following terms: 3.1168 - 3.1169 - <dl> 3.1170 - <dt>independent <dd>each implementation must be developed by a 3.1171 - different party and cannot share, reuse, or derive from code 3.1172 - used by another qualifying implementation. Sections of code that 3.1173 - have no bearing on the implementation of this specification are 3.1174 - exempt from this requirement. 3.1175 - 3.1176 - <dt>interoperable <dd>passing the respective test case(s) in the 3.1177 - official CSS test suite, or, if the implementation is not a Web 3.1178 - browser, an equivalent test. Every relevant test in the test 3.1179 - suite should have an equivalent test created if such a user 3.1180 - agent (UA) is to be used to claim interoperability. In addition 3.1181 - if such a UA is to be used to claim interoperability, then there 3.1182 - must one or more additional UAs which can also pass those 3.1183 - equivalent tests in the same way for the purpose of 3.1184 - interoperability. The equivalent tests must be made publicly 3.1185 - available for the purposes of peer review. 3.1186 - 3.1187 - <dt>implementation <dd>a user agent which: 3.1188 - 3.1189 - <ol class=inline> 3.1190 - <li>implements the specification. 3.1191 - 3.1192 - <li>is available to the general public. The implementation may 3.1193 - be a shipping product or other publicly available version 3.1194 - (i.e., beta version, preview release, or “nightly build”). 3.1195 - Non-shipping product releases must have implemented the 3.1196 - feature(s) for a period of at least one month in order to 3.1197 - demonstrate stability. 3.1198 - 3.1199 - <li>is not experimental (i.e., a version specifically designed 3.1200 - to pass the test suite and is not intended for normal usage 3.1201 - going forward). 3.1202 - </ol> 3.1203 - </dl> 3.1204 - 3.1205 - <p>The specification will remain Candidate Recommendation for at least 3.1206 - six months. 3.1207 - 3.1208 -<h2 class="no-num" id="acknowledgements"> 3.1209 - Appendix A: Acknowledgements</h2> 3.1210 - 3.1211 - <p>This specification would not have been possible without the help from: 3.1212 - Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett, 3.1213 - Martin Dürst, 3.1214 - Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye Gittelman, Ian 3.1215 - Hickson, Martin Heijdra, Richard Ishida, Masayasu Ishikawa, 3.1216 - Michael Jochimsen, Eric LeVine, Ambrose Li, Håkon Wium Lie, Chris Lilley, 3.1217 - Ken Lunde, Nat McCully, Shinyu Murakami, Paul Nelson, Chris Pratley, Marcin Sawicki, 3.1218 - Arnold Schrijver, Rahul Sonnad, Michel Suignard, Takao Suzuki, 3.1219 - Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi Yabe 3.1220 - and Steve Zilles.</p> 3.1221 - 3.1222 -<h2 class="no-num">Appendix B: References</h2> 3.1223 - 3.1224 -<h3 class="no-num" id="normative-ref">Normative references</h3> 3.1225 -<!--normative--> 3.1226 - 3.1227 -<h3 class="no-num" id="informative-ref">Informative references</h3> 3.1228 -<!--informative--> 3.1229 - 3.1230 -<h2 class="no-num" id="changes">Appendix C: 3.1231 -Changes</h2>
4.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 4.2 +++ b/css3-text-decor/css-text-decor-3/Overview.html Mon Oct 15 14:54:31 2012 -0700 4.3 @@ -0,0 +1,1780 @@ 4.4 +<!DOCTYPE html> 4.5 + 4.6 +<html lang=en> 4.7 + <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ "> 4.8 + <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 4.9 + <title>CSS Text Decoration Module Level 3 (CSS3 Text Decoration)</title> 4.10 + 4.11 + <link href="http://purl.org/dc/terms/" rel=schema.DC> 4.12 + <meta content="CSS Text Decoration Module Level 3 (CSS3 Text Decoration)" 4.13 + name=DC.title> 4.14 + <meta content=text name=DC.type> 4.15 + <meta content=2012-09-23 name=DC.issued> 4.16 + <meta content="Elika J. Etemad" name=DC.creator> 4.17 + <meta content="Koji Ishii" name=DC.creator> 4.18 + <meta content=W3C name=DC.publisher> 4.19 + <meta content="http://www.w3.org/TR/2012/WD-css3-text-20120923/" 4.20 + name=DC.identifier> 4.21 + <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 4.22 + rel=DC.rights> 4.23 + <link href="#contents" rel=contents> 4.24 + <link href="#index" rel=index> 4.25 + <link href="../default.css" rel=stylesheet type="text/css"> 4.26 + <link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel=stylesheet 4.27 + type="text/css"> 4.28 + 4.29 + <body> 4.30 + <div class=head> <!--begin-logo--> 4.31 + <p><a href="http://www.w3.org/"><img alt=W3C height=48 4.32 + src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--> 4.33 + 4.34 + <h1>CSS Text Decoration Module Level 3</h1> 4.35 + 4.36 + <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 23 4.37 + September 2012</h2> 4.38 + 4.39 + <dl> 4.40 + <dt>This version:</dt> 4.41 + <!-- 4.42 + <dd><a href="http://dev.w3.org/csswg/css3-text/">$Date$ (CVS $Revision$)</a> 4.43 + --> 4.44 + 4.45 + <dd><a 4.46 + href="http://www.w3.org/TR/2012/WD-css3-text-20120923/">http://www.w3.org/TR/2012/WD-css3-text-20120923/</a> 4.47 + 4.48 + <dt>Latest version: 4.49 + 4.50 + <dd><a 4.51 + href="http://www.w3.org/TR/css3-text/">http://www.w3.org/TR/css3-text/</a> 4.52 + 4.53 + <dt>Latest editor's draft: 4.54 + 4.55 + <dd><a 4.56 + href="http://dev.w3.org/csswg/css3-text/">http://dev.w3.org/csswg/css3-text/</a> 4.57 + 4.58 + <dt>Previous version: 4.59 + 4.60 + <dd><a 4.61 + href="http://www.w3.org/TR/2012/WD-css3-text-20120119/">http://www.w3.org/TR/2012/WD-css3-text-20120119/</a> 4.62 + 4.63 + <dt>Issues List: 4.64 + 4.65 + <dd><a 4.66 + href="http://www.w3.org/Style/CSS/Tracker/products/10">http://www.w3.org/Style/CSS/Tracker/products/10</a> 4.67 + 4.68 + <dt>Discussion: 4.69 + 4.70 + <dd><a 4.71 + href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> 4.72 + with subject line “<kbd>[css3-text] <var>… message topic 4.73 + …</var></kbd>” 4.74 + 4.75 + <dt>Editors: 4.76 + 4.77 + <dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> 4.78 + (Mozilla) 4.79 + 4.80 + <dd><a href="mailto:koji.a.ishii@mail.rakuten.com">Koji Ishii</a> 4.81 + (Rakuten, Inc.) 4.82 + </dl> 4.83 + <!--begin-copyright--> 4.84 + <p class=copyright><a 4.85 + href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 4.86 + rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr 4.87 + title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a 4.88 + href="http://www.csail.mit.edu/"><abbr 4.89 + title="Massachusetts Institute of Technology">MIT</abbr></a>, <a 4.90 + href="http://www.ercim.eu/"><abbr 4.91 + title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, 4.92 + <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a 4.93 + href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, 4.94 + <a 4.95 + href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> 4.96 + and <a 4.97 + href="http://www.w3.org/Consortium/Legal/copyright-documents">document 4.98 + use</a> rules apply.</p> 4.99 + <!--end-copyright--> 4.100 + <hr title="Separator for header"> 4.101 + </div> 4.102 + 4.103 + <h2 class="no-num no-toc" id=abstract>Abstract</h2> 4.104 + 4.105 + <p>This module contains the features of CSS relating to text decoration, 4.106 + such as underlines, text shadows, and emphasis marks. <a 4.107 + href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing the 4.108 + rendering of structured documents (such as HTML and XML) on screen, on 4.109 + paper, in speech, etc. 4.110 + 4.111 + <h2 class="no-num no-toc" id=status>Status of this document</h2> 4.112 + 4.113 + <p><em>This section describes the status of this document at the time of 4.114 + its publication. Other documents may supersede this document. A list of 4.115 + current W3C publications and the latest revision of this technical report 4.116 + can be found in the <a href="http://www.w3.org/TR/">W3C technical reports 4.117 + index at http://www.w3.org/TR/.</a></em> 4.118 + 4.119 + <p>Publication as a Working Draft does not imply endorsement by the W3C 4.120 + Membership. This is a draft document and may be updated, replaced or 4.121 + obsoleted by other documents at any time. It is inappropriate to cite this 4.122 + document as other than work in progress. 4.123 + 4.124 + <p>This CSS module has been produced as a combined effort of the <a 4.125 + href="http://www.w3.org/International/Activity">W3C Internationalization 4.126 + Activity</a>, and the <a href="http://www.w3.org/Style/Activity">Style 4.127 + Activity</a> and is maintained by the <a 4.128 + href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>. It also 4.129 + includes contributions made by participants in the <a 4.130 + href="http://www.w3.org/Style/XSL/Group/">XSL Working Group</a> (<a 4.131 + href="http://cgi.w3.org/MemberAccess/AccessRequest">members only</a>). 4.132 + 4.133 + <p>This document was produced by a group operating under the <a 4.134 + href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 4.135 + 2004 W3C Patent Policy</a>. W3C maintains a <a 4.136 + href="http://www.w3.org/2004/01/pp-impl/32061/status" 4.137 + rel=disclosure>public list of any patent disclosures</a> made in 4.138 + connection with the deliverables of the group; that page also includes 4.139 + instructions for disclosing a patent. An individual who has actual 4.140 + knowledge of a patent which the individual believes contains <a 4.141 + href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential 4.142 + Claim(s)</a> must disclose the information in accordance with <a 4.143 + href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 4.144 + 6 of the W3C Patent Policy</a>. 4.145 + 4.146 + <p><strong>Feedback on this draft should be posted to the (<a 4.147 + href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public 4.148 + mailing list <a 4.149 + href="mailto:www-style@w3.org">www-style@w3.org</a></strong> (see <a 4.150 + href="http://www.w3.org/Mail/Request">instructions</a>) <strong>with 4.151 + <kbd>[css3-text-decor]</kbd> in the subject line.</strong> You are 4.152 + strongly encouraged to complain if you see something stupid in this draft. 4.153 + The editors will do their best to respond to all feedback. 4.154 + 4.155 + <p>The following features are at risk and may be cut from the spec during 4.156 + its CR period if there are no (correct) implementations: 4.157 + 4.158 + <p>The following features are at risk and may be cut from the spec during 4.159 + its CR period if there are no (correct) implementations: 4.160 + 4.161 + <ul> 4.162 + <li>the ‘<a href="#text-decoration-skip"><code 4.163 + class=property>text-decoration-skip</code></a>’ property / ‘<code 4.164 + class=css>ink</code>’ value 4.165 + </ul> 4.166 + 4.167 + <h2 class="no-num no-toc" id=contents> Table of Contents</h2> 4.168 + <!--begin-toc--> 4.169 + 4.170 + <ul class=toc> 4.171 + <li><a href="#intro"><span class=secno>1. </span> Introduction</a> 4.172 + <ul class=toc> 4.173 + <li><a href="#placement"><span class=secno>1.1. </span> Module 4.174 + Interactions</a> 4.175 + 4.176 + <li><a href="#values"><span class=secno>1.2. </span> Values</a> 4.177 + 4.178 + <li><a href="#terms"><span class=secno>1.3. </span>Terminology</a> 4.179 + </ul> 4.180 + 4.181 + <li><a href="#line-decoration"><span class=secno>2. </span> Line 4.182 + Decoration: Underline, Overline, and Strike-Through</a> 4.183 + <ul class=toc> 4.184 + <li><a href="#text-decoration-line-property"><span class=secno>2.1. 4.185 + </span> Text Decoration Lines: the ‘<code 4.186 + class=property>text-decoration-line</code>’ property</a> 4.187 + 4.188 + <li><a href="#text-decoration-color-property"><span class=secno>2.2. 4.189 + </span> Text Decoration Color: the ‘<code 4.190 + class=property>text-decoration-color</code>’ property</a> 4.191 + 4.192 + <li><a href="#text-decoration-style-property"><span class=secno>2.3. 4.193 + </span> Text Decoration Style: the ‘<code 4.194 + class=property>text-decoration-style</code>’ property</a> 4.195 + 4.196 + <li><a href="#text-decoration-property"><span class=secno>2.4. </span> 4.197 + Text Decoration Shorthand: the ‘<code 4.198 + class=property>text-decoration</code>’ property</a> 4.199 + 4.200 + <li><a href="#text-decoration-skip-property"><span class=secno>2.5. 4.201 + </span> Text Decoration Line Continuity: the ‘<code 4.202 + class=property>text-decoration-skip</code>’ property</a> 4.203 + <ul class=toc> 4.204 + <li><a href="#text-underline-position-property"><span 4.205 + class=secno>2.5.1. </span> Text Underline Position: the ‘<code 4.206 + class=property>text-underline-position</code>’ property</a> 4.207 + </ul> 4.208 + 4.209 + <li><a href="#emphasis-marks"><span class=secno>2.6. </span> Emphasis 4.210 + Marks</a> 4.211 + <ul class=toc> 4.212 + <li><a href="#text-emphasis-style-property"><span class=secno>2.6.1. 4.213 + </span> Emphasis Mark Style: the ‘<code 4.214 + class=property>text-emphasis-style</code>’ property</a> 4.215 + 4.216 + <li><a href="#text-emphasis-color-property"><span class=secno>2.6.2. 4.217 + </span> Emphasis Mark Color: the ‘<code 4.218 + class=property>text-emphasis-color</code>’ property</a> 4.219 + 4.220 + <li><a href="#text-emphasis-property"><span class=secno>2.6.3. </span> 4.221 + Emphasis Mark Shorthand: the ‘<code 4.222 + class=property>text-emphasis</code>’ property</a> 4.223 + 4.224 + <li><a href="#text-emphasis-position-property"><span 4.225 + class=secno>2.6.4. </span> Emphasis Mark Position: the ‘<code 4.226 + class=property>text-emphasis-position</code>’ property</a> 4.227 + </ul> 4.228 + 4.229 + <li><a href="#text-shadow-property"><span class=secno>2.7. </span> Text 4.230 + Shadows: the ‘<code class=property>text-shadow</code>’ property</a> 4.231 + </ul> 4.232 + 4.233 + <li><a href="#conformance"><span class=secno>3. </span> Conformance</a> 4.234 + <ul class=toc> 4.235 + <li><a href="#conventions"><span class=secno>3.1. </span> Document 4.236 + Conventions</a> 4.237 + 4.238 + <li><a href="#conformance-classes"><span class=secno>3.2. </span> 4.239 + Conformance Classes</a> 4.240 + 4.241 + <li><a href="#partial"><span class=secno>3.3. </span> Partial 4.242 + Implementations</a> 4.243 + 4.244 + <li><a href="#experimental"><span class=secno>3.4. </span> Experimental 4.245 + Implementations</a> 4.246 + 4.247 + <li><a href="#testing"><span class=secno>3.5. </span>Non-Experimental 4.248 + Implementations</a> 4.249 + 4.250 + <li><a href="#cr-exit-criteria"><span class=secno>3.6. </span> CR Exit 4.251 + Criteria</a> 4.252 + </ul> 4.253 + 4.254 + <li class=no-num><a href="#acknowledgements"> Appendix A: 4.255 + Acknowledgements</a> 4.256 + 4.257 + <li class=no-num><a href="#appendix-b-references">Appendix B: 4.258 + References</a> 4.259 + <ul class=toc> 4.260 + <li class=no-num><a href="#normative-ref">Normative references</a> 4.261 + 4.262 + <li class=no-num><a href="#informative-ref">Informative references</a> 4.263 + </ul> 4.264 + 4.265 + <li class=no-num><a href="#changes">Appendix C: Changes</a> 4.266 + </ul> 4.267 + <!--end-toc--> 4.268 + 4.269 + <h2 id=intro><span class=secno>1. </span> Introduction</h2> 4.270 + 4.271 + <p>[document here] 4.272 + 4.273 + <p class=issue>This draft describes features that are specific to certain 4.274 + scripts. There is an ongoing discussion about where these features belong: 4.275 + in existing CSS properties, in new CSS properties, or perhaps in other 4.276 + specifications. 4.277 + 4.278 + <h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3> 4.279 + 4.280 + <p>This module replaces and extends the text-level features defined in <a 4.281 + href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> chapter 16. 4.282 + 4.283 + <h3 id=values><span class=secno>1.2. </span> Values</h3> 4.284 + 4.285 + <p>This specification follows the <a 4.286 + href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property 4.287 + definition conventions</a> from <a href="#CSS21" 4.288 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in 4.289 + this specification are defined in CSS Level 2 Revision 1 <a 4.290 + href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS 4.291 + modules may expand the definitions of these value types: for example <a 4.292 + href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>, 4.293 + when combined with this module, expands the definition of the 4.294 + <color> value type as used in this specification. 4.295 + 4.296 + <p>In addition to the property-specific values listed in their definitions, 4.297 + all properties defined in this specification also accept the <a 4.298 + href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> 4.299 + keyword as their property value. For readability it has not been repeated 4.300 + explicitly. 4.301 + 4.302 + <p>The <dfn id=currentcolor>‘<code class=css>currentcolor</code>’</dfn> 4.303 + keyword here computes to itself and is resolved to the value of ‘<code 4.304 + class=property>color</code>’ after inheritance is performed. This is so 4.305 + that the ‘<a href="#text-emphasis-color"><code 4.306 + class=property>text-emphasis-color</code></a>’ by default matches the 4.307 + text ‘<code class=property>color</code>’. <span class=issue>CSS3 Color 4.308 + has not yet been errata'd to define it this way; currentcolor there is 4.309 + defined to compute to the value of ‘<code 4.310 + class=property>color</code>’, which gives it the wrong inheritance 4.311 + behavior.</span> 4.312 + 4.313 + <h3 id=terms><span class=secno>1.3. </span>Terminology</h3> 4.314 + 4.315 + <p>The terms <a 4.316 + href="http://www.w3.org/TR/css3-text/#grapheme-cluster"><dfn 4.317 + id=character>character</dfn></a>, <a 4.318 + href="http://www.w3.org/TR/css3-text/#letter"><dfn 4.319 + id=letter>letter</dfn></a>, and <a 4.320 + href="http://www.w3.org/TR/css3-text/#content-language"><dfn 4.321 + id=content-language>content language</dfn></a> as used in this 4.322 + specification are defined in <a href="#CSS3TEXT" 4.323 + rel=biblioentry>[CSS3TEXT]<!--{{!CSS3TEXT}}--></a>. Other terminology and 4.324 + concepts used in this specification are defined in <a href="#CSS21" 4.325 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> and <a 4.326 + href="#CSS3-WRITING-MODES" 4.327 + rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>. 4.328 + 4.329 + <h2 id=line-decoration><span class=secno>2. </span> Line Decoration: 4.330 + Underline, Overline, and Strike-Through</h2> 4.331 + 4.332 + <p>The following properties describe line decorations that are added to the 4.333 + content of an element. When specified on or propagated to an inline box, 4.334 + such decoration affects all the boxes generated by that element, and is 4.335 + further propagated to any in-flow block-level boxes that split the inline 4.336 + (see <a 4.337 + href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">CSS2.1 4.338 + section 9.2.1.1</a>) When specified on or propagated to a ruby box, the 4.339 + decorations are further propagated only to the ruby base. When specified 4.340 + on or propagated to a a block container that establishes an inline 4.341 + formatting context, the decorations are propagated to an anonymous inline 4.342 + element that wraps all the in-flow inline-level children of the block 4.343 + container. For all other elements, the decorations are propagated to any 4.344 + in-flow children. 4.345 + 4.346 + <p class=note>Note that text decorations are not propagated to any 4.347 + out-of-flow descendants, nor to the contents of atomic inline-level 4.348 + descendants such as inline blocks and inline tables. 4.349 + 4.350 + <p>By default underlines, overlines, and line-throughs are applied only to 4.351 + text (including white space, letter spacing, and word spacing): margins, 4.352 + borders, and padding are skipped. Elements containing no text, such as 4.353 + images, are likewise not decorated. The ‘<a 4.354 + href="#text-decoration-skip"><code 4.355 + class=property>text-decoration-skip</code></a>’ property can be used to 4.356 + modify this behavior, for example allowing inline replaced elements to be 4.357 + underlined or requiring that white space be skipped. 4.358 + 4.359 + <p>In determining the position and thickness of text decoration lines, user 4.360 + agents may consider the font sizes and dominant baselines of descendants, 4.361 + but for a given element's decoration must use the same position and 4.362 + thickness throughout each line box. The <a 4.363 + href="#text-decoration-color">color</a> and <a 4.364 + href="#text-decoration-style">line style</a> of decorations must remain 4.365 + the same on all decorations applied by a given element, even if descendant 4.366 + elements have different color or line style values. 4.367 + 4.368 + <div class=example> 4.369 + <p>The following figure shows the averaging for underline: 4.370 + 4.371 + <p><img 4.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." 4.373 + height=105 src=underline-averaging.gif width=326> 4.374 + 4.375 + <p>In the three fragments of underlined text, the underline is drawn 4.376 + consecutively lower and thicker as the ratio of large text to small text 4.377 + increases. 4.378 + </div> 4.379 + 4.380 + <p>Relatively positioning a descendant moves all text decorations affecting 4.381 + it along with the descendant's text; it does not affect calculation of the 4.382 + decoration's initial position on that line. The ‘<code 4.383 + class=property>visibility</code>’ property, filters, and other graphical 4.384 + transformations likewise affect text decorations as part of the text 4.385 + they're drawn on, even if the decorations were specified on an ancestor 4.386 + element. <span class=issue>Does this include ‘<a 4.387 + href="#text-shadow"><code class=property>text-shadow</code></a>’? What 4.388 + about text-fill etc.?</span> 4.389 + 4.390 + <div class=example> 4.391 + <p>In the following style sheet and document fragment: 4.392 + 4.393 + <pre><code class=css> 4.394 +<!-- --> blockquote { text-decoration: underline; color: blue; } 4.395 +<!-- --> em { display: block; } 4.396 +<!-- --> cite { color: fuchsia; } 4.397 +<!----></code></pre> 4.398 + 4.399 + <pre class=html><code> 4.400 +<!-- --> <blockquote> 4.401 +<!-- --> <p> 4.402 +<!-- --> <span> 4.403 +<!-- --> Help, help! 4.404 +<!-- --> <em> I am under a hat! </em> 4.405 +<!-- --> 4.406 +<!-- --> <cite> —GwieF </cite> 4.407 +<!-- --> </span> 4.408 +<!-- --> </p> 4.409 +<!-- --> </blockquote> 4.410 +<!----></code></pre> 4.411 + 4.412 + <p>...the underlining for the blockquote element is propagated to an 4.413 + anonymous inline element that surrounds the span element, causing the 4.414 + text "Help, help!" to be blue, with the blue underlining from the 4.415 + anonymous inline underneath it, the color being taken from the blockquote 4.416 + element. The <code><em>text</em></code> in the em block is 4.417 + also underlined, as it is in an in-flow block to which the underline is 4.418 + propagated. The final line of text is fuchsia, but the underline 4.419 + underneath it is still the blue underline from the anonymous inline 4.420 + element. 4.421 + 4.422 + <p><img alt="Sample rendering of the above underline example" 4.423 + src=underline-example.png> 4.424 + 4.425 + <p>This diagram shows the boxes involved in the example above. The rounded 4.426 + aqua line represents the anonymous inline element wrapping the inline 4.427 + contents of the paragraph element, the rounded blue line represents the 4.428 + span element, and the orange lines represent the blocks. 4.429 + </div> 4.430 + 4.431 + <h3 id=text-decoration-line-property><span class=secno>2.1. </span> Text 4.432 + Decoration Lines: the ‘<a href="#text-decoration-line"><code 4.433 + class=property>text-decoration-line</code></a>’ property</h3> 4.434 + 4.435 + <table class=propdef> 4.436 + <tbody> 4.437 + <tr> 4.438 + <th>Name: 4.439 + 4.440 + <td><dfn id=text-decoration-line>text-decoration-line</dfn> 4.441 + 4.442 + <tr> 4.443 + <th><a href="#values">Value</a>: 4.444 + 4.445 + <td>none | [ underline || overline || line-through ] 4.446 + 4.447 + <tr> 4.448 + <th>Initial: 4.449 + 4.450 + <td>none 4.451 + 4.452 + <tr> 4.453 + <th>Applies to: 4.454 + 4.455 + <td>all elements 4.456 + 4.457 + <tr> 4.458 + <th>Inherited: 4.459 + 4.460 + <td>no (but see prose) 4.461 + 4.462 + <tr> 4.463 + <th>Percentages: 4.464 + 4.465 + <td>N/A 4.466 + 4.467 + <tr> 4.468 + <th>Media: 4.469 + 4.470 + <td>visual 4.471 + 4.472 + <tr> 4.473 + <th>Computed value: 4.474 + 4.475 + <td>as specified 4.476 + </table> 4.477 + 4.478 + <p>Specifies what line decorations, if any, are added to the element. 4.479 + Values have the following meanings: 4.480 + 4.481 + <dl> 4.482 + <dt><dfn id=none title="text-decoration-line:none">‘<code 4.483 + class=css>none</code>’</dfn> 4.484 + 4.485 + <dd>Neither produces nor inhibits text decoration. 4.486 + 4.487 + <dt><dfn id=underline>‘<code class=css>underline</code>’</dfn> 4.488 + 4.489 + <dd>Each line of text is underlined. 4.490 + 4.491 + <dt><dfn id=overline>‘<code class=css>overline</code>’</dfn> 4.492 + 4.493 + <dd>Each line of text has a line above it (i.e. on the opposite side from 4.494 + an underline). 4.495 + 4.496 + <dt><dfn id=line-through>‘<code class=css>line-through</code>’</dfn> 4.497 + 4.498 + <dd>Each line of text has a line through the middle. 4.499 + </dl> 4.500 + 4.501 + <h3 id=text-decoration-color-property><span class=secno>2.2. </span> Text 4.502 + Decoration Color: the ‘<a href="#text-decoration-color"><code 4.503 + class=property>text-decoration-color</code></a>’ property</h3> 4.504 + 4.505 + <table class=propdef> 4.506 + <tbody> 4.507 + <tr> 4.508 + <th>Name: 4.509 + 4.510 + <td><dfn id=text-decoration-color>text-decoration-color</dfn> 4.511 + 4.512 + <tr> 4.513 + <th><a href="#values">Value</a>: 4.514 + 4.515 + <td><a href="http://www.w3.org/TR/css3-color/#color0"><span 4.516 + class=value-inst-color><color></span></a> 4.517 + 4.518 + <tr> 4.519 + <th>Initial: 4.520 + 4.521 + <td><a 4.522 + href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> 4.523 + 4.524 + <tr> 4.525 + <th>Applies to: 4.526 + 4.527 + <td>all elements 4.528 + 4.529 + <tr> 4.530 + <th>Inherited: 4.531 + 4.532 + <td>no 4.533 + 4.534 + <tr> 4.535 + <th>Percentages: 4.536 + 4.537 + <td>N/A 4.538 + 4.539 + <tr> 4.540 + <th>Media: 4.541 + 4.542 + <td>visual 4.543 + 4.544 + <tr> 4.545 + <th>Computed value: 4.546 + 4.547 + <td>the computed color 4.548 + </table> 4.549 + 4.550 + <p>This property specifies the color of text decoration (underlines 4.551 + overlines, and line-throughs) set on the element with ‘<a 4.552 + href="#text-decoration-line"><code 4.553 + class=property>text-decoration-line</code></a>’. 4.554 + 4.555 + <h3 id=text-decoration-style-property><span class=secno>2.3. </span> Text 4.556 + Decoration Style: the ‘<a href="#text-decoration-style"><code 4.557 + class=property>text-decoration-style</code></a>’ property</h3> 4.558 + 4.559 + <table class=propdef> 4.560 + <tbody> 4.561 + <tr> 4.562 + <th>Name: 4.563 + 4.564 + <td><dfn id=text-decoration-style>text-decoration-style</dfn> 4.565 + 4.566 + <tr> 4.567 + <th><a href="#values">Value</a>: 4.568 + 4.569 + <td>solid | double | dotted | dashed | wavy 4.570 + 4.571 + <tr> 4.572 + <th>Initial: 4.573 + 4.574 + <td>solid 4.575 + 4.576 + <tr> 4.577 + <th>Applies to: 4.578 + 4.579 + <td>all elements 4.580 + 4.581 + <tr> 4.582 + <th>Inherited: 4.583 + 4.584 + <td>no 4.585 + 4.586 + <tr> 4.587 + <th>Percentages: 4.588 + 4.589 + <td>N/A 4.590 + 4.591 + <tr> 4.592 + <th>Media: 4.593 + 4.594 + <td>visual 4.595 + 4.596 + <tr> 4.597 + <th>Computed value: 4.598 + 4.599 + <td>as specified 4.600 + </table> 4.601 + 4.602 + <p>This property specifies the style of the line(s) drawn for text 4.603 + decoration specified on the element. Values have the same meaning as for 4.604 + the <a 4.605 + href="http://www.w3.org/TR/css3-background/#the-border-style">border-style 4.606 + properties</a> <a href="#CSS3BG" 4.607 + rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. ‘<code 4.608 + class=css>wavy</code>’ indicates a wavy line. 4.609 + 4.610 + <h3 id=text-decoration-property><span class=secno>2.4. </span> Text 4.611 + Decoration Shorthand: the ‘<a href="#text-decoration"><code 4.612 + class=property>text-decoration</code></a>’ property</h3> 4.613 + 4.614 + <table class=propdef> 4.615 + <tbody> 4.616 + <tr> 4.617 + <th>Name: 4.618 + 4.619 + <td><dfn id=text-decoration>text-decoration</dfn> 4.620 + 4.621 + <tr> 4.622 + <th><a href="#values">Value</a>: 4.623 + 4.624 + <td><var><a 4.625 + href="#text-decoration-line"><text-decoration-line></a></var> || 4.626 + <var><a 4.627 + href="#text-decoration-style"><text-decoration-style></a></var> 4.628 + || <var><a 4.629 + href="#text-decoration-color"><text-decoration-color></a></var> 4.630 + || blink 4.631 + 4.632 + <tr> 4.633 + <th>Initial: 4.634 + 4.635 + <td>none 4.636 + 4.637 + <tr> 4.638 + <th>Applies to: 4.639 + 4.640 + <td>all elements 4.641 + 4.642 + <tr> 4.643 + <th>Inherited: 4.644 + 4.645 + <td>no 4.646 + 4.647 + <tr> 4.648 + <th>Percentages: 4.649 + 4.650 + <td>N/A 4.651 + 4.652 + <tr> 4.653 + <th>Media: 4.654 + 4.655 + <td>visual 4.656 + 4.657 + <tr> 4.658 + <th>Computed value: 4.659 + 4.660 + <td>as specified 4.661 + </table> 4.662 + 4.663 + <p>This property is a shorthand for setting ‘<a 4.664 + href="#text-decoration-line"><code 4.665 + class=property>text-decoration-line</code></a>’, ‘<a 4.666 + href="#text-decoration-color"><code 4.667 + class=property>text-decoration-color</code></a>’, and ‘<a 4.668 + href="#text-decoration-style"><code 4.669 + class=property>text-decoration-style</code></a>’ in one declaration. 4.670 + Omitted values are set to their initial values. A ‘<a 4.671 + href="#text-decoration"><code class=property>text-decoration</code></a>’ 4.672 + declaration that omits both the ‘<a href="#text-decoration-color"><code 4.673 + class=property>text-decoration-color</code></a>’ and ‘<a 4.674 + href="#text-decoration-style"><code 4.675 + class=property>text-decoration-style</code></a>’ values is 4.676 + backwards-compatible with CSS Levels 1 and 2. 4.677 + 4.678 + <p>If the ‘<code class=css>blink</code>’ keyword is specified the text 4.679 + blinks (alternates between visible and invisible). Conforming user agents 4.680 + may simply not blink the text. Note that not blinking the text is one 4.681 + technique to satisfy <a 4.682 + href="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">checkpoint 4.683 + 3.3 of WAI-UAAG</a>. 4.684 + 4.685 + <div class=example> 4.686 + <p>The following example underlines unvisited links with a solid blue 4.687 + underline in CSS1 and CSS2 UAs and a navy dotted underline in CSS3 UAs. 4.688 + 4.689 + <pre><code class=css> 4.690 +<!-- -->:link { 4.691 +<!-- --> color: blue; 4.692 +<!-- --> text-decoration: underline; 4.693 +<!-- --> text-decoration: navy dotted underline; /* <a 4.694 + href="http://www.w3.org/TR/CSS21/syndata.html#ignore">Ignored</a> in CSS1/CSS2 UAs */ 4.695 +<!-- -->}</code></pre> 4.696 + </div> 4.697 + 4.698 + <h3 id=text-decoration-skip-property><span class=secno>2.5. </span> Text 4.699 + Decoration Line Continuity: the ‘<a href="#text-decoration-skip"><code 4.700 + class=property>text-decoration-skip</code></a>’ property</h3> 4.701 + 4.702 + <table class=propdef> 4.703 + <tbody> 4.704 + <tr> 4.705 + <th>Name: 4.706 + 4.707 + <td><dfn id=text-decoration-skip>text-decoration-skip</dfn> 4.708 + 4.709 + <tr> 4.710 + <th><a href="#values">Value</a>: 4.711 + 4.712 + <td>none | [ objects || spaces || ink || edges ] 4.713 + 4.714 + <tr> 4.715 + <th>Initial: 4.716 + 4.717 + <td>objects 4.718 + 4.719 + <tr> 4.720 + <th>Applies to: 4.721 + 4.722 + <td>all elements 4.723 + 4.724 + <tr> 4.725 + <th>Inherited: 4.726 + 4.727 + <td>yes 4.728 + 4.729 + <tr> 4.730 + <th>Percentages: 4.731 + 4.732 + <td>N/A 4.733 + 4.734 + <tr> 4.735 + <th>Media: 4.736 + 4.737 + <td>visual 4.738 + 4.739 + <tr> 4.740 + <th>Computed value: 4.741 + 4.742 + <td>as specified 4.743 + </table> 4.744 + 4.745 + <p>This property specifies what parts of the element's content any text 4.746 + decoration affecting the element must skip over. It controls all text 4.747 + decoration lines drawn by the element and also any text decoration lines 4.748 + drawn by its ancestors. Values have the following meanings: 4.749 + 4.750 + <dl> 4.751 + <dt><dfn id=none0 title="text-decoration-skip:none">‘<code 4.752 + class=css>none</code>’</dfn> 4.753 + 4.754 + <dd>Skip nothing: text-decoration is drawn for all text content and for 4.755 + inline replaced elements. 4.756 + 4.757 + <dt><dfn id=objects title="text-decoration-skip:objects">‘<code 4.758 + class=css>objects</code>’</dfn> 4.759 + 4.760 + <dd>Skip this element if it is an atomic inline (such as an image or 4.761 + inline-block). 4.762 + 4.763 + <dt><dfn id=spaces title="text-decoration-skip:spaces">‘<code 4.764 + class=css>spaces</code>’</dfn> 4.765 + 4.766 + <dd>Skip white space: this includes regular spaces (U+0020) and tabs 4.767 + (U+0009), as well as nbsp (U+00A0), ideographic space (U+3000), all fixed 4.768 + width spaces (such as U+2000–U+200A, U+202F and U+205F), and any 4.769 + adjacent letter-spacing or word-spacing. 4.770 + 4.771 + <dt><dfn id=ink title="text-decoration-skip:ink">‘<code 4.772 + class=css>ink</code>’</dfn> 4.773 + 4.774 + <dd>Skip over where glyphs are drawn: interrupt the decoration line to let 4.775 + text show through where the text decoration would otherwise cross over a 4.776 + glyph. The UA may also skip a small distance to either side of the glyph 4.777 + outline. 4.778 + 4.779 + <dt><dfn id=edges title="text-decoration-skip:edges">‘<code 4.780 + class=css>edges</code>’</dfn> 4.781 + 4.782 + <dd>The UA should place the start and end of the line inwards from the 4.783 + content edge of the decorating element so that, e.g. two underlined 4.784 + elements side-by-side do not appear to have a single underline. (This is 4.785 + important in Chinese, where underlining is a form of punctuation.) 4.786 + </dl> 4.787 + 4.788 + <p class=issue>Do we need a value that <em>doesn't</em> skip margins and 4.789 + padding? 4.790 + 4.791 + <p class=note>Note that this property inherits and that descendant elements 4.792 + can have a different setting. 4.793 + 4.794 + <h4 id=text-underline-position-property><span class=secno>2.5.1. </span> 4.795 + Text Underline Position: the ‘<a href="#text-underline-position"><code 4.796 + class=property>text-underline-position</code></a>’ property</h4> 4.797 + 4.798 + <table class=propdef> 4.799 + <tbody> 4.800 + <tr> 4.801 + <th>Name: 4.802 + 4.803 + <td><dfn id=text-underline-position>text-underline-position</dfn> 4.804 + 4.805 + <tr> 4.806 + <th><a href="#values">Value</a>: 4.807 + 4.808 + <td>auto | alphabetic | [ below || [ left | right ] ] 4.809 + 4.810 + <tr> 4.811 + <th>Initial: 4.812 + 4.813 + <td>auto 4.814 + 4.815 + <tr> 4.816 + <th>Applies to: 4.817 + 4.818 + <td>all elements 4.819 + 4.820 + <tr> 4.821 + <th>Inherited: 4.822 + 4.823 + <td>yes 4.824 + 4.825 + <tr> 4.826 + <th>Percentages: 4.827 + 4.828 + <td>N/A 4.829 + 4.830 + <tr> 4.831 + <th>Media: 4.832 + 4.833 + <td>visual 4.834 + 4.835 + <tr> 4.836 + <th>Computed value: 4.837 + 4.838 + <td>as specified 4.839 + </table> 4.840 + 4.841 + <p>This property sets the position of an underline specified on the same 4.842 + element: it does not affect underlines specified by ancestor elements. 4.843 + Values have the following meanings: 4.844 + 4.845 + <dl> 4.846 + <dt><dfn id=auto>‘<code class=css>auto</code>’</dfn> 4.847 + 4.848 + <dd>The user agent may use any algorithm to determine the underline's 4.849 + position; however it must be placed at or below the alphabetic baseline. 4.850 + <p class=note>It is suggested that the underline position be ‘<a 4.851 + href="#alphabetic"><code class=css>alphabetic</code></a>’ unless it 4.852 + crosses either subscripted (or otherwise lowered) text, or it affects 4.853 + characters from Asian scripts such as Han or Tibetan, for which an 4.854 + alphabetic underline is too high: in such cases, aligning to the em box 4.855 + edge as described for ‘<code class=css>below left</code>’ is more 4.856 + appropriate. 4.857 + 4.858 + <dt><dfn id=alphabetic>‘<code class=css>alphabetic</code>’</dfn> 4.859 + 4.860 + <dd>The underline is positioned relative to the alphabetic baseline. In 4.861 + this case the underline is likely to cross some descenders. 4.862 + <div class=figure> 4.863 + <p><img 4.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'." 4.865 + src=underline-position-alphabetic.png 4.866 + title="text-underline-position: alphabetic"> 4.867 + 4.868 + <p class=caption>‘<code class=css>text-underline-position: 4.869 + alphabetic</code>’ 4.870 + </div> 4.871 + 4.872 + <dt><dfn id=below>‘<code class=css>below</code>’</dfn> 4.873 + 4.874 + <dd>In horizontal writing modes, the underline is positioned relative to 4.875 + the under edge of the element's content box. In this case the underline 4.876 + usually does not cross the descenders. (This is sometimes called 4.877 + "accounting" underline.) If the underline affects descendants with a 4.878 + lower content edge, the user agent should shift the underline down 4.879 + further to the lowest underlined content box edge. The user agent may 4.880 + ignore elements with ‘<code class=css>vertical-align</code>’ values 4.881 + given as lengths, percentages, ‘<code class=css>top</code>’, or 4.882 + ‘<code class=css>bottom</code>’ when making this adjustment. (Note 4.883 + that images that are not affected by the underline per ‘<a 4.884 + href="#text-decoration-skip"><code 4.885 + class=property>text-decoration-skip</code></a>’ will not affect the 4.886 + position of the underline.) 4.887 + <div class=figure> 4.888 + <p><img 4.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'." 4.890 + src=underline-position-below.png 4.891 + title="text-underline-position: below"> 4.892 + 4.893 + <p class=caption>‘<code class=css>text-underline-position: 4.894 + below</code>’ 4.895 + </div> 4.896 + 4.897 + <div class=example> 4.898 + <p>Because ‘<a href="#text-underline-position"><code 4.899 + class=property>text-underline-position</code></a>’ inherits, and is 4.900 + not reset by the ‘<a href="#text-decoration"><code 4.901 + class=property>text-decoration</code></a>’ shorthand, the following 4.902 + example switches the document to use ‘<a href="#below"><code 4.903 + class=css>below</code></a>’ underlining, which can be more 4.904 + appropriate for writing systems with long, complicated descenders. It 4.905 + is also often useful for mathematical or chemical texts that use many 4.906 + subscripts. 4.907 + 4.908 + <pre>:root { text-underline-position: below; }</pre> 4.909 + </div> 4.910 + 4.911 + <dt><dfn id=left>‘<code class=css>left</code>’</dfn> 4.912 + 4.913 + <dd>In vertical writing modes, the underline is aligned as for ‘<a 4.914 + href="#below"><code class=css>below</code></a>’, on the left edge of 4.915 + the text. 4.916 + 4.917 + <dt><dfn id=right>‘<code class=css>right</code>’</dfn> 4.918 + 4.919 + <dd>In vertical writing modes, the underline is aligned as for ‘<a 4.920 + href="#below"><code class=css>below</code></a>’, except it is aligned 4.921 + to the right edge of the text. If this causes the underline to be drawn 4.922 + on the "over" side of the text, then an overline also switches sides and 4.923 + is drawn on the "under" side. 4.924 + </dl> 4.925 + 4.926 + <p>If ‘<a href="#below"><code class=css>below</code></a>’ is specified 4.927 + alone, ‘<a href="#left"><code class=css>left</code></a>’ is also 4.928 + implied. If ‘<a href="#left"><code class=css>left</code></a>’ or ‘<a 4.929 + href="#right"><code class=css>right</code></a>’ is specified alone, 4.930 + ‘<a href="#below"><code class=css>below</code></a>’ is also implied. 4.931 + 4.932 + <p class=issue> Should ‘<code class=css>above</code>’/‘<a 4.933 + href="#below"><code class=css>below</code></a>’ be ‘<code 4.934 + class=css>over</code>’/‘<code class=css>under</code>’ to match text 4.935 + decoration names? 4.936 + 4.937 + <div class=figure id=fig-text-underline-position> 4.938 + <table> 4.939 + <tbody> 4.940 + <tr> 4.941 + <td> <img 4.942 + alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left' places the underline on the left side of the text." 4.943 + src=underline-position-left.png title="text-underline-position: left"> 4.944 + 4.945 + <td> <img 4.946 + alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right' places the underline on the right side of the text." 4.947 + src=underline-position-right.png 4.948 + title="text-underline-position: right"> 4.949 + 4.950 + <tr> 4.951 + <td>‘<a href="#left"><code class=css>left</code></a>’ 4.952 + 4.953 + <td>‘<a href="#right"><code class=css>right</code></a>’ 4.954 + </table> 4.955 + 4.956 + <p class=caption>In vertical writing modes, the ‘<a 4.957 + href="#text-underline-position"><code 4.958 + class=property>text-underline-position</code></a>’ values ‘<a 4.959 + href="#left"><code class=css>left</code></a>’ and ‘<a 4.960 + href="#right"><code class=css>right</code></a>’ allow placing the 4.961 + underline on either side of the text. (In horizontal writing modes, both 4.962 + values are treated as ‘<a href="#below"><code 4.963 + class=css>below</code></a>’.) 4.964 + </div> 4.965 + 4.966 + <div class=example> 4.967 + <p>The following example styles modern Chinese, Japanese, and Korean texts 4.968 + with the appropriate underline positions in both horizontal and vertical 4.969 + text: 4.970 + 4.971 + <pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: below right; } 4.972 +<!-- -->:root:lang(zh), [lang|=zh] { text-underline-position: below left; }</pre> 4.973 + </div> 4.974 + 4.975 + <div class=note> 4.976 + <p>In some cases (such as in OpenType) the font format can offer 4.977 + information about the appropriate position of an underline. Typically 4.978 + this information gives the position of an ‘<a href="#alphabetic"><code 4.979 + class=css>alphabetic</code></a>’ underline; in some cases (especially 4.980 + in CJK fonts), it gives the position of a ‘<code class=css>below 4.981 + left</code>’ underline. (In this case, the font's underline metrics 4.982 + typically touch the bottom edge of the em box). The UA is encouraged to 4.983 + use information (such as the underline thickness, or appropriate 4.984 + alphabetic alignment) from the font wherever appropriate. 4.985 + </div> 4.986 + 4.987 + <h3 id=emphasis-marks><span class=secno>2.6. </span> Emphasis Marks</h3> 4.988 + 4.989 + <p>East Asian documents traditionally use small symbols next to each glyph 4.990 + to emphasize a run of text. For example: 4.991 + 4.992 + <div class=figure> 4.993 + <p> <img alt="Example of emphasis in Japanese appearing above the text" 4.994 + class=example height=28 src=text-emphasis-ja.gif width=225> 4.995 + 4.996 + <p class=caption>Accent emphasis (shown in blue for clarity) applied to 4.997 + Japanese text 4.998 + </div> 4.999 + 4.1000 + <h4 id=text-emphasis-style-property><span class=secno>2.6.1. </span> 4.1001 + Emphasis Mark Style: the ‘<a href="#text-emphasis-style"><code 4.1002 + class=property>text-emphasis-style</code></a>’ property</h4> 4.1003 + 4.1004 + <table class=propdef> 4.1005 + <tbody> 4.1006 + <tr> 4.1007 + <th>Name: 4.1008 + 4.1009 + <td><dfn id=text-emphasis-style>text-emphasis-style</dfn> 4.1010 + 4.1011 + <tr> 4.1012 + <th><a href="#values">Value</a>: 4.1013 + 4.1014 + <td>none | [ [ filled | open ] || [ dot | circle | double-circle | 4.1015 + triangle | sesame ] ] | <a class=noxref 4.1016 + href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string"><span 4.1017 + class=value-inst-string><string></span></a> 4.1018 + 4.1019 + <tr> 4.1020 + <th>Initial: 4.1021 + 4.1022 + <td>none 4.1023 + 4.1024 + <tr> 4.1025 + <th>Applies to: 4.1026 + 4.1027 + <td>all elements 4.1028 + 4.1029 + <tr> 4.1030 + <th>Inherited: 4.1031 + 4.1032 + <td>yes 4.1033 + 4.1034 + <tr> 4.1035 + <th>Percentages: 4.1036 + 4.1037 + <td>N/A 4.1038 + 4.1039 + <tr> 4.1040 + <th>Media: 4.1041 + 4.1042 + <td>visual 4.1043 + 4.1044 + <tr> 4.1045 + <th>Computed value: 4.1046 + 4.1047 + <td>‘<code class=property>none</code>’, a pair of keywords 4.1048 + representing the shape and fill, or a string 4.1049 + </table> 4.1050 + 4.1051 + <p>This property applies emphasis marks to the element's text. Values have 4.1052 + the following meanings: 4.1053 + 4.1054 + <dl> 4.1055 + <dt><dfn id=none1 title="text-emphasis:none">‘<code 4.1056 + class=css>none</code>’</dfn> 4.1057 + 4.1058 + <dd>No emphasis marks. 4.1059 + 4.1060 + <dt><dfn id=filled title="text-emphasis:filled">‘<code 4.1061 + class=css>filled</code>’</dfn> 4.1062 + 4.1063 + <dd>The shape is filled with solid color. 4.1064 + 4.1065 + <dt><dfn id=open title="text-emphasis:open">‘<code 4.1066 + class=css>open</code>’</dfn> 4.1067 + 4.1068 + <dd>The shape is hollow. 4.1069 + 4.1070 + <dt><dfn id=dot title="text-emphasis:dot">‘<code 4.1071 + class=css>dot</code>’</dfn> 4.1072 + 4.1073 + <dd>Display small circles as marks. The filled dot is U+2022 ‘<code 4.1074 + class=css>•</code>’, and the open dot is U+25E6 ‘<code 4.1075 + class=css>◦</code>’. 4.1076 + 4.1077 + <dt><dfn id=circle title="text-emphasis:circle">‘<code 4.1078 + class=css>circle</code>’</dfn> 4.1079 + 4.1080 + <dd>Display large circles as marks. The filled circle is U+25CF ‘<code 4.1081 + class=css>●</code>’, and the open circle is U+25CB ‘<code 4.1082 + class=css>○</code>’. 4.1083 + 4.1084 + <dt><dfn id=double-circle title="text-emphasis:double-circle">‘<code 4.1085 + class=css>double-circle</code>’</dfn> 4.1086 + 4.1087 + <dd>Display double circles as marks. The filled double-circle is U+25C9 4.1088 + ‘<code class=css>◉</code>’, and the open double-circle is U+25CE 4.1089 + ‘<code class=css>◎</code>’. 4.1090 + 4.1091 + <dt><dfn id=triangle title="text-emphasis:triangle">‘<code 4.1092 + class=css>triangle</code>’</dfn> 4.1093 + 4.1094 + <dd>Display triangles as marks. The filled triangle is U+25B2 ‘<code 4.1095 + class=css>▲</code>’, and the open triangle is U+25B3 ‘<code 4.1096 + class=css>△</code>’. 4.1097 + 4.1098 + <dt><dfn id=sesame title="text-emphasis:sesame">‘<code 4.1099 + class=css>sesame</code>’</dfn> 4.1100 + 4.1101 + <dd>Display sesames as marks. The filled sesame is U+FE45 ‘<code 4.1102 + class=css>﹅</code>’, and the open sesame is U+FE46 ‘<code 4.1103 + class=css>﹆</code>’. 4.1104 + 4.1105 + <dt><dfn id=ltstringgt title="text-emphasis:sesame">‘<code 4.1106 + class=css><var><string></var></code>’</dfn> 4.1107 + 4.1108 + <dd>Display the given string as marks. Authors should not specify more 4.1109 + than one <a href="#character"><i>character</i></a> in <string>. The 4.1110 + UA may truncate or ignore strings consisting of more than one grapheme 4.1111 + cluster. 4.1112 + </dl> 4.1113 + 4.1114 + <p>If a shape keyword is specified but neither of ‘<code 4.1115 + class=css>filled</code>’ nor ‘<code class=css>open</code>’ is 4.1116 + specified, ‘<code class=css>filled</code>’ is assumed. If only 4.1117 + ‘<code class=css>filled</code>’ or ‘<code class=css>open</code>’ 4.1118 + is specified, the shape keyword computes to ‘<code 4.1119 + class=css>circle</code>’ in horizontal writing mode and ‘<code 4.1120 + class=css>sesame</code>’ in vertical writing mode. 4.1121 + 4.1122 + <p>The marks should be drawn using the element's font settings with its 4.1123 + size scaled down to 50%. However, not all fonts have all these glyphs, and 4.1124 + some fonts use inappropriate sizes for emphasis marks in these code 4.1125 + points. The UA may opt to use a font known to be good for emphasis marks, 4.1126 + or the marks may instead be synthesized by the UA. Marks must remain 4.1127 + upright in vertical writing modes: like CJK characters, they do not rotate 4.1128 + to match the writing mode. 4.1129 + 4.1130 + <p class=note> One example of good fonts for emphasis marks is Adobe's 4.1131 + opensource project, <a 4.1132 + href="http://sourceforge.net/adobe/kenten-generic/">Kenten Generic 4.1133 + OpenType Font</a>, which is specially designed for the emphasis marks. 4.1134 + 4.1135 + <p>The marks are drawn once for each <a 4.1136 + href="#character"><i>character</i></a>. However, emphasis marks are not 4.1137 + drawn for characters that are: 4.1138 + 4.1139 + <ul> 4.1140 + <li><a href="http://www.w3.org/TR/css3-text/#word-separator">Word 4.1141 + separators</a> or that belong to the Unicode separator classes (Z*). (But 4.1142 + note that emphasis marks <em>are</em> drawn for a space that combines 4.1143 + with any combining characters.) 4.1144 + 4.1145 + <li>Characters belonging to the Unicode classes for control codes and 4.1146 + unassigned characters (Cc, Cf, Cn). 4.1147 + </ul> 4.1148 + 4.1149 + <p>If emphasis marks are drawn for characters for which ruby is drawn in 4.1150 + the same position as the emphasis mark, the ruby should be stacked between 4.1151 + the emphasis marks and the base text. In this case, the position of the 4.1152 + emphasis marks for a given element should be determined as if all 4.1153 + characters have ruby boxes of the same height as the highest ruby box in 4.1154 + the element. If the UA is not capable of drawing ruby and emphasis marks 4.1155 + on the same side, the UA may hide ruby and draw only emphasis marks. 4.1156 + 4.1157 + <div class=figure> 4.1158 + <p><img 4.1159 + alt="Example of emphasis marks applied to 4 characters, and ruby to 2 of them" 4.1160 + height=50 src=text-emphasis-ruby.png width=134> 4.1161 + 4.1162 + <p class=caption>Emphasis marks applied to 4 characters, and ruby to 2 of 4.1163 + them 4.1164 + </div> 4.1165 + 4.1166 + <p class=note>A future level of CSS may define controls to specify what to 4.1167 + do when emphasis marks and ruby text coincide. 4.1168 + 4.1169 + <h4 id=text-emphasis-color-property><span class=secno>2.6.2. </span> 4.1170 + Emphasis Mark Color: the ‘<a href="#text-emphasis-color"><code 4.1171 + class=property>text-emphasis-color</code></a>’ property</h4> 4.1172 + 4.1173 + <table class=propdef> 4.1174 + <tbody> 4.1175 + <tr> 4.1176 + <th>Name: 4.1177 + 4.1178 + <td><dfn id=text-emphasis-color>text-emphasis-color</dfn> 4.1179 + 4.1180 + <tr> 4.1181 + <th><a href="#values">Value</a>: 4.1182 + 4.1183 + <td><color> 4.1184 + 4.1185 + <tr> 4.1186 + <th>Initial: 4.1187 + 4.1188 + <td><a 4.1189 + href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> 4.1190 + 4.1191 + <tr> 4.1192 + <th>Applies to: 4.1193 + 4.1194 + <td>all elements 4.1195 + 4.1196 + <tr> 4.1197 + <th>Inherited: 4.1198 + 4.1199 + <td>yes 4.1200 + 4.1201 + <tr> 4.1202 + <th>Percentages: 4.1203 + 4.1204 + <td>N/A 4.1205 + 4.1206 + <tr> 4.1207 + <th>Media: 4.1208 + 4.1209 + <td>visual 4.1210 + 4.1211 + <tr> 4.1212 + <th>Computed value: 4.1213 + 4.1214 + <td>as specified 4.1215 + </table> 4.1216 + 4.1217 + <p>This property specifies the foreground color of the emphasis marks. 4.1218 + 4.1219 + <p class=note> The correct behavior of this property depends on an 4.1220 + outstanding erratum on <a href="#CSS3COLOR" 4.1221 + rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a> that has the ‘<a 4.1222 + href="#currentcolor"><code class=css>currentColor</code></a>’ keyword 4.1223 + inherit as itself, and to take the value of the ‘<code 4.1224 + class=property>color</code>’ property as its <em>used</em> (not 4.1225 + computed) value. 4.1226 + 4.1227 + <h4 id=text-emphasis-property><span class=secno>2.6.3. </span> Emphasis 4.1228 + Mark Shorthand: the ‘<a href="#text-emphasis"><code 4.1229 + class=property>text-emphasis</code></a>’ property</h4> 4.1230 + 4.1231 + <table class=propdef> 4.1232 + <tbody> 4.1233 + <tr> 4.1234 + <th>Name: 4.1235 + 4.1236 + <td><dfn id=text-emphasis>text-emphasis</dfn> 4.1237 + 4.1238 + <tr> 4.1239 + <th><a href="#values">Value</a>: 4.1240 + 4.1241 + <td>‘<code class=css><<a 4.1242 + href="#text-emphasis-style">text-emphasis-style</a>></code>’ || 4.1243 + ‘<code class=css><<a 4.1244 + href="#text-emphasis-color">text-emphasis-color</a>></code>’ 4.1245 + 4.1246 + <tr> 4.1247 + <th>Initial: 4.1248 + 4.1249 + <td>see individual properties 4.1250 + 4.1251 + <tr> 4.1252 + <th>Applies to: 4.1253 + 4.1254 + <td>all elements 4.1255 + 4.1256 + <tr> 4.1257 + <th>Inherited: 4.1258 + 4.1259 + <td>yes 4.1260 + 4.1261 + <tr> 4.1262 + <th>Percentages: 4.1263 + 4.1264 + <td>N/A 4.1265 + 4.1266 + <tr> 4.1267 + <th>Media: 4.1268 + 4.1269 + <td>visual 4.1270 + 4.1271 + <tr> 4.1272 + <th>Computed value: 4.1273 + 4.1274 + <td>see individual properties 4.1275 + </table> 4.1276 + 4.1277 + <p>This property is a shorthand for setting ‘<a 4.1278 + href="#text-emphasis-style"><code 4.1279 + class=property>text-emphasis-style</code></a>’ and ‘<a 4.1280 + href="#text-emphasis-color"><code 4.1281 + class=property>text-emphasis-color</code></a>’ in one declaration. 4.1282 + Omitted values are set to their initial values. 4.1283 + 4.1284 + <p class=note>Note that ‘<a href="#text-emphasis-position"><code 4.1285 + class=property>text-emphasis-position</code></a>’ is not reset in this 4.1286 + shorthand. This is because typically the shape and color vary, but the 4.1287 + position is consistent for a particular language throughout the document. 4.1288 + Therefore the position should inherit independently. 4.1289 + 4.1290 + <h4 id=text-emphasis-position-property><span class=secno>2.6.4. </span> 4.1291 + Emphasis Mark Position: the ‘<a href="#text-emphasis-position"><code 4.1292 + class=property>text-emphasis-position</code></a>’ property</h4> 4.1293 + 4.1294 + <table class=propdef> 4.1295 + <tbody> 4.1296 + <tr> 4.1297 + <th>Name: 4.1298 + 4.1299 + <td><dfn id=text-emphasis-position>text-emphasis-position</dfn> 4.1300 + 4.1301 + <tr> 4.1302 + <th><a href="#values">Value</a>: 4.1303 + 4.1304 + <td>[ above | below ] && [ right | left ] 4.1305 + 4.1306 + <tr> 4.1307 + <th>Initial: 4.1308 + 4.1309 + <td>above right 4.1310 + 4.1311 + <tr> 4.1312 + <th>Applies to: 4.1313 + 4.1314 + <td>all elements 4.1315 + 4.1316 + <tr> 4.1317 + <th>Inherited: 4.1318 + 4.1319 + <td>yes 4.1320 + 4.1321 + <tr> 4.1322 + <th>Percentages: 4.1323 + 4.1324 + <td>N/A 4.1325 + 4.1326 + <tr> 4.1327 + <th>Media: 4.1328 + 4.1329 + <td>visual 4.1330 + 4.1331 + <tr> 4.1332 + <th>Computed value: 4.1333 + 4.1334 + <td>as specified 4.1335 + </table> 4.1336 + 4.1337 + <p>This property describes where emphasis marks are drawn at. The values 4.1338 + have following meanings: 4.1339 + 4.1340 + <dl> 4.1341 + <dt><dfn id=above title="text-emphasis:above">‘<code 4.1342 + class=css>above</code>’</dfn> 4.1343 + 4.1344 + <dd>Draw marks over the text in horizontal writing mode. 4.1345 + 4.1346 + <dt><dfn id=below0 title="text-emphasis:below">‘<code 4.1347 + class=css>below</code>’</dfn> 4.1348 + 4.1349 + <dd>Draw marks under the text in horizontal writing mode. 4.1350 + 4.1351 + <dt><dfn id=right0 title="text-emphasis:right">‘<code 4.1352 + class=css>right</code>’</dfn> 4.1353 + 4.1354 + <dd>Draw marks to the right of the text in vertical writing mode. 4.1355 + 4.1356 + <dt><dfn id=left0 title="text-emphasis:left">‘<code 4.1357 + class=css>left</code>’</dfn> 4.1358 + 4.1359 + <dd>Draw marks to the left of the text in vertical writing mode. 4.1360 + </dl> 4.1361 + 4.1362 + <p class=issue> Should ‘<code class=css>above</code>’/‘<a 4.1363 + href="#below"><code class=css>below</code></a>’ be ‘<code 4.1364 + class=css>over</code>’/‘<code class=css>under</code>’ to match text 4.1365 + decoration names? 4.1366 + 4.1367 + <p>Emphasis marks are drawn exactly as if each character was assigned the 4.1368 + mark as its ruby annotation text with the ruby position given by ‘<a 4.1369 + href="#text-emphasis-position"><code 4.1370 + class=property>text-emphasis-position</code></a>’ and the ruby alignment 4.1371 + as centered. 4.1372 + 4.1373 + <p>The effect of emphasis marks on the line height is the same as for ruby 4.1374 + text. 4.1375 + 4.1376 + <div class=note> 4.1377 + <p>Note, the preferred position of emphasis marks depends on the language. 4.1378 + In Japanese for example, the preferred position is ‘<code 4.1379 + class=css>above right</code>’. In Chinese, on the other hand, the 4.1380 + preferred position is ‘<code class=css>below right</code>’. The 4.1381 + informative table below summarizes the preferred emphasis mark positions 4.1382 + for Chinese and Japanese: 4.1383 + 4.1384 + <table class=data> 4.1385 + <caption>Preferred emphasis mark and ruby position</caption> 4.1386 + 4.1387 + <thead> 4.1388 + <tr> 4.1389 + <th rowspan=2 scope=col>Language 4.1390 + 4.1391 + <th colspan=2 scope=col>Preferred mark position 4.1392 + 4.1393 + <th colspan=2 rowspan=2 scope=col>Illustration 4.1394 + 4.1395 + <tr> 4.1396 + <th>Horizontal 4.1397 + 4.1398 + <th>Vertical 4.1399 + 4.1400 + <tbody> 4.1401 + <tr> 4.1402 + <td scope=row>Japanese 4.1403 + 4.1404 + <td>above 4.1405 + 4.1406 + <td>right 4.1407 + 4.1408 + <td> <img 4.1409 + alt="Emphasis marks appear above each emphasized character in horizontal Japanese text." 4.1410 + height=28 src=text-emphasis-ja.gif 4.1411 + title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text" 4.1412 + width=225> 4.1413 + 4.1414 + <td rowspan=2> <img 4.1415 + alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text." 4.1416 + height=89 src=text-emphasis-v.gif 4.1417 + title="Emphasis applied on the right of a fragment of Japanese text" 4.1418 + width=34> <!-- 4.1419 + <tr> 4.1420 + <td scope="row">Mongolian 4.1421 + <td><span class="issue">?</span> 4.1422 + <td>right 4.1423 + --> 4.1424 + 4.1425 + <tr> 4.1426 + <td scope=row>Chinese 4.1427 + 4.1428 + <td>below 4.1429 + 4.1430 + <td>right 4.1431 + 4.1432 + <td> <img 4.1433 + alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text." 4.1434 + height=28 src=text-emphasis-zh.gif 4.1435 + title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text" 4.1436 + width=133> 4.1437 + </table> 4.1438 + </div> 4.1439 + 4.1440 + <h3 id=text-shadow-property><span class=secno>2.7. </span> Text Shadows: 4.1441 + the ‘<a href="#text-shadow"><code 4.1442 + class=property>text-shadow</code></a>’ property</h3> 4.1443 + 4.1444 + <table class=propdef> 4.1445 + <tbody> 4.1446 + <tr> 4.1447 + <th>Name: 4.1448 + 4.1449 + <td><dfn id=text-shadow>text-shadow</dfn> 4.1450 + 4.1451 + <tr> 4.1452 + <th><a href="#values">Value</a>: 4.1453 + 4.1454 + <td>none | [ <length>{2,3} && <color>? ]# 4.1455 + 4.1456 + <tr> 4.1457 + <th>Initial: 4.1458 + 4.1459 + <td>none 4.1460 + 4.1461 + <tr> 4.1462 + <th>Applies to: 4.1463 + 4.1464 + <td>all elements 4.1465 + 4.1466 + <tr> 4.1467 + <th>Inherited: 4.1468 + 4.1469 + <td>yes 4.1470 + 4.1471 + <tr> 4.1472 + <th>Percentages: 4.1473 + 4.1474 + <td>N/A 4.1475 + 4.1476 + <tr> 4.1477 + <th>Media: 4.1478 + 4.1479 + <td>visual 4.1480 + 4.1481 + <tr> 4.1482 + <th>Computed value: 4.1483 + 4.1484 + <td>a color plus three absolute <length>s 4.1485 + </table> 4.1486 + 4.1487 + <p>This property accepts a comma-separated list of shadow effects to be 4.1488 + applied to the text of the element. Values are interpreted as for <a 4.1489 + href="http://www.w3.org/TR/css3-background/#the-box-shadow">‘<code 4.1490 + class=property>box-shadow</code>’</a> <a href="#CSS3BG" 4.1491 + rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. (But note that spread 4.1492 + values are not allowed.) The shadow is applied to all of the element's 4.1493 + text as well as any text decorations it specifies. 4.1494 + 4.1495 + <p>The shadow effects are applied front-to-back: the first shadow is on 4.1496 + top. The shadows may thus overlay each other, but they never overlay the 4.1497 + text itself. The shadow must be painted at a stack level between the 4.1498 + element's border and/or background, if present, and the elements text and 4.1499 + text decoration. UAs should avoid painting text shadows over text in 4.1500 + adjacent elements belonging to the same stack level and stacking context. 4.1501 + (This may mean that the exact stack level of the shadows depends on 4.1502 + whether the element has a border or background: the exact stacking 4.1503 + behavior of text shadows is thus UA-defined.) 4.1504 + 4.1505 + <p>Unlike ‘<code class=property>box-shadow</code>’, text shadows are 4.1506 + not clipped to the shadowed shape and may show through if the text is 4.1507 + partially-transparent. Like ‘<code class=property>box-shadow</code>’, 4.1508 + text shadows do not influence layout, and do not trigger scrolling or 4.1509 + increase the size of the scrollable area. 4.1510 + 4.1511 + <p class=note>The painting order of shadows defined here is the opposite of 4.1512 + that defined in the 1998 <a 4.1513 + href="http://www.w3.org/TR/1998/REC-CSS2-19980512">CSS2 4.1514 + Recommendation</a>. 4.1515 + 4.1516 + <p>The ‘<a href="#text-shadow"><code class=css>text-shadow</code></a>’ 4.1517 + property applies to both the <code>::first-line</code> and 4.1518 + <code>::first-letter</code> pseudo-elements. 4.1519 + 4.1520 + <h2 id=conformance><span class=secno>3. </span> Conformance</h2> 4.1521 + 4.1522 + <h3 id=conventions><span class=secno>3.1. </span> Document Conventions</h3> 4.1523 + 4.1524 + <p>Conformance requirements are expressed with a combination of descriptive 4.1525 + assertions and RFC 2119 terminology. The key words “MUST”, “MUST 4.1526 + NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, 4.1527 + “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the 4.1528 + normative parts of this document are to be interpreted as described in RFC 4.1529 + 2119. However, for readability, these words do not appear in all uppercase 4.1530 + letters in this specification. 4.1531 + 4.1532 + <p>All of the text of this specification is normative except sections 4.1533 + explicitly marked as non-normative, examples, and notes. <a 4.1534 + href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a> 4.1535 + 4.1536 + <p>Examples in this specification are introduced with the words “for 4.1537 + example” or are set apart from the normative text with 4.1538 + <code>class="example"</code>, like this: 4.1539 + 4.1540 + <div class=example> 4.1541 + <p>This is an example of an informative example. 4.1542 + </div> 4.1543 + 4.1544 + <p>Informative notes begin with the word “Note” and are set apart from 4.1545 + the normative text with <code>class="note"</code>, like this: 4.1546 + 4.1547 + <p class=note>Note, this is an informative note. 4.1548 + 4.1549 + <h3 id=conformance-classes><span class=secno>3.2. </span> Conformance 4.1550 + Classes</h3> 4.1551 + 4.1552 + <p>Conformance to CSS Text Level 3 is defined for three conformance 4.1553 + classes: 4.1554 + 4.1555 + <dl> 4.1556 + <dt><dfn id=style-sheet title="style sheet!!as conformance class">style 4.1557 + sheet</dfn> 4.1558 + 4.1559 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 4.1560 + style sheet</a>. 4.1561 + 4.1562 + <dt><dfn id=renderer>renderer</dfn> 4.1563 + 4.1564 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 4.1565 + that interprets the semantics of a style sheet and renders documents that 4.1566 + use them. 4.1567 + 4.1568 + <dt><dfn id=authoring-tool>authoring tool</dfn> 4.1569 + 4.1570 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 4.1571 + that writes a style sheet. 4.1572 + </dl> 4.1573 + 4.1574 + <p>A style sheet is conformant to CSS Text Level 3 if all of its 4.1575 + declarations that use properties defined in this module have values that 4.1576 + are valid according to the generic CSS grammar and the individual grammars 4.1577 + of each property as given in this module. 4.1578 + 4.1579 + <p>A renderer is conformant to CSS Text Level 3 if, in addition to 4.1580 + interpreting the style sheet as defined by the appropriate specifications, 4.1581 + it supports all the features defined by CSS Text Level 3 by parsing them 4.1582 + correctly and rendering the document accordingly. However, the inability 4.1583 + of a UA to correctly render a document due to limitations of the device 4.1584 + does not make the UA non-conformant. (For example, a UA is not required to 4.1585 + render color on a monochrome monitor.) 4.1586 + 4.1587 + <p>An authoring tool is conformant to CSS Text Level 3 if it writes style 4.1588 + sheets that are syntactically correct according to the generic CSS grammar 4.1589 + and the individual grammars of each feature in this module, and meet all 4.1590 + other conformance requirements of style sheets as described in this 4.1591 + module. 4.1592 + 4.1593 + <h3 id=partial><span class=secno>3.3. </span> Partial Implementations</h3> 4.1594 + 4.1595 + <p>So that authors can exploit the forward-compatible parsing rules to 4.1596 + assign fallback values, CSS renderers <strong>must</strong> treat as 4.1597 + invalid (and <a 4.1598 + href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as 4.1599 + appropriate</a>) any at-rules, properties, property values, keywords, and 4.1600 + other syntactic constructs for which they have no usable level of support. 4.1601 + In particular, user agents <strong>must not</strong> selectively ignore 4.1602 + unsupported component values and honor supported values in a single 4.1603 + multi-value property declaration: if any value is considered invalid (as 4.1604 + unsupported values must be), CSS requires that the entire declaration be 4.1605 + ignored. 4.1606 + 4.1607 + <h3 id=experimental><span class=secno>3.4. </span> Experimental 4.1608 + Implementations</h3> 4.1609 + 4.1610 + <p>To avoid clashes with future CSS features, the CSS2.1 specification 4.1611 + reserves a <a 4.1612 + href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 4.1613 + syntax</a> for proprietary and experimental extensions to CSS. 4.1614 + 4.1615 + <p>Prior to a specification reaching the Candidate Recommendation stage in 4.1616 + the W3C process, all implementations of a CSS feature are considered 4.1617 + experimental. The CSS Working Group recommends that implementations use a 4.1618 + vendor-prefixed syntax for such features, including those in W3C Working 4.1619 + Drafts. This avoids incompatibilities with future changes in the draft. 4.1620 + 4.1621 + <h3 id=testing><span class=secno>3.5. </span>Non-Experimental 4.1622 + Implementations</h3> 4.1623 + 4.1624 + <p>Once a specification reaches the Candidate Recommendation stage, 4.1625 + non-experimental implementations are possible, and implementors should 4.1626 + release an unprefixed implementation of any CR-level feature they can 4.1627 + demonstrate to be correctly implemented according to spec. 4.1628 + 4.1629 + <p>To establish and maintain the interoperability of CSS across 4.1630 + implementations, the CSS Working Group requests that non-experimental CSS 4.1631 + renderers submit an implementation report (and, if necessary, the 4.1632 + testcases used for that implementation report) to the W3C before releasing 4.1633 + an unprefixed implementation of any CSS features. Testcases submitted to 4.1634 + W3C are subject to review and correction by the CSS Working Group. 4.1635 + 4.1636 + <p>Further information on submitting testcases and implementation reports 4.1637 + can be found from on the CSS Working Group's website at <a 4.1638 + href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 4.1639 + Questions should be directed to the <a 4.1640 + href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> 4.1641 + mailing list. 4.1642 + 4.1643 + <h3 id=cr-exit-criteria><span class=secno>3.6. </span> CR Exit Criteria</h3> 4.1644 + 4.1645 + <p> For this specification to be advanced to Proposed Recommendation, there 4.1646 + must be at least two independent, interoperable implementations of each 4.1647 + feature. Each feature may be implemented by a different set of products, 4.1648 + there is no requirement that all features be implemented by a single 4.1649 + product. For the purposes of this criterion, we define the following 4.1650 + terms: 4.1651 + 4.1652 + <dl> 4.1653 + <dt>independent 4.1654 + 4.1655 + <dd>each implementation must be developed by a different party and cannot 4.1656 + share, reuse, or derive from code used by another qualifying 4.1657 + implementation. Sections of code that have no bearing on the 4.1658 + implementation of this specification are exempt from this requirement. 4.1659 + 4.1660 + <dt>interoperable 4.1661 + 4.1662 + <dd>passing the respective test case(s) in the official CSS test suite, 4.1663 + or, if the implementation is not a Web browser, an equivalent test. Every 4.1664 + relevant test in the test suite should have an equivalent test created if 4.1665 + such a user agent (UA) is to be used to claim interoperability. In 4.1666 + addition if such a UA is to be used to claim interoperability, then there 4.1667 + must one or more additional UAs which can also pass those equivalent 4.1668 + tests in the same way for the purpose of interoperability. The equivalent 4.1669 + tests must be made publicly available for the purposes of peer review. 4.1670 + 4.1671 + <dt>implementation 4.1672 + 4.1673 + <dd>a user agent which: 4.1674 + <ol class=inline> 4.1675 + <li>implements the specification. 4.1676 + 4.1677 + <li>is available to the general public. The implementation may be a 4.1678 + shipping product or other publicly available version (i.e., beta 4.1679 + version, preview release, or “nightly build”). Non-shipping product 4.1680 + releases must have implemented the feature(s) for a period of at least 4.1681 + one month in order to demonstrate stability. 4.1682 + 4.1683 + <li>is not experimental (i.e., a version specifically designed to pass 4.1684 + the test suite and is not intended for normal usage going forward). 4.1685 + </ol> 4.1686 + </dl> 4.1687 + 4.1688 + <p>The specification will remain Candidate Recommendation for at least six 4.1689 + months. 4.1690 + 4.1691 + <h2 class=no-num id=acknowledgements> Appendix A: Acknowledgements</h2> 4.1692 + 4.1693 + <p>This specification would not have been possible without the help from: 4.1694 + Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett, 4.1695 + Martin Dürst, Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye 4.1696 + Gittelman, Ian Hickson, Martin Heijdra, Richard Ishida, Masayasu Ishikawa, 4.1697 + Michael Jochimsen, Eric LeVine, Ambrose Li, Håkon Wium Lie, Chris Lilley, 4.1698 + Ken Lunde, Nat McCully, Shinyu Murakami, Paul Nelson, Chris Pratley, 4.1699 + Marcin Sawicki, Arnold Schrijver, Rahul Sonnad, Michel Suignard, Takao 4.1700 + Suzuki, Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi 4.1701 + Yabe and Steve Zilles. 4.1702 + 4.1703 + <h2 class=no-num id=appendix-b-references>Appendix B: References</h2> 4.1704 + 4.1705 + <h3 class=no-num id=normative-ref>Normative references</h3> 4.1706 + <!--begin-normative--> 4.1707 + <!-- Sorted by label --> 4.1708 + 4.1709 + <dl class=bibliography> 4.1710 + <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 4.1711 + <!----> 4.1712 + 4.1713 + <dt id=CSS21>[CSS21] 4.1714 + 4.1715 + <dd>Bert Bos; et al. <a 4.1716 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style 4.1717 + Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June 4.1718 + 2011. W3C Recommendation. URL: <a 4.1719 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> 4.1720 + </dd> 4.1721 + <!----> 4.1722 + 4.1723 + <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES] 4.1724 + 4.1725 + <dd>Elika J. Etemad; Koji Ishii. <a 4.1726 + href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/"><cite>CSS 4.1727 + Writing Modes Module Level 3.</cite></a> 1 May 2012. W3C Working Draft. 4.1728 + (Work in progress.) URL: <a 4.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> 4.1730 + </dd> 4.1731 + <!----> 4.1732 + 4.1733 + <dt id=CSS3BG>[CSS3BG] 4.1734 + 4.1735 + <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a 4.1736 + href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS 4.1737 + Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C 4.1738 + Candidate Recommendation. (Work in progress.) URL: <a 4.1739 + href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a> 4.1740 + </dd> 4.1741 + <!----> 4.1742 + 4.1743 + <dt id=CSS3TEXT>[CSS3TEXT] 4.1744 + 4.1745 + <dd>Elika J. Etemad; Koji Ishii. <a 4.1746 + href="http://www.w3.org/TR/2012/WD-css3-text-20120814/"><cite>CSS Text 4.1747 + Level 3.</cite></a> 14 August 2012. W3C Working Draft. (Work in 4.1748 + progress.) URL: <a 4.1749 + href="http://www.w3.org/TR/2012/WD-css3-text-20120814/">http://www.w3.org/TR/2012/WD-css3-text-20120814/</a> 4.1750 + </dd> 4.1751 + <!----> 4.1752 + 4.1753 + <dt id=RFC2119>[RFC2119] 4.1754 + 4.1755 + <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key 4.1756 + words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet 4.1757 + RFC 2119. URL: <a 4.1758 + href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a> 4.1759 + </dd> 4.1760 + <!----> 4.1761 + </dl> 4.1762 + <!--end-normative--> 4.1763 + 4.1764 + <h3 class=no-num id=informative-ref>Informative references</h3> 4.1765 + <!--begin-informative--> 4.1766 + <!-- Sorted by label --> 4.1767 + 4.1768 + <dl class=bibliography> 4.1769 + <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 4.1770 + <!----> 4.1771 + 4.1772 + <dt id=CSS3COLOR>[CSS3COLOR] 4.1773 + 4.1774 + <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a 4.1775 + href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color 4.1776 + Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a 4.1777 + href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a> 4.1778 + </dd> 4.1779 + <!----> 4.1780 + </dl> 4.1781 + <!--end-informative--> 4.1782 + 4.1783 + <h2 class=no-num id=changes>Appendix C: Changes</h2>
5.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 5.2 +++ b/css3-text-decor/css-text-decor-3/Overview.src.html Mon Oct 15 14:54:31 2012 -0700 5.3 @@ -0,0 +1,1228 @@ 5.4 +<!DOCTYPE html> 5.5 +<html lang="en"> 5.6 +<head> 5.7 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5.8 + <title>CSS Text Decoration Module Level 3 (CSS3 Text Decoration)</title> 5.9 + <link rel=contents href="#contents"> 5.10 + <link rel=index href="#index"> 5.11 + <link rel="stylesheet" type="text/css" href="../default.css"> 5.12 + <link rel="stylesheet" type="text/css" 5.13 + href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css"> 5.14 + 5.15 +</head> 5.16 + 5.17 +<div class="head"> 5.18 +<!--logo--> 5.19 + 5.20 +<h1>CSS Text Decoration Module Level 3</h1> 5.21 + 5.22 +<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2> 5.23 +<dl> 5.24 + <dt>This version:</dt> 5.25 + <!-- 5.26 + <dd><a href="http://dev.w3.org/csswg/css3-text/">$Date$ (CVS $Revision$)</a> 5.27 + --> 5.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> 5.29 + 5.30 + <dt>Latest version:</dt> 5.31 + <dd><a href="http://www.w3.org/TR/css3-text/">http://www.w3.org/TR/css3-text/</a></dd> 5.32 + <dt>Latest editor's draft:</dt> 5.33 + <dd><a href="http://dev.w3.org/csswg/css3-text/">http://dev.w3.org/csswg/css3-text/</a></dd> 5.34 + <dt>Previous version:</dt> 5.35 + <dd><a 5.36 + href="http://www.w3.org/TR/2012/WD-css3-text-20120119/">http://www.w3.org/TR/2012/WD-css3-text-20120119/</a> 5.37 + 5.38 + <dt>Issues List:</dt> 5.39 + <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/10">http://www.w3.org/Style/CSS/Tracker/products/10</a> 5.40 + 5.41 + <dt>Discussion:</dt> 5.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>” 5.43 + 5.44 + <dt>Editors:</dt> 5.45 + <dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> (Mozilla)</dd> 5.46 + <dd><a href="mailto:koji.a.ishii@mail.rakuten.com">Koji Ishii</a> (Rakuten, Inc.)</dd> 5.47 +</dl> 5.48 + 5.49 +<!--copyright--> 5.50 + 5.51 +<hr title="Separator for header"> 5.52 +</div> 5.53 + 5.54 +<h2 class="no-num no-toc" id="abstract">Abstract</h2> 5.55 + 5.56 + <p>This module contains the features of CSS relating to 5.57 + text decoration, such as underlines, text shadows, and emphasis marks. 5.58 + <a href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing 5.59 + the rendering of structured documents (such as HTML and XML) on screen, on 5.60 + paper, in speech, etc. 5.61 + 5.62 +<h2 class="no-num no-toc" id="status">Status of this document</h2> 5.63 + 5.64 + 5.65 + <p><em>This section describes the status of this document at the time of 5.66 + its publication. Other documents may supersede this document. A list of 5.67 + current W3C publications and the latest revision of this technical report 5.68 + can be found in the <a href="http://www.w3.org/TR/">W3C technical reports 5.69 + index at http://www.w3.org/TR/.</a></em> 5.70 + 5.71 + <p>Publication as a Working Draft does not imply endorsement by the W3C 5.72 + Membership. This is a draft document and may be updated, replaced or 5.73 + obsoleted by other documents at any time. It is inappropriate to cite this 5.74 + document as other than work in progress. 5.75 + 5.76 + <p>This CSS module has been produced as a combined effort of the <a 5.77 + href="http://www.w3.org/International/Activity">W3C Internationalization Activity</a>, 5.78 + and the <a href="http://www.w3.org/Style/Activity">Style Activity</a> and is maintained 5.79 + by the <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>. It also 5.80 + includes contributions made by participants in the <a 5.81 + href="http://www.w3.org/Style/XSL/Group/">XSL Working Group</a> (<a 5.82 + href="http://cgi.w3.org/MemberAccess/AccessRequest">members 5.83 + only</a>). 5.84 + 5.85 + <p>This document was produced by a group operating under the <a 5.86 + href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 5.87 + 2004 W3C Patent Policy</a>. W3C maintains a <a 5.88 + href="http://www.w3.org/2004/01/pp-impl/32061/status" 5.89 + rel=disclosure>public list of any patent disclosures</a> made in 5.90 + connection with the deliverables of the group; that page also includes 5.91 + instructions for disclosing a patent. An individual who has actual 5.92 + knowledge of a patent which the individual believes contains <a 5.93 + href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential 5.94 + Claim(s)</a> must disclose the information in accordance with <a 5.95 + href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 5.96 + 6 of the W3C Patent Policy</a>.</p> 5.97 + 5.98 + <p><strong>Feedback on this draft should be posted to the 5.99 + (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) 5.100 + public mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a></strong> 5.101 + (see <a href="http://www.w3.org/Mail/Request">instructions</a>) <strong>with 5.102 + <kbd>[css3-text-decor]</kbd> in the subject line.</strong> 5.103 + You are strongly encouraged to complain if you see something stupid 5.104 + in this draft. The editors will do their best to respond to all feedback.</p> 5.105 + 5.106 + <p>The following features are at risk and may be cut from the spec during 5.107 + its CR period if there are no (correct) implementations:</p> 5.108 + 5.109 + <p>The following features are at risk and may be cut from the spec during 5.110 + its CR period if there are no (correct) implementations:</p> 5.111 + <ul> 5.112 + <li>the 'text-decoration-skip' property / ''ink'' value 5.113 + </ul> 5.114 + 5.115 +<h2 class="no-num no-toc" id="contents"> 5.116 +Table of Contents</h2> 5.117 + 5.118 +<!--toc--> 5.119 + 5.120 +<h2 id="intro"> 5.121 +Introduction</h2> 5.122 + 5.123 + <p>[document here]</p> 5.124 + 5.125 + <p class="issue">This draft describes features that are specific to certain scripts. 5.126 + There is an ongoing discussion about where these features belong: in 5.127 + existing CSS properties, in new CSS properties, or perhaps in other 5.128 + specifications. 5.129 + 5.130 + 5.131 +<h3 id="placement"> 5.132 +Module Interactions</h3> 5.133 + 5.134 + <p>This module replaces and extends the text-level 5.135 + features defined in [[!CSS21]] chapter 16. 5.136 + 5.137 +<h3 id="values"> 5.138 +Values</h3> 5.139 + 5.140 + <p>This specification follows the 5.141 + <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property 5.142 + definition conventions</a> from [[!CSS21]]. Value types not defined in 5.143 + this specification are defined in CSS Level 2 Revision 1 [[!CSS21]]. 5.144 + Other CSS modules may expand the definitions of these value types: for 5.145 + example [[CSS3COLOR]], when combined with this module, expands the 5.146 + definition of the <color> value type as used in this specification.</p> 5.147 + 5.148 + <p>In addition to the property-specific values listed in their definitions, 5.149 + all properties defined in this specification also accept the 5.150 + <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> 5.151 + keyword as their property value. For readability it has not been repeated 5.152 + explicitly. 5.153 + 5.154 + <p>The <dfn>''currentcolor''</dfn> keyword here computes to itself and is 5.155 + resolved to the value of 'color' after inheritance is performed. This is 5.156 + so that the 'text-emphasis-color' by default matches the text 'color'. 5.157 + <span class="issue">CSS3 Color has not yet been errata'd to define it this way; 5.158 + currentcolor there is defined to compute to the value of 'color', 5.159 + which gives it the wrong inheritance behavior.</span> 5.160 + 5.161 +<h3 id="terms">Terminology</h3> 5.162 + 5.163 + <p>The terms <a href="http://www.w3.org/TR/css3-text/#grapheme-cluster"><dfn>character</dfn></a>, 5.164 + <a href="http://www.w3.org/TR/css3-text/#letter"><dfn>letter</dfn></a>, and 5.165 + <a href="http://www.w3.org/TR/css3-text/#content-language"><dfn>content language</dfn></a> 5.166 + as used in this specification are defined in [[!CSS3TEXT]]. 5.167 + Other terminology and concepts used in this specification are defined 5.168 + in [[!CSS21]] and [[!CSS3-WRITING-MODES]]. 5.169 + 5.170 +<h2 id="line-decoration"> 5.171 +Line Decoration: Underline, Overline, and Strike-Through</h2> 5.172 + 5.173 + <p>The following properties describe line decorations that are added 5.174 + to the content of an element. When specified on or propagated to 5.175 + an inline box, such decoration affects all the boxes generated 5.176 + by that element, and is further propagated to any in-flow block-level 5.177 + boxes that split the inline 5.178 + (see <a href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">CSS2.1 section 9.2.1.1</a>) 5.179 + When specified on or propagated to a ruby box, the decorations are 5.180 + further propagated only to the ruby base. 5.181 + When specified on or propagated to a a block container that establishes 5.182 + an inline formatting context, the decorations are propagated to an 5.183 + anonymous inline element that wraps all the in-flow inline-level children 5.184 + of the block container. For all other elements, the decorations are 5.185 + propagated to any in-flow children. 5.186 + 5.187 + <p class="note">Note that text decorations are not propagated to any 5.188 + out-of-flow descendants, nor to the contents of atomic inline-level 5.189 + descendants such as inline blocks and inline tables. 5.190 + 5.191 + <p>By default underlines, overlines, and line-throughs are applied only 5.192 + to text (including white space, letter spacing, and word spacing): 5.193 + margins, borders, and padding are skipped. Elements containing 5.194 + no text, such as images, are likewise not decorated. 5.195 + The 'text-decoration-skip' 5.196 + property can be used to modify this behavior, for example allowing 5.197 + inline replaced elements to be underlined or requiring that white 5.198 + space be skipped. 5.199 + 5.200 + <p>In determining the position and thickness of text decoration lines, 5.201 + user agents may consider the font sizes and dominant baselines of 5.202 + descendants, but for a given element's decoration must use the same 5.203 + position and thickness throughout each line box. The 5.204 + <a href="#text-decoration-color">color</a> and 5.205 + <a href="#text-decoration-style">line style</a> of decorations must 5.206 + remain the same on all decorations applied by a given element, even 5.207 + if descendant elements have different color or line style values.</p> 5.208 + 5.209 + <div class="example"> 5.210 + <p>The following figure shows the averaging for underline: 5.211 + <p><img alt="In the first rendering of the underlined text '1st a' 5.212 + with 'st' as a superscript, both the '1st' and the 'a' 5.213 + are rendered in a small font. In the second rendering, 5.214 + the 'a' is rendered in a larger font. In the third, both 5.215 + '1st' and 'a' are large." 5.216 + height="105" src="underline-averaging.gif" width="326"> 5.217 + <p>In the three fragments of underlined text, the underline is drawn 5.218 + consecutively lower and thicker as the ratio of large text to small 5.219 + text increases.</p> 5.220 + </div> 5.221 + 5.222 + <p>Relatively positioning a descendant moves all text decorations 5.223 + affecting it along with the descendant's text; it does not affect 5.224 + calculation of the decoration's initial position on that line. 5.225 + The 'visibility' property, filters, and other graphical transformations 5.226 + likewise affect text decorations as part of the text they're drawn on, 5.227 + even if the decorations were specified on an ancestor element. 5.228 + <span class="issue">Does this include 'text-shadow'? What about text-fill etc.?</span> 5.229 + 5.230 + <div class="example"> 5.231 + <p>In the following style sheet and document fragment:</p> 5.232 + <pre><code class="css"> 5.233 +<!-- --> blockquote { text-decoration: underline; color: blue; } 5.234 +<!-- --> em { display: block; } 5.235 +<!-- --> cite { color: fuchsia; } 5.236 +<!----></code></pre> 5.237 + <pre class="html"><code> 5.238 +<!-- --> <blockquote> 5.239 +<!-- --> <p> 5.240 +<!-- --> <span> 5.241 +<!-- --> Help, help! 5.242 +<!-- --> <em> I am under a hat! </em> 5.243 +<!-- --> 5.244 +<!-- --> <cite> —GwieF </cite> 5.245 +<!-- --> </span> 5.246 +<!-- --> </p> 5.247 +<!-- --> </blockquote> 5.248 +<!----></code></pre> 5.249 + <p>...the underlining for the blockquote element is propagated to an 5.250 + anonymous inline element that surrounds the span element, causing 5.251 + the text "Help, help!" to be blue, with the blue underlining from 5.252 + the anonymous inline underneath it, the color being taken from the 5.253 + blockquote element. The <code><em>text</em></code> 5.254 + in the em block is also underlined, as it is in an in-flow block to 5.255 + which the underline is propagated. The final line of text is fuchsia, 5.256 + but the underline underneath it is still the blue underline from the 5.257 + anonymous inline element.</p> 5.258 + <p><img src="underline-example.png" alt="Sample rendering of the above underline example"></p> 5.259 + <p>This diagram shows the boxes involved in the example above. The 5.260 + rounded aqua line represents the anonymous inline element wrapping 5.261 + the inline contents of the paragraph element, the rounded blue line 5.262 + represents the span element, and the orange lines represent the 5.263 + blocks.</p> 5.264 + </div> 5.265 + 5.266 +<h3 id="text-decoration-line-property"> 5.267 +Text Decoration Lines: the 'text-decoration-line' property</h3> 5.268 + 5.269 + <table class="propdef"> 5.270 + <tr> 5.271 + <th>Name: 5.272 + <td><dfn>text-decoration-line</dfn> 5.273 + <tr> 5.274 + <th><a href="#values">Value</a>: 5.275 + <td>none | [ underline || overline || line-through ] 5.276 + 5.277 + <tr> 5.278 + <th>Initial: 5.279 + <td>none 5.280 + <tr> 5.281 + <th>Applies to: 5.282 + <td>all elements 5.283 + <tr> 5.284 + <th>Inherited: 5.285 + <td>no (but see prose) 5.286 + <tr> 5.287 + <th>Percentages: 5.288 + <td>N/A 5.289 + <tr> 5.290 + <th>Media: 5.291 + <td>visual 5.292 + <tr> 5.293 + <th>Computed value: 5.294 + <td>as specified 5.295 + </table> 5.296 + 5.297 + <p>Specifies what line decorations, if any, are added to the element. 5.298 + Values have the following meanings:</p> 5.299 + 5.300 + <dl> 5.301 + <dt><dfn title="text-decoration-line:none">''none''</dfn> 5.302 + <dd>Neither produces nor inhibits text decoration. 5.303 + <dt><dfn>''underline''</dfn> 5.304 + <dd>Each line of text is underlined. 5.305 + <dt><dfn>''overline''</dfn> 5.306 + <dd>Each line of text has a line above it (i.e. on the opposite 5.307 + side from an underline). 5.308 + <dt><dfn>''line-through''</dfn> 5.309 + <dd>Each line of text has a line through the middle. 5.310 + </dl> 5.311 + 5.312 +<h3 id="text-decoration-color-property"> 5.313 +Text Decoration Color: the 'text-decoration-color' property</h3> 5.314 + 5.315 + <table class="propdef"> 5.316 + <tr> 5.317 + <th>Name: 5.318 + <td><dfn>text-decoration-color</dfn> 5.319 + <tr> 5.320 + <th><a href="#values">Value</a>: 5.321 + <td><a href="http://www.w3.org/TR/css3-color/#color0"><span class="value-inst-color"><color></span></a> 5.322 + 5.323 + <tr> 5.324 + <th>Initial: 5.325 + <td><a href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> 5.326 + <tr> 5.327 + <th>Applies to: 5.328 + <td>all elements 5.329 + <tr> 5.330 + <th>Inherited: 5.331 + <td>no 5.332 + <tr> 5.333 + <th>Percentages: 5.334 + <td>N/A 5.335 + <tr> 5.336 + <th>Media: 5.337 + <td>visual 5.338 + <tr> 5.339 + <th>Computed value: 5.340 + <td>the computed color 5.341 + </table> 5.342 + 5.343 + <p>This property specifies the color of text decoration (underlines 5.344 + overlines, and line-throughs) set on the element with 5.345 + 'text-decoration-line'.</p> 5.346 + 5.347 +<h3 id="text-decoration-style-property"> 5.348 +Text Decoration Style: the 'text-decoration-style' property</h3> 5.349 + 5.350 + <table class="propdef"> 5.351 + <tr> 5.352 + <th>Name: 5.353 + <td><dfn>text-decoration-style</dfn> 5.354 + <tr> 5.355 + <th><a href="#values">Value</a>: 5.356 + <td>solid | double | dotted | dashed | wavy 5.357 + 5.358 + <tr> 5.359 + <th>Initial: 5.360 + <td>solid 5.361 + <tr> 5.362 + <th>Applies to: 5.363 + <td>all elements 5.364 + <tr> 5.365 + <th>Inherited: 5.366 + <td>no 5.367 + <tr> 5.368 + <th>Percentages: 5.369 + <td>N/A 5.370 + <tr> 5.371 + <th>Media: 5.372 + <td>visual 5.373 + <tr> 5.374 + <th>Computed value: 5.375 + <td>as specified 5.376 + </table> 5.377 + 5.378 + <p>This property specifies the style of the line(s) drawn for 5.379 + text decoration specified on the element. Values have the 5.380 + same meaning as for the 5.381 + <a href="http://www.w3.org/TR/css3-background/#the-border-style">border-style 5.382 + properties</a> [[!CSS3BG]]. ''wavy'' indicates a wavy line.</p> 5.383 + 5.384 +<h3 id="text-decoration-property"> 5.385 +Text Decoration Shorthand: the 'text-decoration' property</h3> 5.386 + 5.387 + <table class="propdef"> 5.388 + <tr> 5.389 + <th>Name: 5.390 + <td><dfn>text-decoration</dfn> 5.391 + <tr> 5.392 + <th><a href="#values">Value</a>: 5.393 + <td><var><a href="#text-decoration-line"><text-decoration-line></a></var> || 5.394 + <var><a href="#text-decoration-style"><text-decoration-style></a></var> || 5.395 + <var><a href="#text-decoration-color"><text-decoration-color></a></var> || blink 5.396 + 5.397 + <tr> 5.398 + <th>Initial: 5.399 + <td>none 5.400 + <tr> 5.401 + <th>Applies to: 5.402 + <td>all elements 5.403 + <tr> 5.404 + <th>Inherited: 5.405 + <td>no 5.406 + <tr> 5.407 + <th>Percentages: 5.408 + <td>N/A 5.409 + <tr> 5.410 + <th>Media: 5.411 + <td>visual 5.412 + <tr> 5.413 + <th>Computed value: 5.414 + <td>as specified 5.415 + </table> 5.416 + 5.417 + <p>This property is a shorthand for setting 'text-decoration-line', 5.418 + 'text-decoration-color', and 'text-decoration-style' in one declaration. 5.419 + Omitted values are set to their initial values. A 'text-decoration' 5.420 + declaration that omits both the 'text-decoration-color' 5.421 + and 'text-decoration-style' values is backwards-compatible 5.422 + with CSS Levels 1 and 2.</p> 5.423 + 5.424 + <p>If the ''blink'' keyword is specified the text blinks 5.425 + (alternates between visible and invisible). Conforming user agents 5.426 + may simply not blink the text. Note that not blinking the text is 5.427 + one technique to satisfy 5.428 + <a href="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">checkpoint 3.3 of WAI-UAAG</a>.</p> 5.429 + 5.430 + <div class="example"> 5.431 + <p>The following example underlines unvisited links with a solid blue 5.432 + underline in CSS1 and CSS2 UAs and a navy dotted underline in CSS3 UAs.</p> 5.433 + 5.434 + <pre><code class="css"> 5.435 +<!-- -->:link { 5.436 +<!-- --> color: blue; 5.437 +<!-- --> text-decoration: underline; 5.438 +<!-- --> text-decoration: navy dotted underline; /* <a href="http://www.w3.org/TR/CSS21/syndata.html#ignore">Ignored</a> in CSS1/CSS2 UAs */ 5.439 +<!-- -->}</code></pre> 5.440 + </div> 5.441 + 5.442 +<h3 id="text-decoration-skip-property"> 5.443 +Text Decoration Line Continuity: the 'text-decoration-skip' property</h3> 5.444 + 5.445 + <table class="propdef"> 5.446 + <tr> 5.447 + <th>Name: 5.448 + <td><dfn>text-decoration-skip</dfn> 5.449 + <tr> 5.450 + <th><a href="#values">Value</a>: 5.451 + <td>none | [ objects || spaces || ink || edges ] 5.452 + 5.453 + <tr> 5.454 + <th>Initial: 5.455 + <td>objects 5.456 + <tr> 5.457 + <th>Applies to: 5.458 + <td>all elements 5.459 + <tr> 5.460 + <th>Inherited: 5.461 + <td>yes 5.462 + <tr> 5.463 + <th>Percentages: 5.464 + <td>N/A 5.465 + <tr> 5.466 + <th>Media: 5.467 + <td>visual 5.468 + <tr> 5.469 + <th>Computed value: 5.470 + <td>as specified 5.471 + </table> 5.472 + 5.473 + <p>This property specifies what parts of the element's content 5.474 + any text decoration affecting the element must skip over. It 5.475 + controls all text decoration lines drawn by the element 5.476 + and also any text decoration lines drawn by its ancestors. 5.477 + Values have the following meanings:</p> 5.478 + 5.479 + <dl> 5.480 + <dt><dfn title="text-decoration-skip:none">''none''</dfn></dt> 5.481 + <dd>Skip nothing: text-decoration is drawn for all text content 5.482 + and for inline replaced elements.</dd> 5.483 + <dt><dfn title="text-decoration-skip:objects">''objects''</dfn></dt> 5.484 + <dd>Skip this element if it is an atomic inline (such as an 5.485 + image or inline-block).</dd> 5.486 + <dt><dfn title="text-decoration-skip:spaces">''spaces''</dfn></dt> 5.487 + <dd>Skip white space: this includes regular spaces (U+0020) and 5.488 + tabs (U+0009), as well as nbsp (U+00A0), ideographic space 5.489 + (U+3000), all fixed width spaces (such as U+2000–U+200A, 5.490 + U+202F and U+205F), and any adjacent letter-spacing or 5.491 + word-spacing.</dd> 5.492 + <dt><dfn title="text-decoration-skip:ink">''ink''</dfn></dt> 5.493 + <dd>Skip over where glyphs are drawn: interrupt the decoration 5.494 + line to let text show through where the text decoration would 5.495 + otherwise cross over a glyph. The UA may also skip a small 5.496 + distance to either side of the glyph outline.</dd> 5.497 + <dt><dfn title="text-decoration-skip:edges">''edges''</dfn></dt> 5.498 + <dd>The UA should place the start and end of the line inwards from 5.499 + the content edge of the decorating element so that, e.g. two 5.500 + underlined elements side-by-side do not appear to have a single 5.501 + underline. (This is important in Chinese, where underlining is a 5.502 + form of punctuation.)</dd> 5.503 + </dl> 5.504 + 5.505 + <p class="issue">Do we need a value that <em>doesn't</em> skip 5.506 + margins and padding?</p> 5.507 + 5.508 + <p class="note">Note that this property inherits and that descendant 5.509 + elements can have a different setting.</p> 5.510 + 5.511 +<h4 id="text-underline-position-property"> 5.512 +Text Underline Position: the 'text-underline-position' property</h4> 5.513 + 5.514 + <table class="propdef"> 5.515 + <tr> 5.516 + <th>Name: 5.517 + <td><dfn>text-underline-position</dfn> 5.518 + <tr> 5.519 + <th><a href="#values">Value</a>: 5.520 + <td>auto | alphabetic | [ below || [ left | right ] ] 5.521 + 5.522 + <tr> 5.523 + <th>Initial: 5.524 + <td>auto 5.525 + <tr> 5.526 + <th>Applies to: 5.527 + <td>all elements 5.528 + <tr> 5.529 + <th>Inherited: 5.530 + <td>yes 5.531 + <tr> 5.532 + <th>Percentages: 5.533 + <td>N/A 5.534 + <tr> 5.535 + <th>Media: 5.536 + <td>visual 5.537 + <tr> 5.538 + <th>Computed value: 5.539 + <td>as specified 5.540 + </table> 5.541 + 5.542 + <p>This property sets the position of an underline specified 5.543 + on the same element: it does not affect underlines specified by 5.544 + ancestor elements. Values have the following meanings:</p> 5.545 + 5.546 + <dl> 5.547 + <dt><dfn>''auto''</dfn></dt> 5.548 + <dd>The user agent may use any algorithm to determine the 5.549 + underline's position; however it must be placed at or below 5.550 + the alphabetic baseline. 5.551 + <p class="note">It is suggested that the underline position 5.552 + be ''alphabetic'' unless it crosses either subscripted (or 5.553 + otherwise lowered) text, or it affects characters from Asian 5.554 + scripts such as Han or Tibetan, for which an alphabetic 5.555 + underline is too high: in such cases, aligning to the em box 5.556 + edge as described for ''below left'' is more appropriate. 5.557 + <dt><dfn>''alphabetic''</dfn></dt> 5.558 + <dd>The underline is positioned relative to the alphabetic baseline. In 5.559 + this case the underline is likely to cross some descenders. 5.560 + <div class="figure"> 5.561 + <p><img title="text-underline-position: alphabetic" 5.562 + alt="In a typical Latin font, the underline is positioned slightly 5.563 + below the alphabetic baseline, leaving a gap between the line 5.564 + and the bottom of most Latin letters, but crossing through 5.565 + descenders such as the stem of a 'p'." 5.566 + src="underline-position-alphabetic.png" 5.567 + > 5.568 + <p class="caption">''text-underline-position: alphabetic''</p> 5.569 + </div> 5.570 + <dt><dfn>''below''</dfn></dt> 5.571 + <dd>In horizontal writing modes, the underline is positioned 5.572 + relative to the under edge of the element's content box. 5.573 + In this case the underline usually does not cross the descenders. 5.574 + (This is sometimes called "accounting" underline.) 5.575 + If the underline affects descendants with a lower content edge, 5.576 + the user agent should shift the underline down further to the 5.577 + lowest underlined content box edge. 5.578 + The user agent may ignore elements with ''vertical-align'' 5.579 + values given as lengths, percentages, ''top'', or ''bottom'' 5.580 + when making this adjustment. 5.581 + (Note that images that are not affected by the underline per 5.582 + 'text-decoration-skip' will not affect the position of the 5.583 + underline.) 5.584 + <div class="figure"> 5.585 + <p><img title="text-underline-position: below" 5.586 + alt="In a typical Latin font, the underline is far enough 5.587 + below the text that it does not cross the bottom of a 'g'." 5.588 + src="underline-position-below.png" 5.589 + > 5.590 + <p class="caption">''text-underline-position: below''</p> 5.591 + </div> 5.592 + <div class="example"> 5.593 + <p>Because 'text-underline-position' inherits, and is not reset 5.594 + by the 'text-decoration' shorthand, the following example 5.595 + switches the document to use ''below'' underlining, which can 5.596 + be more appropriate for writing systems with long, complicated 5.597 + descenders. It is also often useful for mathematical or chemical 5.598 + texts that use many subscripts. 5.599 + <pre>:root { text-underline-position: below; }</pre> 5.600 + </div> 5.601 + <dt><dfn>''left''</dfn></dt> 5.602 + <dd>In vertical writing modes, the underline is aligned as for 5.603 + ''below'', on the left edge of the text.</dd> 5.604 + <dt><dfn>''right''</dfn></dt> 5.605 + <dd>In vertical writing modes, the underline is aligned as for 5.606 + ''below'', except it is aligned to the right edge of the text. 5.607 + If this causes the underline to be drawn on the "over" side of 5.608 + the text, then an overline also switches sides and is drawn on 5.609 + the "under" side.</dd> 5.610 + </dl> 5.611 + 5.612 + <p>If ''below'' is specified alone, ''left'' is also implied. 5.613 + If ''left'' or ''right'' is specified alone, ''below'' is also 5.614 + implied. 5.615 + 5.616 + <p class="issue"> 5.617 + Should ''above''/''below'' be ''over''/''under'' to match text decoration names? 5.618 + 5.619 + <div class="figure" id="fig-text-underline-position"> 5.620 + <table> 5.621 + <tr> 5.622 + <td> 5.623 + <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left' 5.624 + places the underline on the left side of the text." 5.625 + title="text-underline-position: left" 5.626 + src="underline-position-left.png" 5.627 + > 5.628 + 5.629 + <td> 5.630 + <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right' 5.631 + places the underline on the right side of the text." 5.632 + title="text-underline-position: right" 5.633 + src="underline-position-right.png" 5.634 + > 5.635 + 5.636 + <tr> 5.637 + <td>''left'' 5.638 + <td>''right'' 5.639 + </table> 5.640 + <p class="caption">In vertical writing modes, the 'text-underline-position' 5.641 + values ''left'' and ''right'' allow placing the underline on either 5.642 + side of the text. (In horizontal writing modes, both values are 5.643 + treated as ''below''.)</p> 5.644 + </div> 5.645 + 5.646 + <div class="example"> 5.647 + <p>The following example styles modern Chinese, Japanese, and Korean 5.648 + texts with the appropriate underline positions in both horizontal 5.649 + and vertical text: 5.650 + <pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: below right; } 5.651 +<!-- -->:root:lang(zh), [lang|=zh] { text-underline-position: below left; }</pre> 5.652 + </div> 5.653 + 5.654 + <div class="note"> 5.655 + <p>In some cases (such as in OpenType) the font format can offer 5.656 + information about the appropriate position of an underline. 5.657 + Typically this information gives the position of an ''alphabetic'' 5.658 + underline; in some cases (especially in CJK fonts), it gives 5.659 + the position of a ''below left'' underline. (In this case, 5.660 + the font's underline metrics typically touch the bottom edge 5.661 + of the em box). 5.662 + The UA is encouraged to use information (such as the underline 5.663 + thickness, or appropriate alphabetic alignment) from the font 5.664 + wherever appropriate. 5.665 + </p> 5.666 + </div> 5.667 + 5.668 +<h3 id="emphasis-marks"> 5.669 +Emphasis Marks</h3> 5.670 + 5.671 + <p>East Asian documents traditionally use small symbols next to each glyph to emphasize 5.672 + a run of text. For example:</p> 5.673 + 5.674 + <div class="figure"> 5.675 + <p> 5.676 + <img alt="Example of emphasis in Japanese appearing above the text" 5.677 + class="example" src="text-emphasis-ja.gif" height="28" width="225"></p> 5.678 + <p class="caption">Accent emphasis (shown in blue for clarity) applied to Japanese text</p> 5.679 + </div> 5.680 + 5.681 +<h4 id="text-emphasis-style-property"> 5.682 +Emphasis Mark Style: the 'text-emphasis-style' property</h4> 5.683 + 5.684 + <table class="propdef"> 5.685 + <tr> 5.686 + <th>Name: 5.687 + <td><dfn>text-emphasis-style</dfn> 5.688 + <tr> 5.689 + <th><a href="#values">Value</a>: 5.690 + <td>none | 5.691 + [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | 5.692 + <a class="noxref" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string"><span class="value-inst-string"><string></span></a> 5.693 + 5.694 + <tr> 5.695 + <th>Initial: 5.696 + <td>none 5.697 + <tr> 5.698 + <th>Applies to: 5.699 + <td>all elements 5.700 + <tr> 5.701 + <th>Inherited: 5.702 + <td>yes 5.703 + <tr> 5.704 + <th>Percentages: 5.705 + <td>N/A 5.706 + <tr> 5.707 + <th>Media: 5.708 + <td>visual 5.709 + <tr> 5.710 + <th>Computed value: 5.711 + <td>'none', a pair of keywords representing the shape and fill, or 5.712 + a string 5.713 + </table> 5.714 + 5.715 + <p>This property applies emphasis marks to the element's text. 5.716 + Values have the following meanings:</p> 5.717 + 5.718 + <dl> 5.719 + <dt><dfn title="text-emphasis:none">''none''</dfn></dt> 5.720 + <dd>No emphasis marks.</dd> 5.721 + <dt><dfn title="text-emphasis:filled">''filled''</dfn></dt> 5.722 + <dd>The shape is filled with solid color.</dd> 5.723 + <dt><dfn title="text-emphasis:open">''open''</dfn></dt> 5.724 + <dd>The shape is hollow.</dd> 5.725 + <dt><dfn title="text-emphasis:dot">''dot''</dfn></dt> 5.726 + <dd>Display small circles as marks. 5.727 + The filled dot is U+2022 '•', and the open dot is U+25E6 '◦'.</dd> 5.728 + <dt><dfn title="text-emphasis:circle">''circle''</dfn></dt> 5.729 + <dd>Display large circles as marks. 5.730 + The filled circle is U+25CF '●', and the open circle is U+25CB '○'.</dd> 5.731 + <dt><dfn title="text-emphasis:double-circle">''double-circle''</dfn></dt> 5.732 + <dd>Display double circles as marks. 5.733 + The filled double-circle is U+25C9 '◉', and the open double-circle is U+25CE '◎'.</dd> 5.734 + <dt><dfn title="text-emphasis:triangle">''triangle''</dfn></dt> 5.735 + <dd>Display triangles as marks. 5.736 + The filled triangle is U+25B2 '▲', and the open triangle is U+25B3 '△'.</dd> 5.737 + <dt><dfn title="text-emphasis:sesame">''sesame''</dfn></dt> 5.738 + <dd>Display sesames as marks. 5.739 + The filled sesame is U+FE45 '﹅', and the open sesame is U+FE46 '﹆'.</dd> 5.740 + <dt><dfn title="text-emphasis:sesame">''<var><string></var>''</dfn></dt> 5.741 + <dd>Display the given string as marks. 5.742 + Authors should not specify more than one <i>character</i> in <string>. 5.743 + The UA may truncate or ignore strings consisting of more than one grapheme cluster.</dd> 5.744 + </dl> 5.745 + 5.746 + <p>If a shape keyword is specified but neither of ''filled'' nor ''open'' is 5.747 + specified, ''filled'' is assumed. If only ''filled'' or ''open'' is specified, 5.748 + the shape keyword computes to ''circle'' in horizontal writing mode and 5.749 + ''sesame'' in vertical writing mode.</p> 5.750 + 5.751 + <p>The marks should be drawn using the element's font settings with its 5.752 + size scaled down to 50%. However, not all fonts have all these glyphs, 5.753 + and some fonts use inappropriate sizes for emphasis marks in these 5.754 + code points. The UA may opt to use a font known to be good for 5.755 + emphasis marks, or the marks may instead be synthesized by the UA. 5.756 + Marks must remain upright in vertical writing modes: like CJK 5.757 + characters, they do not rotate to match the writing mode.</p> 5.758 + 5.759 + <p class="note"> 5.760 + One example of good fonts for emphasis marks is Adobe's opensource project, 5.761 + <a href="http://sourceforge.net/adobe/kenten-generic/">Kenten Generic OpenType Font</a>, 5.762 + which is specially designed for the emphasis marks. 5.763 + </p> 5.764 + 5.765 + <p>The marks are drawn once for each <i>character</i>. However, 5.766 + emphasis marks are not drawn for characters that are:</p> 5.767 + <ul> 5.768 + <li><a href="http://www.w3.org/TR/css3-text/#word-separator">Word separators</a> or that 5.769 + belong to the Unicode separator classes (Z*). 5.770 + (But note that emphasis marks <em>are</em> drawn for a space 5.771 + that combines with any combining characters.)</li> 5.772 + <li>Characters belonging to the Unicode classes for control codes 5.773 + and unassigned characters (Cc, Cf, Cn).</li> 5.774 + </ul> 5.775 + 5.776 + <p>If emphasis marks are drawn for characters 5.777 + for which ruby is drawn in the same position as the emphasis mark, 5.778 + the ruby should be stacked between the emphasis marks and the base text. 5.779 + In this case, the position of the emphasis marks for a given element 5.780 + should be determined as if all characters have ruby boxes 5.781 + of the same height as the highest ruby box in the element. 5.782 + If the UA is not capable of drawing ruby and emphasis marks on the same side, 5.783 + the UA may hide ruby and draw only emphasis marks.</p> 5.784 + <div class="figure"> 5.785 + <p><img 5.786 + alt="Example of emphasis marks applied to 4 characters, and ruby to 2 of them" 5.787 + src="text-emphasis-ruby.png" width="134" height="50"></p> 5.788 + <p class="caption">Emphasis marks applied to 4 characters, and ruby to 2 of them</p> 5.789 + </div> 5.790 + 5.791 + <p class="note">A future level of CSS may define controls to specify 5.792 + what to do when emphasis marks and ruby text coincide.</p> 5.793 + 5.794 +<h4 id="text-emphasis-color-property"> 5.795 +Emphasis Mark Color: the 'text-emphasis-color' property</h4> 5.796 + 5.797 + <table class="propdef"> 5.798 + <tr> 5.799 + <th>Name: 5.800 + <td><dfn>text-emphasis-color</dfn> 5.801 + <tr> 5.802 + <th><a href="#values">Value</a>: 5.803 + <td><color> 5.804 + <tr> 5.805 + <th>Initial: 5.806 + <td><a href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> 5.807 + <tr> 5.808 + <th>Applies to: 5.809 + <td>all elements 5.810 + <tr> 5.811 + <th>Inherited: 5.812 + <td>yes 5.813 + <tr> 5.814 + <th>Percentages: 5.815 + <td>N/A 5.816 + <tr> 5.817 + <th>Media: 5.818 + <td>visual 5.819 + <tr> 5.820 + <th>Computed value: 5.821 + <td>as specified 5.822 + </table> 5.823 + 5.824 + <p>This property specifies the foreground color of the emphasis marks.</p> 5.825 + 5.826 + <p class="note"> 5.827 + The correct behavior of this property depends on an outstanding erratum on [[CSS3COLOR]] 5.828 + that has the ''currentColor'' keyword inherit as itself, 5.829 + and to take the value of the 'color' property as its <em>used</em> (not computed) value. 5.830 + 5.831 +<h4 id="text-emphasis-property"> 5.832 +Emphasis Mark Shorthand: the 'text-emphasis' property</h4> 5.833 + 5.834 + <table class="propdef"> 5.835 + <tr> 5.836 + <th>Name: 5.837 + <td><dfn>text-emphasis</dfn> 5.838 + <tr> 5.839 + <th><a href="#values">Value</a>: 5.840 + <td>'<<a href="#text-emphasis-style">text-emphasis-style</a>>' || '<<a href="#text-emphasis-color">text-emphasis-color</a>>' 5.841 + 5.842 + <tr> 5.843 + <th>Initial: 5.844 + <td>see individual properties 5.845 + <tr> 5.846 + <th>Applies to: 5.847 + <td>all elements 5.848 + <tr> 5.849 + <th>Inherited: 5.850 + <td>yes 5.851 + <tr> 5.852 + <th>Percentages: 5.853 + <td>N/A 5.854 + <tr> 5.855 + <th>Media: 5.856 + <td>visual 5.857 + <tr> 5.858 + <th>Computed value: 5.859 + <td>see individual properties 5.860 + </table> 5.861 + 5.862 + <p>This property is a shorthand for setting 5.863 + 'text-emphasis-style' and 'text-emphasis-color' 5.864 + in one declaration. 5.865 + Omitted values are set to their initial values.</p> 5.866 + 5.867 + <p class="note">Note that 'text-emphasis-position' is not reset in this 5.868 + shorthand. This is because typically the shape and color vary, but the 5.869 + position is consistent for a particular language throughout the document. 5.870 + Therefore the position should inherit independently.</p> 5.871 + 5.872 +<h4 id="text-emphasis-position-property"> 5.873 +Emphasis Mark Position: the 'text-emphasis-position' property</h4> 5.874 + 5.875 + <table class="propdef"> 5.876 + <tr> 5.877 + <th>Name: 5.878 + <td><dfn>text-emphasis-position</dfn> 5.879 + <tr> 5.880 + <th><a href="#values">Value</a>: 5.881 + <td>[ above | below ] && [ right | left ] 5.882 + 5.883 + <tr> 5.884 + <th>Initial: 5.885 + <td>above right 5.886 + <tr> 5.887 + <th>Applies to: 5.888 + <td>all elements 5.889 + <tr> 5.890 + <th>Inherited: 5.891 + <td>yes 5.892 + <tr> 5.893 + <th>Percentages: 5.894 + <td>N/A 5.895 + <tr> 5.896 + <th>Media: 5.897 + <td>visual 5.898 + <tr> 5.899 + <th>Computed value: 5.900 + <td>as specified 5.901 + </table> 5.902 + 5.903 + <p>This property describes where emphasis marks are drawn at. 5.904 + The values have following meanings:</p> 5.905 + 5.906 + <dl> 5.907 + <dt><dfn title="text-emphasis:above">''above''</dfn></dt> 5.908 + <dd>Draw marks over the text in horizontal writing mode.</dd> 5.909 + <dt><dfn title="text-emphasis:below">''below''</dfn></dt> 5.910 + <dd>Draw marks under the text in horizontal writing mode.</dd> 5.911 + <dt><dfn title="text-emphasis:right">''right''</dfn></dt> 5.912 + <dd>Draw marks to the right of the text in vertical writing mode.</dd> 5.913 + <dt><dfn title="text-emphasis:left">''left''</dfn></dt> 5.914 + <dd>Draw marks to the left of the text in vertical writing mode.</dd> 5.915 + </dl> 5.916 + 5.917 + <p class="issue"> 5.918 + Should ''above''/''below'' be ''over''/''under'' to match text decoration names? 5.919 + 5.920 + <p>Emphasis marks are drawn exactly as if each character was 5.921 + assigned the mark as its ruby annotation text with the ruby position 5.922 + given by 'text-emphasis-position' and the ruby alignment as centered. 5.923 + 5.924 + <p>The effect of emphasis marks on the line height is the same as for 5.925 + ruby text.</p> 5.926 + 5.927 + <div class="note"> 5.928 + <p>Note, the preferred position of emphasis marks depends on the 5.929 + language. In Japanese for example, the preferred position is 5.930 + ''above right''. In Chinese, on the other hand, the preferred 5.931 + position is ''below right''. 5.932 + The informative table below summarizes the preferred 5.933 + emphasis mark positions for Chinese and Japanese:</p> 5.934 + 5.935 + <table class="data"> 5.936 + <caption>Preferred emphasis mark and ruby position</caption> 5.937 + <thead> 5.938 + <tr> 5.939 + <th scope="col" rowspan=2>Language 5.940 + <th scope="col" colspan=2>Preferred mark position 5.941 + <th scope="col" colspan=2 rowspan=2>Illustration 5.942 + <tr> 5.943 + <th>Horizontal 5.944 + <th>Vertical 5.945 + </thead> 5.946 + <tbody> 5.947 + <tr> 5.948 + <td scope="row">Japanese 5.949 + <td>above 5.950 + <td>right 5.951 + <td> 5.952 + <img alt="Emphasis marks appear above each emphasized character in horizontal Japanese text." 5.953 + title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text" 5.954 + src="text-emphasis-ja.gif" height="28" width="225"> 5.955 + 5.956 + <td rowspan="2"> 5.957 + <img alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text." 5.958 + title="Emphasis applied on the right of a fragment of Japanese text" 5.959 + src="text-emphasis-v.gif" height="89" width="34"> 5.960 + 5.961 + <!-- 5.962 + <tr> 5.963 + <td scope="row">Mongolian 5.964 + <td><span class="issue">?</span> 5.965 + <td>right 5.966 + --> 5.967 + <tr> 5.968 + <td scope="row">Chinese 5.969 + <td>below 5.970 + <td>right 5.971 + <td> 5.972 + <img alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text." 5.973 + title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text" 5.974 + src="text-emphasis-zh.gif" height="28" width="133"> 5.975 + </tbody> 5.976 + </table> 5.977 + </div> 5.978 + 5.979 +<h3 id="text-shadow-property"> 5.980 +Text Shadows: the 'text-shadow' property</h3> 5.981 + 5.982 + <table class="propdef"> 5.983 + <tr> 5.984 + <th>Name: 5.985 + <td><dfn>text-shadow</dfn> 5.986 + <tr> 5.987 + <th><a href="#values">Value</a>: 5.988 + <td>none | [ <length>{2,3} && <color>? ]# 5.989 + <tr> 5.990 + <th>Initial: 5.991 + <td>none 5.992 + <tr> 5.993 + <th>Applies to: 5.994 + <td>all elements 5.995 + <tr> 5.996 + <th>Inherited: 5.997 + <td>yes 5.998 + <tr> 5.999 + <th>Percentages: 5.1000 + <td>N/A 5.1001 + <tr> 5.1002 + <th>Media: 5.1003 + <td>visual 5.1004 + <tr> 5.1005 + <th>Computed value: 5.1006 + <td>a color plus three absolute <length>s 5.1007 + </table> 5.1008 + 5.1009 + <p>This property accepts a comma-separated list of shadow effects to 5.1010 + be applied to the text of the element. Values are interpreted as for 5.1011 + <a href="http://www.w3.org/TR/css3-background/#the-box-shadow">'box-shadow'</a> 5.1012 + [[!CSS3BG]]. (But note that spread values are not allowed.) 5.1013 + The shadow is applied to all of the element's text as well as any 5.1014 + text decorations it specifies. 5.1015 + 5.1016 + <p>The shadow effects are applied front-to-back: the first shadow is on 5.1017 + top. The shadows may thus overlay each other, but they never overlay 5.1018 + the text itself. The shadow must be painted at a stack level between 5.1019 + the element's border and/or background, if present, and the elements 5.1020 + text and text decoration. UAs should avoid painting text shadows over 5.1021 + text in adjacent elements belonging to the same stack level and stacking 5.1022 + context. (This may mean that the exact stack level of the shadows depends 5.1023 + on whether the element has a border or background: the exact stacking 5.1024 + behavior of text shadows is thus UA-defined.)</p> 5.1025 + 5.1026 + <p>Unlike 'box-shadow', text shadows are not clipped to the shadowed 5.1027 + shape and may show through if the text is partially-transparent. 5.1028 + Like 'box-shadow', text shadows do not influence layout, and do not 5.1029 + trigger scrolling or increase the size of the scrollable area. 5.1030 + 5.1031 + <p class="note">The painting order of shadows defined here is the opposite 5.1032 + of that defined in the 1998 5.1033 + <a href="http://www.w3.org/TR/1998/REC-CSS2-19980512">CSS2 Recommendation</a>.</p> 5.1034 + 5.1035 + <p>The ''text-shadow'' property applies to both the 5.1036 + <code>::first-line</code> and <code>::first-letter</code> 5.1037 + pseudo-elements.</p> 5.1038 + 5.1039 +<h2 id="conformance"> 5.1040 +Conformance</h2> 5.1041 + 5.1042 +<h3 id="conventions"> 5.1043 +Document Conventions</h3> 5.1044 + 5.1045 + <p>Conformance requirements are expressed with a combination of 5.1046 + descriptive assertions and RFC 2119 terminology. The key words “MUST”, 5.1047 + “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, 5.1048 + “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this 5.1049 + document are to be interpreted as described in RFC 2119. 5.1050 + However, for readability, these words do not appear in all uppercase 5.1051 + letters in this specification. 5.1052 + 5.1053 + <p>All of the text of this specification is normative except sections 5.1054 + explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p> 5.1055 + 5.1056 + <p>Examples in this specification are introduced with the words “for example” 5.1057 + or are set apart from the normative text with <code>class="example"</code>, 5.1058 + like this: 5.1059 + 5.1060 + <div class="example"> 5.1061 + <p>This is an example of an informative example.</p> 5.1062 + </div> 5.1063 + 5.1064 + <p>Informative notes begin with the word “Note” and are set apart from the 5.1065 + normative text with <code>class="note"</code>, like this: 5.1066 + 5.1067 + <p class="note">Note, this is an informative note.</p> 5.1068 + 5.1069 +<h3 id="conformance-classes"> 5.1070 +Conformance Classes</h3> 5.1071 + 5.1072 + <p>Conformance to CSS Text Level 3 5.1073 + is defined for three conformance classes: 5.1074 + <dl> 5.1075 + <dt><dfn title="style sheet!!as conformance class">style sheet</dfn> 5.1076 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 5.1077 + style sheet</a>. 5.1078 + <dt><dfn>renderer</dfn></dt> 5.1079 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 5.1080 + that interprets the semantics of a style sheet and renders 5.1081 + documents that use them. 5.1082 + <dt><dfn id="authoring-tool">authoring tool</dfn></dt> 5.1083 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 5.1084 + that writes a style sheet. 5.1085 + </dl> 5.1086 + 5.1087 + <p>A style sheet is conformant to CSS Text Level 3 5.1088 + if all of its declarations that use properties defined in this module 5.1089 + have values that are valid according to the generic CSS grammar and the 5.1090 + individual grammars of each property as given in this module. 5.1091 + 5.1092 + <p>A renderer is conformant to CSS Text Level 3 5.1093 + if, in addition to interpreting the style sheet as defined by the 5.1094 + appropriate specifications, it supports all the features defined 5.1095 + by CSS Text Level 3 by parsing them correctly 5.1096 + and rendering the document accordingly. However, the inability of a 5.1097 + UA to correctly render a document due to limitations of the device 5.1098 + does not make the UA non-conformant. (For example, a UA is not 5.1099 + required to render color on a monochrome monitor.) 5.1100 + 5.1101 + <p>An authoring tool is conformant to CSS Text Level 3 5.1102 + if it writes style sheets that are syntactically correct according to the 5.1103 + generic CSS grammar and the individual grammars of each feature in 5.1104 + this module, and meet all other conformance requirements of style sheets 5.1105 + as described in this module. 5.1106 + 5.1107 +<h3 id="partial"> 5.1108 +Partial Implementations</h3> 5.1109 + 5.1110 + <p>So that authors can exploit the forward-compatible parsing rules to 5.1111 + assign fallback values, CSS renderers <strong>must</strong> 5.1112 + treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore 5.1113 + as appropriate</a>) any at-rules, properties, property values, keywords, 5.1114 + and other syntactic constructs for which they have no usable level of 5.1115 + support. In particular, user agents <strong>must not</strong> selectively 5.1116 + ignore unsupported component values and honor supported values in a single 5.1117 + multi-value property declaration: if any value is considered invalid 5.1118 + (as unsupported values must be), CSS requires that the entire declaration 5.1119 + be ignored.</p> 5.1120 + 5.1121 +<h3 id="experimental"> 5.1122 +Experimental Implementations</h3> 5.1123 + 5.1124 + <p>To avoid clashes with future CSS features, the CSS2.1 specification 5.1125 + reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 5.1126 + syntax</a> for proprietary and experimental extensions to CSS. 5.1127 + 5.1128 + <p>Prior to a specification reaching the Candidate Recommendation stage 5.1129 + in the W3C process, all implementations of a CSS feature are considered 5.1130 + experimental. The CSS Working Group recommends that implementations 5.1131 + use a vendor-prefixed syntax for such features, including those in 5.1132 + W3C Working Drafts. This avoids incompatibilities with future changes 5.1133 + in the draft. 5.1134 + </p> 5.1135 + 5.1136 +<h3 id="testing">Non-Experimental Implementations</h3> 5.1137 + 5.1138 + <p>Once a specification reaches the Candidate Recommendation stage, 5.1139 + non-experimental implementations are possible, and implementors should 5.1140 + release an unprefixed implementation of any CR-level feature they 5.1141 + can demonstrate to be correctly implemented according to spec. 5.1142 + 5.1143 + <p>To establish and maintain the interoperability of CSS across 5.1144 + implementations, the CSS Working Group requests that non-experimental 5.1145 + CSS renderers submit an implementation report (and, if necessary, the 5.1146 + testcases used for that implementation report) to the W3C before 5.1147 + releasing an unprefixed implementation of any CSS features. Testcases 5.1148 + submitted to W3C are subject to review and correction by the CSS 5.1149 + Working Group. 5.1150 + 5.1151 + <p>Further information on submitting testcases and implementation reports 5.1152 + can be found from on the CSS Working Group's website at 5.1153 + <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 5.1154 + Questions should be directed to the 5.1155 + <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> 5.1156 + mailing list. 5.1157 + 5.1158 +<h3 id="cr-exit-criteria"> 5.1159 +CR Exit Criteria</h3> 5.1160 + 5.1161 + <p> 5.1162 + For this specification to be advanced to Proposed Recommendation, 5.1163 + there must be at least two independent, interoperable implementations 5.1164 + of each feature. Each feature may be implemented by a different set of 5.1165 + products, there is no requirement that all features be implemented by 5.1166 + a single product. For the purposes of this criterion, we define the 5.1167 + following terms: 5.1168 + 5.1169 + <dl> 5.1170 + <dt>independent <dd>each implementation must be developed by a 5.1171 + different party and cannot share, reuse, or derive from code 5.1172 + used by another qualifying implementation. Sections of code that 5.1173 + have no bearing on the implementation of this specification are 5.1174 + exempt from this requirement. 5.1175 + 5.1176 + <dt>interoperable <dd>passing the respective test case(s) in the 5.1177 + official CSS test suite, or, if the implementation is not a Web 5.1178 + browser, an equivalent test. Every relevant test in the test 5.1179 + suite should have an equivalent test created if such a user 5.1180 + agent (UA) is to be used to claim interoperability. In addition 5.1181 + if such a UA is to be used to claim interoperability, then there 5.1182 + must one or more additional UAs which can also pass those 5.1183 + equivalent tests in the same way for the purpose of 5.1184 + interoperability. The equivalent tests must be made publicly 5.1185 + available for the purposes of peer review. 5.1186 + 5.1187 + <dt>implementation <dd>a user agent which: 5.1188 + 5.1189 + <ol class=inline> 5.1190 + <li>implements the specification. 5.1191 + 5.1192 + <li>is available to the general public. The implementation may 5.1193 + be a shipping product or other publicly available version 5.1194 + (i.e., beta version, preview release, or “nightly build”). 5.1195 + Non-shipping product releases must have implemented the 5.1196 + feature(s) for a period of at least one month in order to 5.1197 + demonstrate stability. 5.1198 + 5.1199 + <li>is not experimental (i.e., a version specifically designed 5.1200 + to pass the test suite and is not intended for normal usage 5.1201 + going forward). 5.1202 + </ol> 5.1203 + </dl> 5.1204 + 5.1205 + <p>The specification will remain Candidate Recommendation for at least 5.1206 + six months. 5.1207 + 5.1208 +<h2 class="no-num" id="acknowledgements"> 5.1209 + Appendix A: Acknowledgements</h2> 5.1210 + 5.1211 + <p>This specification would not have been possible without the help from: 5.1212 + Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett, 5.1213 + Martin Dürst, 5.1214 + Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye Gittelman, Ian 5.1215 + Hickson, Martin Heijdra, Richard Ishida, Masayasu Ishikawa, 5.1216 + Michael Jochimsen, Eric LeVine, Ambrose Li, Håkon Wium Lie, Chris Lilley, 5.1217 + Ken Lunde, Nat McCully, Shinyu Murakami, Paul Nelson, Chris Pratley, Marcin Sawicki, 5.1218 + Arnold Schrijver, Rahul Sonnad, Michel Suignard, Takao Suzuki, 5.1219 + Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi Yabe 5.1220 + and Steve Zilles.</p> 5.1221 + 5.1222 +<h2 class="no-num">Appendix B: References</h2> 5.1223 + 5.1224 +<h3 class="no-num" id="normative-ref">Normative references</h3> 5.1225 +<!--normative--> 5.1226 + 5.1227 +<h3 class="no-num" id="informative-ref">Informative references</h3> 5.1228 +<!--informative--> 5.1229 + 5.1230 +<h2 class="no-num" id="changes">Appendix C: 5.1231 +Changes</h2>
6.1 Binary file css3-text-decor/css-text-decor-3/text-emphasis-ja.gif has changed
7.1 Binary file css3-text-decor/css-text-decor-3/text-emphasis-ruby.png has changed
8.1 Binary file css3-text-decor/css-text-decor-3/text-emphasis-v.gif has changed
9.1 Binary file css3-text-decor/css-text-decor-3/text-emphasis-zh.gif has changed
10.1 Binary file css3-text-decor/css-text-decor-3/underline-averaging.gif has changed
11.1 Binary file css3-text-decor/css-text-decor-3/underline-example.png has changed
12.1 Binary file css3-text-decor/css-text-decor-3/underline-position-alphabetic.png has changed
13.1 Binary file css3-text-decor/css-text-decor-3/underline-position-below.png has changed
14.1 Binary file css3-text-decor/css-text-decor-3/underline-position-left.png has changed
15.1 Binary file css3-text-decor/css-text-decor-3/underline-position-right.png has changed
16.1 Binary file css3-text-decor/text-emphasis-ja.gif has changed
17.1 Binary file css3-text-decor/text-emphasis-ruby.png has changed
18.1 Binary file css3-text-decor/text-emphasis-v.gif has changed
19.1 Binary file css3-text-decor/text-emphasis-zh.gif has changed
20.1 Binary file css3-text-decor/underline-averaging.gif has changed
21.1 Binary file css3-text-decor/underline-example.png has changed
22.1 Binary file css3-text-decor/underline-position-alphabetic.png has changed
23.1 Binary file css3-text-decor/underline-position-below.png has changed
24.1 Binary file css3-text-decor/underline-position-left.png has changed
25.1 Binary file css3-text-decor/underline-position-right.png has changed