changeset
[css-text-decor] Fix bikeshed warnings and errors
Thu, 12 Mar 2015 13:53:22 +0100
- author
- Florian Rivoal <[email protected]>
- date
- Thu, 12 Mar 2015 13:53:22 +0100
- changeset 15294
- 28f78777a1ad
- parent 15293
- 0e204dd1baf1
- child 15295
- 0cab4b12909b
[css-text-decor] Fix bikeshed warnings and errors
| css-text-decor/Overview.bs | file | annotate | diff | comparison | revisions | |
| css-text-decor/Overview.html | file | annotate | diff | comparison | revisions |
1.1 --- a/css-text-decor/Overview.bs Wed Mar 11 21:44:42 2015 +0100 1.2 +++ b/css-text-decor/Overview.bs Thu Mar 12 13:53:22 2015 +0100 1.3 @@ -302,9 +302,9 @@ 1.4 <td><dfn>text-decoration</dfn> 1.5 <tr> 1.6 <th><a href="#values">Value</a>: 1.7 - <td><var><a href="#text-decoration-line"><text-decoration-line></a></var> || 1.8 - <var><a href="#text-decoration-style"><text-decoration-style></a></var> || 1.9 - <var><a href="#text-decoration-color"><text-decoration-color></a></var> 1.10 + <td><var><<'text-decoration-line'>></var> || 1.11 + <var><<'text-decoration-style'>></var> || 1.12 + <var><<'text-decoration-color'>></var> 1.13 1.14 <tr> 1.15 <th>Initial: 1.16 @@ -899,7 +899,7 @@ 1.17 <td><dfn>text-emphasis</dfn> 1.18 <tr> 1.19 <th><a href="#values">Value</a>: 1.20 - <td>'<<a href="#text-emphasis-style">text-emphasis-style</a>>' || '<<a href="#text-emphasis-color">text-emphasis-color</a>>' 1.21 + <td><<'text-emphasis-style'>> || <<'text-emphasis-color'>> 1.22 1.23 <tr> 1.24 <th>Initial: 1.25 @@ -1095,9 +1095,9 @@ 1.26 1.27 <p>This property accepts a comma-separated list of shadow effects to 1.28 be applied to the text of the element. Values are interpreted as for 1.29 - <a href="http://www.w3.org/TR/css3-background/#the-box-shadow">'box-shadow'</a> 1.30 + 'box-shadow' 1.31 [[!CSS3BG]]. 1.32 - (But note that spread values and the ''inset'' keyword are not allowed.) 1.33 + (But note that spread values and the ''box-shadow/inset'' keyword are not allowed.) 1.34 Each layer shadows the element's text and all its text decorations 1.35 (composited together). 1.36 If the color of the shadow is not specified, 1.37 @@ -1228,7 +1228,7 @@ 1.38 <p class="issue"> 1.39 If you find any issues, recommendations to add, or corrections, 1.40 please send the information to <a href="mailto:[email protected]">[email protected]</a> 1.41 - with <kbd>[[SHORTNAME]]</kbd> in the subject line. 1.42 + with <kbd>[SHORTNAME]</kbd> in the subject line. 1.43 1.44 <div class='example'> 1.45 <p>
2.1 --- a/css-text-decor/Overview.html Wed Mar 11 21:44:42 2015 +0100 2.2 +++ b/css-text-decor/Overview.html Thu Mar 12 13:53:22 2015 +0100 2.3 @@ -1,8 +1,19 @@ 2.4 -<!DOCTYPE html><html lang=en><head> 2.5 - <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 2.6 +<!doctype html> 2.7 +<html lang="en"> 2.8 + <head> 2.9 + 2.10 + <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 2.11 + 2.12 + 2.13 <title>CSS Text Decoration Module Level 3</title> 2.14 - <link href=../default.css rel=stylesheet type=text/css> 2.15 - <link href=../csslogo.ico rel="shortcut icon" type=image/x-icon> 2.16 + 2.17 + 2.18 + <link href="../default.css" rel="stylesheet" type="text/css"> 2.19 + 2.20 + 2.21 + <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon"> 2.22 + 2.23 + 2.24 <style> 2.25 body { 2.26 background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat white; 2.27 @@ -45,794 +56,1318 @@ 2.28 list-style: none; 2.29 } 2.30 </style> 2.31 + 2.32 2.33 - <script defer src=//test.csswg.org/harness/annotate.js#css-text-decor-3_dev type=text/javascript></script> 2.34 -</head> 2.35 -<body class=h-entry> 2.36 -<div class=head> 2.37 - <p data-fill-with=logo><a class=logo href=http://www.w3.org/> 2.38 - <img alt=W3C height=48 src=http://www.w3.org/Icons/w3c_home width=72> 2.39 + <meta content="Bikeshed 1.0.0" name="generator"> 2.40 + 2.41 + 2.42 + <script defer="" src="//test.csswg.org/harness/annotate.js#css-text-decor-3_dev/css-text-decor-3" type="text/javascript"></script> 2.43 + 2.44 + 2.45 + </head> 2.46 + 2.47 + 2.48 + <body class="h-entry"> 2.49 + 2.50 + <div class="head"> 2.51 + 2.52 + <p data-fill-with="logo"><a class="logo" href="http://www.w3.org/"> 2.53 + <img alt="W3C" height="48" src="https://www.w3.org/Icons/w3c_home" width="72"> 2.54 </a> 2.55 </p> 2.56 - <h1 class="p-name no-ref" id=title>CSS Text Decoration Module Level 3</h1> 2.57 - <h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft, 2.58 - <span class=dt-updated><span class=value-title title=20140320>20 March 2014</span></span></span></h2> 2.59 - <div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-text-decor-3/>http://dev.w3.org/csswg/css-text-decor-3/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css-text-decor-3/>http://www.w3.org/TR/css-text-decor-3/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-text-decor-3/>http://dev.w3.org/csswg/css-text-decor-3/</a><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2012/WD-css-text-decor-3-20121113/ rel=previous>http://www.w3.org/TR/2012/WD-css-text-decor-3-20121113/</a> 2.60 - <dt>Feedback:</dt> 2.61 - <dd><a href="mailto:[email protected]?subject=%5Bcss-text-decor%5D%20feedback">[email protected]</a> 2.62 - with subject line 2.63 - “<kbd>[css-text-decor] <var>… message topic …</var></kbd>â€(<a href=http://lists.w3.org/Archives/Public/www-style/ rel=discussion>archives</a>)<dt>Test Suite:<dd><a href=http://test.csswg.org/suites/css-text-decor-3/nightly-unstable/>http://test.csswg.org/suites/css-text-decor-3/nightly-unstable/</a><dt>Editors: 2.64 -<dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://fantasai.inkedblade.net/contact>fantasai</a> (<span class="p-org org">Invited Expert</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:[email protected]>Koji Ishii</a> (<span class="p-org org">Invited Expert</span>)<dt>Issue Tracking:<dd><a href=http://www.w3.org/Style/CSS/Tracker/products/10>http://www.w3.org/Style/CSS/Tracker/products/10</a></dl></div> 2.65 - <div data-fill-with=warning></div> 2.66 - <p class=copyright data-fill-with=copyright><a href=http://www.w3.org/Consortium/Legal/ipr-notice#Copyright>Copyright</a> © 2014 <a href=http://www.w3.org/><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href=http://www.csail.mit.edu/><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href=http://www.ercim.eu/><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href=http://www.keio.ac.jp/>Keio</a>, <a href=http://ev.buaa.edu.cn/>Beihang</a>), All Rights Reserved. W3C <a href=http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer>liability</a>, <a href=http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks>trademark</a> and <a href=http://www.w3.org/Consortium/Legal/copyright-documents>document use</a> rules apply. 2.67 + 2.68 + <h1 class="p-name no-ref" id="title">CSS Text Decoration Module Level 3</h1> 2.69 + 2.70 + <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, 2.71 + <time class="dt-updated" datetime="2014-03-20">20 March 2014</time></span></h2> 2.72 + 2.73 + <div data-fill-with="spec-metadata"> 2.74 + <dl> 2.75 + <dt>This version: 2.76 + <dd><a class="u-url" href="http://dev.w3.org/csswg/css-text-decor-3/">http://dev.w3.org/csswg/css-text-decor-3/</a> 2.77 + <dt>Latest version: 2.78 + <dd><a href="http://www.w3.org/TR/css-text-decor-3/">http://www.w3.org/TR/css-text-decor-3/</a> 2.79 + <dt>Previous Versions: 2.80 + <dd><a href="http://www.w3.org/TR/2012/WD-css-text-decor-3-20121113/" rel="previous">http://www.w3.org/TR/2012/WD-css-text-decor-3-20121113/</a> 2.81 + <dt>Feedback: 2.82 + <dd><span><a href="mailto:[email protected]?subject=%5Bcss-text-decor%5D%20feedback">[email protected]</a> with subject line “<kbd>[css-text-decor] <var>… message topic …</var></kbd>†(<a href="http://lists.w3.org/Archives/Public/www-style/" rel="discussion">archives</a>)</span> 2.83 + <dt>Test Suite: 2.84 + <dd><a href="http://test.csswg.org/suites/css-text-decor-3_dev/nightly-unstable/">http://test.csswg.org/suites/css-text-decor-3_dev/nightly-unstable/</a> 2.85 + <dt>Issue Tracking: 2.86 + <dd><a href="#issues-index">Inline In Spec</a> 2.87 + <dd><span><a href="http://www.w3.org/Style/CSS/Tracker/products/10">http://www.w3.org/Style/CSS/Tracker/products/10</a></span> 2.88 + <dt class="editor">Editors: 2.89 + <dd class="editor p-author h-card vcard"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">fantasai</a> (<span class="p-org org">Invited Expert</span>) 2.90 + <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:[email protected]">Koji Ishii</a> (<span class="p-org org">Invited Expert</span>) 2.91 + </dl> 2.92 + </div> 2.93 + 2.94 + <div data-fill-with="warning"></div> 2.95 + 2.96 + <p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2014 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply. 2.97 </p> 2.98 - <hr title="Separator for header"> 2.99 + 2.100 + <hr title="Separator for header"> 2.101 </div> 2.102 2.103 -<h2 class="no-num no-toc no-ref heading settled heading" id=abstract><span class=content>Abstract</span></h2> 2.104 -<p class=p-summary data-fill-with=abstract>This module contains the features of CSS relating to text decoration, such as underlines, text shadows, and emphasis marks. 2.105 -<a href=http://www.w3.org/TR/CSS/>CSS</a> is a language for describing the rendering of structured documents 2.106 + 2.107 + <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2> 2.108 + 2.109 + <div class="p-summary" data-fill-with="abstract"> 2.110 + <p>This module contains the features of CSS relating to text decoration, such as underlines, text shadows, and emphasis marks.</p> 2.111 + 2.112 +<a href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents 2.113 (such as HTML and XML) 2.114 -on screen, on paper, in speech, etc.</p> 2.115 +on screen, on paper, in speech, etc.</div> 2.116 2.117 -<h2 class="no-num no-toc no-ref heading settled heading" id=status><span class=content>Status of this document</span></h2> 2.118 -<div data-fill-with=status><p> 2.119 - This is a public copy of the editors’ draft. 2.120 - It is provided for discussion only and may change at any moment. 2.121 - Its publication here does not imply endorsement of its contents by W3C. 2.122 + 2.123 + <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2> 2.124 + 2.125 + <div data-fill-with="status"> 2.126 + <p> 2.127 + This is a public copy of the editors’ draft. 2.128 + It is provided for discussion only and may change at any moment. 2.129 + Its publication here does not imply endorsement of its contents by W3C. 2.130 Don’t cite this document other than as work in progress. 2.131 2.132 -<p> 2.133 - The (<a href=http://lists.w3.org/Archives/Public/www-style/>archived</a>) public mailing list 2.134 - <a href="mailto:[email protected]?Subject=%5Bcss-text-decor%5D%20PUT%20SUBJECT%20HERE">[email protected]</a> 2.135 - (see <a href=http://www.w3.org/Mail/Request>instructions</a>) 2.136 - is preferred for discussion of this specification. 2.137 - When sending e-mail, 2.138 - please put the text “css-text-decor†in the subject, 2.139 +</p> 2.140 + <p> 2.141 + The (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public mailing list 2.142 + <a href="mailto:[email protected]?Subject=%5Bcss-text-decor%5D%20PUT%20SUBJECT%20HERE">[email protected]</a> 2.143 + (see <a href="http://www.w3.org/Mail/Request">instructions</a>) 2.144 + is preferred for discussion of this specification. 2.145 + When sending e-mail, 2.146 + please put the text “css-text-decor†in the subject, 2.147 preferably like this: 2.148 “[css-text-decor] <em>…summary of comment…</em>†2.149 2.150 -<p> 2.151 - This document was produced by the <a href=http://www.w3.org/Style/CSS/members>CSS Working Group</a> 2.152 - (part of the <a href=http://www.w3.org/Style/>Style Activity</a>). 2.153 +</p> 2.154 + <p> 2.155 + This document was produced by the <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> 2.156 + (part of the <a href="http://www.w3.org/Style/">Style Activity</a>). 2.157 2.158 -<p> 2.159 - This document was produced by a group operating under 2.160 - the <a href=http://www.w3.org/Consortium/Patent-Policy-20040205/>5 February 2004 W3C Patent Policy</a>. 2.161 - W3C maintains a <a href=http://www.w3.org/2004/01/pp-impl/32061/status rel=disclosure>public list of any patent disclosures</a> 2.162 - made in connection with the deliverables of the group; 2.163 - that page also includes instructions for disclosing a patent. 2.164 - An individual who has actual knowledge of a patent which the individual believes contains <a href=http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential>Essential Claim(s)</a> 2.165 - must disclose the information in accordance with <a href=http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure>section 6 of the W3C Patent Policy</a>.</div> 2.166 -<div data-fill-with=at-risk><p>The following features are at-risk, and may be dropped during the CR period: 2.167 -<ul><li>The <a class=property data-link-type=propdesc href=#propdef-text-decoration-skip title=text-decoration-skip>text-decoration-skip</a> property.<li>The line positioning rules.<li>The ability to place both emphasis marks and ruby above the same base text.</ul></div> 2.168 +</p> 2.169 + <p> 2.170 + This document was produced by a group operating under 2.171 + the <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</a>. 2.172 + W3C maintains a <a href="http://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> 2.173 + made in connection with the deliverables of the group; 2.174 + that page also includes instructions for disclosing a patent. 2.175 + An individual who has actual knowledge of a patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a> 2.176 + must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. 2.177 2.178 -<h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class=content>Table of Contents</span></h2> 2.179 -<div data-fill-with=table-of-contents><ul class=toc> 2.180 - <li><a href=#intro><span class=secno>1</span> Introduction</a> 2.181 - <ul class=toc> 2.182 - <li><a href=#placement><span class=secno>1.1</span> Module Interactions</a> 2.183 - <li><a href=#values><span class=secno>1.2</span> Values</a> 2.184 - <li><a href=#terms><span class=secno>1.3</span>Terminology</a></ul> 2.185 - <li><a href=#line-decoration><span class=secno>2</span> Line Decoration: Underline, Overline, and Strike-Through</a> 2.186 - <ul class=toc> 2.187 - <li><a href=#text-decoration-line-property><span class=secno>2.1</span> Text Decoration Lines: the <span class=property data-link-type=propdesc title=text-decoration-line>text-decoration-line</span> property</a> 2.188 - <li><a href=#text-decoration-color-property><span class=secno>2.2</span> Text Decoration Color: the <span class=property data-link-type=propdesc title=text-decoration-color>text-decoration-color</span> property</a> 2.189 - <li><a href=#text-decoration-style-property><span class=secno>2.3</span> Text Decoration Style: the <span class=property data-link-type=propdesc title=text-decoration-style>text-decoration-style</span> property</a> 2.190 - <li><a href=#text-decoration-property><span class=secno>2.4</span> Text Decoration Shorthand: the <span class=property data-link-type=propdesc title=text-decoration>text-decoration</span> property</a> 2.191 - <li><a href=#text-decoration-skip-property><span class=secno>2.5</span> Text Decoration Line Continuity: the <span class=property data-link-type=propdesc title=text-decoration-skip>text-decoration-skip</span> property</a> 2.192 - <li><a href=#text-underline-position-property><span class=secno>2.6</span> Text Underline Position: the <span class=property data-link-type=propdesc title=text-underline-position>text-underline-position</span> property</a></ul> 2.193 - <li><a href=#emphasis-marks><span class=secno>3</span> Emphasis Marks</a> 2.194 - <ul class=toc> 2.195 - <li><a href=#text-emphasis-style-property><span class=secno>3.1</span> Emphasis Mark Style: the <span class=property data-link-type=propdesc title=text-emphasis-style>text-emphasis-style</span> property</a> 2.196 - <li><a href=#text-emphasis-color-property><span class=secno>3.2</span> Emphasis Mark Color: the <span class=property data-link-type=propdesc title=text-emphasis-color>text-emphasis-color</span> property</a> 2.197 - <li><a href=#text-emphasis-property><span class=secno>3.3</span> Emphasis Mark Shorthand: the <span class=property data-link-type=propdesc title=text-emphasis>text-emphasis</span> property</a> 2.198 - <li><a href=#text-emphasis-position-property><span class=secno>3.4</span> Emphasis Mark Position: the <span class=property data-link-type=propdesc title=text-emphasis-position>text-emphasis-position</span> property</a></ul> 2.199 - <li><a href=#text-shadow-property><span class=secno>4</span> Text Shadows: the <span class=property data-link-type=propdesc title=text-shadow>text-shadow</span> property</a> 2.200 - <li><a href=#painting-order><span class=secno>5</span> Painting Order of Text Decorations</a> 2.201 - <li><a href=#conformance0><span class=secno>6</span> Conformance</a> 2.202 - <ul class=toc> 2.203 - <li><a href=#conventions0><span class=secno>6.1</span> Document Conventions</a> 2.204 - <li><a href=#conformance-classes0><span class=secno>6.2</span> Conformance Classes</a> 2.205 - <li><a href=#partial0><span class=secno>6.3</span> Partial Implementations</a> 2.206 - <li><a href=#experimental0><span class=secno>6.4</span> Experimental Implementations</a> 2.207 - <li><a href=#testing0><span class=secno>6.5</span>Non-Experimental Implementations</a> 2.208 - <li><a href=#cr-exit-criteria><span class=secno>6.6</span> CR Exit Criteria</a></ul> 2.209 - <li><a href=#acknowledgements><span class=secno></span> Appendix A: Acknowledgements</a> 2.210 - <li><a href=#changes><span class=secno></span>Appendix B: Changes</a> 2.211 - <ul class=toc> 2.212 - <li><a href=#recent-changes><span class=secno></span> Changes since the <span>January 2013 Last Call Working Draft</span></a></ul> 2.213 - <li><a href=#default-stylesheet><span class=secno></span> Appendix C: Default UA Stylesheet</a> 2.214 - <li><a href=#conformance><span class=secno></span> Conformance</a> 2.215 - <ul class=toc> 2.216 - <li><a href=#conventions><span class=secno></span> Document conventions</a> 2.217 - <li><a href=#conformance-classes><span class=secno></span> Conformance classes</a> 2.218 - <li><a href=#partial><span class=secno></span> Partial implementations</a> 2.219 - <li><a href=#experimental><span class=secno></span> Experimental implementations</a> 2.220 - <li><a href=#testing><span class=secno></span> Non-experimental implementations</a></ul> 2.221 - <li><a href=#references><span class=secno></span> References</a> 2.222 - <ul class=toc> 2.223 - <li><a href=#normative><span class=secno></span> Normative References</a> 2.224 - <li><a href=#informative><span class=secno></span> Informative References</a></ul> 2.225 - <li><a href=#index><span class=secno></span> Index</a> 2.226 - <li><a href=#property-index><span class=secno></span> Property index</a> 2.227 - <li><a href=#issues-index><span class=secno></span>Issues Index</a></ul></div> 2.228 +</p> 2.229 + <p> 2.230 + This document is governed by the <a href="http://www.w3.org/2014/Process-20140801/" id="w3c_process_revision">1 August 2014 W3C Process Document</a>. 2.231 2.232 +</p> 2.233 + <p> 2.234 + 2.235 +</p></div> 2.236 2.237 + <div data-fill-with="at-risk"> 2.238 + <p>The following features are at-risk, and may be dropped during the CR period: 2.239 +</p> 2.240 + <ul> 2.241 + <li>The <a class="property" data-link-type="propdesc" href="#propdef-text-decoration-skip">text-decoration-skip</a> property. 2.242 + <li>The line positioning rules. 2.243 + <li>The ability to place both emphasis marks and ruby above the same base text. 2.244 + </ul></div> 2.245 2.246 2.247 + <h2 class="no-num no-toc no-ref heading settled" id="contents"><span class="content">Table of Contents</span></h2> 2.248 2.249 -<h2 class="heading settled heading" data-level=1 id=intro><span class=secno>1 </span><span class=content> 2.250 -Introduction</span><a class=self-link href=#intro></a></h2> 2.251 + <div data-fill-with="table-of-contents" role="navigation"> 2.252 + <ul class="toc" role="directory"> 2.253 + <li><a href="#intro"><span class="secno">1</span> <span class="content"> 2.254 +Introduction</span></a> 2.255 + <ul class="toc"> 2.256 + <li><a href="#placement"><span class="secno">1.1</span> <span class="content"> 2.257 +Module Interactions</span></a> 2.258 + <li><a href="#values"><span class="secno">1.2</span> <span class="content"> 2.259 +Values</span></a> 2.260 + <li><a href="#terms"><span class="secno">1.3</span> <span class="content">Terminology</span></a> 2.261 + </ul> 2.262 + <li><a href="#line-decoration"><span class="secno">2</span> <span class="content"> 2.263 +Line Decoration: Underline, Overline, and Strike-Through</span></a> 2.264 + <ul class="toc"> 2.265 + <li><a href="#text-decoration-line-property"><span class="secno">2.1</span> <span class="content"> 2.266 +Text Decoration Lines: the <span class="property">text-decoration-line</span> property</span></a> 2.267 + <li><a href="#text-decoration-color-property"><span class="secno">2.2</span> <span class="content"> 2.268 +Text Decoration Color: the <span class="property">text-decoration-color</span> property</span></a> 2.269 + <li><a href="#text-decoration-style-property"><span class="secno">2.3</span> <span class="content"> 2.270 +Text Decoration Style: the <span class="property">text-decoration-style</span> property</span></a> 2.271 + <li><a href="#text-decoration-property"><span class="secno">2.4</span> <span class="content"> 2.272 +Text Decoration Shorthand: the <span class="property">text-decoration</span> property</span></a> 2.273 + <li><a href="#text-decoration-skip-property"><span class="secno">2.5</span> <span class="content"> 2.274 +Text Decoration Line Continuity: the <span class="property">text-decoration-skip</span> property</span></a> 2.275 + <li><a href="#text-underline-position-property"><span class="secno">2.6</span> <span class="content"> 2.276 +Text Underline Position: the <span class="property">text-underline-position</span> property</span></a> 2.277 + </ul> 2.278 + <li><a href="#emphasis-marks"><span class="secno">3</span> <span class="content"> 2.279 +Emphasis Marks</span></a> 2.280 + <ul class="toc"> 2.281 + <li><a href="#text-emphasis-style-property"><span class="secno">3.1</span> <span class="content"> 2.282 +Emphasis Mark Style: the <span class="property">text-emphasis-style</span> property</span></a> 2.283 + <li><a href="#text-emphasis-color-property"><span class="secno">3.2</span> <span class="content"> 2.284 +Emphasis Mark Color: the <span class="property">text-emphasis-color</span> property</span></a> 2.285 + <li><a href="#text-emphasis-property"><span class="secno">3.3</span> <span class="content"> 2.286 +Emphasis Mark Shorthand: the <span class="property">text-emphasis</span> property</span></a> 2.287 + <li><a href="#text-emphasis-position-property"><span class="secno">3.4</span> <span class="content"> 2.288 +Emphasis Mark Position: the <span class="property">text-emphasis-position</span> property</span></a> 2.289 + </ul> 2.290 + <li><a href="#text-shadow-property"><span class="secno">4</span> <span class="content"> 2.291 +Text Shadows: the <span class="property">text-shadow</span> property</span></a> 2.292 + <li><a href="#painting-order"><span class="secno">5</span> <span class="content"> 2.293 +Painting Order of Text Decorations</span></a> 2.294 + <li><a href="#acknowledgements"><span class="secno"></span> <span class="content"> 2.295 + Appendix A: Acknowledgements</span></a> 2.296 + <li><a href="#changes"><span class="secno"></span> <span class="content">Appendix B: 2.297 +Changes</span></a> 2.298 + <ul class="toc"> 2.299 + <li><a href="#recent-changes"><span class="secno"></span> <span class="content"> 2.300 + Changes since the <span>January 2013 Last Call Working Draft</span></span></a> 2.301 + </ul> 2.302 + <li><a href="#default-stylesheet"><span class="secno"></span> <span class="content"> 2.303 +Appendix C: Default UA Stylesheet</span></a> 2.304 + <li><a href="#conformance"><span class="secno"></span> <span class="content"> 2.305 +Conformance</span></a> 2.306 + <ul class="toc"> 2.307 + <li><a href="#conventions"><span class="secno"></span> <span class="content"> 2.308 +Document conventions</span></a> 2.309 + <li><a href="#conformance-classes"><span class="secno"></span> <span class="content"> 2.310 +Conformance classes</span></a> 2.311 + <li><a href="#partial"><span class="secno"></span> <span class="content"> 2.312 +Partial implementations</span></a> 2.313 + <li><a href="#experimental"><span class="secno"></span> <span class="content"> 2.314 +Experimental implementations</span></a> 2.315 + <li><a href="#testing"><span class="secno"></span> <span class="content"> 2.316 +Non-experimental implementations</span></a> 2.317 + </ul> 2.318 + <li><a href="#index"><span class="secno"></span> <span class="content">Index</span></a> 2.319 + <ul class="toc"> 2.320 + <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a> 2.321 + <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a> 2.322 + </ul> 2.323 + <li><a href="#references"><span class="secno"></span> <span class="content">References</span></a> 2.324 + <ul class="toc"> 2.325 + <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a> 2.326 + <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a> 2.327 + </ul> 2.328 + <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a> 2.329 + <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a> 2.330 + </ul></div> 2.331 2.332 - <p><em>This subsection is non-normative.</em> 2.333 + <main> 2.334 2.335 - <p>This module covers text decoration, i.e. decorating the glyphs 2.336 + 2.337 + 2.338 + 2.339 + 2.340 + 2.341 + <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content"> 2.342 +Introduction</span><a class="self-link" href="#intro"></a></h2> 2.343 + 2.344 + 2.345 + <p><em>This subsection is non-normative.</em> 2.346 + 2.347 + </p> 2.348 + <p>This module covers text decoration, i.e. decorating the glyphs 2.349 of the text once typeset according to font and typographic rules. 2.350 - (See <a data-biblio-type=informative data-link-type=biblio href=#css3text title=css3text>[CSS3TEXT]</a> and <a data-biblio-type=informative data-link-type=biblio href=#css3-fonts title=css3-fonts>[CSS3-FONTS]</a>.) 2.351 + (See <a data-link-type="biblio" href="#biblio-css3text">[CSS3TEXT]</a> and <a data-link-type="biblio" href="#biblio-css3-fonts">[CSS3-FONTS]</a>.) 2.352 Such features are traditionally used not only for purely decorative purposes, 2.353 but also in some cases to show emphasis, for honorifics, 2.354 and to indicate editorial changes such as insertions, deletions, and misspellings. 2.355 2.356 - <p>CSS Levels 1 and 2 only defined very basic <a href=#line-decoration>line decorations</a> 2.357 + </p> 2.358 + <p>CSS Levels 1 and 2 only defined very basic <a href="#line-decoration">line decorations</a> 2.359 (underlines, overlines, and strike-throughs) 2.360 appropriate to Western typographical traditions. 2.361 Level 3 of this module adds the ability to change 2.362 the color, style, position, and continuity of these decorations, 2.363 - and also introduces 2.364 - <a href=#emphasis-marks>emphasis marks</a> (traditionally used in East Asian typography), 2.365 - and <a href=#text-shadow-property>shadows</a> (which were proposed then deferred from Level 2). 2.366 + and also introduces 2.367 + <a href="#emphasis-marks">emphasis marks</a> (traditionally used in East Asian typography), 2.368 + and <a href="#text-shadow-property">shadows</a> (which were proposed then deferred from Level 2). 2.369 2.370 -<h3 class="heading settled heading" data-level=1.1 id=placement><span class=secno>1.1 </span><span class=content> 2.371 -Module Interactions</span><a class=self-link href=#placement></a></h3> 2.372 +</p> 2.373 + <h3 class="heading settled" data-level="1.1" id="placement"><span class="secno">1.1. </span><span class="content"> 2.374 +Module Interactions</span><a class="self-link" href="#placement"></a></h3> 2.375 2.376 - <p>This module replaces and extends the text-decorating 2.377 - features defined in <a data-biblio-type=normative data-link-type=biblio href=#css21 title=css21>[CSS21]</a> chapter 16. 2.378 + 2.379 + <p>This module replaces and extends the text-decorating 2.380 + features defined in <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> chapter 16. 2.381 2.382 -<h3 class="heading settled heading" data-level=1.2 id=values><span class=secno>1.2 </span><span class=content> 2.383 -Values</span><a class=self-link href=#values></a></h3> 2.384 +</p> 2.385 + <h3 class="heading settled" data-level="1.2" id="values"><span class="secno">1.2. </span><span class="content"> 2.386 +Values</span><a class="self-link" href="#values"></a></h3> 2.387 2.388 - <p>This specification follows the 2.389 - <a href=http://www.w3.org/TR/CSS21/about.html#property-defs>CSS property 2.390 - definition conventions</a> from <a data-biblio-type=normative data-link-type=biblio href=#css21 title=css21>[CSS21]</a>. Value types not defined in 2.391 - this specification are defined in CSS Level 2 Revision 1 <a data-biblio-type=normative data-link-type=biblio href=#css21 title=css21>[CSS21]</a>. 2.392 + 2.393 + <p>This specification follows the 2.394 + <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property 2.395 + definition conventions</a> from <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>. Value types not defined in 2.396 + this specification are defined in CSS Level 2 Revision 1 <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>. 2.397 Other CSS modules may expand the definitions of these value types: for 2.398 - example <a data-biblio-type=informative data-link-type=biblio href=#css3color title=css3color>[CSS3COLOR]</a>, when combined with this module, expands the 2.399 - definition of the <color> value type as used in this specification.</p> 2.400 + example <a data-link-type="biblio" href="#biblio-css3color">[CSS3COLOR]</a>, when combined with this module, expands the 2.401 + definition of the <color> value type as used in this specification.</p> 2.402 2.403 - <p>In addition to the property-specific values listed in their definitions, 2.404 + 2.405 + <p>In addition to the property-specific values listed in their definitions, 2.406 all properties defined in this specification also accept the 2.407 - <a href=http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit>inherit</a> 2.408 + <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> 2.409 keyword as their property value. For readability it has not been repeated 2.410 explicitly. 2.411 2.412 -<h3 class="heading settled heading" data-level=1.3 id=terms><span class=secno>1.3 </span><span class=content>Terminology</span><a class=self-link href=#terms></a></h3> 2.413 +</p> 2.414 + <h3 class="heading settled" data-level="1.3" id="terms"><span class="secno">1.3. </span><span class="content">Terminology</span><a class="self-link" href="#terms"></a></h3> 2.415 2.416 - <p>The terms <dfn data-dfn-type=dfn data-noexport="" id=character><a href=http://www.w3.org/TR/css3-text/#grapheme-cluster>character</a><a class=self-link href=#character></a></dfn>, 2.417 - <dfn data-dfn-type=dfn data-noexport="" id=letter><a href=http://www.w3.org/TR/css3-text/#letter>letter</a><a class=self-link href=#letter></a></dfn>, and 2.418 - <dfn data-dfn-type=dfn data-noexport="" id=content-language><a href=http://www.w3.org/TR/css3-text/#content-language>content language</a><a class=self-link href=#content-language></a></dfn> 2.419 - as used in this specification are defined in <a data-biblio-type=normative data-link-type=biblio href=#css3text title=css3text>[CSS3TEXT]</a>. 2.420 + 2.421 + <p>The terms <dfn data-dfn-type="dfn" data-noexport="" id="character"><a href="http://www.w3.org/TR/css3-text/#grapheme-cluster">character</a><a class="self-link" href="#character"></a></dfn>, 2.422 + <dfn data-dfn-type="dfn" data-noexport="" id="letter"><a href="http://www.w3.org/TR/css3-text/#letter">letter</a><a class="self-link" href="#letter"></a></dfn>, and 2.423 + <dfn data-dfn-type="dfn" data-noexport="" id="content-language"><a href="http://www.w3.org/TR/css3-text/#content-language">content language</a><a class="self-link" href="#content-language"></a></dfn> 2.424 + as used in this specification are defined in <a data-link-type="biblio" href="#biblio-css3text">[CSS3TEXT]</a>. 2.425 Other terminology and concepts used in this specification are defined 2.426 - in <a data-biblio-type=normative data-link-type=biblio href=#css21 title=css21>[CSS21]</a> and <a data-biblio-type=normative data-link-type=biblio href=#css3-writing-modes title=css3-writing-modes>[CSS3-WRITING-MODES]</a>. 2.427 + in <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> and <a data-link-type="biblio" href="#biblio-css3-writing-modes">[CSS3-WRITING-MODES]</a>. 2.428 2.429 -<h2 class="heading settled heading" data-level=2 id=line-decoration><span class=secno>2 </span><span class=content> 2.430 -Line Decoration: Underline, Overline, and Strike-Through</span><a class=self-link href=#line-decoration></a></h2> 2.431 +</p> 2.432 + <h2 class="heading settled" data-level="2" id="line-decoration"><span class="secno">2. </span><span class="content"> 2.433 +Line Decoration: Underline, Overline, and Strike-Through</span><a class="self-link" href="#line-decoration"></a></h2> 2.434 2.435 - <p> 2.436 - The following properties describe line decorations that are added to the content of an element. 2.437 - When specified on or propagated to an inline box, 2.438 - that box becomes a <dfn data-dfn-type=dfn data-noexport="" id=decorating-box>decorating box<a class=self-link href=#decorating-box></a></dfn> for that decoration, 2.439 + 2.440 + <p> 2.441 + The following properties describe line decorations that are added to the content of an element. 2.442 + When specified on or propagated to an inline box, 2.443 + that box becomes a <dfn data-dfn-type="dfn" data-noexport="" id="decorating-box">decorating box<a class="self-link" href="#decorating-box"></a></dfn> for that decoration, 2.444 applying the decoration to all its fragments. 2.445 The decoration is then further propagated to any in-flow block-level boxes that split the inline 2.446 - (see <a href=http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level>CSS2.1 section 9.2.1.1</a>). 2.447 - When specified on or propagated to a block container that establishes an inline formatting context, 2.448 - the decorations are propagated to an anonymous inline box that wraps all the in-flow inline-level children of the block container. 2.449 - When specified on or propagated to a ruby box, 2.450 + (see <a href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">CSS2.1 section 9.2.1.1</a>). 2.451 + When specified on or propagated to a block container that establishes an inline formatting context, 2.452 + the decorations are propagated to an anonymous inline box that wraps all the in-flow inline-level children of the block container. 2.453 + When specified on or propagated to a ruby box, 2.454 the decorations are propagated only to the ruby base. 2.455 - For all other box types, 2.456 + For all other box types, 2.457 the decorations are propagated to all in-flow children. 2.458 2.459 - <p class=note> 2.460 - Note that text decorations are not propagated to any out-of-flow descendants, 2.461 + </p> 2.462 + <p class="note" role="note"> 2.463 + Note that text decorations are not propagated to any out-of-flow descendants, 2.464 nor to the contents of atomic inline-level descendants such as inline blocks and inline tables. 2.465 They are also not propagated to inline children of inline boxes, 2.466 although the decoration is <em>applied</em> to such boxes. 2.467 2.468 - <p> 2.469 + </p> 2.470 + <p> 2.471 By default underlines, overlines, and line-throughs are applied only to non-replaced inline boxes, 2.472 and are drawn across all text (including white space, letter spacing, and word spacing). 2.473 Atomic inlines, such as images, are not decorated. 2.474 - The <a class=property data-link-type=propdesc href=#propdef-text-decoration-skip title=text-decoration-skip>text-decoration-skip</a> property can be used to modify this behavior, 2.475 - for example allowing atomic inlines to be underlined 2.476 + The <a class="property" data-link-type="propdesc" href="#propdef-text-decoration-skip">text-decoration-skip</a> property can be used to modify this behavior, 2.477 + for example allowing atomic inlines to be underlined 2.478 or requiring that white space be skipped. 2.479 - Margins, borders, and padding of the <a data-link-type=dfn href=#decorating-box title="decorating box">decorating box</a> are always skipped. 2.480 + Margins, borders, and padding of the <i>decorating box</i> are always skipped. 2.481 2.482 - <p>Relatively positioning a descendant moves all text decorations 2.483 + </p> 2.484 + <p>Relatively positioning a descendant moves all text decorations 2.485 applied to it along with the descendant’s text; it does not affect 2.486 calculation of the decoration’s initial position on that line. 2.487 - The <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility title=visibility>visibility</a> property, <a class=property data-link-type=propdesc href=#propdef-text-shadow title=text-shadow>text-shadow</a>, filters, and other graphical transformations 2.488 + The <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visufx.html#propdef-visibility">visibility</a> property, <a class="property" data-link-type="propdesc" href="#propdef-text-shadow">text-shadow</a>, filters, and other graphical transformations 2.489 likewise affect text decorations as part of the text they’re drawn on, 2.490 even if the decorations were specified on an ancestor box, 2.491 and do not affect the calculation of their initial positions or thicknesses. 2.492 (In the case of line decorations drawn over an atomic inline 2.493 or across the margins/borders/padding of a non-replaced inline box, 2.494 they are analogously associated with the affected atomic inline / non-replaced inline box 2.495 - rather than with the <a data-link-type=dfn href=#decorating-box title="decorating box">decorating box</a>.) 2.496 + rather than with the <i>decorating box</i>.) 2.497 2.498 - <div class=example> 2.499 + </p> 2.500 + <div class="example"> 2.501 + 2.502 <p>In the following style sheet and document fragment:</p> 2.503 + 2.504 + 2.505 <pre> blockquote { text-decoration: underline; color: blue; } 2.506 em { display: block; } 2.507 - cite { color: fuchsia; }</pre> <pre> <blockquote> 2.508 - <p> 2.509 - <span> 2.510 + cite { color: fuchsia; }</pre> 2.511 + 2.512 + 2.513 + <pre> <blockquote> 2.514 + <p> 2.515 + <span> 2.516 Help, help! 2.517 - <em> I am under a hat! </em> 2.518 + <em> I am under a hat! </em> 2.519 2.520 - <cite> —GwieF </cite> 2.521 - </span> 2.522 - </p> 2.523 - </blockquote></pre> <p>...the underlining for the blockquote element is propagated to an 2.524 + <cite> —GwieF </cite> 2.525 + </span> 2.526 + </p> 2.527 + </blockquote></pre> 2.528 + 2.529 + 2.530 + <p>...the underlining for the blockquote element is propagated to an 2.531 anonymous inline box that surrounds the span element, causing 2.532 the text "Help, help!" to be blue, with the blue underlining from 2.533 the anonymous inline underneath it, the color being taken from the 2.534 - blockquote element. The <code><em>text</em></code> 2.535 + blockquote element. The <code><em>text</em></code> 2.536 in the em block is also underlined, as it is in an in-flow block to 2.537 which the underline is propagated. The final line of text is fuchsia, 2.538 but the underline underneath it is still the blue underline from the 2.539 anonymous inline element.</p> 2.540 - <p><img alt="Sample rendering of the above underline example" src=underline-example.png></p> 2.541 + 2.542 + 2.543 + <p><img alt="Sample rendering of the above underline example" src="underline-example.png"></p> 2.544 + 2.545 + 2.546 <p>This diagram shows the boxes involved in the example above. The 2.547 rounded aqua line represents the anonymous inline element wrapping 2.548 the inline contents of the paragraph element, the rounded blue line 2.549 represents the span element, and the orange lines represent the 2.550 blocks.</p> 2.551 - </div> 2.552 + 2.553 + 2.554 + </div> 2.555 2.556 -<h3 class="heading settled heading" data-level=2.1 id=text-decoration-line-property><span class=secno>2.1 </span><span class=content> 2.557 -Text Decoration Lines: the <a class=property data-link-type=propdesc href=#propdef-text-decoration-line title=text-decoration-line>text-decoration-line</a> property</span><a class=self-link href=#text-decoration-line-property></a></h3> 2.558 2.559 - <table class=propdef> 2.560 - <tr> 2.561 + <h3 class="heading settled" data-level="2.1" id="text-decoration-line-property"><span class="secno">2.1. </span><span class="content"> 2.562 +Text Decoration Lines: the <a class="property" data-link-type="propdesc" href="#propdef-text-decoration-line">text-decoration-line</a> property</span><a class="self-link" href="#text-decoration-line-property"></a></h3> 2.563 + 2.564 + 2.565 + <table class="propdef"> 2.566 + 2.567 + <tbody> 2.568 + <tr> 2.569 + 2.570 <th>Name: 2.571 - <td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-text-decoration-line>text-decoration-line<a class=self-link href=#propdef-text-decoration-line></a></dfn><tr> 2.572 - <th><a href=#values>Value</a>: 2.573 + 2.574 + <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-text-decoration-line">text-decoration-line<a class="self-link" href="#propdef-text-decoration-line"></a></dfn> 2.575 + <tr> 2.576 + 2.577 + <th><a href="#values">Value</a>: 2.578 + 2.579 <td>none | [ underline || overline || line-through || blink ] 2.580 2.581 - <tr> 2.582 + 2.583 + <tr> 2.584 + 2.585 <th>Initial: 2.586 + 2.587 <td>none 2.588 - <tr> 2.589 + 2.590 + <tr> 2.591 + 2.592 <th>Applies to: 2.593 + 2.594 <td>all elements 2.595 - <tr> 2.596 + 2.597 + <tr> 2.598 + 2.599 <th>Inherited: 2.600 + 2.601 <td>no (but see prose) 2.602 - <tr> 2.603 + 2.604 + <tr> 2.605 + 2.606 <th>Percentages: 2.607 + 2.608 <td>N/A 2.609 - <tr> 2.610 + 2.611 + <tr> 2.612 + 2.613 <th>Media: 2.614 + 2.615 <td>visual 2.616 - <tr> 2.617 + 2.618 + <tr> 2.619 + 2.620 <th>Computed value: 2.621 + 2.622 <td>as specified 2.623 - <tr> 2.624 + 2.625 + <tr> 2.626 + 2.627 <th>Animatable: 2.628 + 2.629 <td>no 2.630 - </table> 2.631 + 2.632 + </table> 2.633 2.634 - <p>Specifies what line decorations, if any, are added to the element. 2.635 + 2.636 + <p>Specifies what line decorations, if any, are added to the element. 2.637 Values have the following meanings:</p> 2.638 2.639 - <dl> 2.640 - <dt><dfn class=css-code data-dfn-for=text-decoration-line data-dfn-type=value data-export="" id=valuedef-none0>none<a class=self-link href=#valuedef-none0></a></dfn> 2.641 - <dd>Neither produces nor inhibits text decoration. 2.642 - <dt><dfn class=css-code data-dfn-for=text-decoration-line data-dfn-type=value data-export="" id=valuedef-underline>underline<a class=self-link href=#valuedef-underline></a></dfn> 2.643 - <dd>Each line of text is underlined. 2.644 - <dt><dfn class=css-code data-dfn-for=text-decoration-line data-dfn-type=value data-export="" id=valuedef-overline>overline<a class=self-link href=#valuedef-overline></a></dfn> 2.645 - <dd>Each line of text has a line over it (i.e. on the opposite 2.646 + 2.647 + <dl> 2.648 + 2.649 + <dt><dfn class="css" data-dfn-for="text-decoration-line" data-dfn-type="value" data-export="" id="valdef-text-decoration-line-none">none<a class="self-link" href="#valdef-text-decoration-line-none"></a></dfn> 2.650 + 2.651 + <dd>Neither produces nor inhibits text decoration. 2.652 + 2.653 + <dt><dfn class="css" data-dfn-for="text-decoration-line" data-dfn-type="value" data-export="" id="valdef-text-decoration-line-underline">underline<a class="self-link" href="#valdef-text-decoration-line-underline"></a></dfn> 2.654 + 2.655 + <dd>Each line of text is underlined. 2.656 + 2.657 + <dt><dfn class="css" data-dfn-for="text-decoration-line" data-dfn-type="value" data-export="" id="valdef-text-decoration-line-overline">overline<a class="self-link" href="#valdef-text-decoration-line-overline"></a></dfn> 2.658 + 2.659 + <dd>Each line of text has a line over it (i.e. on the opposite 2.660 side from an underline). 2.661 - <dt><dfn class=css-code data-dfn-for=text-decoration-line data-dfn-type=value data-export="" id=valuedef-line-through>line-through<a class=self-link href=#valuedef-line-through></a></dfn> 2.662 - <dd>Each line of text has a line through the middle. 2.663 - <dt><dfn class=css-code data-dfn-for=text-decoration-line data-dfn-type=value data-export="" id=valuedef-blink>blink<a class=self-link href=#valuedef-blink></a></dfn> 2.664 - <dd> 2.665 + 2.666 + <dt><dfn class="css" data-dfn-for="text-decoration-line" data-dfn-type="value" data-export="" id="valdef-text-decoration-line-line-through">line-through<a class="self-link" href="#valdef-text-decoration-line-line-through"></a></dfn> 2.667 + 2.668 + <dd>Each line of text has a line through the middle. 2.669 + 2.670 + <dt><dfn class="css" data-dfn-for="text-decoration-line" data-dfn-type="value" data-export="" id="valdef-text-decoration-line-blink">blink<a class="self-link" href="#valdef-text-decoration-line-blink"></a></dfn> 2.671 + 2.672 + <dd> 2.673 The text blinks (alternates between visible and invisible). 2.674 - Conforming user agents may simply not blink the text. 2.675 - Note that not blinking the text is one technique to satisfy <a href=http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text>checkpoint 3.3 of WAI-UAAG</a>. 2.676 - This value is <strong>deprecated</strong> in favor of Animations <a data-biblio-type=informative data-link-type=biblio href=#css3-animations title=css3-animations>[CSS3-ANIMATIONS]</a>. 2.677 - </dl> 2.678 + Conforming user agents may simply not blink the text. 2.679 + Note that not blinking the text is one technique to satisfy <a href="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">checkpoint 3.3 of WAI-UAAG</a>. 2.680 + This value is <strong>deprecated</strong> in favor of Animations <a data-link-type="biblio" href="#biblio-css3-animations">[CSS3-ANIMATIONS]</a>. 2.681 + 2.682 + </dl> 2.683 2.684 -<h3 class="heading settled heading" data-level=2.2 id=text-decoration-color-property><span class=secno>2.2 </span><span class=content> 2.685 -Text Decoration Color: the <a class=property data-link-type=propdesc href=#propdef-text-decoration-color title=text-decoration-color>text-decoration-color</a> property</span><a class=self-link href=#text-decoration-color-property></a></h3> 2.686 2.687 - <table class=propdef> 2.688 - <tr> 2.689 + <h3 class="heading settled" data-level="2.2" id="text-decoration-color-property"><span class="secno">2.2. </span><span class="content"> 2.690 +Text Decoration Color: the <a class="property" data-link-type="propdesc" href="#propdef-text-decoration-color">text-decoration-color</a> property</span><a class="self-link" href="#text-decoration-color-property"></a></h3> 2.691 + 2.692 + 2.693 + <table class="propdef"> 2.694 + 2.695 + <tbody> 2.696 + <tr> 2.697 + 2.698 <th>Name: 2.699 - <td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-text-decoration-color>text-decoration-color<a class=self-link href=#propdef-text-decoration-color></a></dfn><tr> 2.700 - <th><a href=#values>Value</a>: 2.701 - <td><a href=http://www.w3.org/TR/css3-color/#color0><span class=value-inst-color><color></span></a> 2.702 + 2.703 + <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-text-decoration-color">text-decoration-color<a class="self-link" href="#propdef-text-decoration-color"></a></dfn> 2.704 + <tr> 2.705 + 2.706 + <th><a href="#values">Value</a>: 2.707 + 2.708 + <td><a href="http://www.w3.org/TR/css3-color/#color0"><span class="value-inst-color"><color></span></a> 2.709 2.710 - <tr> 2.711 + 2.712 + <tr> 2.713 + 2.714 <th>Initial: 2.715 - <td><a href=http://www.w3.org/TR/css3-color/#currentcolor>currentColor</a> 2.716 - <tr> 2.717 + 2.718 + <td><a href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> 2.719 + 2.720 + <tr> 2.721 + 2.722 <th>Applies to: 2.723 + 2.724 <td>all elements 2.725 - <tr> 2.726 + 2.727 + <tr> 2.728 + 2.729 <th>Inherited: 2.730 + 2.731 <td>no 2.732 - <tr> 2.733 + 2.734 + <tr> 2.735 + 2.736 <th>Percentages: 2.737 + 2.738 <td>N/A 2.739 - <tr> 2.740 + 2.741 + <tr> 2.742 + 2.743 <th>Media: 2.744 + 2.745 <td>visual 2.746 - <tr> 2.747 + 2.748 + <tr> 2.749 + 2.750 <th>Computed value: 2.751 + 2.752 <td>the computed color 2.753 - <tr> 2.754 + 2.755 + <tr> 2.756 + 2.757 <th>Animatable: 2.758 - <td>as <a href=http://www.w3.org/TR/css3-transitions/#animtype-color>color</a> 2.759 - </table> 2.760 + 2.761 + <td>as <a href="http://www.w3.org/TR/css3-transitions/#animtype-color">color</a> 2.762 + 2.763 + </table> 2.764 2.765 - <p>This property specifies the color of text decoration (underlines 2.766 + 2.767 + <p>This property specifies the color of text decoration (underlines 2.768 overlines, and line-throughs) set on the element with 2.769 - <a class=property data-link-type=propdesc href=#propdef-text-decoration-line title=text-decoration-line>text-decoration-line</a>.</p> 2.770 + <a class="property" data-link-type="propdesc" href="#propdef-text-decoration-line">text-decoration-line</a>.</p> 2.771 2.772 - <p> 2.773 + 2.774 + <p> 2.775 The color of text decorations must remain the same on all decorations originating from a given element, 2.776 even if descendant boxes have different specified colors. 2.777 2.778 -<h3 class="heading settled heading" data-level=2.3 id=text-decoration-style-property><span class=secno>2.3 </span><span class=content> 2.779 -Text Decoration Style: the <a class=property data-link-type=propdesc href=#propdef-text-decoration-style title=text-decoration-style>text-decoration-style</a> property</span><a class=self-link href=#text-decoration-style-property></a></h3> 2.780 +</p> 2.781 + <h3 class="heading settled" data-level="2.3" id="text-decoration-style-property"><span class="secno">2.3. </span><span class="content"> 2.782 +Text Decoration Style: the <a class="property" data-link-type="propdesc" href="#propdef-text-decoration-style">text-decoration-style</a> property</span><a class="self-link" href="#text-decoration-style-property"></a></h3> 2.783 2.784 - <table class=propdef> 2.785 - <tr> 2.786 + 2.787 + <table class="propdef"> 2.788 + 2.789 + <tbody> 2.790 + <tr> 2.791 + 2.792 <th>Name: 2.793 - <td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-text-decoration-style>text-decoration-style<a class=self-link href=#propdef-text-decoration-style></a></dfn><tr> 2.794 - <th><a href=#values>Value</a>: 2.795 + 2.796 + <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-text-decoration-style">text-decoration-style<a class="self-link" href="#propdef-text-decoration-style"></a></dfn> 2.797 + <tr> 2.798 + 2.799 + <th><a href="#values">Value</a>: 2.800 + 2.801 <td>solid | double | dotted | dashed | wavy 2.802 2.803 - <tr> 2.804 + 2.805 + <tr> 2.806 + 2.807 <th>Initial: 2.808 + 2.809 <td>solid 2.810 - <tr> 2.811 + 2.812 + <tr> 2.813 + 2.814 <th>Applies to: 2.815 + 2.816 <td>all elements 2.817 - <tr> 2.818 + 2.819 + <tr> 2.820 + 2.821 <th>Inherited: 2.822 + 2.823 <td>no 2.824 - <tr> 2.825 + 2.826 + <tr> 2.827 + 2.828 <th>Percentages: 2.829 + 2.830 <td>N/A 2.831 - <tr> 2.832 + 2.833 + <tr> 2.834 + 2.835 <th>Media: 2.836 + 2.837 <td>visual 2.838 - <tr> 2.839 + 2.840 + <tr> 2.841 + 2.842 <th>Computed value: 2.843 + 2.844 <td>as specified 2.845 - <tr> 2.846 + 2.847 + <tr> 2.848 + 2.849 <th>Animatable: 2.850 + 2.851 <td>no 2.852 - </table> 2.853 + 2.854 + </table> 2.855 2.856 - <p>This property specifies the style of the line(s) drawn for 2.857 + 2.858 + <p>This property specifies the style of the line(s) drawn for 2.859 text decoration specified on the element. Values have the 2.860 same meaning as for the 2.861 - <a href=http://www.w3.org/TR/css3-background/#the-border-style>border-style 2.862 - properties</a> <a data-biblio-type=normative data-link-type=biblio href=#css3bg title=css3bg>[CSS3BG]</a>. <span class=css data-link-type=maybe title=wavy>wavy</span> indicates a wavy line.</p> 2.863 + <a href="http://www.w3.org/TR/css3-background/#the-border-style">border-style 2.864 + properties</a> <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a>. <span class="css">wavy</span> indicates a wavy line.</p> 2.865 2.866 - <p> 2.867 + 2.868 + <p> 2.869 The style of text decorations must remain the same on all decorations originating from a given element, 2.870 even if descendant boxes have different specified styles. 2.871 2.872 -<h3 class="heading settled heading" data-level=2.4 id=text-decoration-property><span class=secno>2.4 </span><span class=content> 2.873 -Text Decoration Shorthand: the <a class=property data-link-type=propdesc href=#propdef-text-decoration title=text-decoration>text-decoration</a> property</span><a class=self-link href=#text-decoration-property></a></h3> 2.874 +</p> 2.875 + <h3 class="heading settled" data-level="2.4" id="text-decoration-property"><span class="secno">2.4. </span><span class="content"> 2.876 +Text Decoration Shorthand: the <a class="property" data-link-type="propdesc" href="#propdef-text-decoration">text-decoration</a> property</span><a class="self-link" href="#text-decoration-property"></a></h3> 2.877 2.878 - <table class=propdef> 2.879 - <tr> 2.880 + 2.881 + <table class="propdef"> 2.882 + 2.883 + <tbody> 2.884 + <tr> 2.885 + 2.886 <th>Name: 2.887 - <td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-text-decoration>text-decoration<a class=self-link href=#propdef-text-decoration></a></dfn><tr> 2.888 - <th><a href=#values>Value</a>: 2.889 - <td><var><a href=#text-decoration-line><text-decoration-line></a></var> || 2.890 - <var><a href=#text-decoration-style><text-decoration-style></a></var> || 2.891 - <var><a href=#text-decoration-color><text-decoration-color></a></var> 2.892 + 2.893 + <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-text-decoration">text-decoration<a class="self-link" href="#propdef-text-decoration"></a></dfn> 2.894 + <tr> 2.895 + 2.896 + <th><a href="#values">Value</a>: 2.897 + 2.898 + <td><var><a class="production" data-link-type="propdesc" href="#propdef-text-decoration-line"><‘text-decoration-line’></a></var> || 2.899 + <var><a class="production" data-link-type="propdesc" href="#propdef-text-decoration-style"><‘text-decoration-style’></a></var> || 2.900 + <var><a class="production" data-link-type="propdesc" href="#propdef-text-decoration-color"><‘text-decoration-color’></a></var> 2.901 2.902 - <tr> 2.903 + 2.904 + <tr> 2.905 + 2.906 <th>Initial: 2.907 + 2.908 <td>none 2.909 - <tr> 2.910 + 2.911 + <tr> 2.912 + 2.913 <th>Applies to: 2.914 + 2.915 <td>all elements 2.916 - <tr> 2.917 + 2.918 + <tr> 2.919 + 2.920 <th>Inherited: 2.921 + 2.922 <td>no 2.923 - <tr> 2.924 + 2.925 + <tr> 2.926 + 2.927 <th>Percentages: 2.928 + 2.929 <td>N/A 2.930 - <tr> 2.931 + 2.932 + <tr> 2.933 + 2.934 <th>Media: 2.935 + 2.936 <td>visual 2.937 - <tr> 2.938 + 2.939 + <tr> 2.940 + 2.941 <th>Computed value: 2.942 + 2.943 <td>see individual properties 2.944 - <tr> 2.945 + 2.946 + <tr> 2.947 + 2.948 <th>Animatable: 2.949 + 2.950 <td>see individual properties 2.951 - </table> 2.952 + 2.953 + </table> 2.954 2.955 - <p>This property is a shorthand for setting <a class=property data-link-type=propdesc href=#propdef-text-decoration-line title=text-decoration-line>text-decoration-line</a>, 2.956 - <a class=property data-link-type=propdesc href=#propdef-text-decoration-color title=text-decoration-color>text-decoration-color</a>, and <a class=property data-link-type=propdesc href=#propdef-text-decoration-style title=text-decoration-style>text-decoration-style</a> in one declaration. 2.957 - Omitted values are set to their initial values. A <a class=property data-link-type=propdesc href=#propdef-text-decoration title=text-decoration>text-decoration</a> 2.958 - declaration that omits both the <a class=property data-link-type=propdesc href=#propdef-text-decoration-color title=text-decoration-color>text-decoration-color</a> 2.959 - and <a class=property data-link-type=propdesc href=#propdef-text-decoration-style title=text-decoration-style>text-decoration-style</a> values is backwards-compatible 2.960 + 2.961 + <p>This property is a shorthand for setting <a class="property" data-link-type="propdesc" href="#propdef-text-decoration-line">text-decoration-line</a>, 2.962 + <a class="property" data-link-type="propdesc" href="#propdef-text-decoration-color">text-decoration-color</a>, and <a class="property" data-link-type="propdesc" href="#propdef-text-decoration-style">text-decoration-style</a> in one declaration. 2.963 + Omitted values are set to their initial values. A <a class="property" data-link-type="propdesc" href="#propdef-text-decoration">text-decoration</a> 2.964 + declaration that omits both the <a class="property" data-link-type="propdesc" href="#propdef-text-decoration-color">text-decoration-color</a> 2.965 + and <a class="property" data-link-type="propdesc" href="#propdef-text-decoration-style">text-decoration-style</a> values is backwards-compatible 2.966 with CSS Levels 1 and 2.</p> 2.967 2.968 - <div class=example> 2.969 + 2.970 + <div class="example"> 2.971 + 2.972 <p>The following example underlines unvisited links with a solid blue 2.973 underline in CSS1 and CSS2 UAs and a navy dotted underline in CSS3 UAs.</p> 2.974 + 2.975 2.976 - <pre><code class=css> 2.977 -:link { 2.978 + 2.979 + <pre><code>:link { 2.980 color: blue; 2.981 text-decoration: underline; 2.982 - text-decoration: navy dotted underline; /* <a href=http://www.w3.org/TR/CSS21/syndata.html#ignore>Ignored</a> in CSS1/CSS2 UAs */ 2.983 -}</code></pre> </div> 2.984 + text-decoration: navy dotted underline; /* <a href="http://www.w3.org/TR/CSS21/syndata.html#ignore">Ignored</a> in CSS1/CSS2 UAs */ 2.985 +}</code></pre> 2.986 + 2.987 + 2.988 + </div> 2.989 2.990 -<h3 class="heading settled heading" data-level=2.5 id=text-decoration-skip-property><span class=secno>2.5 </span><span class=content> 2.991 -Text Decoration Line Continuity: the <a class=property data-link-type=propdesc href=#propdef-text-decoration-skip title=text-decoration-skip>text-decoration-skip</a> property</span><a class=self-link href=#text-decoration-skip-property></a></h3> 2.992 2.993 - <table class=propdef> 2.994 - <tr> 2.995 + <h3 class="heading settled" data-level="2.5" id="text-decoration-skip-property"><span class="secno">2.5. </span><span class="content"> 2.996 +Text Decoration Line Continuity: the <a class="property" data-link-type="propdesc" href="#propdef-text-decoration-skip">text-decoration-skip</a> property</span><a class="self-link" href="#text-decoration-skip-property"></a></h3> 2.997 + 2.998 + 2.999 + <table class="propdef"> 2.1000 + 2.1001 + <tbody> 2.1002 + <tr> 2.1003 + 2.1004 <th>Name: 2.1005 - <td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-text-decoration-skip>text-decoration-skip<a class=self-link href=#propdef-text-decoration-skip></a></dfn><tr> 2.1006 - <th><a href=#values>Value</a>: 2.1007 + 2.1008 + <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-text-decoration-skip">text-decoration-skip<a class="self-link" href="#propdef-text-decoration-skip"></a></dfn> 2.1009 + <tr> 2.1010 + 2.1011 + <th><a href="#values">Value</a>: 2.1012 + 2.1013 <td>none | [ objects || spaces || ink || edges || box-decoration ] 2.1014 2.1015 - <tr> 2.1016 + 2.1017 + <tr> 2.1018 + 2.1019 <th>Initial: 2.1020 + 2.1021 <td>objects 2.1022 - <tr> 2.1023 + 2.1024 + <tr> 2.1025 + 2.1026 <th>Applies to: 2.1027 + 2.1028 <td>all elements 2.1029 - <tr> 2.1030 + 2.1031 + <tr> 2.1032 + 2.1033 <th>Inherited: 2.1034 + 2.1035 <td>yes 2.1036 - <tr> 2.1037 + 2.1038 + <tr> 2.1039 + 2.1040 <th>Percentages: 2.1041 + 2.1042 <td>N/A 2.1043 - <tr> 2.1044 + 2.1045 + <tr> 2.1046 + 2.1047 <th>Media: 2.1048 + 2.1049 <td>visual 2.1050 - <tr> 2.1051 + 2.1052 + <tr> 2.1053 + 2.1054 <th>Computed value: 2.1055 + 2.1056 <td>as specified 2.1057 - <tr> 2.1058 + 2.1059 + <tr> 2.1060 + 2.1061 <th>Animatable: 2.1062 + 2.1063 <td>no 2.1064 - </table> 2.1065 + 2.1066 + </table> 2.1067 2.1068 - <p>This property specifies what parts of the element’s content 2.1069 + 2.1070 + <p>This property specifies what parts of the element’s content 2.1071 any text decoration affecting the element must skip over. It 2.1072 controls all text decoration lines drawn by the element 2.1073 and also any text decoration lines drawn by its ancestors. 2.1074 Values have the following meanings:</p> 2.1075 2.1076 - <dl> 2.1077 - <dt><dfn class=css-code data-dfn-for=text-decoration-skip data-dfn-type=value data-export="" id=valuedef-none1>none<a class=self-link href=#valuedef-none1></a></dfn></dt> 2.1078 + 2.1079 + <dl> 2.1080 + 2.1081 + <dt><dfn class="css" data-dfn-for="text-decoration-skip" data-dfn-type="value" data-export="" id="valdef-text-decoration-skip-none">none<a class="self-link" href="#valdef-text-decoration-skip-none"></a></dfn> 2.1082 + 2.1083 + 2.1084 <dd>Skip nothing: text-decoration is drawn for all text content 2.1085 - and across atomic inline-level boxes.</dd> 2.1086 - <dt><dfn class=css-code data-dfn-for=text-decoration-skip data-dfn-type=value data-export="" id=valuedef-objects>objects<a class=self-link href=#valuedef-objects></a></dfn></dt> 2.1087 + and across atomic inline-level boxes. 2.1088 + 2.1089 + 2.1090 + <dt><dfn class="css" data-dfn-for="text-decoration-skip" data-dfn-type="value" data-export="" id="valdef-text-decoration-skip-objects">objects<a class="self-link" href="#valdef-text-decoration-skip-objects"></a></dfn> 2.1091 + 2.1092 + 2.1093 <dd>Skip this element (its entire margin box) if it is an atomic inline 2.1094 (such as an image or inline-block). 2.1095 - <dt><dfn class=css-code data-dfn-for=text-decoration-skip data-dfn-type=value data-export="" id=valuedef-spaces>spaces<a class=self-link href=#valuedef-spaces></a></dfn></dt> 2.1096 - <dd>Skip all spacing, i.e. all <a data-link-type=dfn href=#character title=characters>characters</a> with the Unicode White_Space property <a data-biblio-type=informative data-link-type=biblio href=#uax44 title=uax44>[UAX44]</a> 2.1097 - and all <a href=http://www.w3.org/TR/css3-text/#word-separator>word separators</a>, 2.1098 - plus any adjacent letter-spacing or word-spacing <a data-biblio-type=normative data-link-type=biblio href=#css3text title=css3text>[CSS3TEXT]</a>. 2.1099 - <dt><dfn class=css-code data-dfn-for=text-decoration-skip data-dfn-type=value data-export="" id=valuedef-ink>ink<a class=self-link href=#valuedef-ink></a></dfn></dt> 2.1100 + 2.1101 + <dt><dfn class="css" data-dfn-for="text-decoration-skip" data-dfn-type="value" data-export="" id="valdef-text-decoration-skip-spaces">spaces<a class="self-link" href="#valdef-text-decoration-skip-spaces"></a></dfn> 2.1102 + 2.1103 + 2.1104 + <dd>Skip all spacing, i.e. all <i>characters</i> with the Unicode White_Space property <a data-link-type="biblio" href="#biblio-uax44">[UAX44]</a> 2.1105 + and all <a href="http://www.w3.org/TR/css3-text/#word-separator">word separators</a>, 2.1106 + plus any adjacent letter-spacing or word-spacing <a data-link-type="biblio" href="#biblio-css3text">[CSS3TEXT]</a>. 2.1107 + 2.1108 + <dt><dfn class="css" data-dfn-for="text-decoration-skip" data-dfn-type="value" data-export="" id="valdef-text-decoration-skip-ink">ink<a class="self-link" href="#valdef-text-decoration-skip-ink"></a></dfn> 2.1109 + 2.1110 + 2.1111 <dd>Skip over where glyphs are drawn: 2.1112 interrupt the decoration line to let the shape of the text show through 2.1113 where the text decoration would otherwise cross over a glyph. 2.1114 The UA must skip a small distance to either side of the glyph outline. 2.1115 - <div class=figure> 2.1116 - <p><img alt="An alphabetic underline through Myanmar text skips around descenders and the vertical strokes of combining characters that drop below the alphabetic baseline." src=decoration-skip-ink.png title="text-decoration-skip: ink"> 2.1117 - <p class=caption><a class=css data-link-type=propdesc href=#propdef-text-decoration-skip title=text-decoration-skip>text-decoration-skip: ink</a></p> 2.1118 - </div> 2.1119 - <dt><dfn class=css-code data-dfn-for=text-decoration-skip data-dfn-type=value data-export="" id=valuedef-edges>edges<a class=self-link href=#valuedef-edges></a></dfn></dt> 2.1120 + 2.1121 + <div class="figure"> 2.1122 + 2.1123 + <p><img alt="An alphabetic underline through Myanmar text skips around descenders and the vertical strokes of combining characters that drop below the alphabetic baseline." src="decoration-skip-ink.png" title="text-decoration-skip: ink"> 2.1124 + </p> 2.1125 + <p class="caption"><a class="css" data-link-type="propdesc" href="#propdef-text-decoration-skip">text-decoration-skip: ink</a></p> 2.1126 + 2.1127 + 2.1128 + </div> 2.1129 + 2.1130 + 2.1131 + <dt><dfn class="css" data-dfn-for="text-decoration-skip" data-dfn-type="value" data-export="" id="valdef-text-decoration-skip-edges">edges<a class="self-link" href="#valdef-text-decoration-skip-edges"></a></dfn> 2.1132 + 2.1133 + 2.1134 <dd>The UA should place the start and end of the line inwards slightly 2.1135 (e.g. by half a line thickness) 2.1136 - from the content edge of the <a data-link-type=dfn href=#decorating-box title="decorating box">decorating box</a> so that, 2.1137 + from the content edge of the <i>decorating box</i> so that, 2.1138 e.g. two underlined elements side-by-side do not appear to have a single underline. 2.1139 (This is important in Chinese, where underlining is a form of punctuation.) 2.1140 - <div class=figure> 2.1141 - <p><img alt="An underline below a series of Chinese characters has a gap between two adjacent underlining elements." src=decoration-skip-edges.png title="text-decoration-skip: edges"> 2.1142 - <p class=caption><a class=css data-link-type=propdesc href=#propdef-text-decoration-skip title=text-decoration-skip>text-decoration-skip: edges</a> for <code><u>石井</u><u>艾ä¿ä¿</u></code> 2.1143 + 2.1144 + <div class="figure"> 2.1145 + 2.1146 + <p><img alt="An underline below a series of Chinese characters has a gap between two adjacent underlining elements." src="decoration-skip-edges.png" title="text-decoration-skip: edges"> 2.1147 + </p> 2.1148 + <p class="caption"><a class="css" data-link-type="propdesc" href="#propdef-text-decoration-skip">text-decoration-skip: edges</a> for <code><u>石井</u><u>艾ä¿ä¿</u></code> 2.1149 </p> 2.1150 - </div> 2.1151 + 2.1152 + 2.1153 + </div> 2.1154 + 2.1155 2.1156 - <dt><dfn class=css-code data-dfn-for=text-decoration-skip data-dfn-type=value data-export="" id=valuedef-box-decoration>box-decoration<a class=self-link href=#valuedef-box-decoration></a></dfn> 2.1157 + 2.1158 + <dt><dfn class="css" data-dfn-for="text-decoration-skip" data-dfn-type="value" data-export="" id="valdef-text-decoration-skip-box-decoration">box-decoration<a class="self-link" href="#valdef-text-decoration-skip-box-decoration"></a></dfn> 2.1159 + 2.1160 <dd> 2.1161 Skip over the box’s margin, border, and padding areas. 2.1162 Note that this only has an effect on decorations imposed by an ancestor; 2.1163 - a <a data-link-type=dfn href=#decorating-box title="decorating box">decorating box</a> never draws over its own box decoration. 2.1164 - </dl> 2.1165 + a <i>decorating box</i> never draws over its own box decoration. 2.1166 + 2.1167 + </dl> 2.1168 2.1169 - <p class=note>Note that this property inherits and that descendant 2.1170 + 2.1171 + <p class="note" role="note">Note that this property inherits and that descendant 2.1172 elements can have a different setting.</p> 2.1173 2.1174 - <p class=note> 2.1175 + 2.1176 + <p class="note" role="note"> 2.1177 Note that CSS 2.1 required skipping margins, borders, and padding always. 2.1178 - In this level, by default only the margins, borders, and padding of the <a data-link-type=dfn href=#decorating-box title="decorating box">decorating box</a> are skipped. 2.1179 + In this level, by default only the margins, borders, and padding of the <i>decorating box</i> are skipped. 2.1180 In the future CSS2.1 may be updated to match this new default. 2.1181 2.1182 -<h3 class="heading settled heading" data-level=2.6 id=text-underline-position-property><span class=secno>2.6 </span><span class=content> 2.1183 -Text Underline Position: the <a class=property data-link-type=propdesc href=#propdef-text-underline-position title=text-underline-position>text-underline-position</a> property</span><a class=self-link href=#text-underline-position-property></a></h3> 2.1184 +</p> 2.1185 + <h3 class="heading settled" data-level="2.6" id="text-underline-position-property"><span class="secno">2.6. </span><span class="content"> 2.1186 +Text Underline Position: the <a class="property" data-link-type="propdesc" href="#propdef-text-underline-position">text-underline-position</a> property</span><a class="self-link" href="#text-underline-position-property"></a></h3> 2.1187 2.1188 - <table class=propdef> 2.1189 - <tr> 2.1190 + 2.1191 + <table class="propdef"> 2.1192 + 2.1193 + <tbody> 2.1194 + <tr> 2.1195 + 2.1196 <th>Name: 2.1197 - <td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-text-underline-position>text-underline-position<a class=self-link href=#propdef-text-underline-position></a></dfn><tr> 2.1198 - <th><a href=#values>Value</a>: 2.1199 + 2.1200 + <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-text-underline-position">text-underline-position<a class="self-link" href="#propdef-text-underline-position"></a></dfn> 2.1201 + <tr> 2.1202 + 2.1203 + <th><a href="#values">Value</a>: 2.1204 + 2.1205 <td>auto | [ under || [ left | right ] ] 2.1206 2.1207 - <tr> 2.1208 + 2.1209 + <tr> 2.1210 + 2.1211 <th>Initial: 2.1212 + 2.1213 <td>auto 2.1214 - <tr> 2.1215 + 2.1216 + <tr> 2.1217 + 2.1218 <th>Applies to: 2.1219 + 2.1220 <td>all elements 2.1221 - <tr> 2.1222 + 2.1223 + <tr> 2.1224 + 2.1225 <th>Inherited: 2.1226 + 2.1227 <td>yes 2.1228 - <tr> 2.1229 + 2.1230 + <tr> 2.1231 + 2.1232 <th>Percentages: 2.1233 + 2.1234 <td>N/A 2.1235 - <tr> 2.1236 + 2.1237 + <tr> 2.1238 + 2.1239 <th>Media: 2.1240 + 2.1241 <td>visual 2.1242 - <tr> 2.1243 + 2.1244 + <tr> 2.1245 + 2.1246 <th>Computed value: 2.1247 + 2.1248 <td>as specified 2.1249 - <tr> 2.1250 + 2.1251 + <tr> 2.1252 + 2.1253 <th>Animatable: 2.1254 + 2.1255 <td>no 2.1256 - </table> 2.1257 + 2.1258 + </table> 2.1259 2.1260 - <p>This property sets the position of an underline specified on the element. 2.1261 + 2.1262 + <p>This property sets the position of an underline specified on the element. 2.1263 (It does not affect underlines specified by ancestor elements.) 2.1264 - If <a class=css data-link-for=text-underline-position data-link-type=maybe href=#underline-left title=left>left</a> or <a class=css data-link-for=text-underline-position data-link-type=maybe href=#underline-right title=right>right</a> is specified alone, 2.1265 - <a class=css data-link-for=text-underline-position data-link-type=maybe href=#underline-under title=under>under</a> is also implied. 2.1266 + If <a class="css" data-link-type="maybe" href="#underline-left">left</a> or <a class="css" data-link-type="maybe" href="#underline-right">right</a> is specified alone, 2.1267 + <a class="css" data-link-type="maybe" href="#underline-under">under</a> is also implied. 2.1268 2.1269 - <div class=example> 2.1270 + </p> 2.1271 + <div class="example"> 2.1272 + 2.1273 <p>The following example styles modern Chinese, Japanese, and Korean 2.1274 texts with the appropriate underline positions in both horizontal 2.1275 and vertical text: 2.1276 - <pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: under right; } 2.1277 -:root:lang(zh), [lang|=zh] { text-underline-position: under left; }</pre> <p>(Note that these rules are part of the suggested 2.1278 - <a href=#default-stylesheet>default UA style sheet</a>.) 2.1279 - </div> 2.1280 + </p> 2.1281 + <pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: under right; }:root:lang(zh), [lang|=zh] { text-underline-position: under left; }</pre> 2.1282 + 2.1283 + 2.1284 + <p>(Note that these rules are part of the suggested 2.1285 + <a href="#default-stylesheet">default UA style sheet</a>.) 2.1286 + </p> 2.1287 + </div> 2.1288 2.1289 - <p>Values have the following meanings: 2.1290 + 2.1291 + <p>Values have the following meanings: 2.1292 2.1293 - <dl> 2.1294 - <dt><dfn class=css-code data-dfn-for=text-underline-position data-dfn-type=value data-export="" id=underline-auto>auto<a class=self-link href=#underline-auto></a></dfn></dt> 2.1295 + </p> 2.1296 + <dl> 2.1297 + 2.1298 + <dt><dfn class="css" data-dfn-for="text-underline-position" data-dfn-type="value" data-export="" id="underline-auto">auto<a class="self-link" href="#underline-auto"></a></dfn> 2.1299 + 2.1300 + 2.1301 <dd>The user agent may use any algorithm to determine the 2.1302 underline’s position; however it must be placed at or under 2.1303 the alphabetic baseline. 2.1304 - <p class=note>It is suggested that the default underline position 2.1305 + 2.1306 + <p class="note" role="note">It is suggested that the default underline position 2.1307 be close to the alphabetic baseline, 2.1308 unless that would either cross subscripted (or otherwise lowered) text 2.1309 or draw over glyphs from Asian scripts such as Han or Tibetan 2.1310 for which an alphabetic underline is too high: 2.1311 in such cases, shifting the underline lower 2.1312 - or aligning to the em box edge as described for <a class=css data-link-for=text-underline-position data-link-type=maybe href=#underline-under title=under>under</a> 2.1313 + or aligning to the em box edge as described for <a class="css" data-link-type="maybe" href="#underline-under">under</a> 2.1314 may be more appropriate. 2.1315 - <div class=figure> 2.1316 - <p><img alt="In a typical Latin font, the underline is positioned slightly 2.1317 + </p> 2.1318 + <div class="figure"> 2.1319 + 2.1320 + <p><img alt="In a typical Latin font, the underline is positioned slightly 2.1321 below the alphabetic baseline, leaving a gap between the line 2.1322 and the bottom of most Latin letters, but crossing through 2.1323 - descenders such as the stem of a 'p'." src=underline-position-alphabetic.png title="text-underline-position: alphabetic"> 2.1324 - <p class=caption>A typical “alphabetic†underline is positioned just below the alphabetic baseline 2.1325 - </div> 2.1326 - <dt><dfn class=css-code data-dfn-for=text-underline-position data-dfn-type=value data-export="" id=underline-under>under<a class=self-link href=#underline-under></a></dfn></dt> 2.1327 - <dd>The underline is positioned <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#under title=under>under</a> the element’s text content. 2.1328 + descenders such as the stem of a 'p'." src="underline-position-alphabetic.png" title="text-underline-position: alphabetic"> 2.1329 + </p> 2.1330 + <p class="caption">A typical “alphabetic†underline is positioned just below the alphabetic baseline 2.1331 + </p> 2.1332 + </div> 2.1333 + 2.1334 + 2.1335 + <dt><dfn class="css" data-dfn-for="text-underline-position" data-dfn-type="value" data-export="" id="underline-under">under<a class="self-link" href="#underline-under"></a></dfn> 2.1336 + 2.1337 + 2.1338 + <dd>The underline is positioned <i>under</i> the element’s text content. 2.1339 In this case the underline usually does not cross the descenders. 2.1340 (This is sometimes called “accounting†underline.) 2.1341 - This value can be combined with <a class=css data-link-for=text-underline-position data-link-type=maybe href=#underline-left title=left>left</a> or <a class=css data-link-for=text-underline-position data-link-type=maybe href=#underline-right title=right>right</a> 2.1342 + This value can be combined with <a class="css" data-link-type="maybe" href="#underline-left">left</a> or <a class="css" data-link-type="maybe" href="#underline-right">right</a> 2.1343 if a particular side is preferred in vertical writing modes. 2.1344 - <div class=figure> 2.1345 - <p><img alt="In a typical Latin font, the underline is far enough 2.1346 - below the text that it does not cross the bottom of a 'g'." src=underline-position-under.png title="text-underline-position: under"> 2.1347 - <p class=caption><a class=css data-link-type=propdesc href=#propdef-text-underline-position title=text-underline-position>text-underline-position: under</a></p> 2.1348 - </div> 2.1349 - <div class=example> 2.1350 - <p>Because <a class=property data-link-type=propdesc href=#propdef-text-underline-position title=text-underline-position>text-underline-position</a> inherits, and is not reset 2.1351 - by the <a class=property data-link-type=propdesc href=#propdef-text-decoration title=text-decoration>text-decoration</a> shorthand, the following example 2.1352 - switches the document to use <a class=css data-link-for=text-underline-position data-link-type=maybe href=#underline-under title=under>under</a> underlining, which can 2.1353 + 2.1354 + <div class="figure"> 2.1355 + 2.1356 + <p><img alt="In a typical Latin font, the underline is far enough 2.1357 + below the text that it does not cross the bottom of a 'g'." src="underline-position-under.png" title="text-underline-position: under"> 2.1358 + </p> 2.1359 + <p class="caption"><a class="css" data-link-type="propdesc" href="#propdef-text-underline-position">text-underline-position: under</a></p> 2.1360 + 2.1361 + 2.1362 + </div> 2.1363 + 2.1364 + 2.1365 + <div class="example"> 2.1366 + 2.1367 + <p>Because <a class="property" data-link-type="propdesc" href="#propdef-text-underline-position">text-underline-position</a> inherits, and is not reset 2.1368 + by the <a class="property" data-link-type="propdesc" href="#propdef-text-decoration">text-decoration</a> shorthand, the following example 2.1369 + switches the document to use <a class="css" data-link-type="maybe" href="#underline-under">under</a> underlining, which can 2.1370 be more appropriate for writing systems with long, complicated 2.1371 descenders. It is also often useful for mathematical or chemical 2.1372 texts that use many subscripts. 2.1373 -<pre>:root { text-underline-position: under; }</pre> </div> 2.1374 - <dt><dfn class=css-code data-dfn-for=text-underline-position data-dfn-type=value data-export="" id=underline-left>left<a class=self-link href=#underline-left></a></dfn></dt> 2.1375 +</p> 2.1376 + <pre>:root { text-underline-position: under; }</pre> 2.1377 + 2.1378 + 2.1379 + </div> 2.1380 + 2.1381 + 2.1382 + <dt><dfn class="css" data-dfn-for="text-underline-position" data-dfn-type="value" data-export="" id="underline-left">left<a class="self-link" href="#underline-left"></a></dfn> 2.1383 + 2.1384 + 2.1385 <dd>In vertical writing modes, the underline is aligned as for 2.1386 - <a class=css data-link-for=text-underline-position data-link-type=maybe href=#underline-under title=under>under</a>, except it is always aligned to the left edge of the text. 2.1387 + <a class="css" data-link-type="maybe" href="#underline-under">under</a>, except it is always aligned to the left edge of the text. 2.1388 If this causes the underline to be drawn on the "over" side of 2.1389 the text, then an overline also switches sides and is drawn on 2.1390 the "under" side. 2.1391 - <dt><dfn class=css-code data-dfn-for=text-underline-position data-dfn-type=value data-export="" id=underline-right>right<a class=self-link href=#underline-right></a></dfn></dt> 2.1392 + 2.1393 + <dt><dfn class="css" data-dfn-for="text-underline-position" data-dfn-type="value" data-export="" id="underline-right">right<a class="self-link" href="#underline-right"></a></dfn> 2.1394 + 2.1395 + 2.1396 <dd>In vertical writing modes, the underline is aligned as for 2.1397 - <a class=css data-link-for=text-underline-position data-link-type=maybe href=#underline-under title=under>under</a>, except it is always aligned to the right edge of the text. 2.1398 + <a class="css" data-link-type="maybe" href="#underline-under">under</a>, except it is always aligned to the right edge of the text. 2.1399 If this causes the underline to be drawn on the "over" side of 2.1400 the text, then an overline also switches sides and is drawn on 2.1401 - the "under" side.</dd> 2.1402 - </dl> 2.1403 + the "under" side. 2.1404 + 2.1405 + 2.1406 + </dl> 2.1407 2.1408 - <div class=figure id=fig-text-underline-position> 2.1409 + 2.1410 + <div class="figure" id="fig-text-underline-position"> 2.1411 + 2.1412 <table> 2.1413 + 2.1414 + <tbody> 2.1415 <tr> 2.1416 - <td> 2.1417 + 2.1418 + <td> 2.1419 <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left' 2.1420 - places the underline on the left side of the text." src=underline-position-left.png title="text-underline-position: left"> 2.1421 + places the underline on the left side of the text." src="underline-position-left.png" title="text-underline-position: left"> 2.1422 2.1423 - <td> 2.1424 + 2.1425 + <td> 2.1426 <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right' 2.1427 - places the underline on the right side of the text." src=underline-position-right.png title="text-underline-position: right"> 2.1428 + places the underline on the right side of the text." src="underline-position-right.png" title="text-underline-position: right"> 2.1429 2.1430 + 2.1431 <tr> 2.1432 - <td><a class=css data-link-for=text-underline-position data-link-type=maybe href=#underline-left title=left>left</a> 2.1433 - <td><a class=css data-link-for=text-underline-position data-link-type=maybe href=#underline-right title=right>right</a> 2.1434 + 2.1435 + <td><a class="css" data-link-type="maybe" href="#underline-left">left</a> 2.1436 + 2.1437 + <td><a class="css" data-link-type="maybe" href="#underline-right">right</a> 2.1438 + 2.1439 </table> 2.1440 - <p class=caption>In vertical writing modes, the <a class=property data-link-type=propdesc href=#propdef-text-underline-position title=text-underline-position>text-underline-position</a> 2.1441 - values <a class=css data-link-for=text-underline-position data-link-type=maybe href=#underline-left title=left>left</a> and <a class=css data-link-for=text-underline-position data-link-type=maybe href=#underline-right title=right>right</a> allow placing the underline on either 2.1442 + 2.1443 + 2.1444 + <p class="caption">In vertical writing modes, the <a class="property" data-link-type="propdesc" href="#propdef-text-underline-position">text-underline-position</a> 2.1445 + values <a class="css" data-link-type="maybe" href="#underline-left">left</a> and <a class="css" data-link-type="maybe" href="#underline-right">right</a> allow placing the underline on either 2.1446 side of the text. (In horizontal writing modes, both values are 2.1447 - treated as <a class=css data-link-for=text-underline-position data-link-type=maybe href=#underline-under title=under>under</a>.)</p> 2.1448 - </div> 2.1449 + treated as <a class="css" data-link-type="maybe" href="#underline-under">under</a>.)</p> 2.1450 + 2.1451 2.1452 - <p>The exact position and thickness of line decorations is UA-defined in this level. 2.1453 + </div> 2.1454 + 2.1455 + 2.1456 + <p>The exact position and thickness of line decorations is UA-defined in this level. 2.1457 However, for underlines and overlines 2.1458 the UA must use a single thickness and position on each line 2.1459 - for the decorations deriving from a single <a data-link-type=dfn href=#decorating-box title="decorating box">decorating box</a>. 2.1460 + for the decorations deriving from a single <i>decorating box</i>. 2.1461 2.1462 - <div class=figure> 2.1463 - <p><img alt="A single underline drawn under varying font sizes and vertical positions must be a single line." src=underline-single.png> 2.1464 + </p> 2.1465 + <div class="figure"> 2.1466 + 2.1467 + <p><img alt="A single underline drawn under varying font sizes and vertical positions must be a single line." src="underline-single.png"> 2.1468 vs. 2.1469 - <img alt="Drawing multiple line segments, each with the position and thickness appropriate to the decorated text, is incorrect." src=underline-broken.png> 2.1470 - <p class=caption>Correct and incorrect rendering of <code><u>A<sup>B</sup><big>C</big>D</u></code> 2.1471 - </div> 2.1472 + <img alt="Drawing multiple line segments, each with the position and thickness appropriate to the decorated text, is incorrect." src="underline-broken.png"> 2.1473 + </p> 2.1474 + <p class="caption">Correct and incorrect rendering of <code><u>A<sup>B</sup><big>C</big>D</u></code> 2.1475 + </p> 2.1476 + </div> 2.1477 2.1478 - <div class=note> 2.1479 + 2.1480 + <div class="note" role="note"> 2.1481 + 2.1482 <p>Note, since line decorations can span elements with varying font sizes and 2.1483 vertical alignments, the best position for a line decoration is not 2.1484 - necessarily the ideal position dictated by the <a data-link-type=dfn href=#decorating-box title="decorating box">decorating box</a>. 2.1485 + necessarily the ideal position dictated by the <i>decorating box</i>. 2.1486 For example, an overline positioned to a small font 2.1487 will effectively become a line-through if the element contains text in a significantly larger font-size. 2.1488 Even for underlines, if the text is not aligned to the alphabetic baseline 2.1489 (for example, in vertical typesetting styles, text is aligned to the central baseline by default) 2.1490 an underline will cut through descendant text of a larger font-size. 2.1491 - <div class=figure> 2.1492 - <p><img alt="" src=leftline-cross.png> 2.1493 + </p> 2.1494 + <div class="figure"> 2.1495 + 2.1496 + <p><img alt="" src="leftline-cross.png"> 2.1497 + </p> 2.1498 </div> 2.1499 - </div> 2.1500 + 2.1501 + 2.1502 + </div> 2.1503 2.1504 - <p>UAs <em>must</em> adjust line positions to match the shifted metrics of <a data-link-type=dfn href=#decorating-box title="decorating boxes">decorating boxes</a> positioned with <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align title=vertical-align>vertical-align</a> <a data-biblio-type=normative data-link-type=biblio href=#css21 title=css21>[CSS21]</a> 2.1505 - or subscripted/superscripted via <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-fonts-3/#propdef-font-variant-position title=font-variant-position>font-variant-position</a> <a data-biblio-type=normative data-link-type=biblio href=#css3-fonts title=css3-fonts>[CSS3-FONTS]</a>, 2.1506 - but <em>must not</em> adjust the line position or thickness in response to descendants of a <a data-link-type=dfn href=#decorating-box title="decorating box">decorating box</a> that are so styled. 2.1507 + 2.1508 + <p>UAs <em>must</em> adjust line positions to match the shifted metrics of <i>decorating boxes</i> positioned with <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-vertical-align">vertical-align</a> <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> 2.1509 + or subscripted/superscripted via <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-fonts-3/#propdef-font-variant-position">font-variant-position</a> <a data-link-type="biblio" href="#biblio-css3-fonts">[CSS3-FONTS]</a>, 2.1510 + but <em>must not</em> adjust the line position or thickness in response to descendants of a <i>decorating box</i> that are so styled. 2.1511 This allows superscripts and subscripts to be properly decorated 2.1512 (underlined, struck through, etc.) 2.1513 but prevents them from distorting or breaking the positioning of such decorations on their ancestors. 2.1514 2.1515 - <div class=figure> 2.1516 + </p> 2.1517 + <div class="figure"> 2.1518 + 2.1519 <p><img alt="An underline for just the superscript 'st' in '1st' is drawn just below the superscript, 2.1520 - whereas an underline for the entire text is drawn at the appropriate position for full-size text." src=underline-superscript.png> 2.1521 - <p class=caption>Example of underline applied to <abbr title="element with 'vertical-align' or 'font-variant-position' applied">superscripted text</abbr> 2.1522 + whereas an underline for the entire text is drawn at the appropriate position for full-size text." src="underline-superscript.png"> 2.1523 + </p> 2.1524 + <p class="caption">Example of underline applied to <abbr title="element with 'vertical-align' or 'font-variant-position' applied">superscripted text</abbr> 2.1525 vs. underline applied to <abbr title="element containing an element with 'vertical-align' or 'font-variant-position' applied">text containing a superscript</abbr> 2.1526 2.1527 - </div> 2.1528 + </p> 2.1529 + </div> 2.1530 2.1531 2.1532 - <p>Some font formats (such as OpenType) can offer information 2.1533 + 2.1534 + <p>Some font formats (such as OpenType) can offer information 2.1535 about the appropriate position of a line decoration. 2.1536 The UA should use such information 2.1537 (such as the underline thickness, 2.1538 or appropriate alphabetic underline position) 2.1539 from the font wherever appropriate. 2.1540 2.1541 - <p class=note>Typically, OpenType font metrics give the position of an <span class=css data-link-type=maybe title=alphabetic>alphabetic</span> underline; 2.1542 - in some cases (especially in CJK fonts), it gives the position of a <span class=css data-link-type=maybe title="under left">under left</span> underline. 2.1543 + </p> 2.1544 + <p class="note" role="note">Typically, OpenType font metrics give the position of an <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-counter-styles-3/#valdef-counter-style-system-alphabetic">alphabetic</a> underline; 2.1545 + in some cases (especially in CJK fonts), it gives the position of a <span class="css">under left</span> underline. 2.1546 (In this case, the font’s underline metrics typically touch the bottom edge of the em box). 2.1547 The UA may but is not required to correct for incorrect font metrics. 2.1548 2.1549 -<h2 class="heading settled heading" data-level=3 id=emphasis-marks><span class=secno>3 </span><span class=content> 2.1550 -Emphasis Marks</span><a class=self-link href=#emphasis-marks></a></h2> 2.1551 +</p> 2.1552 + <h2 class="heading settled" data-level="3" id="emphasis-marks"><span class="secno">3. </span><span class="content"> 2.1553 +Emphasis Marks</span><a class="self-link" href="#emphasis-marks"></a></h2> 2.1554 2.1555 - <p>East Asian documents traditionally use small symbols next to each glyph to emphasize 2.1556 + 2.1557 + <p>East Asian documents traditionally use small symbols next to each glyph to emphasize 2.1558 a run of text. For example:</p> 2.1559 2.1560 - <div class=figure> 2.1561 + 2.1562 + <div class="figure"> 2.1563 + 2.1564 <p> 2.1565 - <img alt="Example of emphasis in Japanese appearing over the text" class=example height=28 src=text-emphasis-ja.gif width=225></p> 2.1566 - <p class=caption>Accent emphasis (shown in blue for clarity) applied to Japanese text</p> 2.1567 - </div> 2.1568 + <img alt="Example of emphasis in Japanese appearing over the text" class="example" height="28" src="text-emphasis-ja.gif" width="225"></p> 2.1569 + 2.1570 + 2.1571 + <p class="caption">Accent emphasis (shown in blue for clarity) applied to Japanese text</p> 2.1572 + 2.1573 + 2.1574 + </div> 2.1575 2.1576 - <p>The <a class=property data-link-type=propdesc href=#propdef-text-emphasis title=text-emphasis>text-emphasis</a> shorthand, and its <a class=property data-link-type=propdesc href=#propdef-text-emphasis-style title=text-emphasis-style>text-emphasis-style</a> and <a class=property data-link-type=propdesc href=#propdef-text-emphasis-color title=text-emphasis-color>text-emphasis-color</a> longhands, 2.1577 + 2.1578 + <p>The <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis">text-emphasis</a> shorthand, and its <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis-style">text-emphasis-style</a> and <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis-color">text-emphasis-color</a> longhands, 2.1579 can be used to apply such marks to the text. 2.1580 - The <a class=property data-link-type=propdesc href=#propdef-text-emphasis-position title=text-emphasis-position>text-emphasis-position</a> property, which inherits separately, 2.1581 + The <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis-position">text-emphasis-position</a> property, which inherits separately, 2.1582 allows setting the emphasis marks’ position with respect to the text. 2.1583 2.1584 -<h3 class="heading settled heading" data-level=3.1 id=text-emphasis-style-property><span class=secno>3.1 </span><span class=content> 2.1585 -Emphasis Mark Style: the <a class=property data-link-type=propdesc href=#propdef-text-emphasis-style title=text-emphasis-style>text-emphasis-style</a> property</span><a class=self-link href=#text-emphasis-style-property></a></h3> 2.1586 +</p> 2.1587 + <h3 class="heading settled" data-level="3.1" id="text-emphasis-style-property"><span class="secno">3.1. </span><span class="content"> 2.1588 +Emphasis Mark Style: the <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis-style">text-emphasis-style</a> property</span><a class="self-link" href="#text-emphasis-style-property"></a></h3> 2.1589 2.1590 - <table class=propdef> 2.1591 - <tr> 2.1592 + 2.1593 + <table class="propdef"> 2.1594 + 2.1595 + <tbody> 2.1596 + <tr> 2.1597 + 2.1598 <th>Name: 2.1599 - <td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-text-emphasis-style>text-emphasis-style<a class=self-link href=#propdef-text-emphasis-style></a></dfn><tr> 2.1600 - <th><a href=#values>Value</a>: 2.1601 + 2.1602 + <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-text-emphasis-style">text-emphasis-style<a class="self-link" href="#propdef-text-emphasis-style"></a></dfn> 2.1603 + <tr> 2.1604 + 2.1605 + <th><a href="#values">Value</a>: 2.1606 + 2.1607 <td>none | 2.1608 [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | 2.1609 - <a class=noxref href=http://www.w3.org/TR/CSS21/syndata.html#value-def-string><span class=value-inst-string><string></span></a> 2.1610 + <a class="noxref" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string"><span class="value-inst-string"><string></span></a> 2.1611 2.1612 - <tr> 2.1613 + 2.1614 + <tr> 2.1615 + 2.1616 <th>Initial: 2.1617 + 2.1618 <td>none 2.1619 - <tr> 2.1620 + 2.1621 + <tr> 2.1622 + 2.1623 <th>Applies to: 2.1624 + 2.1625 <td>all elements 2.1626 - <tr> 2.1627 + 2.1628 + <tr> 2.1629 + 2.1630 <th>Inherited: 2.1631 + 2.1632 <td>yes 2.1633 - <tr> 2.1634 + 2.1635 + <tr> 2.1636 + 2.1637 <th>Percentages: 2.1638 + 2.1639 <td>N/A 2.1640 - <tr> 2.1641 + 2.1642 + <tr> 2.1643 + 2.1644 <th>Media: 2.1645 + 2.1646 <td>visual 2.1647 - <tr> 2.1648 + 2.1649 + <tr> 2.1650 + 2.1651 <th>Computed value: 2.1652 - <td><span class=css data-link-for=text-emphasis-style data-link-type=maybe title=none>none</span>, a pair of keywords representing the shape and fill, or 2.1653 + 2.1654 + <td><span class="css">none</span>, a pair of keywords representing the shape and fill, or 2.1655 a string 2.1656 - <tr> 2.1657 + 2.1658 + <tr> 2.1659 + 2.1660 <th>Animatable: 2.1661 + 2.1662 <td>no 2.1663 - </table> 2.1664 + 2.1665 + </table> 2.1666 2.1667 - <p>This property applies emphasis marks to the element’s text. 2.1668 + 2.1669 + <p>This property applies emphasis marks to the element’s text. 2.1670 Values have the following meanings:</p> 2.1671 2.1672 - <dl> 2.1673 - <dt><dfn class=css-code data-dfn-for=text-text-emphasis-style data-dfn-type=value data-export="" id=valuedef-none>none<a class=self-link href=#valuedef-none></a></dfn></dt> 2.1674 - <dd>No emphasis marks.</dd> 2.1675 - <dt><dfn class=css-code data-dfn-for=text-text-emphasis-style data-dfn-type=value data-export="" id=valuedef-filled>filled<a class=self-link href=#valuedef-filled></a></dfn></dt> 2.1676 - <dd>The shape is filled with solid color.</dd> 2.1677 - <dt><dfn class=css-code data-dfn-for=text-text-emphasis data-dfn-type=value data-export="" id=valuedef-open>open<a class=self-link href=#valuedef-open></a></dfn></dt> 2.1678 - <dd>The shape is hollow.</dd> 2.1679 - <dt><dfn class=css-code data-dfn-for=text-text-emphasis-style data-dfn-type=value data-export="" id=valuedef-dot>dot<a class=self-link href=#valuedef-dot></a></dfn></dt> 2.1680 - <dd>Display small circles as marks. 2.1681 - The filled dot is U+2022 '•', and the open dot is U+25E6 'â—¦'.</dd> 2.1682 - <dt><dfn class=css-code data-dfn-for=text-text-emphasis-style data-dfn-type=value data-export="" id=valuedef-circle>circle<a class=self-link href=#valuedef-circle></a></dfn></dt> 2.1683 - <dd>Display large circles as marks. 2.1684 - The filled circle is U+25CF 'â—', and the open circle is U+25CB 'â—‹'.</dd> 2.1685 - <dt><dfn class=css-code data-dfn-for=text-text-emphasis-style data-dfn-type=value data-export="" id=valuedef-double-circle>double-circle<a class=self-link href=#valuedef-double-circle></a></dfn></dt> 2.1686 - <dd>Display double circles as marks. 2.1687 - The filled double-circle is U+25C9 'â—‰', and the open double-circle is U+25CE 'â—Ž'.</dd> 2.1688 - <dt><dfn class=css-code data-dfn-for=text-text-emphasis-style data-dfn-type=value data-export="" id=valuedef-triangle>triangle<a class=self-link href=#valuedef-triangle></a></dfn></dt> 2.1689 - <dd>Display triangles as marks. 2.1690 - The filled triangle is U+25B2 'â–²', and the open triangle is U+25B3 'â–³'.</dd> 2.1691 - <dt><dfn class=css-code data-dfn-for=text-text-emphasis-style data-dfn-type=value data-export="" id=valuedef-sesame>sesame<a class=self-link href=#valuedef-sesame></a></dfn></dt> 2.1692 - <dd>Display sesames as marks. 2.1693 - The filled sesame is U+FE45 'ï¹…', and the open sesame is U+FE46 '﹆'.</dd> 2.1694 - <dt><dfn class=css-code data-dfn-for=text-text-emphasis-style data-dfn-type=value data-export="" id=valuedef-string><var><string></var><a class=self-link href=#valuedef-string></a></dfn></dt> 2.1695 - <dd>Display the given string as marks. 2.1696 - Authors should not specify more than one <a data-link-type=dfn href=#character title=character>character</a> in <string>. 2.1697 - The UA may truncate or ignore strings consisting of more than one grapheme cluster.</dd> 2.1698 - </dl> 2.1699 + 2.1700 + <dl> 2.1701 + 2.1702 + <dt><dfn class="css" data-dfn-for="text-text-emphasis-style" data-dfn-type="value" data-export="" id="valdef-text-text-emphasis-style-none">none<a class="self-link" href="#valdef-text-text-emphasis-style-none"></a></dfn> 2.1703 + 2.1704 + 2.1705 + <dd>No emphasis marks. 2.1706 + 2.1707 + 2.1708 + <dt><dfn class="css" data-dfn-for="text-text-emphasis-style" data-dfn-type="value" data-export="" id="valdef-text-text-emphasis-style-filled">filled<a class="self-link" href="#valdef-text-text-emphasis-style-filled"></a></dfn> 2.1709 + 2.1710 + 2.1711 + <dd>The shape is filled with solid color. 2.1712 + 2.1713 + 2.1714 + <dt><dfn class="css" data-dfn-for="text-text-emphasis" data-dfn-type="value" data-export="" id="valdef-text-text-emphasis-open">open<a class="self-link" href="#valdef-text-text-emphasis-open"></a></dfn> 2.1715 + 2.1716 + 2.1717 + <dd>The shape is hollow. 2.1718 + 2.1719 + 2.1720 + <dt><dfn class="css" data-dfn-for="text-text-emphasis-style" data-dfn-type="value" data-export="" id="valdef-text-text-emphasis-style-dot">dot<a class="self-link" href="#valdef-text-text-emphasis-style-dot"></a></dfn> 2.1721 + 2.1722 + 2.1723 + <dd>Display small circles as marks. 2.1724 + The filled dot is U+2022 '•', and the open dot is U+25E6 'â—¦'. 2.1725 + 2.1726 + 2.1727 + <dt><dfn class="css" data-dfn-for="text-text-emphasis-style" data-dfn-type="value" data-export="" id="valdef-text-text-emphasis-style-circle">circle<a class="self-link" href="#valdef-text-text-emphasis-style-circle"></a></dfn> 2.1728 + 2.1729 + 2.1730 + <dd>Display large circles as marks. 2.1731 + The filled circle is U+25CF 'â—', and the open circle is U+25CB 'â—‹'. 2.1732 + 2.1733 + 2.1734 + <dt><dfn class="css" data-dfn-for="text-text-emphasis-style" data-dfn-type="value" data-export="" id="valdef-text-text-emphasis-style-double-circle">double-circle<a class="self-link" href="#valdef-text-text-emphasis-style-double-circle"></a></dfn> 2.1735 + 2.1736 + 2.1737 + <dd>Display double circles as marks. 2.1738 + The filled double-circle is U+25C9 'â—‰', and the open double-circle is U+25CE 'â—Ž'. 2.1739 + 2.1740 + 2.1741 + <dt><dfn class="css" data-dfn-for="text-text-emphasis-style" data-dfn-type="value" data-export="" id="valdef-text-text-emphasis-style-triangle">triangle<a class="self-link" href="#valdef-text-text-emphasis-style-triangle"></a></dfn> 2.1742 + 2.1743 + 2.1744 + <dd>Display triangles as marks. 2.1745 + The filled triangle is U+25B2 'â–²', and the open triangle is U+25B3 'â–³'. 2.1746 + 2.1747 + 2.1748 + <dt><dfn class="css" data-dfn-for="text-text-emphasis-style" data-dfn-type="value" data-export="" id="valdef-text-text-emphasis-style-sesame">sesame<a class="self-link" href="#valdef-text-text-emphasis-style-sesame"></a></dfn> 2.1749 + 2.1750 + 2.1751 + <dd>Display sesames as marks. 2.1752 + The filled sesame is U+FE45 'ï¹…', and the open sesame is U+FE46 '﹆'. 2.1753 + 2.1754 + 2.1755 + <dt><dfn class="css" data-dfn-for="text-text-emphasis-style" data-dfn-type="value" data-export="" id="valdef-text-text-emphasis-style-string"><var><string></var><a class="self-link" href="#valdef-text-text-emphasis-style-string"></a></dfn> 2.1756 + 2.1757 + 2.1758 + <dd>Display the given string as marks. 2.1759 + Authors should not specify more than one <i>character</i> in <string>. 2.1760 + The UA may truncate or ignore strings consisting of more than one grapheme cluster. 2.1761 + 2.1762 + 2.1763 + </dl> 2.1764 2.1765 - <p>If a shape keyword is specified but neither of <a class=css data-link-type=maybe href=#valuedef-filled title=filled>filled</a> nor <a class=css data-link-type=maybe href=#valuedef-open title=open>open</a> is 2.1766 - specified, <a class=css data-link-type=maybe href=#valuedef-filled title=filled>filled</a> is assumed. If only <a class=css data-link-type=maybe href=#valuedef-filled title=filled>filled</a> or <a class=css data-link-type=maybe href=#valuedef-open title=open>open</a> is specified, 2.1767 - the shape keyword computes to <a class=css data-link-type=maybe href=#valuedef-circle title=circle>circle</a> in horizontal writing mode and 2.1768 - <a class=css data-link-type=maybe href=#valuedef-sesame title=sesame>sesame</a> in vertical writing mode.</p> 2.1769 + 2.1770 + <p>If a shape keyword is specified but neither of <a class="css" data-link-type="maybe" href="#valdef-text-text-emphasis-style-filled">filled</a> nor <a class="css" data-link-type="maybe" href="#valdef-text-text-emphasis-open">open</a> is 2.1771 + specified, <a class="css" data-link-type="maybe" href="#valdef-text-text-emphasis-style-filled">filled</a> is assumed. If only <a class="css" data-link-type="maybe" href="#valdef-text-text-emphasis-style-filled">filled</a> or <a class="css" data-link-type="maybe" href="#valdef-text-text-emphasis-open">open</a> is specified, 2.1772 + the shape keyword computes to <a class="css" data-link-type="maybe" href="#valdef-text-text-emphasis-style-circle">circle</a> in horizontal writing mode and 2.1773 + <a class="css" data-link-type="maybe" href="#valdef-text-text-emphasis-style-sesame">sesame</a> in vertical writing mode.</p> 2.1774 2.1775 - <p>The marks should be drawn using the element’s font settings with its 2.1776 + 2.1777 + <p>The marks should be drawn using the element’s font settings with its 2.1778 size scaled down to 50%. However, not all fonts have all these glyphs, 2.1779 and some fonts use inappropriate sizes for emphasis marks in these 2.1780 code points. The UA may opt to use a font known to be good for 2.1781 @@ -840,264 +1375,472 @@ 2.1782 Marks must remain upright in vertical writing modes: like CJK 2.1783 characters, they do not rotate to match the writing mode.</p> 2.1784 2.1785 - <p class=note> 2.1786 + 2.1787 + <p class="note" role="note"> 2.1788 One example of good fonts for emphasis marks is Adobe’s opensource project, 2.1789 - <a href=http://sourceforge.net/adobe/kenten-generic/>Kenten Generic OpenType Font</a>, 2.1790 + <a href="http://sourceforge.net/adobe/kenten-generic/">Kenten Generic OpenType Font</a>, 2.1791 which is specially designed for the emphasis marks. 2.1792 </p> 2.1793 2.1794 - <p>The marks are drawn once for each <a data-link-type=dfn href=#character title=character>character</a>. However, 2.1795 + 2.1796 + <p>The marks are drawn once for each <i>character</i>. However, 2.1797 emphasis marks are not drawn for characters that are:</p> 2.1798 - <ul> 2.1799 - <li><a href=http://www.w3.org/TR/css3-text/#word-separator>Word separators</a> or that 2.1800 + 2.1801 + <ul> 2.1802 + 2.1803 + <li><a href="http://www.w3.org/TR/css3-text/#word-separator">Word separators</a> or that 2.1804 belong to the Unicode separator classes (Z*). 2.1805 (But note that emphasis marks <em>are</em> drawn for a space 2.1806 - that combines with any combining characters.)</li> 2.1807 + that combines with any combining characters.) 2.1808 + 2.1809 + 2.1810 <li>Characters belonging to the Unicode classes for control codes 2.1811 - and unassigned characters (Cc, Cf, Cn).</li> 2.1812 - </ul> 2.1813 + and unassigned characters (Cc, Cf, Cn). 2.1814 + 2.1815 + 2.1816 + </ul> 2.1817 2.1818 -<h3 class="heading settled heading" data-level=3.2 id=text-emphasis-color-property><span class=secno>3.2 </span><span class=content> 2.1819 -Emphasis Mark Color: the <a class=property data-link-type=propdesc href=#propdef-text-emphasis-color title=text-emphasis-color>text-emphasis-color</a> property</span><a class=self-link href=#text-emphasis-color-property></a></h3> 2.1820 2.1821 - <table class=propdef> 2.1822 - <tr> 2.1823 + <h3 class="heading settled" data-level="3.2" id="text-emphasis-color-property"><span class="secno">3.2. </span><span class="content"> 2.1824 +Emphasis Mark Color: the <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis-color">text-emphasis-color</a> property</span><a class="self-link" href="#text-emphasis-color-property"></a></h3> 2.1825 + 2.1826 + 2.1827 + <table class="propdef"> 2.1828 + 2.1829 + <tbody> 2.1830 + <tr> 2.1831 + 2.1832 <th>Name: 2.1833 - <td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-text-emphasis-color>text-emphasis-color<a class=self-link href=#propdef-text-emphasis-color></a></dfn><tr> 2.1834 - <th><a href=#values>Value</a>: 2.1835 - <td><color> 2.1836 - <tr> 2.1837 + 2.1838 + <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-text-emphasis-color">text-emphasis-color<a class="self-link" href="#propdef-text-emphasis-color"></a></dfn> 2.1839 + <tr> 2.1840 + 2.1841 + <th><a href="#values">Value</a>: 2.1842 + 2.1843 + <td><color> 2.1844 + 2.1845 + <tr> 2.1846 + 2.1847 <th>Initial: 2.1848 - <td><a href=http://www.w3.org/TR/css3-color/#currentcolor>currentColor</a> 2.1849 - <tr> 2.1850 + 2.1851 + <td><a href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> 2.1852 + 2.1853 + <tr> 2.1854 + 2.1855 <th>Applies to: 2.1856 + 2.1857 <td>all elements 2.1858 - <tr> 2.1859 + 2.1860 + <tr> 2.1861 + 2.1862 <th>Inherited: 2.1863 + 2.1864 <td>yes 2.1865 - <tr> 2.1866 + 2.1867 + <tr> 2.1868 + 2.1869 <th>Percentages: 2.1870 + 2.1871 <td>N/A 2.1872 - <tr> 2.1873 + 2.1874 + <tr> 2.1875 + 2.1876 <th>Media: 2.1877 + 2.1878 <td>visual 2.1879 - <tr> 2.1880 + 2.1881 + <tr> 2.1882 + 2.1883 <th>Computed value: 2.1884 + 2.1885 <td>as specified 2.1886 - <tr> 2.1887 + 2.1888 + <tr> 2.1889 + 2.1890 <th>Animatable: 2.1891 - <td>as <a href=http://www.w3.org/TR/css3-transitions/#animtype-color>color</a> 2.1892 - </table> 2.1893 + 2.1894 + <td>as <a href="http://www.w3.org/TR/css3-transitions/#animtype-color">color</a> 2.1895 + 2.1896 + </table> 2.1897 2.1898 - <p>This property specifies the foreground color of the emphasis marks.</p> 2.1899 + 2.1900 + <p>This property specifies the foreground color of the emphasis marks.</p> 2.1901 2.1902 - <p class=note> 2.1903 - The <dfn class=css-code data-dfn-for=text-emphasis-color data-dfn-type=value data-export="" id=valuedef-currentcolor>currentcolor<a class=self-link href=#valuedef-currentcolor></a></dfn> keyword computes to itself 2.1904 - and is resolved to the value of <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-color-3/#color0 title=color>color</a> after inheritance is performed. 2.1905 - This means <a class=property data-link-type=propdesc href=#propdef-text-emphasis-color title=text-emphasis-color>text-emphasis-color</a> by default matches the text <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-color-3/#color0 title=color>color</a> 2.1906 - even as <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-color-3/#color0 title=color>color</a> changes across elements. 2.1907 + 2.1908 + <p class="note" role="note"> 2.1909 + The <dfn class="css" data-dfn-for="text-emphasis-color" data-dfn-type="value" data-export="" id="valdef-text-emphasis-color-currentcolor">currentcolor<a class="self-link" href="#valdef-text-emphasis-color-currentcolor"></a></dfn> keyword computes to itself 2.1910 + and is resolved to the value of <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-color-3/#color0">color</a> after inheritance is performed. 2.1911 + This means <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis-color">text-emphasis-color</a> by default matches the text <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-color-3/#color0">color</a> 2.1912 + even as <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-color-3/#color0">color</a> changes across elements. 2.1913 2.1914 -<h3 class="heading settled heading" data-level=3.3 id=text-emphasis-property><span class=secno>3.3 </span><span class=content> 2.1915 -Emphasis Mark Shorthand: the <a class=property data-link-type=propdesc href=#propdef-text-emphasis title=text-emphasis>text-emphasis</a> property</span><a class=self-link href=#text-emphasis-property></a></h3> 2.1916 +</p> 2.1917 + <h3 class="heading settled" data-level="3.3" id="text-emphasis-property"><span class="secno">3.3. </span><span class="content"> 2.1918 +Emphasis Mark Shorthand: the <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis">text-emphasis</a> property</span><a class="self-link" href="#text-emphasis-property"></a></h3> 2.1919 2.1920 - <table class=propdef> 2.1921 - <tr> 2.1922 + 2.1923 + <table class="propdef"> 2.1924 + 2.1925 + <tbody> 2.1926 + <tr> 2.1927 + 2.1928 <th>Name: 2.1929 - <td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-text-emphasis>text-emphasis<a class=self-link href=#propdef-text-emphasis></a></dfn><tr> 2.1930 - <th><a href=#values>Value</a>: 2.1931 - <td>'<<a href=#text-emphasis-style>text-emphasis-style</a>>' || '<<a href=#text-emphasis-color>text-emphasis-color</a>>' 2.1932 + 2.1933 + <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-text-emphasis">text-emphasis<a class="self-link" href="#propdef-text-emphasis"></a></dfn> 2.1934 + <tr> 2.1935 + 2.1936 + <th><a href="#values">Value</a>: 2.1937 + 2.1938 + <td><a class="production" data-link-type="propdesc" href="#propdef-text-emphasis-style"><‘text-emphasis-style’></a> || <a class="production" data-link-type="propdesc" href="#propdef-text-emphasis-color"><‘text-emphasis-color’></a> 2.1939 2.1940 - <tr> 2.1941 + 2.1942 + <tr> 2.1943 + 2.1944 <th>Initial: 2.1945 + 2.1946 <td>see individual properties 2.1947 - <tr> 2.1948 + 2.1949 + <tr> 2.1950 + 2.1951 <th>Applies to: 2.1952 + 2.1953 <td>all elements 2.1954 - <tr> 2.1955 + 2.1956 + <tr> 2.1957 + 2.1958 <th>Inherited: 2.1959 + 2.1960 <td>yes 2.1961 - <tr> 2.1962 + 2.1963 + <tr> 2.1964 + 2.1965 <th>Percentages: 2.1966 + 2.1967 <td>N/A 2.1968 - <tr> 2.1969 + 2.1970 + <tr> 2.1971 + 2.1972 <th>Media: 2.1973 + 2.1974 <td>visual 2.1975 - <tr> 2.1976 + 2.1977 + <tr> 2.1978 + 2.1979 <th>Computed value: 2.1980 + 2.1981 <td>see individual properties 2.1982 - <tr> 2.1983 + 2.1984 + <tr> 2.1985 + 2.1986 <th>Animatable: 2.1987 + 2.1988 <td>see individual properties 2.1989 - </table> 2.1990 + 2.1991 + </table> 2.1992 2.1993 - <p>This property is a shorthand for setting 2.1994 - <a class=property data-link-type=propdesc href=#propdef-text-emphasis-style title=text-emphasis-style>text-emphasis-style</a> and <a class=property data-link-type=propdesc href=#propdef-text-emphasis-color title=text-emphasis-color>text-emphasis-color</a> 2.1995 + 2.1996 + <p>This property is a shorthand for setting 2.1997 + <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis-style">text-emphasis-style</a> and <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis-color">text-emphasis-color</a> 2.1998 in one declaration. 2.1999 Omitted values are set to their initial values.</p> 2.2000 2.2001 - <p class=note>Note that <a class=property data-link-type=propdesc href=#propdef-text-emphasis-position title=text-emphasis-position>text-emphasis-position</a> is not reset in this 2.2002 + 2.2003 + <p class="note" role="note">Note that <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis-position">text-emphasis-position</a> is not reset in this 2.2004 shorthand. This is because typically the shape and color vary, but the 2.2005 position is consistent for a particular language throughout the document. 2.2006 Therefore the position should inherit independently.</p> 2.2007 2.2008 -<h3 class="heading settled heading" data-level=3.4 id=text-emphasis-position-property><span class=secno>3.4 </span><span class=content> 2.2009 -Emphasis Mark Position: the <a class=property data-link-type=propdesc href=#propdef-text-emphasis-position title=text-emphasis-position>text-emphasis-position</a> property</span><a class=self-link href=#text-emphasis-position-property></a></h3> 2.2010 2.2011 - <table class=propdef> 2.2012 - <tr> 2.2013 + <h3 class="heading settled" data-level="3.4" id="text-emphasis-position-property"><span class="secno">3.4. </span><span class="content"> 2.2014 +Emphasis Mark Position: the <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis-position">text-emphasis-position</a> property</span><a class="self-link" href="#text-emphasis-position-property"></a></h3> 2.2015 + 2.2016 + 2.2017 + <table class="propdef"> 2.2018 + 2.2019 + <tbody> 2.2020 + <tr> 2.2021 + 2.2022 <th>Name: 2.2023 - <td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-text-emphasis-position>text-emphasis-position<a class=self-link href=#propdef-text-emphasis-position></a></dfn><tr> 2.2024 - <th><a href=#values>Value</a>: 2.2025 + 2.2026 + <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-text-emphasis-position">text-emphasis-position<a class="self-link" href="#propdef-text-emphasis-position"></a></dfn> 2.2027 + <tr> 2.2028 + 2.2029 + <th><a href="#values">Value</a>: 2.2030 + 2.2031 <td>[ over | under ] && [ right | left ] 2.2032 2.2033 - <tr> 2.2034 + 2.2035 + <tr> 2.2036 + 2.2037 <th>Initial: 2.2038 + 2.2039 <td>over right 2.2040 - <tr> 2.2041 + 2.2042 + <tr> 2.2043 + 2.2044 <th>Applies to: 2.2045 + 2.2046 <td>all elements 2.2047 - <tr> 2.2048 + 2.2049 + <tr> 2.2050 + 2.2051 <th>Inherited: 2.2052 + 2.2053 <td>yes 2.2054 - <tr> 2.2055 + 2.2056 + <tr> 2.2057 + 2.2058 <th>Percentages: 2.2059 + 2.2060 <td>N/A 2.2061 - <tr> 2.2062 + 2.2063 + <tr> 2.2064 + 2.2065 <th>Media: 2.2066 + 2.2067 <td>visual 2.2068 - <tr> 2.2069 + 2.2070 + <tr> 2.2071 + 2.2072 <th>Computed value: 2.2073 + 2.2074 <td>as specified 2.2075 - <tr> 2.2076 + 2.2077 + <tr> 2.2078 + 2.2079 <th>Animatable: 2.2080 + 2.2081 <td>no 2.2082 - </table> 2.2083 + 2.2084 + </table> 2.2085 2.2086 - <p>This property describes where emphasis marks are drawn at. 2.2087 + 2.2088 + <p>This property describes where emphasis marks are drawn at. 2.2089 The values have following meanings:</p> 2.2090 2.2091 - <dl> 2.2092 - <dt><dfn class=css-code data-dfn-for=text-text-emphasis-position data-dfn-type=value data-export="" id=valuedef-over>over<a class=self-link href=#valuedef-over></a></dfn></dt> 2.2093 - <dd>Draw marks over the text in horizontal writing mode.</dd> 2.2094 - <dt><dfn class=css-code data-dfn-for=text-text-emphasis-position data-dfn-type=value data-export="" id=valuedef-under>under<a class=self-link href=#valuedef-under></a></dfn></dt> 2.2095 - <dd>Draw marks under the text in horizontal writing mode.</dd> 2.2096 - <dt><dfn class=css-code data-dfn-for=text-text-emphasis-position data-dfn-type=value data-export="" id=valuedef-right>right<a class=self-link href=#valuedef-right></a></dfn></dt> 2.2097 - <dd>Draw marks to the right of the text in vertical writing mode.</dd> 2.2098 - <dt><dfn class=css-code data-dfn-for=text-text-emphasis-position data-dfn-type=value data-export="" id=valuedef-left>left<a class=self-link href=#valuedef-left></a></dfn></dt> 2.2099 - <dd>Draw marks to the left of the text in vertical writing mode.</dd> 2.2100 - </dl> 2.2101 + 2.2102 + <dl> 2.2103 + 2.2104 + <dt><dfn class="css" data-dfn-for="text-text-emphasis-position" data-dfn-type="value" data-export="" id="valdef-text-text-emphasis-position-over">over<a class="self-link" href="#valdef-text-text-emphasis-position-over"></a></dfn> 2.2105 + 2.2106 + 2.2107 + <dd>Draw marks over the text in horizontal writing mode. 2.2108 + 2.2109 + 2.2110 + <dt><dfn class="css" data-dfn-for="text-text-emphasis-position" data-dfn-type="value" data-export="" id="valdef-text-text-emphasis-position-under">under<a class="self-link" href="#valdef-text-text-emphasis-position-under"></a></dfn> 2.2111 + 2.2112 + 2.2113 + <dd>Draw marks under the text in horizontal writing mode. 2.2114 + 2.2115 + 2.2116 + <dt><dfn class="css" data-dfn-for="text-text-emphasis-position" data-dfn-type="value" data-export="" id="valdef-text-text-emphasis-position-right">right<a class="self-link" href="#valdef-text-text-emphasis-position-right"></a></dfn> 2.2117 + 2.2118 + 2.2119 + <dd>Draw marks to the right of the text in vertical writing mode. 2.2120 + 2.2121 + 2.2122 + <dt><dfn class="css" data-dfn-for="text-text-emphasis-position" data-dfn-type="value" data-export="" id="valdef-text-text-emphasis-position-left">left<a class="self-link" href="#valdef-text-text-emphasis-position-left"></a></dfn> 2.2123 + 2.2124 + 2.2125 + <dd>Draw marks to the left of the text in vertical writing mode. 2.2126 + 2.2127 + 2.2128 + </dl> 2.2129 2.2130 - <p>Emphasis marks are drawn exactly as if each character was 2.2131 + 2.2132 + <p>Emphasis marks are drawn exactly as if each character was 2.2133 assigned the mark as its ruby annotation text with the ruby position 2.2134 - given by <a class=property data-link-type=propdesc href=#propdef-text-emphasis-position title=text-emphasis-position>text-emphasis-position</a> and the ruby alignment as centered. 2.2135 + given by <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis-position">text-emphasis-position</a> and the ruby alignment as centered. 2.2136 2.2137 - <p>The effect of emphasis marks on the line height is the same as for 2.2138 + </p> 2.2139 + <p>The effect of emphasis marks on the line height is the same as for 2.2140 ruby text.</p> 2.2141 2.2142 - <div class=note> 2.2143 + 2.2144 + <div class="note" role="note"> 2.2145 + 2.2146 <p>Note, the preferred position of emphasis marks depends on the 2.2147 language. In Japanese for example, the preferred position is 2.2148 - <span class=css data-link-type=maybe title="over right">over right</span>. In Chinese, on the other hand, the preferred 2.2149 - position is <span class=css data-link-type=maybe title="under right">under right</span>. 2.2150 + <span class="css">over right</span>. In Chinese, on the other hand, the preferred 2.2151 + position is <span class="css">under right</span>. 2.2152 The informative table below summarizes the preferred 2.2153 emphasis mark positions for Chinese and Japanese:</p> 2.2154 + 2.2155 2.2156 - <table class=data> 2.2157 - <caption>Preferred emphasis mark and ruby position</caption> 2.2158 - <thead> 2.2159 - <tr> 2.2160 - <th rowspan=2 scope=col>Language 2.2161 - <th colspan=2 scope=col>Preferred position 2.2162 - <th colspan=2 rowspan=2 scope=col>Illustration 2.2163 - <tr> 2.2164 - <th>Horizontal 2.2165 - <th>Vertical 2.2166 - </thead> 2.2167 - <tbody> 2.2168 - <tr> 2.2169 - <td scope=row>Japanese 2.2170 - <td rowspan=2>over 2.2171 - <td rowspan=2>right 2.2172 - <td rowspan=2> 2.2173 - <img alt="Emphasis marks appear over each emphasized character in horizontal Japanese text." height=28 src=text-emphasis-ja.gif title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text" width=225> 2.2174 + 2.2175 + <table class="data"> 2.2176 + 2.2177 + <caption>Preferred emphasis mark and ruby position</caption> 2.2178 + 2.2179 + 2.2180 + <thead> 2.2181 + 2.2182 + <tr> 2.2183 + 2.2184 + <th rowspan="2" scope="col">Language 2.2185 + 2.2186 + <th colspan="2" scope="col">Preferred position 2.2187 + 2.2188 + <th colspan="2" rowspan="2" scope="col">Illustration 2.2189 + 2.2190 + <tr> 2.2191 + 2.2192 + <th>Horizontal 2.2193 + 2.2194 + <th>Vertical 2.2195 + 2.2196 + 2.2197 + 2.2198 + <tbody> 2.2199 + 2.2200 + <tr> 2.2201 + 2.2202 + <td scope="row">Japanese 2.2203 + 2.2204 + <td rowspan="2">over 2.2205 + 2.2206 + <td rowspan="2">right 2.2207 + 2.2208 + <td rowspan="2"> 2.2209 + <img alt="Emphasis marks appear over each emphasized character in horizontal Japanese text." height="28" src="text-emphasis-ja.gif" title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text" width="225"> 2.2210 2.2211 - <td rowspan=3> 2.2212 - <img alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text." height=89 src=text-emphasis-v.gif title="Emphasis applied on the right of a fragment of Japanese text" width=34> 2.2213 + 2.2214 + <td rowspan="3"> 2.2215 + <img alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text." height="89" src="text-emphasis-v.gif" title="Emphasis applied on the right of a fragment of Japanese text" width="34"> 2.2216 2.2217 - <tr> 2.2218 - <td scope=row>Mongolian 2.2219 - <tr> 2.2220 - <td scope=row>Chinese 2.2221 - <td>under 2.2222 - <td>right 2.2223 - <td> 2.2224 - <img alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text." height=28 src=text-emphasis-zh.gif title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text" width=133> 2.2225 - </tbody> 2.2226 + 2.2227 + <tr> 2.2228 + 2.2229 + <td scope="row">Mongolian 2.2230 + 2.2231 + <tr> 2.2232 + 2.2233 + <td scope="row">Chinese 2.2234 + 2.2235 + <td>under 2.2236 + 2.2237 + <td>right 2.2238 + 2.2239 + <td> 2.2240 + <img alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text." height="28" src="text-emphasis-zh.gif" title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text" width="133"> 2.2241 + 2.2242 + 2.2243 + 2.2244 </table> 2.2245 - </div> 2.2246 + 2.2247 + 2.2248 + </div> 2.2249 2.2250 - <p>If emphasis marks are applied to characters 2.2251 + 2.2252 + <p>If emphasis marks are applied to characters 2.2253 for which ruby is drawn in the same position as the emphasis mark, 2.2254 the emphasis marks are placed above the ruby. 2.2255 2.2256 - <div class=figure> 2.2257 + </p> 2.2258 + <div class="figure"> 2.2259 + 2.2260 <p><img alt="In this example, emphasis marks are applied to 4 characters, two of which have ruby. 2.2261 The dots are placed above each character (aligned with the ruby) for the bare characters, 2.2262 - and above the ruby text for the annotated characters." height=50 src=text-emphasis-ruby.png width=134></p> 2.2263 - <p class=caption>Emphasis marks applied to 4 characters, with ruby also on 2 of them</p> 2.2264 - </div> 2.2265 + and above the ruby text for the annotated characters." height="50" src="text-emphasis-ruby.png" width="134"></p> 2.2266 + 2.2267 + 2.2268 + <p class="caption">Emphasis marks applied to 4 characters, with ruby also on 2 of them</p> 2.2269 + 2.2270 + 2.2271 + </div> 2.2272 2.2273 - <div class=example> 2.2274 + 2.2275 + <div class="example"> 2.2276 + 2.2277 <p>Some editors prefer to hide emphasis marks when they conflict with ruby. 2.2278 In HTML, this can be done with the following style rule: 2.2279 -<pre>ruby { text-emphasis: none; }</pre> <p>Some other editors prefer to hide ruby when they conflict with emphasis marks. 2.2280 +</p> 2.2281 + <pre>ruby { text-emphasis: none; }</pre> 2.2282 + 2.2283 + 2.2284 + <p>Some other editors prefer to hide ruby when they conflict with emphasis marks. 2.2285 In HTML, this can be done with the following pattern: 2.2286 - <pre>em { text-emphasis: dot; } /* Set text-emphasis for <em> elements */ 2.2287 -em rt { display: none; } /* Hide ruby inside <em> elements */</pre> </div> 2.2288 + </p> 2.2289 + <pre>em { text-emphasis: dot; } /* Set text-emphasis for <em> elements */em rt { display: none; } /* Hide ruby inside <em> elements */</pre> 2.2290 + 2.2291 + 2.2292 + </div> 2.2293 2.2294 -<h2 class="heading settled heading" data-level=4 id=text-shadow-property><span class=secno>4 </span><span class=content> 2.2295 -Text Shadows: the <a class=property data-link-type=propdesc href=#propdef-text-shadow title=text-shadow>text-shadow</a> property</span><a class=self-link href=#text-shadow-property></a></h2> 2.2296 2.2297 - <table class=propdef> 2.2298 - <tr> 2.2299 + <h2 class="heading settled" data-level="4" id="text-shadow-property"><span class="secno">4. </span><span class="content"> 2.2300 +Text Shadows: the <a class="property" data-link-type="propdesc" href="#propdef-text-shadow">text-shadow</a> property</span><a class="self-link" href="#text-shadow-property"></a></h2> 2.2301 + 2.2302 + 2.2303 + <table class="propdef"> 2.2304 + 2.2305 + <tbody> 2.2306 + <tr> 2.2307 + 2.2308 <th>Name: 2.2309 - <td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-text-shadow>text-shadow<a class=self-link href=#propdef-text-shadow></a></dfn><tr> 2.2310 - <th><a href=#values>Value</a>: 2.2311 - <td>none | [ <length>{2,3} && <color>? ]# 2.2312 - <tr> 2.2313 + 2.2314 + <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-text-shadow">text-shadow<a class="self-link" href="#propdef-text-shadow"></a></dfn> 2.2315 + <tr> 2.2316 + 2.2317 + <th><a href="#values">Value</a>: 2.2318 + 2.2319 + <td>none | [ <length>{2,3} && <color>? ]# 2.2320 + 2.2321 + <tr> 2.2322 + 2.2323 <th>Initial: 2.2324 + 2.2325 <td>none 2.2326 - <tr> 2.2327 + 2.2328 + <tr> 2.2329 + 2.2330 <th>Applies to: 2.2331 + 2.2332 <td>all elements 2.2333 - <tr> 2.2334 + 2.2335 + <tr> 2.2336 + 2.2337 <th>Inherited: 2.2338 + 2.2339 <td>yes 2.2340 - <tr> 2.2341 + 2.2342 + <tr> 2.2343 + 2.2344 <th>Percentages: 2.2345 + 2.2346 <td>N/A 2.2347 - <tr> 2.2348 + 2.2349 + <tr> 2.2350 + 2.2351 <th>Media: 2.2352 + 2.2353 <td>visual 2.2354 - <tr> 2.2355 + 2.2356 + <tr> 2.2357 + 2.2358 <th>Computed value: 2.2359 - <td>a color plus three absolute <length>s 2.2360 - <tr> 2.2361 + 2.2362 + <td>a color plus three absolute <length>s 2.2363 + 2.2364 + <tr> 2.2365 + 2.2366 <th>Animatable: 2.2367 - <td>as <a href=http://www.w3.org/TR/css3-transitions/#animtype-shadow-list>shadow list</a> 2.2368 - </table> 2.2369 + 2.2370 + <td>as <a href="http://www.w3.org/TR/css3-transitions/#animtype-shadow-list">shadow list</a> 2.2371 + 2.2372 + </table> 2.2373 2.2374 - <p>This property accepts a comma-separated list of shadow effects to 2.2375 + 2.2376 + <p>This property accepts a comma-separated list of shadow effects to 2.2377 be applied to the text of the element. Values are interpreted as for 2.2378 - <a href=http://www.w3.org/TR/css3-background/#the-box-shadow><a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-3/#box-shadow title=box-shadow>box-shadow</a></a> 2.2379 - <a data-biblio-type=normative data-link-type=biblio href=#css3bg title=css3bg>[CSS3BG]</a>. 2.2380 - (But note that spread values and the <span class=css data-link-type=maybe title=inset>inset</span> keyword are not allowed.) 2.2381 + <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-backgrounds-3/#box-shadow">box-shadow</a> 2.2382 + <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a>. 2.2383 + (But note that spread values and the <span class="css">inset</span> keyword are not allowed.) 2.2384 Each layer shadows the element’s text and all its text decorations 2.2385 (composited together). 2.2386 If the color of the shadow is not specified, 2.2387 the shadow has the resulting color of the ink that it shadows. 2.2388 2.2389 - <p>The shadow effects are applied front-to-back: the first shadow is on 2.2390 + </p> 2.2391 + <p>The shadow effects are applied front-to-back: the first shadow is on 2.2392 top. The shadows may thus overlay each other, but they never overlay 2.2393 the text itself. The shadow must be painted at a stack level between 2.2394 the element’s border and/or background, if present, and the elements 2.2395 @@ -1110,212 +1853,59 @@ 2.2396 each glyph or decoration independently 2.2397 or if the text and/or decorations are flattened and then shadowed. 2.2398 2.2399 - <p>Unlike <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-3/#box-shadow title=box-shadow>box-shadow</a>, text shadows are not clipped to the shadowed 2.2400 + </p> 2.2401 + <p>Unlike <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-backgrounds-3/#box-shadow">box-shadow</a>, text shadows are not clipped to the shadowed 2.2402 shape and may show through if the text is partially-transparent. 2.2403 - Like <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-3/#box-shadow title=box-shadow>box-shadow</a>, text shadows do not influence layout, and do not 2.2404 + Like <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-backgrounds-3/#box-shadow">box-shadow</a>, text shadows do not influence layout, and do not 2.2405 trigger scrolling or increase the size of the scrollable area. 2.2406 2.2407 - <p class=note>The painting order of shadows defined here is the opposite 2.2408 + </p> 2.2409 + <p class="note" role="note">The painting order of shadows defined here is the opposite 2.2410 of that defined in the 1998 2.2411 - <a href=http://www.w3.org/TR/1998/REC-CSS2-19980512>CSS2 Recommendation</a>.</p> 2.2412 + <a href="http://www.w3.org/TR/1998/REC-CSS2-19980512">CSS2 Recommendation</a>.</p> 2.2413 2.2414 - <p>The <span class=css data-link-type=maybe title=text-shadow>text-shadow</span> property applies to both the 2.2415 + 2.2416 + <p>The <span class="css">text-shadow</span> property applies to both the 2.2417 <code>::first-line</code> and <code>::first-letter</code> 2.2418 pseudo-elements.</p> 2.2419 2.2420 -<h2 class="heading settled heading" data-level=5 id=painting-order><span class=secno>5 </span><span class=content> 2.2421 -Painting Order of Text Decorations</span><a class=self-link href=#painting-order></a></h2> 2.2422 2.2423 - <p> 2.2424 - As in <a data-biblio-type=normative data-link-type=biblio href=#css21 title=css21>[CSS21]</a>, text decorations are drawn immediately over/under the text they decorate, 2.2425 + <h2 class="heading settled" data-level="5" id="painting-order"><span class="secno">5. </span><span class="content"> 2.2426 +Painting Order of Text Decorations</span><a class="self-link" href="#painting-order"></a></h2> 2.2427 + 2.2428 + 2.2429 + <p> 2.2430 + As in <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>, text decorations are drawn immediately over/under the text they decorate, 2.2431 in the following order (bottommost first): 2.2432 - <ul> 2.2433 - <li>shadows (<a class=property data-link-type=propdesc href=#propdef-text-shadow title=text-shadow>text-shadow</a>) 2.2434 - <li>underlines (<a class=property data-link-type=propdesc href=#propdef-text-decoration title=text-decoration>text-decoration</a>) 2.2435 - <li>overlines (<a class=property data-link-type=propdesc href=#propdef-text-decoration title=text-decoration>text-decoration</a>) 2.2436 + </p> 2.2437 + <ul> 2.2438 + 2.2439 + <li>shadows (<a class="property" data-link-type="propdesc" href="#propdef-text-shadow">text-shadow</a>) 2.2440 + 2.2441 + <li>underlines (<a class="property" data-link-type="propdesc" href="#propdef-text-decoration">text-decoration</a>) 2.2442 + 2.2443 + <li>overlines (<a class="property" data-link-type="propdesc" href="#propdef-text-decoration">text-decoration</a>) 2.2444 + 2.2445 <li>text 2.2446 - <li>emphasis marks (<a class=property data-link-type=propdesc href=#propdef-text-emphasis title=text-emphasis>text-emphasis</a>) 2.2447 - <li>line-through (<a class=property data-link-type=propdesc href=#propdef-text-decoration title=text-decoration>text-decoration</a>) 2.2448 - </ul> 2.2449 + 2.2450 + <li>emphasis marks (<a class="property" data-link-type="propdesc" href="#propdef-text-emphasis">text-emphasis</a>) 2.2451 + 2.2452 + <li>line-through (<a class="property" data-link-type="propdesc" href="#propdef-text-decoration">text-decoration</a>) 2.2453 + 2.2454 + </ul> 2.2455 2.2456 - <p> 2.2457 + 2.2458 + <p> 2.2459 Where line decorations are drawn across box decorations or atomic inlines, 2.2460 they are drawn over non-positioned content and just below any positioned descendants 2.2461 (immediately below layer #8 in CSS2.1 Appendix E). 2.2462 2.2463 -<h2 class="heading settled heading" data-level=6 id=conformance0><span class=secno>6 </span><span class=content> 2.2464 -Conformance</span><a class=self-link href=#conformance0></a></h2> 2.2465 +</p> 2.2466 + <h2 class="no-num heading settled" id="acknowledgements"><span class="content"> 2.2467 + Appendix A: Acknowledgements</span><a class="self-link" href="#acknowledgements"></a></h2> 2.2468 2.2469 -<h3 class="heading settled heading" data-level=6.1 id=conventions0><span class=secno>6.1 </span><span class=content> 2.2470 -Document Conventions</span><a class=self-link href=#conventions0></a></h3> 2.2471 - 2.2472 - <p>Conformance requirements are expressed with a combination of 2.2473 - descriptive assertions and RFC 2119 terminology. The key words “MUSTâ€, 2.2474 - “MUST NOTâ€, “REQUIREDâ€, “SHALLâ€, “SHALL NOTâ€, “SHOULDâ€, “SHOULD NOTâ€, 2.2475 - “RECOMMENDEDâ€, “MAYâ€, and “OPTIONAL†in the normative parts of this 2.2476 - document are to be interpreted as described in RFC 2119. 2.2477 - However, for readability, these words do not appear in all uppercase 2.2478 - letters in this specification. 2.2479 - 2.2480 - <p>All of the text of this specification is normative except sections 2.2481 - explicitly marked as non-normative, examples, and notes. <a data-biblio-type=normative data-link-type=biblio href=#rfc2119 title=rfc2119>[RFC2119]</a></p> 2.2482 - 2.2483 - <p>Examples in this specification are introduced with the words “for example†2.2484 - or are set apart from the normative text with <code>class="example"</code>, 2.2485 - like this: 2.2486 - 2.2487 - <div class=example> 2.2488 - <p>This is an example of an informative example.</p> 2.2489 - </div> 2.2490 - 2.2491 - <p>Informative notes begin with the word “Note†and are set apart from the 2.2492 - normative text with <code>class="note"</code>, like this: 2.2493 - 2.2494 - <p class=note>Note, this is an informative note.</p> 2.2495 - 2.2496 -<h3 class="heading settled heading" data-level=6.2 id=conformance-classes0><span class=secno>6.2 </span><span class=content> 2.2497 -Conformance Classes</span><a class=self-link href=#conformance-classes0></a></h3> 2.2498 - 2.2499 - <p>Conformance to CSS Text Level 3 2.2500 - is defined for three conformance classes: 2.2501 - <dl> 2.2502 - <dt><dfn data-dfn-type=dfn data-noexport="" id=style-sheetas-conformance-class title="style sheet!!as conformance class">style sheet<a class=self-link href=#style-sheetas-conformance-class></a></dfn> 2.2503 - <dd>A <a href=http://www.w3.org/TR/CSS21/conform.html#style-sheet>CSS 2.2504 - style sheet</a>. 2.2505 - <dt><dfn data-dfn-type=dfn data-noexport="" id=renderer>renderer<a class=self-link href=#renderer></a></dfn></dt> 2.2506 - <dd>A <a href=http://www.w3.org/TR/CSS21/conform.html#user-agent>UA</a> 2.2507 - that interprets the semantics of a style sheet and renders 2.2508 - documents that use them. 2.2509 - <dt><dfn data-dfn-type=dfn data-noexport="" id=authoring-tool>authoring tool<a class=self-link href=#authoring-tool></a></dfn></dt> 2.2510 - <dd>A <a href=http://www.w3.org/TR/CSS21/conform.html#user-agent>UA</a> 2.2511 - that writes a style sheet. 2.2512 - </dl> 2.2513 - 2.2514 - <p>A style sheet is conformant to CSS Text Level 3 2.2515 - if all of its declarations that use properties defined in this module 2.2516 - have values that are valid according to the generic CSS grammar and the 2.2517 - individual grammars of each property as given in this module. 2.2518 - 2.2519 - <p>A renderer is conformant to CSS Text Level 3 2.2520 - if, in addition to interpreting the style sheet as defined by the 2.2521 - appropriate specifications, it supports all the features defined 2.2522 - by CSS Text Level 3 by parsing them correctly 2.2523 - and rendering the document accordingly. However, the inability of a 2.2524 - UA to correctly render a document due to limitations of the device 2.2525 - does not make the UA non-conformant. (For example, a UA is not 2.2526 - required to render color on a monochrome monitor.) 2.2527 - 2.2528 - <p>An authoring tool is conformant to CSS Text Level 3 2.2529 - if it writes style sheets that are syntactically correct according to the 2.2530 - generic CSS grammar and the individual grammars of each feature in 2.2531 - this module, and meet all other conformance requirements of style sheets 2.2532 - as described in this module. 2.2533 - 2.2534 -<h3 class="heading settled heading" data-level=6.3 id=partial0><span class=secno>6.3 </span><span class=content> 2.2535 -Partial Implementations</span><a class=self-link href=#partial0></a></h3> 2.2536 - 2.2537 - <p>So that authors can exploit the forward-compatible parsing rules to 2.2538 - assign fallback values, CSS renderers <strong>must</strong> 2.2539 - treat as invalid (and <a href=http://www.w3.org/TR/CSS21/conform.html#ignore>ignore 2.2540 - as appropriate</a>) any at-rules, properties, property values, keywords, 2.2541 - and other syntactic constructs for which they have no usable level of 2.2542 - support. In particular, user agents <strong>must not</strong> selectively 2.2543 - ignore unsupported component values and honor supported values in a single 2.2544 - multi-value property declaration: if any value is considered invalid 2.2545 - (as unsupported values must be), CSS requires that the entire declaration 2.2546 - be ignored.</p> 2.2547 - 2.2548 -<h3 class="heading settled heading" data-level=6.4 id=experimental0><span class=secno>6.4 </span><span class=content> 2.2549 -Experimental Implementations</span><a class=self-link href=#experimental0></a></h3> 2.2550 - 2.2551 - <p>To avoid clashes with future CSS features, the CSS2.1 specification 2.2552 - reserves a <a href=http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords>prefixed 2.2553 - syntax</a> for proprietary and experimental extensions to CSS. 2.2554 - 2.2555 - <p>Prior to a specification reaching the Candidate Recommendation stage 2.2556 - in the W3C process, all implementations of a CSS feature are considered 2.2557 - experimental. The CSS Working Group recommends that implementations 2.2558 - use a vendor-prefixed syntax for such features, including those in 2.2559 - W3C Working Drafts. This avoids incompatibilities with future changes 2.2560 - in the draft. 2.2561 - </p> 2.2562 - 2.2563 -<h3 class="heading settled heading" data-level=6.5 id=testing0><span class=secno>6.5 </span><span class=content>Non-Experimental Implementations</span><a class=self-link href=#testing0></a></h3> 2.2564 - 2.2565 - <p>Once a specification reaches the Candidate Recommendation stage, 2.2566 - non-experimental implementations are possible, and implementors should 2.2567 - release an unprefixed implementation of any CR-level feature they 2.2568 - can demonstrate to be correctly implemented according to spec. 2.2569 - 2.2570 - <p>To establish and maintain the interoperability of CSS across 2.2571 - implementations, the CSS Working Group requests that non-experimental 2.2572 - CSS renderers submit an implementation report (and, if necessary, the 2.2573 - testcases used for that implementation report) to the W3C before 2.2574 - releasing an unprefixed implementation of any CSS features. Testcases 2.2575 - submitted to W3C are subject to review and correction by the CSS 2.2576 - Working Group. 2.2577 - 2.2578 - <p>Further information on submitting testcases and implementation reports 2.2579 - can be found from on the CSS Working Group’s website at 2.2580 - <a href=http://www.w3.org/Style/CSS/Test/>http://www.w3.org/Style/CSS/Test/</a>. 2.2581 - Questions should be directed to the 2.2582 - <a href=http://lists.w3.org/Archives/Public/public-css-testsuite>[email protected]</a> 2.2583 - mailing list. 2.2584 - 2.2585 -<h3 class="heading settled heading" data-level=6.6 id=cr-exit-criteria><span class=secno>6.6 </span><span class=content> 2.2586 -CR Exit Criteria</span><a class=self-link href=#cr-exit-criteria></a></h3> 2.2587 - 2.2588 - <p> 2.2589 - For this specification to be advanced to Proposed Recommendation, 2.2590 - there must be at least two independent, interoperable implementations 2.2591 - of each feature. Each feature may be implemented by a different set of 2.2592 - products, there is no requirement that all features be implemented by 2.2593 - a single product. For the purposes of this criterion, we define the 2.2594 - following terms: 2.2595 - 2.2596 - <dl> 2.2597 - <dt>independent <dd>each implementation must be developed by a 2.2598 - different party and cannot share, reuse, or derive from code 2.2599 - used by another qualifying implementation. Sections of code that 2.2600 - have no bearing on the implementation of this specification are 2.2601 - exempt from this requirement. 2.2602 - 2.2603 - <dt>interoperable <dd>passing the respective test case(s) in the 2.2604 - official CSS test suite, or, if the implementation is not a Web 2.2605 - browser, an equivalent test. Every relevant test in the test 2.2606 - suite should have an equivalent test created if such a user 2.2607 - agent (UA) is to be used to claim interoperability. In addition 2.2608 - if such a UA is to be used to claim interoperability, then there 2.2609 - must one or more additional UAs which can also pass those 2.2610 - equivalent tests in the same way for the purpose of 2.2611 - interoperability. The equivalent tests must be made publicly 2.2612 - available for the purposes of peer review. 2.2613 - 2.2614 - <dt>implementation <dd>a user agent which: 2.2615 - 2.2616 - <ol class=inline> 2.2617 - <li>implements the specification. 2.2618 - 2.2619 - <li>is available to the general public. The implementation may 2.2620 - be a shipping product or other publicly available version 2.2621 - (i.e., beta version, preview release, or “nightly buildâ€). 2.2622 - Non-shipping product releases must have implemented the 2.2623 - feature(s) for a period of at least one month in order to 2.2624 - demonstrate stability. 2.2625 - 2.2626 - <li>is not experimental (i.e., a version specifically designed 2.2627 - to pass the test suite and is not intended for normal usage 2.2628 - going forward). 2.2629 - </ol> 2.2630 - </dl> 2.2631 - 2.2632 - <p>The specification will remain Candidate Recommendation for at least 2.2633 - six months. 2.2634 - 2.2635 -<h2 class="no-num heading settled heading" id=acknowledgements><span class=content> 2.2636 - Appendix A: Acknowledgements</span><a class=self-link href=#acknowledgements></a></h2> 2.2637 - 2.2638 - <p>This specification would not have been possible without the help from: 2.2639 + 2.2640 + <p>This specification would not have been possible without the help from: 2.2641 Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett, 2.2642 Martin Dürst, 2.2643 Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye Gittelman, Ian 2.2644 @@ -1326,32 +1916,43 @@ 2.2645 Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi Yabe 2.2646 and Steve Zilles.</p> 2.2647 2.2648 -<h2 class="no-num heading settled heading" id=changes><span class=content>Appendix B: 2.2649 -Changes</span><a class=self-link href=#changes></a></h2> 2.2650 2.2651 - <h3 class="no-num heading settled heading" id=recent-changes><span class=content> 2.2652 - Changes since the <a href=http://www.w3.org/TR/2013/WD-css-text-decor-3-20130103/>January 2013 Last Call Working Draft</a></span><a class=self-link href=#recent-changes></a></h3> 2.2653 + <h2 class="no-num heading settled" id="changes"><span class="content">Appendix B: 2.2654 +Changes</span><a class="self-link" href="#changes"></a></h2> 2.2655 2.2656 - <p>Significant changes include:</p> 2.2657 + 2.2658 + <h3 class="no-num heading settled" id="recent-changes"><span class="content"> 2.2659 + Changes since the <a href="http://www.w3.org/TR/2013/WD-css-text-decor-3-20130103/">January 2013 Last Call Working Draft</a></span><a class="self-link" href="#recent-changes"></a></h3> 2.2660 2.2661 -<p> <ul> 2.2662 - <li>Clarified definitions of <a class=property data-link-type=propdesc href=#propdef-text-decoration-skip title=text-decoration-skip>text-decoration-skip</a> values. 2.2663 + 2.2664 + <p>Significant changes include:</p> 2.2665 + 2.2666 + 2.2667 + <ul> 2.2668 + 2.2669 + <li>Clarified definitions of <a class="property" data-link-type="propdesc" href="#propdef-text-decoration-skip">text-decoration-skip</a> values. 2.2670 + 2.2671 <li>Updated required behavior of emphasis marks in the presence of ruby, based on implementation feedback. 2.2672 - </ul> 2.2673 + 2.2674 + </ul> 2.2675 2.2676 - <p>A <a href=issues-lc-2013>Disposition of Comments</a> is available. 2.2677 + 2.2678 + <p>A <a href="issues-lc-2013">Disposition of Comments</a> is available. 2.2679 2.2680 -<h2 class="no-num heading settled heading" id=default-stylesheet><span class=content> 2.2681 -Appendix C: Default UA Stylesheet</span><a class=self-link href=#default-stylesheet></a></h2> 2.2682 +</p> 2.2683 + <h2 class="no-num heading settled" id="default-stylesheet"><span class="content"> 2.2684 +Appendix C: Default UA Stylesheet</span><a class="self-link" href="#default-stylesheet"></a></h2> 2.2685 2.2686 - <p> 2.2687 - This appendix is informative, 2.2688 - and is to help UA developers to implement default stylesheet, 2.2689 + 2.2690 + <p> 2.2691 + This appendix is informative, 2.2692 + and is to help UA developers to implement default stylesheet, 2.2693 but UA developers are free to ignore or change. 2.2694 2.2695 - <div class=example> 2.2696 - <pre><code class=css> 2.2697 -s, strike, del { 2.2698 + </p> 2.2699 + <div class="example"> 2.2700 + 2.2701 + <pre><code>s, strike, del { 2.2702 text-decoration: line-through; 2.2703 } 2.2704 2.2705 @@ -1385,19 +1986,26 @@ 2.2706 blink { 2.2707 text-decoration-line: blink; 2.2708 } 2.2709 -</code></pre> </div> 2.2710 +</code></pre> 2.2711 + 2.2712 + 2.2713 + </div> 2.2714 2.2715 - <p class=issue id=issue-354d0840><a class=self-link href=#issue-354d0840></a> 2.2716 + 2.2717 + <p class="issue" id="issue-76d3d0ee"><a class="self-link" href="#issue-76d3d0ee"></a> 2.2718 If you find any issues, recommendations to add, or corrections, 2.2719 - please send the information to <a href=mailto:[email protected]>[email protected]</a> 2.2720 - with <kbd>[css-text-decor]</kbd> in the subject line. 2.2721 + please send the information to <a href="mailto:[email protected]">[email protected]</a> 2.2722 + with <kbd>css-text-decor</kbd> in the subject line. 2.2723 2.2724 - <div class=example> 2.2725 - <p> 2.2726 - While <a class=css data-link-type=propdesc href=#propdef-text-decoration-line title=text-decoration-line>text-decoration-line: blink</a> can’t be fully reproduced with other existing properties, 2.2727 + </p> 2.2728 + <div class="example"> 2.2729 + 2.2730 + <p> 2.2731 + While <a class="css" data-link-type="propdesc" href="#propdef-text-decoration-line">text-decoration-line: blink</a> can’t be fully reproduced with other existing properties, 2.2732 authors can achieve a very similar effect with the following CSS: 2.2733 2.2734 - <pre>@keyframes blink { 2.2735 + </p> 2.2736 + <pre>@keyframes blink { 2.2737 0% { 2.2738 visibility: hidden; 2.2739 animation-timing-function: step-end; 2.2740 @@ -1408,15 +2016,22 @@ 2.2741 } 2.2742 blink { 2.2743 animation: blink 1s infinite; 2.2744 -}</pre> </div> 2.2745 +}</pre> 2.2746 + 2.2747 + 2.2748 + </div> 2.2749 2.2750 -<h2 class="no-ref no-num heading settled heading" id=conformance><span class=content> 2.2751 -Conformance</span><a class=self-link href=#conformance></a></h2> 2.2752 +</main> 2.2753 2.2754 -<h3 class="no-ref heading settled heading" id=conventions><span class=content> 2.2755 -Document conventions</span><a class=self-link href=#conventions></a></h3> 2.2756 + <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> 2.2757 +Conformance</span><a class="self-link" href="#conformance"></a></h2> 2.2758 2.2759 - <p>Conformance requirements are expressed with a combination of 2.2760 + 2.2761 + <h3 class="no-ref heading settled" id="conventions"><span class="content"> 2.2762 +Document conventions</span><a class="self-link" href="#conventions"></a></h3> 2.2763 + 2.2764 + 2.2765 + <p>Conformance requirements are expressed with a combination of 2.2766 descriptive assertions and RFC 2119 terminology. The key words "MUST", 2.2767 "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", 2.2768 "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this 2.2769 @@ -1424,46 +2039,75 @@ 2.2770 However, for readability, these words do not appear in all uppercase 2.2771 letters in this specification. 2.2772 2.2773 - <p>All of the text of this specification is normative except sections 2.2774 - explicitly marked as non-normative, examples, and notes. <a data-biblio-type=normative data-link-type=biblio href=#rfc2119 title=rfc2119>[RFC2119]</a></p> 2.2775 + </p> 2.2776 + <p>All of the text of this specification is normative except sections 2.2777 + explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a></p> 2.2778 2.2779 - <p>Examples in this specification are introduced with the words "for example" 2.2780 + 2.2781 + <p>Examples in this specification are introduced with the words "for example" 2.2782 or are set apart from the normative text with <code>class="example"</code>, 2.2783 like this: 2.2784 2.2785 - <div class=example> 2.2786 - <p>This is an example of an informative example.</p> 2.2787 - </div> 2.2788 + </p> 2.2789 + <div class="example"> 2.2790 + 2.2791 + <p>This is an example of an informative example.</p> 2.2792 + 2.2793 + 2.2794 + </div> 2.2795 2.2796 - <p>Informative notes begin with the word "Note" and are set apart from the 2.2797 + 2.2798 + <p>Informative notes begin with the word "Note" and are set apart from the 2.2799 normative text with <code>class="note"</code>, like this: 2.2800 2.2801 - <p class=note>Note, this is an informative note.</p> 2.2802 + </p> 2.2803 + <p class="note" role="note">Note, this is an informative note.</p> 2.2804 2.2805 -<h3 class="no-ref heading settled heading" id=conformance-classes><span class=content> 2.2806 -Conformance classes</span><a class=self-link href=#conformance-classes></a></h3> 2.2807 + 2.2808 + <p>Advisements are normative sections styled to evoke special attention and are 2.2809 + set apart from other normative text with <code><strong class="advisement"></code>, like 2.2810 + this: 2.2811 2.2812 - <p>Conformance to this specification 2.2813 + <strong class="advisement"> 2.2814 + UAs MUST provide an accessible alternative. 2.2815 + </strong> 2.2816 + 2.2817 +</p> 2.2818 + <h3 class="no-ref heading settled" id="conformance-classes"><span class="content"> 2.2819 +Conformance classes</span><a class="self-link" href="#conformance-classes"></a></h3> 2.2820 + 2.2821 + 2.2822 + <p>Conformance to this specification 2.2823 is defined for three conformance classes: 2.2824 - <dl> 2.2825 - <dt>style sheet 2.2826 - <dd>A <a href=http://www.w3.org/TR/CSS21/conform.html#style-sheet>CSS 2.2827 + </p> 2.2828 + <dl> 2.2829 + 2.2830 + <dt>style sheet 2.2831 + 2.2832 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 2.2833 style sheet</a>. 2.2834 - <dt>renderer 2.2835 - <dd>A <a href=http://www.w3.org/TR/CSS21/conform.html#user-agent>UA</a> 2.2836 + 2.2837 + <dt>renderer 2.2838 + 2.2839 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 2.2840 that interprets the semantics of a style sheet and renders 2.2841 documents that use them. 2.2842 - <dt>authoring tool 2.2843 - <dd>A <a href=http://www.w3.org/TR/CSS21/conform.html#user-agent>UA</a> 2.2844 + 2.2845 + <dt>authoring tool 2.2846 + 2.2847 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 2.2848 that writes a style sheet. 2.2849 - </dl> 2.2850 + 2.2851 + </dl> 2.2852 2.2853 - <p>A style sheet is conformant to this specification 2.2854 + 2.2855 + <p>A style sheet is conformant to this specification 2.2856 if all of its statements that use syntax defined in this module are valid 2.2857 according to the generic CSS grammar and the individual grammars of each 2.2858 feature defined in this module. 2.2859 2.2860 - <p>A renderer is conformant to this specification 2.2861 + </p> 2.2862 + <p>A renderer is conformant to this specification 2.2863 if, in addition to interpreting the style sheet as defined by the 2.2864 appropriate specifications, it supports all the features defined 2.2865 by this specification by parsing them correctly 2.2866 @@ -1472,18 +2116,21 @@ 2.2867 does not make the UA non-conformant. (For example, a UA is not 2.2868 required to render color on a monochrome monitor.) 2.2869 2.2870 - <p>An authoring tool is conformant to this specification 2.2871 + </p> 2.2872 + <p>An authoring tool is conformant to this specification 2.2873 if it writes style sheets that are syntactically correct according to the 2.2874 generic CSS grammar and the individual grammars of each feature in 2.2875 this module, and meet all other conformance requirements of style sheets 2.2876 as described in this module. 2.2877 2.2878 -<h3 class="no-ref heading settled heading" id=partial><span class=content> 2.2879 -Partial implementations</span><a class=self-link href=#partial></a></h3> 2.2880 +</p> 2.2881 + <h3 class="no-ref heading settled" id="partial"><span class="content"> 2.2882 +Partial implementations</span><a class="self-link" href="#partial"></a></h3> 2.2883 2.2884 - <p>So that authors can exploit the forward-compatible parsing rules to 2.2885 + 2.2886 + <p>So that authors can exploit the forward-compatible parsing rules to 2.2887 assign fallback values, CSS renderers <strong>must</strong> 2.2888 - treat as invalid (and <a href=http://www.w3.org/TR/CSS21/conform.html#ignore>ignore 2.2889 + treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore 2.2890 as appropriate</a>) any at-rules, properties, property values, keywords, 2.2891 and other syntactic constructs for which they have no usable level of 2.2892 support. In particular, user agents <strong>must not</strong> selectively 2.2893 @@ -1492,14 +2139,17 @@ 2.2894 (as unsupported values must be), CSS requires that the entire declaration 2.2895 be ignored.</p> 2.2896 2.2897 -<h3 class="no-ref heading settled heading" id=experimental><span class=content> 2.2898 -Experimental implementations</span><a class=self-link href=#experimental></a></h3> 2.2899 2.2900 - <p>To avoid clashes with future CSS features, the CSS2.1 specification 2.2901 - reserves a <a href=http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords>prefixed 2.2902 + <h3 class="no-ref heading settled" id="experimental"><span class="content"> 2.2903 +Experimental implementations</span><a class="self-link" href="#experimental"></a></h3> 2.2904 + 2.2905 + 2.2906 + <p>To avoid clashes with future CSS features, the CSS2.1 specification 2.2907 + reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 2.2908 syntax</a> for proprietary and experimental extensions to CSS. 2.2909 2.2910 - <p>Prior to a specification reaching the Candidate Recommendation stage 2.2911 + </p> 2.2912 + <p>Prior to a specification reaching the Candidate Recommendation stage 2.2913 in the W3C process, all implementations of a CSS feature are considered 2.2914 experimental. The CSS Working Group recommends that implementations 2.2915 use a vendor-prefixed syntax for such features, including those in 2.2916 @@ -1507,15 +2157,18 @@ 2.2917 in the draft. 2.2918 </p> 2.2919 2.2920 -<h3 class="no-ref heading settled heading" id=testing><span class=content> 2.2921 -Non-experimental implementations</span><a class=self-link href=#testing></a></h3> 2.2922 2.2923 - <p>Once a specification reaches the Candidate Recommendation stage, 2.2924 + <h3 class="no-ref heading settled" id="testing"><span class="content"> 2.2925 +Non-experimental implementations</span><a class="self-link" href="#testing"></a></h3> 2.2926 + 2.2927 + 2.2928 + <p>Once a specification reaches the Candidate Recommendation stage, 2.2929 non-experimental implementations are possible, and implementors should 2.2930 release an unprefixed implementation of any CR-level feature they 2.2931 can demonstrate to be correctly implemented according to spec. 2.2932 2.2933 - <p>To establish and maintain the interoperability of CSS across 2.2934 + </p> 2.2935 + <p>To establish and maintain the interoperability of CSS across 2.2936 implementations, the CSS Working Group requests that non-experimental 2.2937 CSS renderers submit an implementation report (and, if necessary, the 2.2938 testcases used for that implementation report) to the W3C before 2.2939 @@ -1523,100 +2176,271 @@ 2.2940 submitted to W3C are subject to review and correction by the CSS 2.2941 Working Group. 2.2942 2.2943 - <p>Further information on submitting testcases and implementation reports 2.2944 + </p> 2.2945 + <p>Further information on submitting testcases and implementation reports 2.2946 can be found from on the CSS Working Group’s website at 2.2947 - <a href=http://www.w3.org/Style/CSS/Test/>http://www.w3.org/Style/CSS/Test/</a>. 2.2948 + <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 2.2949 Questions should be directed to the 2.2950 - <a href=http://lists.w3.org/Archives/Public/public-css-testsuite>[email protected]</a> 2.2951 + <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">[email protected]</a> 2.2952 mailing list. 2.2953 2.2954 -<h2 class="no-num no-ref heading settled heading" id=references><span class=content> 2.2955 -References</span><a class=self-link href=#references></a></h2> 2.2956 2.2957 -<h3 class="no-num no-ref heading settled heading" id=normative><span class=content> 2.2958 -Normative References</span><a class=self-link href=#normative></a></h3> 2.2959 -<div data-fill-with=normative-references><dl><dt id=css21 title=CSS21><a class=self-link href=#css21></a>[CSS21]<dd>Bert Bos; et al. <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>http://www.w3.org/TR/2011/REC-CSS2-20110607</a><dt id=css3-fonts title=CSS3-FONTS><a class=self-link href=#css3-fonts></a>[CSS3-FONTS]<dd>John Daggett. <a href=http://www.w3.org/TR/2013/WD-css3-fonts-20130212/>CSS Fonts Module Level 3</a>. 12 February 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-css3-fonts-20130212/>http://www.w3.org/TR/2013/WD-css3-fonts-20130212/</a><dt id=css3-writing-modes title=CSS3-WRITING-MODES><a class=self-link href=#css3-writing-modes></a>[CSS3-WRITING-MODES]<dd>Elika J. Etemad; Koji Ishii. <a href=http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/>CSS Writing Modes Module Level 3</a>. 15 November 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/>http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a><dt id=css3bg title=CSS3BG><a class=self-link href=#css3bg></a>[CSS3BG]<dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a href=http://www.w3.org/TR/2012/CR-css3-background-20120724/>CSS Backgrounds and Borders Module Level 3</a>. 24 July 2012. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/CR-css3-background-20120724/>http://www.w3.org/TR/2012/CR-css3-background-20120724/</a><dt id=css3text title=CSS3TEXT><a class=self-link href=#css3text></a>[CSS3TEXT]<dd>Elika J. Etemad; Koji Ishii. <a href=http://www.w3.org/TR/2012/WD-css3-text-20121113/>CSS Text Module Level 3</a>. 13 November 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-css3-text-20121113/>http://www.w3.org/TR/2012/WD-css3-text-20121113/</a><dt id=rfc2119 title=RFC2119><a class=self-link href=#rfc2119></a>[RFC2119]<dd>S. Bradner. <a href=http://www.ietf.org/rfc/rfc2119.txt>Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <a href=http://www.ietf.org/rfc/rfc2119.txt>http://www.ietf.org/rfc/rfc2119.txt</a></dl></div> 2.2960 2.2961 -<h3 class="no-num no-ref heading settled heading" id=informative><span class=content> 2.2962 -Informative References</span><a class=self-link href=#informative></a></h3> 2.2963 -<div data-fill-with=informative-references><dl><dt id=css3-animations title=CSS3-ANIMATIONS><a class=self-link href=#css3-animations></a>[CSS3-ANIMATIONS]<dd>Dean Jackson; et al. <a href=http://www.w3.org/TR/2013/WD-css3-animations-20130219/>CSS Animations</a>. 19 February 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-css3-animations-20130219/>http://www.w3.org/TR/2013/WD-css3-animations-20130219/</a><dt id=css3color title=CSS3COLOR><a class=self-link href=#css3color></a>[CSS3COLOR]<dd>Tantek Çelik; Chris Lilley; L. David Baron. <a href=http://www.w3.org/TR/2011/REC-css3-color-20110607>CSS Color Module Level 3</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-css3-color-20110607>http://www.w3.org/TR/2011/REC-css3-color-20110607</a><dt id=uax44 title=UAX44><a class=self-link href=#uax44></a>[UAX44]<dd>Mark Davis; Ken Whistler. <a href=http://www.unicode.org/reports/tr44/>Unicode Character Database</a>. 25 September 2013. URL: <a href=http://www.unicode.org/reports/tr44/>http://www.unicode.org/reports/tr44/</a></dl></div> 2.2964 +</p> 2.2965 + <h2 class="no-num heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2> 2.2966 + <h3 class="no-num heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3> 2.2967 + <ul class="indexlist"> 2.2968 + <li>auto, <a href="#underline-auto">2.6</a> 2.2969 + <li>blink, <a href="#valdef-text-decoration-line-blink">2.1</a> 2.2970 + <li>box-decoration, <a href="#valdef-text-decoration-skip-box-decoration">2.5</a> 2.2971 + <li>character, <a href="#character">1.3</a> 2.2972 + <li>circle, <a href="#valdef-text-text-emphasis-style-circle">3.1</a> 2.2973 + <li>content language, <a href="#content-language">1.3</a> 2.2974 + <li>currentcolor, <a href="#valdef-text-emphasis-color-currentcolor">3.2</a> 2.2975 + <li>decorating box, <a href="#decorating-box">2</a> 2.2976 + <li>dot, <a href="#valdef-text-text-emphasis-style-dot">3.1</a> 2.2977 + <li>double-circle, <a href="#valdef-text-text-emphasis-style-double-circle">3.1</a> 2.2978 + <li>edges, <a href="#valdef-text-decoration-skip-edges">2.5</a> 2.2979 + <li>filled, <a href="#valdef-text-text-emphasis-style-filled">3.1</a> 2.2980 + <li>ink, <a href="#valdef-text-decoration-skip-ink">2.5</a> 2.2981 + <li>left 2.2982 + <ul> 2.2983 + <li>value for text-underline-position, <a href="#underline-left">2.6</a> 2.2984 + <li>value for text-text-emphasis-position, <a href="#valdef-text-text-emphasis-position-left">3.4</a> 2.2985 + </ul> 2.2986 + <li>letter, <a href="#letter">1.3</a> 2.2987 + <li>line-through, <a href="#valdef-text-decoration-line-line-through">2.1</a> 2.2988 + <li>none 2.2989 + <ul> 2.2990 + <li>value for text-decoration-line, <a href="#valdef-text-decoration-line-none">2.1</a> 2.2991 + <li>value for text-decoration-skip, <a href="#valdef-text-decoration-skip-none">2.5</a> 2.2992 + <li>value for text-text-emphasis-style, <a href="#valdef-text-text-emphasis-style-none">3.1</a> 2.2993 + </ul> 2.2994 + <li>objects, <a href="#valdef-text-decoration-skip-objects">2.5</a> 2.2995 + <li>open, <a href="#valdef-text-text-emphasis-open">3.1</a> 2.2996 + <li>over, <a href="#valdef-text-text-emphasis-position-over">3.4</a> 2.2997 + <li>overline, <a href="#valdef-text-decoration-line-overline">2.1</a> 2.2998 + <li>right 2.2999 + <ul> 2.3000 + <li>value for text-underline-position, <a href="#underline-right">2.6</a> 2.3001 + <li>value for text-text-emphasis-position, <a href="#valdef-text-text-emphasis-position-right">3.4</a> 2.3002 + </ul> 2.3003 + <li>sesame, <a href="#valdef-text-text-emphasis-style-sesame">3.1</a> 2.3004 + <li>spaces, <a href="#valdef-text-decoration-skip-spaces">2.5</a> 2.3005 + <li><string>, <a href="#valdef-text-text-emphasis-style-string">3.1</a> 2.3006 + <li>text-decoration, <a href="#propdef-text-decoration">2.4</a> 2.3007 + <li>text-decoration-color, <a href="#propdef-text-decoration-color">2.2</a> 2.3008 + <li>text-decoration-line, <a href="#propdef-text-decoration-line">2.1</a> 2.3009 + <li>text-decoration-skip, <a href="#propdef-text-decoration-skip">2.5</a> 2.3010 + <li>text-decoration-style, <a href="#propdef-text-decoration-style">2.3</a> 2.3011 + <li>text-emphasis, <a href="#propdef-text-emphasis">3.3</a> 2.3012 + <li>text-emphasis-color, <a href="#propdef-text-emphasis-color">3.2</a> 2.3013 + <li>text-emphasis-position, <a href="#propdef-text-emphasis-position">3.4</a> 2.3014 + <li>text-emphasis-style, <a href="#propdef-text-emphasis-style">3.1</a> 2.3015 + <li>text-shadow, <a href="#propdef-text-shadow">4</a> 2.3016 + <li>text-underline-position, <a href="#propdef-text-underline-position">2.6</a> 2.3017 + <li>triangle, <a href="#valdef-text-text-emphasis-style-triangle">3.1</a> 2.3018 + <li>under 2.3019 + <ul> 2.3020 + <li>value for text-underline-position, <a href="#underline-under">2.6</a> 2.3021 + <li>value for text-text-emphasis-position, <a href="#valdef-text-text-emphasis-position-under">3.4</a> 2.3022 + </ul> 2.3023 + <li>underline, <a href="#valdef-text-decoration-line-underline">2.1</a> 2.3024 + </ul> 2.3025 + <h3 class="no-num heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3> 2.3026 + <ul class="indexlist"> 2.3027 + <li><a data-link-type="biblio" href="#biblio-css-backgrounds-3">[css-backgrounds-3]</a> defines the following terms: 2.3028 + <ul> 2.3029 + <li><a href="http://dev.w3.org/csswg/css-backgrounds-3/#box-shadow">box-shadow</a> 2.3030 + </ul> 2.3031 + <li><a data-link-type="biblio" href="#biblio-css-color-3">[css-color-3]</a> defines the following terms: 2.3032 + <ul> 2.3033 + <li><a href="http://dev.w3.org/csswg/css-color-3/#color0">color</a> 2.3034 + </ul> 2.3035 + <li><a data-link-type="biblio" href="#biblio-css-counter-styles-3">[css-counter-styles-3]</a> defines the following terms: 2.3036 + <ul> 2.3037 + <li><a href="http://dev.w3.org/csswg/css-counter-styles-3/#valdef-counter-style-system-alphabetic">alphabetic</a> 2.3038 + </ul> 2.3039 + <li><a data-link-type="biblio" href="#biblio-css-fonts-3">[css-fonts-3]</a> defines the following terms: 2.3040 + <ul> 2.3041 + <li><a href="http://dev.w3.org/csswg/css-fonts-3/#propdef-font-variant-position">font-variant-position</a> 2.3042 + </ul> 2.3043 + <li><a data-link-type="biblio" href="#biblio-css21">[css21]</a> defines the following terms: 2.3044 + <ul> 2.3045 + <li><a href="http://dev.w3.org/csswg/css2/visudet.html#propdef-vertical-align">vertical-align</a> 2.3046 + <li><a href="http://dev.w3.org/csswg/css2/visufx.html#propdef-visibility">visibility</a> 2.3047 + </ul> 2.3048 + </ul> 2.3049 + <h2 class="no-num heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2> 2.3050 + <h3 class="no-num heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3> 2.3051 + <dl> 2.3052 + <dt id="biblio-css21"><a class="self-link" href="#biblio-css21"></a>[CSS21] 2.3053 + <dd>Bert Bos; et al. <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> 2.3054 + <dt id="biblio-css3-writing-modes"><a class="self-link" href="#biblio-css3-writing-modes"></a>[CSS3-WRITING-MODES] 2.3055 + <dd>Elika J. Etemad; Koji Ishii. <a href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/">CSS Writing Modes Module Level 3</a>. 15 November 2012. W3C Working Draft. (Work in progress.) URL: <a href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a> 2.3056 + <dt id="biblio-css3bg"><a class="self-link" href="#biblio-css3bg"></a>[CSS3BG] 2.3057 + <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">CSS Backgrounds and Borders Module Level 3</a>. 24 July 2012. W3C Candidate Recommendation. (Work in progress.) URL: <a href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a> 2.3058 + <dt id="biblio-css3text"><a class="self-link" href="#biblio-css3text"></a>[CSS3TEXT] 2.3059 + <dd>Elika J. Etemad; Koji Ishii. <a href="http://www.w3.org/TR/2012/WD-css3-text-20121113/">CSS Text Module Level 3</a>. 13 November 2012. W3C Working Draft. (Work in progress.) URL: <a href="http://www.w3.org/TR/2012/WD-css3-text-20121113/">http://www.w3.org/TR/2012/WD-css3-text-20121113/</a> 2.3060 + <dt id="biblio-css-backgrounds-3"><a class="self-link" href="#biblio-css-backgrounds-3"></a>[CSS-BACKGROUNDS-3] 2.3061 + <dd>CSS Backgrounds and Borders Module Level 3 URL: <a href="http://www.w3.org/TR/css3-background/">http://www.w3.org/TR/css3-background/</a> 2.3062 + <dt id="biblio-css-color-3"><a class="self-link" href="#biblio-css-color-3"></a>[CSS-COLOR-3] 2.3063 + <dd>CSS Color Module Level 3 URL: <a href="http://www.w3.org/TR/css3-color/">http://www.w3.org/TR/css3-color/</a> 2.3064 + <dt id="biblio-css-counter-styles-3"><a class="self-link" href="#biblio-css-counter-styles-3"></a>[CSS-COUNTER-STYLES-3] 2.3065 + <dd>Tab Atkins Jr.. <a href="http://www.w3.org/TR/css-counter-styles-3/">CSS Counter Styles Level 3</a>. 3 February 2015. CR. URL: <a href="http://www.w3.org/TR/css-counter-styles-3/">http://www.w3.org/TR/css-counter-styles-3/</a> 2.3066 + <dt id="biblio-css-fonts-3"><a class="self-link" href="#biblio-css-fonts-3"></a>[CSS-FONTS-3] 2.3067 + <dd>John Daggett. <a href="http://www.w3.org/TR/css-fonts-3/">CSS Fonts Module Level 3</a>. 3 October 2013. CR. URL: <a href="http://www.w3.org/TR/css-fonts-3/">http://www.w3.org/TR/css-fonts-3/</a> 2.3068 + <dt id="biblio-css3-fonts"><a class="self-link" href="#biblio-css3-fonts"></a>[CSS3-FONTS] 2.3069 + <dd>John Daggett. <a href="http://www.w3.org/TR/css3-fonts/">CSS Fonts Module Level 3</a>. 11 December 2012. WD. URL: <a href="http://www.w3.org/TR/css3-fonts/">http://www.w3.org/TR/css3-fonts/</a> 2.3070 + <dt id="biblio-rfc2119"><a class="self-link" href="#biblio-rfc2119"></a>[RFC2119] 2.3071 + <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a> 2.3072 + </dl> 2.3073 + <h3 class="no-num heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3> 2.3074 + <dl> 2.3075 + <dt id="biblio-css3color"><a class="self-link" href="#biblio-css3color"></a>[CSS3COLOR] 2.3076 + <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a href="http://www.w3.org/TR/2011/REC-css3-color-20110607">CSS Color Module Level 3</a>. 7 June 2011. W3C Recommendation. URL: <a href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a> 2.3077 + <dt id="biblio-uax44"><a class="self-link" href="#biblio-uax44"></a>[UAX44] 2.3078 + <dd>Mark Davis; Ken Whistler. <a href="http://www.unicode.org/reports/tr44/">Unicode Character Database</a>. 25 September 2013. URL: <a href="http://www.unicode.org/reports/tr44/">http://www.unicode.org/reports/tr44/</a> 2.3079 + <dt id="biblio-css3-animations"><a class="self-link" href="#biblio-css3-animations"></a>[CSS3-ANIMATIONS] 2.3080 + <dd>Dean Jackson; et al. <a href="http://www.w3.org/TR/css3-animations/">CSS Animations</a>. 19 February 2013. WD. URL: <a href="http://www.w3.org/TR/css3-animations/">http://www.w3.org/TR/css3-animations/</a> 2.3081 + </dl> 2.3082 + <h2 class="no-num heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2> 2.3083 + <table class="proptable data"> 2.3084 + <thead> 2.3085 + <tr> 2.3086 + <th scope="col">Name 2.3087 + <th scope="col">Value 2.3088 + <th scope="col">Initial 2.3089 + <th scope="col">Applies to 2.3090 + <th scope="col">Inh. 2.3091 + <th scope="col">%ages 2.3092 + <th scope="col">Media 2.3093 + <th scope="col">Animatable 2.3094 + <th scope="col">Computed value 2.3095 + <tbody> 2.3096 + <tr> 2.3097 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-decoration-line">text-decoration-line</a> 2.3098 + <td>none | [ underline || overline || line-through || blink ] 2.3099 + <td>none 2.3100 + <td>all elements 2.3101 + <td>no (but see prose) 2.3102 + <td>N/A 2.3103 + <td>visual 2.3104 + <td>no 2.3105 + <td>as specified 2.3106 + <tr> 2.3107 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-decoration-color">text-decoration-color</a> 2.3108 + <td><color> 2.3109 + <td>currentColor 2.3110 + <td>all elements 2.3111 + <td>no 2.3112 + <td>N/A 2.3113 + <td>visual 2.3114 + <td>as color 2.3115 + <td>the computed color 2.3116 + <tr> 2.3117 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-decoration-style">text-decoration-style</a> 2.3118 + <td>solid | double | dotted | dashed | wavy 2.3119 + <td>solid 2.3120 + <td>all elements 2.3121 + <td>no 2.3122 + <td>N/A 2.3123 + <td>visual 2.3124 + <td>no 2.3125 + <td>as specified 2.3126 + <tr> 2.3127 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-decoration">text-decoration</a> 2.3128 + <td><‘text-decoration-line’> || 2.3129 + <‘text-decoration-style’> || 2.3130 + <‘text-decoration-color’> 2.3131 + <td>none 2.3132 + <td>all elements 2.3133 + <td>no 2.3134 + <td>N/A 2.3135 + <td>visual 2.3136 + <td>see individual properties 2.3137 + <td>see individual properties 2.3138 + <tr> 2.3139 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-decoration-skip">text-decoration-skip</a> 2.3140 + <td>none | [ objects || spaces || ink || edges || box-decoration ] 2.3141 + <td>objects 2.3142 + <td>all elements 2.3143 + <td>yes 2.3144 + <td>N/A 2.3145 + <td>visual 2.3146 + <td>no 2.3147 + <td>as specified 2.3148 + <tr> 2.3149 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-underline-position">text-underline-position</a> 2.3150 + <td>auto | [ under || [ left | right ] ] 2.3151 + <td>auto 2.3152 + <td>all elements 2.3153 + <td>yes 2.3154 + <td>N/A 2.3155 + <td>visual 2.3156 + <td>no 2.3157 + <td>as specified 2.3158 + <tr> 2.3159 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-emphasis-style">text-emphasis-style</a> 2.3160 + <td>none | 2.3161 + [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | 2.3162 + <string> 2.3163 + <td>none 2.3164 + <td>all elements 2.3165 + <td>yes 2.3166 + <td>N/A 2.3167 + <td>visual 2.3168 + <td>no 2.3169 + <td>none, a pair of keywords representing the shape and fill, or 2.3170 + a string 2.3171 + <tr> 2.3172 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-emphasis-color">text-emphasis-color</a> 2.3173 + <td><color> 2.3174 + <td>currentColor 2.3175 + <td>all elements 2.3176 + <td>yes 2.3177 + <td>N/A 2.3178 + <td>visual 2.3179 + <td>as color 2.3180 + <td>as specified 2.3181 + <tr> 2.3182 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-emphasis">text-emphasis</a> 2.3183 + <td><‘text-emphasis-style’> || <‘text-emphasis-color’> 2.3184 + <td>see individual properties 2.3185 + <td>all elements 2.3186 + <td>yes 2.3187 + <td>N/A 2.3188 + <td>visual 2.3189 + <td>see individual properties 2.3190 + <td>see individual properties 2.3191 + <tr> 2.3192 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-emphasis-position">text-emphasis-position</a> 2.3193 + <td>[ over | under ] && [ right | left ] 2.3194 + <td>over right 2.3195 + <td>all elements 2.3196 + <td>yes 2.3197 + <td>N/A 2.3198 + <td>visual 2.3199 + <td>no 2.3200 + <td>as specified 2.3201 + <tr> 2.3202 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-shadow">text-shadow</a> 2.3203 + <td>none | [ <length>{2,3} && <color>? ]# 2.3204 + <td>none 2.3205 + <td>all elements 2.3206 + <td>yes 2.3207 + <td>N/A 2.3208 + <td>visual 2.3209 + <td>as shadow list 2.3210 + <td>a color plus three absolute <length>s 2.3211 + </table> 2.3212 + <h2 class="no-num heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2> 2.3213 + <div style="counter-reset:issue"> 2.3214 + <div class="issue"> 2.3215 + If you find any issues, recommendations to add, or corrections, 2.3216 + please send the information to <a href="mailto:[email protected]">[email protected]</a> 2.3217 + with <kbd>css-text-decor</kbd> in the subject line. 2.3218 2.3219 -<h2 class="no-num no-ref heading settled heading" id=index><span class=content> 2.3220 -Index</span><a class=self-link href=#index></a></h2> 2.3221 -<div data-fill-with=index><ul class=indexlist> 2.3222 -<li>authoring tool, <a href=#authoring-tool title="section 6.2">6.2</a> 2.3223 -<li>auto, <a href=#underline-auto title="section 2.6">2.6</a> 2.3224 -<li>blink, <a href=#valuedef-blink title="section 2.1">2.1</a> 2.3225 -<li>box-decoration, <a href=#valuedef-box-decoration title="section 2.5">2.5</a> 2.3226 -<li>character, <a href=#character title="section 1.3">1.3</a> 2.3227 -<li>circle, <a href=#valuedef-circle title="section 3.1">3.1</a> 2.3228 -<li>content language, <a href=#content-language title="section 1.3">1.3</a> 2.3229 -<li>currentcolor, <a href=#valuedef-currentcolor title="section 3.2">3.2</a> 2.3230 -<li>decorating box, <a href=#decorating-box title="section 2">2</a> 2.3231 -<li>dot, <a href=#valuedef-dot title="section 3.1">3.1</a> 2.3232 -<li>double-circle, <a href=#valuedef-double-circle title="section 3.1">3.1</a> 2.3233 -<li>edges, <a href=#valuedef-edges title="section 2.5">2.5</a> 2.3234 -<li>filled, <a href=#valuedef-filled title="section 3.1">3.1</a> 2.3235 -<li>ink, <a href=#valuedef-ink title="section 2.5">2.5</a> 2.3236 -<li>left<ul><li>value for text-underline-position, <a href=#underline-left title="section 2.6">2.6</a> 2.3237 -<li>value for text-text-emphasis-position, <a href=#valuedef-left title="section 3.4">3.4</a> 2.3238 -</ul><li>letter, <a href=#letter title="section 1.3">1.3</a> 2.3239 -<li>line-through, <a href=#valuedef-line-through title="section 2.1">2.1</a> 2.3240 -<li>none<ul><li>value for text-decoration-line, <a href=#valuedef-none0 title="section 2.1">2.1</a> 2.3241 -<li>value for text-decoration-skip, <a href=#valuedef-none1 title="section 2.5">2.5</a> 2.3242 -<li>value for text-text-emphasis-style, <a href=#valuedef-none title="section 3.1">3.1</a> 2.3243 -</ul><li>objects, <a href=#valuedef-objects title="section 2.5">2.5</a> 2.3244 -<li>open, <a href=#valuedef-open title="section 3.1">3.1</a> 2.3245 -<li>over, <a href=#valuedef-over title="section 3.4">3.4</a> 2.3246 -<li>overline, <a href=#valuedef-overline title="section 2.1">2.1</a> 2.3247 -<li>renderer, <a href=#renderer title="section 6.2">6.2</a> 2.3248 -<li>right<ul><li>value for text-underline-position, <a href=#underline-right title="section 2.6">2.6</a> 2.3249 -<li>value for text-text-emphasis-position, <a href=#valuedef-right title="section 3.4">3.4</a> 2.3250 -</ul><li>sesame, <a href=#valuedef-sesame title="section 3.1">3.1</a> 2.3251 -<li>spaces, <a href=#valuedef-spaces title="section 2.5">2.5</a> 2.3252 -<li><string>, <a href=#valuedef-string title="section 3.1">3.1</a> 2.3253 -<li>style sheet!!as conformance class, <a href=#style-sheetas-conformance-class title="section 6.2">6.2</a> 2.3254 -<li>text-decoration, <a href=#propdef-text-decoration title="section 2.4">2.4</a> 2.3255 -<li>text-decoration-color, <a href=#propdef-text-decoration-color title="section 2.2">2.2</a> 2.3256 -<li>text-decoration-line, <a href=#propdef-text-decoration-line title="section 2.1">2.1</a> 2.3257 -<li>text-decoration-skip, <a href=#propdef-text-decoration-skip title="section 2.5">2.5</a> 2.3258 -<li>text-decoration-style, <a href=#propdef-text-decoration-style title="section 2.3">2.3</a> 2.3259 -<li>text-emphasis, <a href=#propdef-text-emphasis title="section 3.3">3.3</a> 2.3260 -<li>text-emphasis-color, <a href=#propdef-text-emphasis-color title="section 3.2">3.2</a> 2.3261 -<li>text-emphasis-position, <a href=#propdef-text-emphasis-position title="section 3.4">3.4</a> 2.3262 -<li>text-emphasis-style, <a href=#propdef-text-emphasis-style title="section 3.1">3.1</a> 2.3263 -<li>text-shadow, <a href=#propdef-text-shadow title="section 4">4</a> 2.3264 -<li>text-underline-position, <a href=#propdef-text-underline-position title="section 2.6">2.6</a> 2.3265 -<li>triangle, <a href=#valuedef-triangle title="section 3.1">3.1</a> 2.3266 -<li>under<ul><li>value for text-underline-position, <a href=#underline-under title="section 2.6">2.6</a> 2.3267 -<li>value for text-text-emphasis-position, <a href=#valuedef-under title="section 3.4">3.4</a> 2.3268 -</ul><li>underline, <a href=#valuedef-underline title="section 2.1">2.1</a> 2.3269 -</ul></div> 2.3270 - 2.3271 -<h2 class="no-num no-ref heading settled heading" id=property-index><span class=content> 2.3272 -Property index</span><a class=self-link href=#property-index></a></h2> 2.3273 -<div data-fill-with=property-index><table class="proptable data"><thead><tr><th scope=col>Name<th scope=col>Value<th scope=col>Initial<th scope=col>Applies to<th scope=col>Inh.<th scope=col>%ages<th scope=col>Media<th scope=col>Animatable<th scope=col>Computed value<tbody> 2.3274 -<tr><th scope=row><a class=css-code data-link-type=property href=#propdef-text-decoration-line title=text-decoration-line>text-decoration-line</a><td>none | [ underline || overline || line-through || blink ]<td>none<td>all elements<td>no (but see prose)<td>N/A<td>visual<td>no<td>as specified 2.3275 -<tr><th scope=row><a class=css-code data-link-type=property href=#propdef-text-decoration-color title=text-decoration-color>text-decoration-color</a><td><color><td>currentColor<td>all elements<td>no<td>N/A<td>visual<td>as color<td>the computed color 2.3276 -<tr><th scope=row><a class=css-code data-link-type=property href=#propdef-text-decoration-style title=text-decoration-style>text-decoration-style</a><td>solid | double | dotted | dashed | wavy<td>solid<td>all elements<td>no<td>N/A<td>visual<td>no<td>as specified 2.3277 -<tr><th scope=row><a class=css-code data-link-type=property href=#propdef-text-decoration title=text-decoration>text-decoration</a><td><text-decoration-line> || 2.3278 - <text-decoration-style> || 2.3279 - <text-decoration-color><td>none<td>all elements<td>no<td>N/A<td>visual<td>see individual properties<td>see individual properties 2.3280 -<tr><th scope=row><a class=css-code data-link-type=property href=#propdef-text-decoration-skip title=text-decoration-skip>text-decoration-skip</a><td>none | [ objects || spaces || ink || edges || box-decoration ]<td>objects<td>all elements<td>yes<td>N/A<td>visual<td>no<td>as specified 2.3281 -<tr><th scope=row><a class=css-code data-link-type=property href=#propdef-text-underline-position title=text-underline-position>text-underline-position</a><td>auto | [ under || [ left | right ] ]<td>auto<td>all elements<td>yes<td>N/A<td>visual<td>no<td>as specified 2.3282 -<tr><th scope=row><a class=css-code data-link-type=property href=#propdef-text-emphasis-style title=text-emphasis-style>text-emphasis-style</a><td>none | 2.3283 - [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | 2.3284 - <string><td>none<td>all elements<td>yes<td>N/A<td>visual<td>no<td>none, a pair of keywords representing the shape and fill, or 2.3285 - a string 2.3286 -<tr><th scope=row><a class=css-code data-link-type=property href=#propdef-text-emphasis-color title=text-emphasis-color>text-emphasis-color</a><td><color><td>currentColor<td>all elements<td>yes<td>N/A<td>visual<td>as color<td>as specified 2.3287 -<tr><th scope=row><a class=css-code data-link-type=property href=#propdef-text-emphasis title=text-emphasis>text-emphasis</a><td>'<text-emphasis-style>' || '<text-emphasis-color>'<td>see individual properties<td>all elements<td>yes<td>N/A<td>visual<td>see individual properties<td>see individual properties 2.3288 -<tr><th scope=row><a class=css-code data-link-type=property href=#propdef-text-emphasis-position title=text-emphasis-position>text-emphasis-position</a><td>[ over | under ] && [ right | left ]<td>over right<td>all elements<td>yes<td>N/A<td>visual<td>no<td>as specified 2.3289 -<tr><th scope=row><a class=css-code data-link-type=property href=#propdef-text-shadow title=text-shadow>text-shadow</a><td>none | [ <length>{2,3} && <color>? ]#<td>none<td>all elements<td>yes<td>N/A<td>visual<td>as shadow list<td>a color plus three absolute <length>s</table></div> 2.3290 - 2.3291 - 2.3292 -<h2 class="no-num heading settled" id=issues-index><span class=content>Issues Index</span><a class=self-link href=#issues-index></a></h2><div style="counter-reset: issue"><div class=issue> 2.3293 - If you find any issues, recommendations to add, or corrections, 2.3294 - please send the information to <a href=mailto:[email protected]>[email protected]</a> 2.3295 - with <kbd>[css-text-decor]</kbd> in the subject line. 2.3296 - 2.3297 - <a href=#issue-354d0840> ↵ </a></div></div> 2.3298 \ No newline at end of file 2.3299 + <a href="#issue-76d3d0ee"> ↵ </a></div> 2.3300 + </div></body> 2.3301 +</html> 2.3302 \ No newline at end of file
