Mon, 22 Oct 2012 00:41:17 +0200
(Merge)
1.1 --- a/.htaccess Mon Oct 22 00:33:44 2012 +0200 1.2 +++ b/.htaccess Mon Oct 22 00:41:17 2012 +0200 1.3 @@ -12,7 +12,9 @@ 1.4 # Versioning System Switchover 1.5 1.6 #XXX insert rules here 1.7 +Redirect /csswg/css3-text-decor http://dev.w3.org/csswg/css-text-decor-3 1.8 1.9 # Unversioned URLs 1.10 1.11 Redirect /csswg/css-counter-styles http://dev.w3.org/csswg/css-counter-styles-3 1.12 +Redirect /csswg/css-text-decor http://dev.w3.org/csswg/css-text-decor-3 1.13 \ No newline at end of file
2.1 --- a/css-counter-styles-3/Overview.html Mon Oct 22 00:33:44 2012 +0200 2.2 +++ b/css-counter-styles-3/Overview.html Mon Oct 22 00:41:17 2012 +0200 2.3 @@ -234,6 +234,10 @@ 2.4 <li><a href="#counter-style-symbols"><span class=secno>3.7. </span> 2.5 Marker characters: the ‘<code class=property>symbols</code>’ and 2.6 ‘<code class=property>additive-symbols</code>’ descriptors</a> 2.7 + 2.8 + <li><a href="#counter-style-speak-as"><span class=secno>3.8. </span> 2.9 + Speech Synthesis: the ‘<code class=property>speak-as</code>’ 2.10 + descriptor</a> 2.11 </ul> 2.12 2.13 <li><a href="#symbols-function"><span class=secno>4. </span> Defining 2.14 @@ -377,6 +381,9 @@ 2.15 <li> a <dfn id=range title=counter-range>range</dfn>, which limits the 2.16 values that a counter style handles 2.17 2.18 + <li> a <dfn id=spoken-form title=counter-speak-as>spoken form</dfn>, which 2.19 + describes how to read out the counter style in a speech synthesizer 2.20 + 2.21 <li> and a <dfn id=fallback-style title=counter-fallback>fallback 2.22 style</dfn>, to render the representation with when the counter value is 2.23 outside the counter style's range or the counter style otherwise can't 2.24 @@ -384,16 +391,16 @@ 2.25 </ul> 2.26 2.27 <p> When asked to <dfn id=generate-a-counter-representation 2.28 - title=generate-a-counter>generate a counter representation</dfn> using a 2.29 - particular counter style for a particular counter value, follow these 2.30 - steps: 2.31 + title="generate a counter|generate a counter representation">generate a 2.32 + counter representation</dfn> using a particular counter style for a 2.33 + particular counter value, follow these steps: 2.34 2.35 <ol> 2.36 <li> If the counter value is outside the <a href="#range"><i 2.37 title=counter-range>range</i></a> of the counter style, exit this 2.38 - algorithm and instead <a href="#generate-a-counter-representation"><i 2.39 - title=generate-a-counter>generate a counter representation</i></a> using 2.40 - the counter style's fallback style and the same counter value. 2.41 + algorithm and instead <i title=generate-a-counter>generate a counter 2.42 + representation</i> using the counter style's fallback style and the same 2.43 + counter value. 2.44 2.45 <li> Using the counter value and the <a href="#algorithm"><i 2.46 title=counter-algorithm>counter algorithm</i></a> for the counter style, 2.47 @@ -432,7 +439,8 @@ 2.48 class=css>@counter-style</code></a>’ rule is: 2.49 2.50 <pre> 2.51 -@counter-style <i><counter-style-name></i> { 2.52 +@counter-style <a 2.53 + href="#speak-as-counter-style"><i><counter-style-name></i></a> { 2.54 [ descriptor: value; ]+ 2.55 } 2.56 </pre> 2.57 @@ -442,13 +450,14 @@ 2.58 from the Syntax spec, so I can just say <code><declaration-list></code> 2.59 or something. 2.60 2.61 - <p> The <i><counter-style-name></i> must be be a valid identifier and 2.62 - must not be ‘<a href="#decimal"><code class=css>decimal</code></a>’ or 2.63 - ‘<code class=css>none</code>’, or else the rule is invalid. (Note, 2.64 - however, that some names, like ‘<code class=css>inside</code>’ or 2.65 - ‘<code class=css>initial</code>’, might conflict with the existing 2.66 - values of properties like ‘<code class=property>list-style</code>’, 2.67 - and thus won't be usable there.) 2.68 + <p> The <a 2.69 + href="#speak-as-counter-style"><i><counter-style-name></i></a> must be 2.70 + be a valid identifier and must not be ‘<a href="#decimal"><code 2.71 + class=css>decimal</code></a>’ or ‘<code class=css>none</code>’, or 2.72 + else the rule is invalid. (Note, however, that some names, like ‘<code 2.73 + class=css>inside</code>’ or ‘<code class=css>initial</code>’, might 2.74 + conflict with the existing values of properties like ‘<code 2.75 + class=property>list-style</code>’, and thus won't be usable there.) 2.76 2.77 <p class=issue> The names should be case-insensitive, but we haven't yet 2.78 figured out exactly which kind of insensitivity we want for CSS in 2.79 @@ -514,7 +523,7 @@ 2.80 will be used to construct the counter's representation based on the 2.81 counter value. For example, ‘<a href="#cyclic"><code 2.82 class=css>cyclic</code></a>’ counter styles just cycle through their 2.83 - symbols repeatedly, while ‘<a href="#numeric"><code 2.84 + symbols repeatedly, while ‘<a href="#speak-as-numeric"><code 2.85 class=css>numeric</code></a>’ counter styles interpret their symbols as 2.86 digits and build their representation accordingly. The systems are defined 2.87 as follows: 2.88 @@ -630,8 +639,8 @@ 2.89 would be "***"and "†††", etc. It can be used for footnote-style 2.90 markers, and is also sometimes used for alphabetic-style lists for a 2.91 slightly different presentation than what the ‘<a 2.92 - href="#alphabetic"><code class=css>alphabetic</code></a>’ system 2.93 - presents. 2.94 + href="#speak-as-alphabetic"><code class=css>alphabetic</code></a>’ 2.95 + system presents. 2.96 2.97 <p> If the system is <dfn id=symbolic>‘<code 2.98 class=css>symbolic</code>’</dfn>, the ‘<a 2.99 @@ -717,23 +726,24 @@ 2.100 than 20 characters. 2.101 2.102 <h4 id=alphabetic-system><span class=secno>3.1.4. </span> Bijective 2.103 - Numerals: the ‘<a href="#alphabetic"><code 2.104 + Numerals: the ‘<a href="#speak-as-alphabetic"><code 2.105 class=css>alphabetic</code></a>’ system</h4> 2.106 2.107 - <p> The ‘<a href="#alphabetic"><code class=css>alphabetic</code></a>’ 2.108 - counter system interprets the list of <i>counter symbols</i> as digits to 2.109 - an <em title="">alphabetic</em> numbering system, similar to the default 2.110 - ‘<a href="#lower-alpha"><code class=css>lower-alpha</code></a>’ 2.111 - counter style, which wraps from ‘<code class=property>a</code>’, 2.112 - ‘<code class=property>b</code>’, ‘<code class=property>c</code>’, 2.113 - to ‘<code class=property>aa</code>’, ‘<code 2.114 - class=property>ab</code>’, ‘<code class=property>ac</code>’. 2.115 - Alphabetic numbering systems do not contain a digit representing 0; so the 2.116 - first value when a new digit is added is composed solely of the first 2.117 - digit. Alphabetic numbering systems are commonly used for lists, and also 2.118 - appear in many spreadsheet programs to number columns. The first <a 2.119 - href="#counter-symbol"><i>counter symbol</i></a> in the list is 2.120 - interpreted as the digit 1, the second as the digit 2, and so on. 2.121 + <p> The ‘<a href="#speak-as-alphabetic"><code 2.122 + class=css>alphabetic</code></a>’ counter system interprets the list of 2.123 + <i>counter symbols</i> as digits to an <em title="">alphabetic</em> 2.124 + numbering system, similar to the default ‘<a href="#lower-alpha"><code 2.125 + class=css>lower-alpha</code></a>’ counter style, which wraps from 2.126 + ‘<code class=property>a</code>’, ‘<code class=property>b</code>’, 2.127 + ‘<code class=property>c</code>’, to ‘<code 2.128 + class=property>aa</code>’, ‘<code class=property>ab</code>’, 2.129 + ‘<code class=property>ac</code>’. Alphabetic numbering systems do not 2.130 + contain a digit representing 0; so the first value when a new digit is 2.131 + added is composed solely of the first digit. Alphabetic numbering systems 2.132 + are commonly used for lists, and also appear in many spreadsheet programs 2.133 + to number columns. The first <a href="#counter-symbol"><i>counter 2.134 + symbol</i></a> in the list is interpreted as the digit 1, the second as 2.135 + the digit 2, and so on. 2.136 2.137 <p> If the system is <dfn id=alphabetic>‘<code 2.138 class=css>alphabetic</code>’</dfn>, the ‘<a 2.139 @@ -834,7 +844,8 @@ 2.140 <p>Finally, return <var>S</var>. 2.141 2.142 <h4 id=numeric-system><span class=secno>3.1.5. </span> Positional Numerals: 2.143 - the ‘<a href="#numeric"><code class=css>numeric</code></a>’ system</h4> 2.144 + the ‘<a href="#speak-as-numeric"><code class=css>numeric</code></a>’ 2.145 + system</h4> 2.146 2.147 <p> The <dfn id=numeric>‘<code class=css>numeric</code>’</dfn> counter 2.148 system interprets the list of <i>counter symbols</i> as digits to a 2.149 @@ -843,7 +854,7 @@ 2.150 first <a href="#counter-symbol"><i>counter symbol</i></a> in the list is 2.151 interpreted as the digit 0, the second as the digit 1, and so on. 2.152 2.153 - <p> If the system is ‘<a href="#numeric"><code 2.154 + <p> If the system is ‘<a href="#speak-as-numeric"><code 2.155 class=css>numeric</code></a>’, the ‘<a href="#descdef-symbols"><code 2.156 class=property>symbols</code></a>’ descriptor must contain at least two 2.157 <i>counter symbols</i>, or else the ‘<a href="#at-counter-style"><code 2.158 @@ -1152,29 +1163,31 @@ 2.159 ranges, the counter style instead drops down to its fallback counter 2.160 style. 2.161 2.162 - <p>If the value is not ‘<code class=css>auto</code>’, the first value 2.163 - of each range in the list represents the lower bound of the range (with 2.164 - ‘<code class=css>infinite</code>’ representing negative infinity), and 2.165 - the second value represents the upper bound of the range (with ‘<code 2.166 + <p>If the value is not ‘<a href="#speak-as-auto"><code 2.167 + class=css>auto</code></a>’, the first value of each range in the list 2.168 + represents the lower bound of the range (with ‘<code 2.169 + class=css>infinite</code>’ representing negative infinity), and the 2.170 + second value represents the upper bound of the range (with ‘<code 2.171 class=property>infinite</code>’ representing positive infinity). This is 2.172 an inclusive range - it includes both the lower and upper bound numbers. 2.173 The range of the counter style as a whole is the union of the individual 2.174 ranges. If the lower bound of any range is higher than the higher bound, 2.175 the entire descriptor is invalid and must be ignored. 2.176 2.177 - <p>If the value is ‘<code class=css>auto</code>’, the range depends on 2.178 - the counter system. For ‘<a href="#cyclic"><code 2.179 - class=css>cyclic</code></a>’, ‘<a href="#numeric"><code 2.180 - class=css>numeric</code></a>’, and ‘<a href="#fixed"><code 2.181 - class=css>fixed</code></a>’ systems, it must be treated identically to 2.182 - specifying ‘<code class=css>infinite infinite</code>’. For ‘<a 2.183 - href="#alphabetic"><code class=css>alphabetic</code></a>’ and ‘<a 2.184 - href="#symbolic"><code class=css>symbolic</code></a>’, it must be 2.185 - treated identically to ‘<code class=css>1 infinite</code>’. For ‘<a 2.186 - href="#additive"><code class=css>additive</code></a>’, it must be 2.187 - treated identically to ‘<code class=css>0 infinite</code>’. For ‘<a 2.188 - href="#override"><code class=css>override</code></a>’, it must be 2.189 - treated according to the system of the counter style it is overriding. 2.190 + <p>If the value is ‘<a href="#speak-as-auto"><code 2.191 + class=css>auto</code></a>’, the range depends on the counter system. For 2.192 + ‘<a href="#cyclic"><code class=css>cyclic</code></a>’, ‘<a 2.193 + href="#speak-as-numeric"><code class=css>numeric</code></a>’, and ‘<a 2.194 + href="#fixed"><code class=css>fixed</code></a>’ systems, it must be 2.195 + treated identically to specifying ‘<code class=css>infinite 2.196 + infinite</code>’. For ‘<a href="#speak-as-alphabetic"><code 2.197 + class=css>alphabetic</code></a>’ and ‘<a href="#symbolic"><code 2.198 + class=css>symbolic</code></a>’, it must be treated identically to 2.199 + ‘<code class=css>1 infinite</code>’. For ‘<a href="#additive"><code 2.200 + class=css>additive</code></a>’, it must be treated identically to 2.201 + ‘<code class=css>0 infinite</code>’. For ‘<a href="#override"><code 2.202 + class=css>override</code></a>’, it must be treated according to the 2.203 + system of the counter style it is overriding. 2.204 2.205 <p>Some counter style systems have their own implicit ranges, specified 2.206 above in the individual descriptions for each system. The explicit range 2.207 @@ -1293,8 +1306,8 @@ 2.208 descriptor. The ‘<a href="#descdef-symbols"><code 2.209 class=property>symbols</code></a>’ descriptor must be specified if the 2.210 counter system is ‘<a href="#cyclic"><code 2.211 - class=css>cyclic</code></a>’, ‘<a href="#numeric"><code 2.212 - class=css>numeric</code></a>’, ‘<a href="#alphabetic"><code 2.213 + class=css>cyclic</code></a>’, ‘<a href="#speak-as-numeric"><code 2.214 + class=css>numeric</code></a>’, ‘<a href="#speak-as-alphabetic"><code 2.215 class=css>alphabetic</code></a>’, ‘<a href="#symbolic"><code 2.216 class=css>symbolic</code></a>’, or ‘<a href="#fixed"><code 2.217 class=css>fixed</code></a>’, and the ‘<a 2.218 @@ -1332,7 +1345,110 @@ 2.219 href="http://dev.w3.org/csswg/css3-images/#default-object-size">default 2.220 object size</a> of an image <a href="#counter-symbol"><i>counter 2.221 symbol</i></a> is a 1em by 1em square. 2.222 - <!-- ====================================================================== --> 2.223 + 2.224 + <h3 id=counter-style-speak-as><span class=secno>3.8. </span> Speech 2.225 + Synthesis: the ‘<a href="#descdef-speak-as"><code 2.226 + class=property>speak-as</code></a>’ descriptor</h3> 2.227 + 2.228 + <table class=descdef> 2.229 + <tbody> 2.230 + <tr> 2.231 + <th>Name: 2.232 + 2.233 + <td><dfn id=descdef-speak-as>speak-as</dfn> 2.234 + 2.235 + <tr> 2.236 + <th>Value: 2.237 + 2.238 + <td>auto | numeric | alphabetic | bullet | <counter-style-name> 2.239 + 2.240 + <tr> 2.241 + <th>Initial: 2.242 + 2.243 + <td>auto 2.244 + </table> 2.245 + 2.246 + <p> A counter style can be constructed with a meaning that is obvious 2.247 + visually, but impossible to meaningfully represent via a speech 2.248 + synthesizer, or possible but nonsensical when naively read out. The ‘<a 2.249 + href="#descdef-speak-as"><code class=property>speak-as</code></a>’ 2.250 + descriptor describes how to synthesize the spoken form of a counter 2.251 + formatted with the given counter style. Values have the following 2.252 + meanings: 2.253 + 2.254 + <dl> 2.255 + <dt><dfn id=speak-as-auto>‘<code class=css>auto</code>’</dfn> 2.256 + 2.257 + <dd> If the counter style's ‘<a href="#descdef-system"><code 2.258 + class=property>system</code></a>’ is ‘<a 2.259 + href="#speak-as-alphabetic"><code class=css>alphabetic</code></a>’, 2.260 + this value computes to ‘<a href="#speak-as-alphabetic"><code 2.261 + class=css>alphabetic</code></a>’. If the ‘<a 2.262 + href="#descdef-system"><code class=property>system</code></a>’ is ‘<a 2.263 + href="#cyclic"><code class=css>cyclic</code></a>’, this value computes 2.264 + to ‘<a href="#speak-as-symbolic"><code class=css>bullet</code></a>’. 2.265 + Otherwise, this value computes to ‘<a href="#speak-as-numeric"><code 2.266 + class=css>numeric</code></a>’. 2.267 + 2.268 + <dt><dfn id=speak-as-numeric>‘<code class=css>numeric</code>’</dfn> 2.269 + 2.270 + <dd> The counter's value is spoken as a number in the document language. 2.271 + 2.272 + <dt><dfn id=speak-as-alphabetic>‘<code 2.273 + class=css>alphabetic</code>’</dfn> 2.274 + 2.275 + <dd> <a href="#generate-a-counter-representation"><i>Generate a counter 2.276 + representation</i></a> for the value as normal, then spell it out 2.277 + letter-by-letter in the document language. If the UA does not know how to 2.278 + pronounce the symbols, it may handle it as ‘<a 2.279 + href="#speak-as-numeric"><code class=css>numeric</code></a>’. 2.280 + <p> For example, ‘<a href="#lower-greek"><code 2.281 + class=css>lower-greek</code></a>’ in English would be read out as 2.282 + "alpha", "beta", "gamma", etc. Conversely, ‘<a 2.283 + href="#upper-latin"><code class=css>upper-latin</code></a>’ in French 2.284 + would be read out as (in phonetic notation) /a/, /be/, /se/, etc. 2.285 + 2.286 + <dt><dfn id=speak-as-symbolic>‘<code class=css>bullet</code>’</dfn> 2.287 + 2.288 + <dd> The UA speaks a UA-defined phrase or audio cue that represents a list 2.289 + item being read out. 2.290 + 2.291 + <dt><dfn 2.292 + id=speak-as-counter-style><var><counter-style-name></var></dfn> 2.293 + 2.294 + <dd> The counter's value is instead spoken out in the specific style. If 2.295 + the specified style does not exist, this value is treated as ‘<a 2.296 + href="#speak-as-auto"><code class=css>auto</code></a>’. 2.297 + </dl> 2.298 + 2.299 + <div class=example> 2.300 + <p> The ability to defer pronunciation to another counter style can help 2.301 + when the symbols being used aren't actually letters. For example, here's 2.302 + a possible definition of a ‘<a href="#circled-lower-latin"><code 2.303 + class=css>circled-lower-latin</code></a>’ counter-style, using some 2.304 + special unicode characters: 2.305 + 2.306 + <pre class=stylesheet> 2.307 +@counter-style <dfn 2.308 + id=circled-lower-latin>circled-lower-latin</dfn> { 2.309 + system: alphabetic; 2.310 + speak-as: lower-latin; 2.311 + symbols: ⓐ ⓑ ⓒ ⓓ ⓔ ⓕ ⓖ ⓗ ⓘ ⓙ ⓚ ⓛ ⓜ ⓝ ⓞ ⓟ ⓠ ⓡ ⓢ ⓣ ⓤ ⓥ ⓦ ⓧ ⓨ ⓩ; 2.312 + suffix: ''; 2.313 +}</pre> 2.314 + 2.315 + <p> Setting its ‘<a href="#descdef-system"><code 2.316 + class=property>system</code></a>’ to ‘<a 2.317 + href="#speak-as-alphabetic"><code class=css>alphabetic</code></a>’ 2.318 + would normally make the UA try to read out the names of the characters, 2.319 + but in this case that might be something like "Circled Letter A", which 2.320 + is unlikely to make sense. Instead, explicitly setting ‘<a 2.321 + href="#descdef-speak-as"><code class=property>speak-as</code></a>’ to 2.322 + ‘<a href="#lower-latin"><code class=css>lower-latin</code></a>’ 2.323 + ensures that they get read out as their corresponding latin letters, as 2.324 + intended. 2.325 + </div> 2.326 + <!-- ====================================================================== --> 2.327 2.328 <h2 id=symbols-function><span class=secno>4. </span> Defining Anonymous 2.329 Counter Styles: the ‘<code class=css>symbols()</code>’ function</h2> 2.330 @@ -1352,9 +1468,9 @@ 2.331 2.332 <p> Where <symbols-type> is one of the following keywords: ‘<a 2.333 href="#cyclic"><code class=css>cyclic</code></a>’, ‘<a 2.334 - href="#numeric"><code class=css>numeric</code></a>’, ‘<a 2.335 - href="#alphabetic"><code class=css>alphabetic</code></a>’, ‘<a 2.336 - href="#symbolic"><code class=css>symbolic</code></a>’, or ‘<a 2.337 + href="#speak-as-numeric"><code class=css>numeric</code></a>’, ‘<a 2.338 + href="#speak-as-alphabetic"><code class=css>alphabetic</code></a>’, 2.339 + ‘<a href="#symbolic"><code class=css>symbolic</code></a>’, or ‘<a 2.340 href="#fixed"><code class=css>fixed</code></a>’. 2.341 2.342 <p> The ‘<code class=css>symbols()</code>’ function defines an 2.343 @@ -1363,9 +1479,10 @@ 2.344 title=counter-prefix>prefix</i></a> and <a href="#suffix"><i 2.345 title=counter-suffix>suffix</i></a> of ‘<code class=css>""</code>’ 2.346 (the empty string), a <a href="#range"><i 2.347 - title=counter-range>range</i></a> of ‘<code class=css>auto</code>’, a 2.348 - <a href="#fallback-style"><i title=counter-fallback>fallback style</i></a> 2.349 - of ‘<a href="#decimal"><code class=css>decimal</code></a>’, and a <a 2.350 + title=counter-range>range</i></a> of ‘<a href="#speak-as-auto"><code 2.351 + class=css>auto</code></a>’, a <a href="#fallback-style"><i 2.352 + title=counter-fallback>fallback style</i></a> of ‘<a 2.353 + href="#decimal"><code class=css>decimal</code></a>’, and a <a 2.354 href="#negative-sign"><i title=counter-negative>negative sign</i></a> of 2.355 "\2D" ("-" hyphen-minus). The counter style's <a href="#algorithm"><i 2.356 title=counter-algorithm>algorithm</i></a> is constructed by consulting the 2.357 @@ -1737,6 +1854,10 @@ 2.358 class=css>override</code></a>’ system, reusing the algorithm but 2.359 swapping out some of the other descriptors. 2.360 2.361 + <p> All of the counter styles defined in this section have a <a 2.362 + href="#spoken-form"><i title=counter-speak-as>spoken form</i></a> of ‘<a 2.363 + href="#speak-as-numeric"><code class=css>numeric</code></a>’. 2.364 + 2.365 <h3 id=complex-cjk><span class=secno>6.1. </span> Longhand East Asian 2.366 Counter Styles: ‘<a href="#japanese-informal0"><code 2.367 class=css>japanese-informal</code></a>’, ‘<a 2.368 @@ -3226,10 +3347,10 @@ 2.369 <dt><var>name</var> of type <code>DOMString</code>, readonly 2.370 2.371 <dd> The <var>name</var> attribute must return a <code>DOMString</code> 2.372 - object that contains the serialization of the 2.373 - <var><counter-style-name></var> defined for the associated ‘<a 2.374 - href="#at-counter-style"><code class=css>@counter-style</code></a>’ 2.375 - block. 2.376 + object that contains the serialization of the <a 2.377 + href="#speak-as-counter-style"><var><counter-style-name></var></a> 2.378 + defined for the associated ‘<a href="#at-counter-style"><code 2.379 + class=css>@counter-style</code></a>’ block. 2.380 2.381 <dt>everything else 2.382 2.383 @@ -3488,6 +3609,17 @@ 2.384 <td> 2.385 2.386 <tr> 2.387 + <th><a class=descriptor href="#descdef-speak-as">speak-as</a> 2.388 + 2.389 + <td>auto | numeric | alphabetic | bullet | <counter-style-name> 2.390 + 2.391 + <td>auto 2.392 + 2.393 + <td> 2.394 + 2.395 + <td> 2.396 + 2.397 + <tr> 2.398 <th><a class=descriptor href="#descdef-suffix">suffix</a> 2.399 2.400 <td><string> 2.401 @@ -3536,8 +3668,11 @@ 2.402 <li>additive tuple, <a href="#additive-tuple" 2.403 title="additive tuple"><strong>3.7.</strong></a> 2.404 2.405 - <li>‘<a href="#alphabetic"><code class=css>alphabetic</code></a>’, <a 2.406 - href="#alphabetic" title="''alphabetic''"><strong>3.1.4.</strong></a> 2.407 + <li>‘<a href="#speak-as-alphabetic"><code 2.408 + class=css>alphabetic</code></a>’, <a href="#alphabetic" 2.409 + title="''alphabetic''"><strong>3.1.4.</strong></a>, <a 2.410 + href="#speak-as-alphabetic" 2.411 + title="''alphabetic''"><strong>3.8.</strong></a> 2.412 2.413 <li>‘<a href="#armenian"><code class=css>armenian</code></a>’, <a 2.414 href="#armenian" title="''armenian''"><strong>5.1.</strong></a> 2.415 @@ -3545,12 +3680,21 @@ 2.416 <li>authoring tool, <a href="#authoring-tool" 2.417 title="authoring tool"><strong>#</strong></a> 2.418 2.419 + <li>‘<a href="#speak-as-auto"><code class=css>auto</code></a>’, <a 2.420 + href="#speak-as-auto" title="''auto''"><strong>3.8.</strong></a> 2.421 + 2.422 <li>box-corner, <a href="#box-corner" 2.423 title=box-corner><strong>3.1.2.</strong></a> 2.424 2.425 + <li>‘<a href="#speak-as-symbolic"><code class=css>bullet</code></a>’, 2.426 + <a href="#speak-as-symbolic" title="''bullet''"><strong>3.8.</strong></a> 2.427 + 2.428 <li>‘<a href="#circle"><code class=css>circle</code></a>’, <a 2.429 href="#circle" title="''circle''"><strong>5.3.</strong></a> 2.430 2.431 + <li>circled-lower-latin, <a href="#circled-lower-latin" 2.432 + title=circled-lower-latin><strong>3.8.</strong></a> 2.433 + 2.434 <li>‘<a href="#cjk-decimal"><code class=css>cjk-decimal</code></a>’, 2.435 <a href="#cjk-decimal" title="''cjk-decimal''"><strong>5.1.</strong></a> 2.436 2.437 @@ -3572,6 +3716,9 @@ 2.438 <li>counter-range, <a href="#range" 2.439 title=counter-range><strong>2.</strong></a> 2.440 2.441 + <li>counter-speak-as, <a href="#spoken-form" 2.442 + title=counter-speak-as><strong>2.</strong></a> 2.443 + 2.444 <li>‘<a href="#at-counter-style"><code 2.445 class=css>@counter-style</code></a>’, <a href="#at-counter-style" 2.446 title="''@counter-style''"><strong>3.</strong></a> 2.447 @@ -3579,6 +3726,11 @@ 2.448 <li>counter style, <a href="#counter-style" 2.449 title="counter style"><strong>2.</strong></a> 2.450 2.451 + <li><a 2.452 + href="#speak-as-counter-style"><var><counter-style-name></var></a>, <a 2.453 + href="#speak-as-counter-style" 2.454 + title="<counter-style-name>"><strong>3.8.</strong></a> 2.455 + 2.456 <li>counter-suffix, <a href="#suffix" 2.457 title=counter-suffix><strong>2.</strong></a> 2.458 2.459 @@ -3628,8 +3780,12 @@ 2.460 <li>footnote, <a href="#footnote" 2.461 title=footnote><strong>3.1.3.</strong></a> 2.462 2.463 - <li>generate-a-counter, <a href="#generate-a-counter-representation" 2.464 - title=generate-a-counter><strong>2.</strong></a> 2.465 + <li>generate a counter, <a href="#generate-a-counter-representation" 2.466 + title="generate a counter"><strong>2.</strong></a> 2.467 + 2.468 + <li>generate a counter representation, <a 2.469 + href="#generate-a-counter-representation" 2.470 + title="generate a counter representation"><strong>2.</strong></a> 2.471 2.472 <li>‘<a href="#georgian"><code class=css>georgian</code></a>’, <a 2.473 href="#georgian" title="''georgian''"><strong>5.1.</strong></a> 2.474 @@ -3692,8 +3848,9 @@ 2.475 <li>negative, <a href="#descdef-negative" 2.476 title=negative><strong>3.2.</strong></a> 2.477 2.478 - <li>‘<a href="#numeric"><code class=css>numeric</code></a>’, <a 2.479 - href="#numeric" title="''numeric''"><strong>3.1.5.</strong></a> 2.480 + <li>‘<a href="#speak-as-numeric"><code class=css>numeric</code></a>’, 2.481 + <a href="#numeric" title="''numeric''"><strong>3.1.5.</strong></a>, <a 2.482 + href="#speak-as-numeric" title="''numeric''"><strong>3.8.</strong></a> 2.483 2.484 <li>‘<a href="#override"><code class=css>override</code></a>’, <a 2.485 href="#override" title="''override''"><strong>3.1.7.</strong></a> 2.486 @@ -3715,6 +3872,9 @@ 2.487 href="#simp-chinese-informal0" 2.488 title=simp-chinese-informal><strong>6.1.2.</strong></a> 2.489 2.490 + <li>speak-as, <a href="#descdef-speak-as" 2.491 + title=speak-as><strong>3.8.</strong></a> 2.492 + 2.493 <li>‘<a href="#square"><code class=css>square</code></a>’, <a 2.494 href="#square" title="''square''"><strong>5.3.</strong></a> 2.495
3.1 --- a/css-counter-styles-3/Overview.src.html Mon Oct 22 00:33:44 2012 +0200 3.2 +++ b/css-counter-styles-3/Overview.src.html Mon Oct 22 00:41:17 2012 +0200 3.3 @@ -125,6 +125,10 @@ 3.4 <li> 3.5 a <dfn title='counter-range'>range</dfn>, 3.6 which limits the values that a counter style handles 3.7 + 3.8 + <li> 3.9 + a <dfn title='counter-speak-as'>spoken form</dfn>, 3.10 + which describes how to read out the counter style in a speech synthesizer 3.11 3.12 <li> 3.13 and a <dfn title='counter-fallback'>fallback style</dfn>, 3.14 @@ -133,7 +137,7 @@ 3.15 </ul> 3.16 3.17 <p> 3.18 - When asked to <dfn title='generate-a-counter'>generate a counter representation</dfn> 3.19 + When asked to <dfn title='generate a counter|generate a counter representation'>generate a counter representation</dfn> 3.20 using a particular counter style for a particular counter value, 3.21 follow these steps: 3.22 3.23 @@ -919,6 +923,81 @@ 3.24 The <a href="http://dev.w3.org/csswg/css3-images/#default-object-size">default object size</a> of an image <i>counter symbol</i> is a 1em by 1em square. 3.25 3.26 3.27 +<h3 id='counter-style-speak-as'> 3.28 +Speech Synthesis: the 'speak-as' descriptor</h3> 3.29 + 3.30 + <table class='descdef'> 3.31 + <tr> 3.32 + <th>Name: 3.33 + <td><dfn id='descdef-speak-as'>speak-as</dfn> 3.34 + <tr> 3.35 + <th>Value: 3.36 + <td>auto | numeric | alphabetic | bullet | <counter-style-name> 3.37 + <tr> 3.38 + <th>Initial: 3.39 + <td>auto 3.40 + </table> 3.41 + 3.42 + <p> 3.43 + A counter style can be constructed with a meaning that is obvious visually, 3.44 + but impossible to meaningfully represent via a speech synthesizer, 3.45 + or possible but nonsensical when naively read out. 3.46 + The 'speak-as' descriptor describes how to synthesize the spoken form of a counter formatted with the given counter style. 3.47 + Values have the following meanings: 3.48 + 3.49 + <dl> 3.50 + <dt><dfn id='speak-as-auto'>''auto''</dfn> 3.51 + <dd> 3.52 + If the counter style's 'system' is ''alphabetic'', this value computes to ''alphabetic''. 3.53 + If the 'system' is ''cyclic'', this value computes to ''bullet''. 3.54 + Otherwise, this value computes to ''numeric''. 3.55 + 3.56 + <dt><dfn id='speak-as-numeric'>''numeric''</dfn> 3.57 + <dd> 3.58 + The counter's value is spoken as a number in the document language. 3.59 + 3.60 + <dt><dfn id='speak-as-alphabetic'>''alphabetic''</dfn> 3.61 + <dd> 3.62 + <i>Generate a counter representation</i> for the value as normal, 3.63 + then spell it out letter-by-letter in the document language. 3.64 + If the UA does not know how to pronounce the symbols, 3.65 + it may handle it as ''numeric''. 3.66 + 3.67 + <p> 3.68 + For example, ''lower-greek'' in English would be read out as "alpha", "beta", "gamma", etc. 3.69 + Conversely, ''upper-latin'' in French would be read out as (in phonetic notation) /a/, /be/, /se/, etc. 3.70 + 3.71 + <dt><dfn id='speak-as-symbolic'>''bullet''</dfn> 3.72 + <dd> 3.73 + The UA speaks a UA-defined phrase or audio cue that represents a list item being read out. 3.74 + 3.75 + <dt><dfn id='speak-as-counter-style'><var><counter-style-name></var></dfn> 3.76 + <dd> 3.77 + The counter's value is instead spoken out in the specific style. 3.78 + If the specified style does not exist, 3.79 + this value is treated as ''auto''. 3.80 + </dl> 3.81 + 3.82 + <div class='example'> 3.83 + <p> 3.84 + The ability to defer pronunciation to another counter style can help when the symbols being used aren't actually letters. 3.85 + For example, here's a possible definition of a ''circled-lower-latin'' counter-style, using some special unicode characters: 3.86 + 3.87 + <pre class='stylesheet'> 3.88 +@counter-style <dfn>circled-lower-latin</dfn> { 3.89 + system: alphabetic; 3.90 + speak-as: lower-latin; 3.91 + symbols: ⓐ ⓑ ⓒ ⓓ ⓔ ⓕ ⓖ ⓗ ⓘ ⓙ ⓚ ⓛ ⓜ ⓝ ⓞ ⓟ ⓠ ⓡ ⓢ ⓣ ⓤ ⓥ ⓦ ⓧ ⓨ ⓩ; 3.92 + suffix: ''; 3.93 +}</pre> 3.94 + 3.95 + <p> 3.96 + Setting its 'system' to ''alphabetic'' would normally make the UA try to read out the names of the characters, 3.97 + but in this case that might be something like "Circled Letter A", 3.98 + which is unlikely to make sense. 3.99 + Instead, explicitly setting 'speak-as' to ''lower-latin'' ensures that they get read out as their corresponding latin letters, as intended. 3.100 + </div> 3.101 + 3.102 <!-- ====================================================================== --> 3.103 3.104 <h2 id='symbols-function'> 3.105 @@ -1296,6 +1375,9 @@ 3.106 For example, an author can reference one of these styles in an ''override'' system, 3.107 reusing the algorithm but swapping out some of the other descriptors. 3.108 3.109 + <p> 3.110 + All of the counter styles defined in this section have a <i title='counter-speak-as'>spoken form</i> of ''numeric''. 3.111 + 3.112 3.113 <h3 id='complex-cjk'> 3.114 Longhand East Asian Counter Styles: ''japanese-informal'', ''japanese-formal'', ''korean-hangul-formal'', ''korean-hanja-informal'', ''korean-hanja-formal'', ''simp-chinese-informal'', ''simp-chinese-formal'', ''trad-chinese-informal'', ''trad-chinese-formal''</h3>
4.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 4.2 +++ b/css-display-3/Overview.html Mon Oct 22 00:41:17 2012 +0200 4.3 @@ -0,0 +1,1209 @@ 4.4 +<!DOCTYPE html> 4.5 + 4.6 +<html lang=en> 4.7 + <head> 4.8 + <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 4.9 + <title>CSS Display Module Level 3</title> 4.10 + <!-- 4.11 + <link href="http://purl.org/dc/terms/" rel="schema.dcterms"> 4.12 + <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" rel="dcterms.rights"> 4.13 + --> 4.14 + 4.15 + <meta content="CSS Display Module Level 3" name=dcterms.title> 4.16 + <meta content=text name=dcterms.type> 4.17 + <meta content=2012-10-19 name=dcterms.issued> 4.18 + <meta content="http://dev.w3.org/csswg/cssN-FIXME/" name=dcterms.creator> 4.19 + <meta content=W3C name=dcterms.publisher> 4.20 + <meta content="http://www.w3.org/TR/2012/ED-cssN-FIXME-20121019/" 4.21 + name=dcterms.identifier> 4.22 + <link href="#contents" rel=contents> 4.23 + <link href="#index" rel=index> 4.24 + <link href="../default.css" rel=stylesheet type="text/css"> 4.25 + <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet 4.26 + type="text/css"> 4.27 + <style type="text/css"> 4.28 + /* delete this block when you've cleared out all the .replaceme elements */ 4.29 + .replaceme { 4.30 + border: solid red; 4.31 + padding: 0 0.5em; 4.32 + margin: 0 0.1em; 4.33 + background: yellow; 4.34 + color: green; 4.35 + } 4.36 + .replaceme:before { 4.37 + content: "FIXME("; 4.38 + color: black; 4.39 + } 4.40 + .replaceme:after { 4.41 + content: ")"; 4.42 + color: black; 4.43 + } 4.44 + </style> 4.45 + 4.46 + <body> 4.47 + <div class=head> <!--begin-logo--> 4.48 + <p><a href="http://www.w3.org/"><img alt=W3C height=48 4.49 + src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--> 4.50 + 4.51 + <h1>CSS Display Module Level 3</h1> 4.52 + 4.53 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 19 October 4.54 + 2012</h2> 4.55 + 4.56 + <dl> 4.57 + <dt>This version: 4.58 + 4.59 + <dd><a class=replaceme 4.60 + href="http://www.w3.org/TR/2012/ED-cssN-FIXME-20121019/">http://www.w3.org/TR/2012/ED-cssN-FIXME-20121019/</a> 4.61 + 4.62 + <dt>Latest version: 4.63 + 4.64 + <dd><a 4.65 + href="http://www.w3.org/TR/cssN-FIXME/">http://www.w3.org/TR/cssN-FIXME/</a> 4.66 + 4.67 + <dt>Editor's draft: 4.68 + 4.69 + <dd><a 4.70 + href="http://dev.w3.org/csswg/cssN-FIXME/">http://dev.w3.org/csswg/cssN-FIXME/</a> 4.71 + 4.72 + <dt>Previous version: 4.73 + 4.74 + <dd><a href="http://www.w3.org/PreviousVersionURI"> 4.75 + http://www.w3.org/PreviousVersionURI</a> 4.76 + 4.77 + <dt>Issue Tracking: 4.78 + 4.79 + <dd><a 4.80 + href="http://www.w3.org/Style/CSS/Tracker/products/FIXME">http://www.w3.org/Style/CSS/Tracker/products/FIXME</a> 4.81 + 4.82 + <dt>Feedback: 4.83 + 4.84 + <dd><a 4.85 + href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> 4.86 + with subject line “<kbd>[cssN-FIXME] <var>… message topic 4.87 + …</var></kbd>” 4.88 + 4.89 + <dt>Editors: 4.90 + 4.91 + <dd class="h-card vcard"> <a class="p-name fn u-url url" 4.92 + href="http://www.xanthir.com/" rel=author>Tab Atkins Jr.</a> (<span 4.93 + class="p-org org">Google, Inc.</span>), <span 4.94 + class="u-email email">jackalmage@gmail.com</span> 4.95 + </dl> 4.96 + <!--begin-copyright--> 4.97 + <p class=copyright><a 4.98 + href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 4.99 + rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr 4.100 + title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a 4.101 + href="http://www.csail.mit.edu/"><abbr 4.102 + title="Massachusetts Institute of Technology">MIT</abbr></a>, <a 4.103 + href="http://www.ercim.eu/"><abbr 4.104 + title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, 4.105 + <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a 4.106 + href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, 4.107 + <a 4.108 + href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> 4.109 + and <a 4.110 + href="http://www.w3.org/Consortium/Legal/copyright-documents">document 4.111 + use</a> rules apply.</p> 4.112 + <!--end-copyright--> 4.113 + <hr title="Separator for header"> 4.114 + </div> 4.115 + 4.116 + <h2 class="no-num no-toc" id=abstract>Abstract</h2> 4.117 + 4.118 + <p> This module contains the features of CSS relating to the ‘<a 4.119 + href="#display"><code class=property>display</code></a>’ property. <a 4.120 + href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing the 4.121 + rendering of structured documents (such as HTML and XML) on screen, on 4.122 + paper, in speech, etc. 4.123 + 4.124 + <h2 class="no-num no-toc" id=status>Status of this document</h2> 4.125 + 4.126 + <p> This is currently a personal draft, not yet approved by the CSSWG to be 4.127 + an Editor's Draft. (Ignore the branding on the side and heading, which are 4.128 + artifacts of the spec generation process.) <!--//status--> 4.129 + 4.130 + <p>The following features are at risk: … 4.131 + 4.132 + <h2 class="no-num no-toc" id=contents> Table of contents</h2> 4.133 + <!--begin-toc--> 4.134 + 4.135 + <ul class=toc> 4.136 + <li><a href="#intro"><span class=secno>1. </span> Introduction</a> 4.137 + <ul class=toc> 4.138 + <li><a href="#placement"><span class=secno>1.1. </span> Module 4.139 + interactions</a> 4.140 + 4.141 + <li><a href="#values"><span class=secno>1.2. </span> Values</a> 4.142 + </ul> 4.143 + 4.144 + <li><a href="#the-display-properties"><span class=secno>2. </span> The 4.145 + Display Properties</a> 4.146 + <ul class=toc> 4.147 + <li><a href="#the-display-inside"><span class=secno>2.1. </span> Setting 4.148 + the layout mode: the ‘<code class=property>display-inside</code>’ 4.149 + property</a> 4.150 + 4.151 + <li><a href="#the-display-outside"><span class=secno>2.2. </span> 4.152 + Interacting with the layout mode: the ‘<code 4.153 + class=property>display-outside</code>’ property</a> 4.154 + 4.155 + <li><a href="#the-display-box"><span class=secno>2.3. </span> 4.156 + Controlling box generation: the ‘<code 4.157 + class=property>display-box</code>’ property</a> 4.158 + 4.159 + <li><a href="#the-display-extras"><span class=secno>2.4. </span> 4.160 + Additional stuff: the ‘<code class=property>display-extras</code>’ 4.161 + property</a> 4.162 + 4.163 + <li><a href="#the-display"><span class=secno>2.5. </span> The ‘<code 4.164 + class=property>display</code>’ shorthand property</a> 4.165 + </ul> 4.166 + 4.167 + <li><a href="#conformance"><span class=secno>3. </span> Conformance</a> 4.168 + <ul class=toc> 4.169 + <li><a href="#conventions"><span class=secno>3.1. </span> Document 4.170 + conventions</a> 4.171 + 4.172 + <li><a href="#conformance-classes"><span class=secno>3.2. </span> 4.173 + Conformance classes</a> 4.174 + 4.175 + <li><a href="#partial"><span class=secno>3.3. </span> Partial 4.176 + implementations</a> 4.177 + 4.178 + <li><a href="#experimental"><span class=secno>3.4. </span> Experimental 4.179 + implementations</a> 4.180 + 4.181 + <li><a href="#testing"><span class=secno>3.5. </span> Non-experimental 4.182 + implementations</a> 4.183 + 4.184 + <li><a href="#cr-exit-criteria"><span class=secno>3.6. </span> CR exit 4.185 + criteria</a> 4.186 + </ul> 4.187 + 4.188 + <li class=no-num><a href="#acknowledgments"> Acknowledgments</a> 4.189 + 4.190 + <li class=no-num><a href="#references"> References</a> 4.191 + <ul class=toc> 4.192 + <li class=no-num><a href="#normative-references"> Normative 4.193 + references</a> 4.194 + 4.195 + <li class=no-num><a href="#other-references"> Other references</a> 4.196 + </ul> 4.197 + 4.198 + <li class=no-num><a href="#index"> Index</a> 4.199 + 4.200 + <li class=no-num><a href="#property-index"> Property index</a> 4.201 + </ul> 4.202 + <!--end-toc--> 4.203 + 4.204 + <h2 id=intro><span class=secno>1. </span> Introduction</h2> 4.205 + 4.206 + <p><em>This section is not normative.</em> 4.207 + 4.208 + <p> <var class=replaceme>Provide background, motivation, etc.</var> 4.209 + 4.210 + <h3 id=placement><span class=secno>1.1. </span> Module interactions</h3> 4.211 + 4.212 + <p class=replaceme> Explain, normatively, how this module affects the 4.213 + definition of CSS. 4.214 + 4.215 + <p> This module replaces and extends the <var class=replaceme>SUMMARIZE 4.216 + HERE</var> features defined in <a href="#CSS21" 4.217 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> sections <var 4.218 + class=replaceme>W.X and Y.Z</var>. 4.219 + 4.220 + <p> None of the properties in this module apply to the 4.221 + <code>::first-line</code> or <code>::first-letter</code> pseudo-elements. 4.222 + 4.223 + <h3 id=values><span class=secno>1.2. </span> Values</h3> 4.224 + 4.225 + <p>This specification follows the <a 4.226 + href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property 4.227 + definition conventions</a> from <a href="#CSS21" 4.228 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in 4.229 + this specification are defined in CSS Level 2 Revision 1 <a 4.230 + href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS 4.231 + modules may expand the definitions of these value types: for example <a 4.232 + href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>, 4.233 + when combined with this module, expands the definition of the 4.234 + <color> value type as used in this specification. 4.235 + 4.236 + <p>In addition to the property-specific values listed in their definitions, 4.237 + all properties defined in this specification also accept the <a 4.238 + href="http://www.w3.org/TR/css3-values/#common-keywords">CSS-wide 4.239 + keywords</a> as their property value. For readability it has not been 4.240 + repeated explicitly. 4.241 + 4.242 + <h2 id=the-display-properties><span class=secno>2. </span> The Display 4.243 + Properties</h2> 4.244 + 4.245 + <p> The ‘<a href="#display"><code class=property>display</code></a>’ 4.246 + shorthand and its associated family of properties control the layout mode 4.247 + of elements (how the element determines the sizes and positions of itself 4.248 + and its descendants), and what boxes they and their descendants generate. 4.249 + 4.250 + <h3 id=the-display-inside><span class=secno>2.1. </span> Setting the layout 4.251 + mode: the ‘<a href="#display-inside"><code 4.252 + class=property>display-inside</code></a>’ property</h3> 4.253 + 4.254 + <table class=propdef> 4.255 + <tbody> 4.256 + <tr> 4.257 + <th>Name: 4.258 + 4.259 + <td><dfn id=display-inside>display-inside</dfn> 4.260 + 4.261 + <tr> 4.262 + <th>Value: 4.263 + 4.264 + <td>auto | block | table | flex | grid 4.265 + 4.266 + <tr> 4.267 + <th>Initial: 4.268 + 4.269 + <td>auto 4.270 + 4.271 + <tr> 4.272 + <th>Applies To: 4.273 + 4.274 + <td>all elements 4.275 + 4.276 + <tr> 4.277 + <th>Inherited: 4.278 + 4.279 + <td>no 4.280 + 4.281 + <tr> 4.282 + <th>Percentages: 4.283 + 4.284 + <td>N/A 4.285 + 4.286 + <tr> 4.287 + <th>Computed Value: 4.288 + 4.289 + <td>a keyword 4.290 + </table> 4.291 + 4.292 + <dl> 4.293 + <dt><dfn id="display-inside:auto">auto</dfn> 4.294 + 4.295 + <dd> If the element's computed ‘<a href="#display-outside"><code 4.296 + class=property>display-outside</code></a>’ value is ‘<a 4.297 + href="#display-outside:inline-level"><code 4.298 + class=css>inline-level</code></a>’, the element is an <i>inline 4.299 + element</i>, and lays out its contents using inline layout. <a 4.300 + href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> If the 4.301 + element's computed ‘<a href="#display-outside"><code 4.302 + class=property>display-outside</code></a>’ value is ‘<a 4.303 + href="#display-outside:table-row-group"><code 4.304 + class=css>table-row-group</code></a>’, ‘<a 4.305 + href="#display-outside:table-header-group"><code 4.306 + class=css>table-header-group</code></a>’, ‘<a 4.307 + href="#display-outside:table-footer-group"><code 4.308 + class=css>table-footer-group</code></a>’, ‘<a 4.309 + href="#display-outside:table-row"><code 4.310 + class=css>table-row</code></a>’, ‘<a 4.311 + href="#display-outside:table-column-group"><code 4.312 + class=css>table-column-group</code></a>’, or ‘<a 4.313 + href="#display-outside:table-column"><code 4.314 + class=css>table-column</code></a>’, this elements acts as normal for 4.315 + its given ‘<a href="#display-outside"><code 4.316 + class=property>display-outside</code></a>’ value. Otherwise, this value 4.317 + computes to ‘<a href="#display:block"><code 4.318 + class=css>block</code></a>’. 4.319 + 4.320 + <dt><dfn id="display-inside:block">block</dfn> 4.321 + 4.322 + <dd> The element lays out its contents using block layout. <a 4.323 + href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 4.324 + 4.325 + <dt><dfn id="display-inside:table">table</dfn> 4.326 + 4.327 + <dd> The element lays out its contents using table layout. <a 4.328 + href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 4.329 + 4.330 + <dt><dfn id="display-inside:flex">flex</dfn> 4.331 + 4.332 + <dd> The element lays out its contents using flex layout. <a 4.333 + href="#CSS3-FLEXBOX" 4.334 + rel=biblioentry>[CSS3-FLEXBOX]<!--{{!CSS3-FLEXBOX}}--></a> 4.335 + 4.336 + <dt><dfn id="display-inside:grid">grid</dfn> 4.337 + 4.338 + <dd> The element lays out its contents using grid layout. [[!CSS3-GRID]] 4.339 + </dl> 4.340 + 4.341 + <h3 id=the-display-outside><span class=secno>2.2. </span> Interacting with 4.342 + the layout mode: the ‘<a href="#display-outside"><code 4.343 + class=property>display-outside</code></a>’ property</h3> 4.344 + 4.345 + <table class=propdef> 4.346 + <tbody> 4.347 + <tr> 4.348 + <th>Name: 4.349 + 4.350 + <td><dfn id=display-outside>display-outside</dfn> 4.351 + 4.352 + <tr> 4.353 + <th>Value: 4.354 + 4.355 + <td>block-level | inline-level | table-row-group | table-header-group | 4.356 + table-footer-group | table-row | table-cell | table-column-group | 4.357 + table-column | table-caption 4.358 + 4.359 + <tr> 4.360 + <th>Initial: 4.361 + 4.362 + <td>inline-level 4.363 + 4.364 + <tr> 4.365 + <th>Applies To: 4.366 + 4.367 + <td>all elements 4.368 + 4.369 + <tr> 4.370 + <th>Inherited: 4.371 + 4.372 + <td>no 4.373 + 4.374 + <tr> 4.375 + <th>Percentages: 4.376 + 4.377 + <td>N/A 4.378 + 4.379 + <tr> 4.380 + <th>Computed Value: 4.381 + 4.382 + <td>as specified 4.383 + </table> 4.384 + 4.385 + <dl> 4.386 + <dt><dfn id="display-outside:block-level">block-level</dfn> 4.387 + 4.388 + <dd> The element is <a 4.389 + href="#display-outside:block-level"><i>block-level</i></a>, and 4.390 + participates in a block formatting context. Other formatting contexts, 4.391 + such as flex formatting contexts, may also work with <a 4.392 + href="#display-outside:block-level"><i>block-level</i></a> elements. <a 4.393 + href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 4.394 + 4.395 + <dt><dfn id="display-outside:inline-level">inline-level</dfn> 4.396 + 4.397 + <dd> The element is <a 4.398 + href="#display-outside:inline-level"><i>inline-level</i></a>, and 4.399 + participates in an inline formatting context. <a href="#CSS21" 4.400 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 4.401 + 4.402 + <dt><dfn id="display-outside:table-row-group">table-row-group</dfn>, <dfn 4.403 + id="display-outside:table-header-group">table-header-group</dfn>, <dfn 4.404 + id="display-outside:table-footer-group">table-footer-group</dfn>, <dfn 4.405 + id="display-outside:table-row">table-row</dfn>, <dfn 4.406 + id="display-outside:table-cell">table-cell</dfn>, <dfn 4.407 + id="display-outside:table-column-group">table-column-group</dfn>, <dfn 4.408 + id="display-outside:table-column">table-column</dfn>, <dfn 4.409 + id="display-outside:table-caption">table-caption</dfn> 4.410 + 4.411 + <dd> The element is an internal table element, and participates in a table 4.412 + layout context. <a href="#CSS21" 4.413 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 4.414 + </dl> 4.415 + 4.416 + <p class=issue> Do we need special bits about some of the interactions with 4.417 + ‘<a href="#display-inside"><code 4.418 + class=property>display-inside</code></a>’? For example, how ‘<code 4.419 + class=css>display:inline-level block;</code>’ works? Or does that fall 4.420 + out of what exists, and the definitions of Block Layout in 2.1? (...or a 4.421 + new Block Layout spec, explaining all the 2.1 stuff more sanely?) 4.422 + 4.423 + <p class=issue> Is <a 4.424 + href="http://lists.w3.org/Archives/Public/www-style/2012Jul/0450.html">fantasai's 4.425 + proposal for a run-in model</a> sane enough to include in this spec? 4.426 + 4.427 + <h3 id=the-display-box><span class=secno>2.3. </span> Controlling box 4.428 + generation: the ‘<a href="#display-box"><code 4.429 + class=property>display-box</code></a>’ property</h3> 4.430 + 4.431 + <table class=propdef> 4.432 + <tbody> 4.433 + <tr> 4.434 + <th>Name: 4.435 + 4.436 + <td><dfn id=display-box>display-box</dfn> 4.437 + 4.438 + <tr> 4.439 + <th>Value: 4.440 + 4.441 + <td>normal | none | contents 4.442 + 4.443 + <tr> 4.444 + <th>Initial: 4.445 + 4.446 + <td>normal 4.447 + 4.448 + <tr> 4.449 + <th>Applies To: 4.450 + 4.451 + <td>all elements 4.452 + 4.453 + <tr> 4.454 + <th>Inherited: 4.455 + 4.456 + <td>no 4.457 + 4.458 + <tr> 4.459 + <th>Percentages: 4.460 + 4.461 + <td>N/A 4.462 + 4.463 + <tr> 4.464 + <th>Computed Value: 4.465 + 4.466 + <td>as specified 4.467 + </table> 4.468 + 4.469 + <dl> 4.470 + <dt><dfn id="display-box:normal">normal</dfn> 4.471 + 4.472 + <dd> The element generates boxes as normal, per its other ‘<code 4.473 + class=css>display-*</code>’ properties. 4.474 + 4.475 + <dt><dfn id="display-box:none">none</dfn> 4.476 + 4.477 + <dd> The element generates no boxes at all. 4.478 + 4.479 + <dt><dfn id="display-box:contents">contents</dfn> 4.480 + 4.481 + <dd> The element itself does not generate any boxes, but its children and 4.482 + pseudo-elements still generate boxes as normal. For the purposes of box 4.483 + generation and layout, the element must be treated as if it had been 4.484 + replaced with its children and pseudo-elements in the document tree. 4.485 + </dl> 4.486 + 4.487 + <p class=issue> Is there a need for a value that suppresses box generation 4.488 + for layout purposes, but still generates them for the purposes of 4.489 + animations/counters/etc.? 4.490 + 4.491 + <p class=issue> ‘<a href="#display-box:contents"><code 4.492 + class=css>contents</code></a>’ currently only has an effect on box 4.493 + generation and layout. Other things that care about the document tree are 4.494 + unaffected, like counter scopes. Is this what we want? 4.495 + 4.496 + <h3 id=the-display-extras><span class=secno>2.4. </span> Additional stuff: 4.497 + the ‘<a href="#display-extras"><code 4.498 + class=property>display-extras</code></a>’ property</h3> 4.499 + 4.500 + <table class=propdef> 4.501 + <tbody> 4.502 + <tr> 4.503 + <th>Name: 4.504 + 4.505 + <td><dfn id=display-extras>display-extras</dfn> 4.506 + 4.507 + <tr> 4.508 + <th>Value: 4.509 + 4.510 + <td>none | [ list-item ] 4.511 + 4.512 + <tr> 4.513 + <th>Initial: 4.514 + 4.515 + <td>none 4.516 + 4.517 + <tr> 4.518 + <th>Applies To: 4.519 + 4.520 + <td>all elements 4.521 + 4.522 + <tr> 4.523 + <th>Inherited: 4.524 + 4.525 + <td>no 4.526 + 4.527 + <tr> 4.528 + <th>Percentages: 4.529 + 4.530 + <td>N/A 4.531 + 4.532 + <tr> 4.533 + <th>Computed Value: 4.534 + 4.535 + <td>as specified 4.536 + </table> 4.537 + 4.538 + <dl> 4.539 + <dt><dfn id="display-extras:list-item">list-item</dfn> 4.540 + 4.541 + <dd> The element generates a <code>::marker</code> pseudo-element and is 4.542 + considered a <a href="../css3-lists/#list-item">list item</a>. 4.543 + </dl> 4.544 + 4.545 + <h3 id=the-display><span class=secno>2.5. </span> The ‘<a 4.546 + href="#display"><code class=property>display</code></a>’ shorthand 4.547 + property</h3> 4.548 + 4.549 + <table class=propdef> 4.550 + <tbody> 4.551 + <tr> 4.552 + <th>Name: 4.553 + 4.554 + <td><dfn id=display>display</dfn> 4.555 + 4.556 + <tr> 4.557 + <th>Value: 4.558 + 4.559 + <td>inline | block | list-item | inline-list-item | inline-block | table 4.560 + | inline-table | table-cell | table-caption | flex | inline-flex | grid 4.561 + | inline-grid | none | [ <‘<a href="#display-inside"><code 4.562 + class=property>display-inside</code></a>’> || <‘<a 4.563 + href="#display-outside"><code 4.564 + class=property>display-outside</code></a>’> || <‘<a 4.565 + href="#display-box"><code class=property>display-box</code></a>’> || 4.566 + <‘<a href="#display-extras"><code 4.567 + class=property>display-extras</code></a>’> ] 4.568 + 4.569 + <tr> 4.570 + <th>Initial: 4.571 + 4.572 + <td>see individual properties 4.573 + 4.574 + <tr> 4.575 + <th>Applies To: 4.576 + 4.577 + <td>all elements 4.578 + 4.579 + <tr> 4.580 + <th>Inherited: 4.581 + 4.582 + <td>no 4.583 + 4.584 + <tr> 4.585 + <th>Percentages: 4.586 + 4.587 + <td>see individual properties 4.588 + 4.589 + <tr> 4.590 + <th>Computed Value: 4.591 + 4.592 + <td>see individual properties 4.593 + 4.594 + <tr> 4.595 + <th>Animatable: 4.596 + 4.597 + <td>see individual properties 4.598 + </table> 4.599 + 4.600 + <p> The single-keyword values listed explicitly in the grammar above are 4.601 + handled specially, for legacy reasons. All other single-keyword values, 4.602 + and all other values in general, are handled as normal for shorthands. 4.603 + 4.604 + <p class=issue> The general rule for new layout modes seems to be that 4.605 + they're block-level by default. However, this conflicts with the default 4.606 + value of ‘<a href="#display-outside"><code 4.607 + class=property>display-outside</code></a>’, which is ‘<a 4.608 + href="#display-outside:inline-level"><code 4.609 + class=css>inline-level</code></a>’. What's the best way to address this? 4.610 + Simplest answer is to just expand this list of special values as we go 4.611 + along. Another possibility is to magic up the expansion in a different 4.612 + way, so that if the value is just a ‘<a href="#display-inside"><code 4.613 + class=property>display-inside</code></a>’ keyword, ‘<a 4.614 + href="#display-outside"><code class=property>display-outside</code></a>’ 4.615 + defaults to ‘<a href="#display-outside:block-level"><code 4.616 + class=css>block-level</code></a>’. If the latter is chosen, we could 4.617 + remove several more of the special expansions below (all the ones that are 4.618 + identical to a ‘<a href="#display-inside"><code 4.619 + class=property>display-inside</code></a>’ value). 4.620 + 4.621 + <p class=note> Several of the "special" expansions below are actually just 4.622 + what the shorthand would expand to normally. They're included here for 4.623 + clarity, as they're very familiar from long usage in CSS 2.1, before the 4.624 + ‘<a href="#display"><code class=property>display</code></a>’ property 4.625 + became a shorthand. 4.626 + 4.627 + <dl> 4.628 + <dt><dfn id="display:inline">inline</dfn> 4.629 + 4.630 + <dd> Expands identically to ‘<code class=css>inline-level 4.631 + auto</code>’. 4.632 + 4.633 + <dt><dfn id="display:block">block</dfn> 4.634 + 4.635 + <dd> Expands identically to ‘<code class=css>block-level 4.636 + block</code>’. 4.637 + 4.638 + <dt><dfn id="display:list-item">list-item</dfn> 4.639 + 4.640 + <dd> Expands identically to ‘<code class=css>block-level block 4.641 + list-item</code>’. 4.642 + 4.643 + <dt><dfn id="display:inline-list-item">inline-list-item</dfn> 4.644 + 4.645 + <dd> Expands identically to ‘<code class=css>inline-level block 4.646 + list-item</code>’. 4.647 + 4.648 + <dt><dfn id="display:inline-block">inline-block</dfn> 4.649 + 4.650 + <dd> Expands identically to ‘<code class=css>inline-level 4.651 + block</code>’. 4.652 + 4.653 + <dt><dfn id="display:table">table</dfn> 4.654 + 4.655 + <dd> Expands identically to ‘<code class=css>block-level 4.656 + table</code>’. 4.657 + 4.658 + <dt><dfn id="display:inline-table">inline-table</dfn> 4.659 + 4.660 + <dd> Expands identically to ‘<code class=css>inline-level 4.661 + table</code>’. 4.662 + 4.663 + <dt><dfn id="display:table-caption">table-caption</dfn> 4.664 + 4.665 + <dd> Expands identically to ‘<code class=css>table-caption 4.666 + block</code>’. 4.667 + 4.668 + <dt><dfn id="display:table-cell">table-cell</dfn> 4.669 + 4.670 + <dd> Expands identically to ‘<code class=css>table-cell block</code>’. 4.671 + 4.672 + <dt><dfn id="display:flex">flex</dfn> 4.673 + 4.674 + <dd> Expands identically to ‘<code class=css>block-level flex</code>’. 4.675 + 4.676 + <dt><dfn id="display:inline-flex">inline-flex</dfn> 4.677 + 4.678 + <dd> Expands identically to ‘<code class=css>inline-level 4.679 + flex</code>’. 4.680 + 4.681 + <dt><dfn id="display:grid">grid</dfn> 4.682 + 4.683 + <dd> Expands identically to ‘<code class=css>block-level grid</code>’. 4.684 + 4.685 + <dt><dfn id="display:inline-grid">inline-grid</dfn> 4.686 + 4.687 + <dd> Expands identically to ‘<code class=css>inline-level 4.688 + grid</code>’. 4.689 + 4.690 + <dt><dfn id="display:none">none</dfn> 4.691 + 4.692 + <dd> Expands identically to ‘<code class=css>inline-level auto 4.693 + none</code>’. 4.694 + </dl> 4.695 + <!-- 4.696 + 4.697 +TTTTTTTTTTTTTTTTTTTTTTTHHHHHHHHH HHHHHHHHHEEEEEEEEEEEEEEEEEEEEEE 4.698 +T:::::::::::::::::::::TH:::::::H H:::::::HE::::::::::::::::::::E 4.699 +T:::::::::::::::::::::TH:::::::H H:::::::HE::::::::::::::::::::E 4.700 +T:::::TT:::::::TT:::::THH::::::H H::::::HHEE::::::EEEEEEEEE::::E 4.701 +TTTTTT T:::::T TTTTTT H:::::H H:::::H E:::::E EEEEEE 4.702 + T:::::T H:::::H H:::::H E:::::E 4.703 + T:::::T H::::::HHHHH::::::H E::::::EEEEEEEEEE 4.704 + T:::::T H:::::::::::::::::H E:::::::::::::::E 4.705 + T:::::T H:::::::::::::::::H E:::::::::::::::E 4.706 + T:::::T H::::::HHHHH::::::H E::::::EEEEEEEEEE 4.707 + T:::::T H:::::H H:::::H E:::::E 4.708 + T:::::T H:::::H H:::::H E:::::E EEEEEE 4.709 + TT:::::::TT HH::::::H H::::::HHEE::::::EEEEEEEE:::::E 4.710 + T:::::::::T H:::::::H H:::::::HE::::::::::::::::::::E 4.711 + T:::::::::T H:::::::H H:::::::HE::::::::::::::::::::E 4.712 + TTTTTTTTTTT HHHHHHHHH HHHHHHHHHEEEEEEEEEEEEEEEEEEEEEE 4.713 + 4.714 + 4.715 + 4.716 +EEEEEEEEEEEEEEEEEEEEEENNNNNNNN NNNNNNNNDDDDDDDDDDDDD 4.717 +E::::::::::::::::::::EN:::::::N N::::::ND::::::::::::DDD 4.718 +E::::::::::::::::::::EN::::::::N N::::::ND:::::::::::::::DD 4.719 +EE::::::EEEEEEEEE::::EN:::::::::N N::::::NDDD:::::DDDDD:::::D 4.720 + E:::::E EEEEEEN::::::::::N N::::::N D:::::D D:::::D 4.721 + E:::::E N:::::::::::N N::::::N D:::::D D:::::D 4.722 + E::::::EEEEEEEEEE N:::::::N::::N N::::::N D:::::D D:::::D 4.723 + E:::::::::::::::E N::::::N N::::N N::::::N D:::::D D:::::D 4.724 + E:::::::::::::::E N::::::N N::::N:::::::N D:::::D D:::::D 4.725 + E::::::EEEEEEEEEE N::::::N N:::::::::::N D:::::D D:::::D 4.726 + E:::::E N::::::N N::::::::::N D:::::D D:::::D 4.727 + E:::::E EEEEEEN::::::N N:::::::::N D:::::D D:::::D 4.728 +EE::::::EEEEEEEE:::::EN::::::N N::::::::NDDD:::::DDDDD:::::D 4.729 +E::::::::::::::::::::EN::::::N N:::::::ND:::::::::::::::DD 4.730 +E::::::::::::::::::::EN::::::N N::::::ND::::::::::::DDD 4.731 +EEEEEEEEEEEEEEEEEEEEEENNNNNNNN NNNNNNNDDDDDDDDDDDDD 4.732 +--> 4.733 + 4.734 + <h2 id=conformance><span class=secno>3. </span> Conformance</h2> 4.735 + 4.736 + <h3 id=conventions><span class=secno>3.1. </span> Document conventions</h3> 4.737 + 4.738 + <p>Conformance requirements are expressed with a combination of descriptive 4.739 + assertions and RFC 2119 terminology. The key words “MUST”, “MUST 4.740 + NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, 4.741 + “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the 4.742 + normative parts of this document are to be interpreted as described in RFC 4.743 + 2119. However, for readability, these words do not appear in all uppercase 4.744 + letters in this specification. 4.745 + 4.746 + <p>All of the text of this specification is normative except sections 4.747 + explicitly marked as non-normative, examples, and notes. <a 4.748 + href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a> 4.749 + 4.750 + <p>Examples in this specification are introduced with the words “for 4.751 + example” or are set apart from the normative text with 4.752 + <code>class="example"</code>, like this: 4.753 + 4.754 + <div class=example> 4.755 + <p>This is an example of an informative example. 4.756 + </div> 4.757 + 4.758 + <p>Informative notes begin with the word “Note” and are set apart from 4.759 + the normative text with <code>class="note"</code>, like this: 4.760 + 4.761 + <p class=note>Note, this is an informative note. 4.762 + 4.763 + <h3 id=conformance-classes><span class=secno>3.2. </span> Conformance 4.764 + classes</h3> 4.765 + 4.766 + <p>Conformance to <var class=replaceme>CSS TEMPLATE Module</var> is defined 4.767 + for three conformance classes: 4.768 + 4.769 + <dl> 4.770 + <dt><dfn id=style-sheet title="style sheet!!as conformance class">style 4.771 + sheet</dfn> 4.772 + 4.773 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 4.774 + style sheet</a>. 4.775 + 4.776 + <dt><dfn id=renderer>renderer</dfn> 4.777 + 4.778 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 4.779 + that interprets the semantics of a style sheet and renders documents that 4.780 + use them. 4.781 + 4.782 + <dt><dfn id=authoring-tool>authoring tool</dfn> 4.783 + 4.784 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 4.785 + that writes a style sheet. 4.786 + </dl> 4.787 + 4.788 + <p>A style sheet is conformant to <var class=replaceme>CSS TEMPLATE 4.789 + Module</var> if all of its statements that use syntax defined in this 4.790 + module are valid according to the generic CSS grammar and the individual 4.791 + grammars of each feature defined in this module. 4.792 + 4.793 + <p>A renderer is conformant to <var class=replaceme>CSS TEMPLATE 4.794 + Module</var> if, in addition to interpreting the style sheet as defined by 4.795 + the appropriate specifications, it supports all the features defined by 4.796 + <var class=replaceme>CSS TEMPLATE Module</var> by parsing them correctly 4.797 + and rendering the document accordingly. However, the inability of a UA to 4.798 + correctly render a document due to limitations of the device does not make 4.799 + the UA non-conformant. (For example, a UA is not required to render color 4.800 + on a monochrome monitor.) 4.801 + 4.802 + <p>An authoring tool is conformant to <var class=replaceme>CSS TEMPLATE 4.803 + Module</var> if it writes style sheets that are syntactically correct 4.804 + according to the generic CSS grammar and the individual grammars of each 4.805 + feature in this module, and meet all other conformance requirements of 4.806 + style sheets as described in this module. 4.807 + 4.808 + <h3 id=partial><span class=secno>3.3. </span> Partial implementations</h3> 4.809 + 4.810 + <p>So that authors can exploit the forward-compatible parsing rules to 4.811 + assign fallback values, CSS renderers <strong>must</strong> treat as 4.812 + invalid (and <a 4.813 + href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as 4.814 + appropriate</a>) any at-rules, properties, property values, keywords, and 4.815 + other syntactic constructs for which they have no usable level of support. 4.816 + In particular, user agents <strong>must not</strong> selectively ignore 4.817 + unsupported component values and honor supported values in a single 4.818 + multi-value property declaration: if any value is considered invalid (as 4.819 + unsupported values must be), CSS requires that the entire declaration be 4.820 + ignored. 4.821 + 4.822 + <h3 id=experimental><span class=secno>3.4. </span> Experimental 4.823 + implementations</h3> 4.824 + 4.825 + <p>To avoid clashes with future CSS features, the CSS2.1 specification 4.826 + reserves a <a 4.827 + href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 4.828 + syntax</a> for proprietary and experimental extensions to CSS. 4.829 + 4.830 + <p>Prior to a specification reaching the Candidate Recommendation stage in 4.831 + the W3C process, all implementations of a CSS feature are considered 4.832 + experimental. The CSS Working Group recommends that implementations use a 4.833 + vendor-prefixed syntax for such features, including those in W3C Working 4.834 + Drafts. This avoids incompatibilities with future changes in the draft. 4.835 + 4.836 + <h3 id=testing><span class=secno>3.5. </span> Non-experimental 4.837 + implementations</h3> 4.838 + 4.839 + <p>Once a specification reaches the Candidate Recommendation stage, 4.840 + non-experimental implementations are possible, and implementors should 4.841 + release an unprefixed implementation of any CR-level feature they can 4.842 + demonstrate to be correctly implemented according to spec. 4.843 + 4.844 + <p>To establish and maintain the interoperability of CSS across 4.845 + implementations, the CSS Working Group requests that non-experimental CSS 4.846 + renderers submit an implementation report (and, if necessary, the 4.847 + testcases used for that implementation report) to the W3C before releasing 4.848 + an unprefixed implementation of any CSS features. Testcases submitted to 4.849 + W3C are subject to review and correction by the CSS Working Group. 4.850 + 4.851 + <p>Further information on submitting testcases and implementation reports 4.852 + can be found from on the CSS Working Group's website at <a 4.853 + href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 4.854 + Questions should be directed to the <a 4.855 + href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> 4.856 + mailing list. 4.857 + 4.858 + <h3 id=cr-exit-criteria><span class=secno>3.6. </span> CR exit criteria</h3> 4.859 + 4.860 + <p class=replaceme>Remove this section unless/until the module is in CR.</p> 4.861 + <!-- This text was <a href="http://www.w3.org/Style/CSS/Tracker/actions/44"> decided on 2008-06-04.</a> --> 4.862 + 4.863 + <p> For this specification to be advanced to Proposed Recommendation, there 4.864 + must be at least two independent, interoperable implementations of each 4.865 + feature. Each feature may be implemented by a different set of products, 4.866 + there is no requirement that all features be implemented by a single 4.867 + product. For the purposes of this criterion, we define the following 4.868 + terms: 4.869 + 4.870 + <dl> 4.871 + <dt>independent 4.872 + 4.873 + <dd>each implementation must be developed by a different party and cannot 4.874 + share, reuse, or derive from code used by another qualifying 4.875 + implementation. Sections of code that have no bearing on the 4.876 + implementation of this specification are exempt from this requirement. 4.877 + 4.878 + <dt>interoperable 4.879 + 4.880 + <dd>passing the respective test case(s) in the official CSS test suite, 4.881 + or, if the implementation is not a Web browser, an equivalent test. Every 4.882 + relevant test in the test suite should have an equivalent test created if 4.883 + such a user agent (UA) is to be used to claim interoperability. In 4.884 + addition if such a UA is to be used to claim interoperability, then there 4.885 + must one or more additional UAs which can also pass those equivalent 4.886 + tests in the same way for the purpose of interoperability. The equivalent 4.887 + tests must be made publicly available for the purposes of peer review. 4.888 + 4.889 + <dt>implementation 4.890 + 4.891 + <dd>a user agent which: 4.892 + <ol class=inline> 4.893 + <li>implements the specification. 4.894 + 4.895 + <li>is available to the general public. The implementation may be a 4.896 + shipping product or other publicly available version (i.e., beta 4.897 + version, preview release, or “nightly build”). Non-shipping product 4.898 + releases must have implemented the feature(s) for a period of at least 4.899 + one month in order to demonstrate stability. 4.900 + 4.901 + <li>is not experimental (i.e., a version specifically designed to pass 4.902 + the test suite and is not intended for normal usage going forward). 4.903 + </ol> 4.904 + </dl> 4.905 + 4.906 + <p>The specification will remain Candidate Recommendation for at least six 4.907 + months. 4.908 + 4.909 + <h2 class=no-num id=acknowledgments> Acknowledgments</h2> 4.910 + 4.911 + <p><var class=replaceme>[acknowledgments]</var> 4.912 + 4.913 + <h2 class=no-num id=references> References</h2> 4.914 + 4.915 + <h3 class=no-num id=normative-references> Normative references</h3> 4.916 + <!--begin-normative--> 4.917 + <!-- Sorted by label --> 4.918 + 4.919 + <dl class=bibliography> 4.920 + <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 4.921 + <!----> 4.922 + 4.923 + <dt id=CSS21>[CSS21] 4.924 + 4.925 + <dd>Bert Bos; et al. <a 4.926 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style 4.927 + Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June 4.928 + 2011. W3C Recommendation. URL: <a 4.929 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> 4.930 + </dd> 4.931 + <!----> 4.932 + 4.933 + <dt id=CSS3-FLEXBOX>[CSS3-FLEXBOX] 4.934 + 4.935 + <dd>Tab Atkins Jr.; Elika J. Etemad; Alex Mogilevsky. <a 4.936 + href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/"><cite>CSS 4.937 + Flexible Box Layout Module.</cite></a> 12 June 2012. W3C Working Draft. 4.938 + (Work in progress.) URL: <a 4.939 + href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/</a> 4.940 + </dd> 4.941 + <!----> 4.942 + 4.943 + <dt id=RFC2119>[RFC2119] 4.944 + 4.945 + <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key 4.946 + words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet 4.947 + RFC 2119. URL: <a 4.948 + href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a> 4.949 + </dd> 4.950 + <!----> 4.951 + </dl> 4.952 + <!--end-normative--> 4.953 + 4.954 + <h3 class=no-num id=other-references> Other references</h3> 4.955 + <!--begin-informative--> 4.956 + <!-- Sorted by label --> 4.957 + 4.958 + <dl class=bibliography> 4.959 + <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 4.960 + <!----> 4.961 + 4.962 + <dt id=CSS3COLOR>[CSS3COLOR] 4.963 + 4.964 + <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a 4.965 + href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color 4.966 + Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a 4.967 + href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a> 4.968 + </dd> 4.969 + <!----> 4.970 + </dl> 4.971 + <!--end-informative--> 4.972 + 4.973 + <h2 class=no-num id=index> Index</h2> 4.974 + <!--begin-index--> 4.975 + 4.976 + <ul class=indexlist> 4.977 + <li>authoring tool, <a href="#authoring-tool" 4.978 + title="authoring tool"><strong>3.2.</strong></a> 4.979 + 4.980 + <li>auto, <a href="#display-inside:auto" 4.981 + title=auto><strong>2.1.</strong></a> 4.982 + 4.983 + <li>block, <a href="#display-inside:block" 4.984 + title=block><strong>2.1.</strong></a>, <a href="#display:block" 4.985 + title=block><strong>2.5.</strong></a> 4.986 + 4.987 + <li>block-level, <a href="#display-outside:block-level" 4.988 + title=block-level><strong>2.2.</strong></a> 4.989 + 4.990 + <li>contents, <a href="#display-box:contents" 4.991 + title=contents><strong>2.3.</strong></a> 4.992 + 4.993 + <li>display, <a href="#display" title=display><strong>2.5.</strong></a> 4.994 + 4.995 + <li>display-box, <a href="#display-box" 4.996 + title=display-box><strong>2.3.</strong></a> 4.997 + 4.998 + <li>display-extras, <a href="#display-extras" 4.999 + title=display-extras><strong>2.4.</strong></a> 4.1000 + 4.1001 + <li>display-inside, <a href="#display-inside" 4.1002 + title=display-inside><strong>2.1.</strong></a> 4.1003 + 4.1004 + <li>display-outside, <a href="#display-outside" 4.1005 + title=display-outside><strong>2.2.</strong></a> 4.1006 + 4.1007 + <li>flex, <a href="#display-inside:flex" 4.1008 + title=flex><strong>2.1.</strong></a>, <a href="#display:flex" 4.1009 + title=flex><strong>2.5.</strong></a> 4.1010 + 4.1011 + <li>grid, <a href="#display-inside:grid" 4.1012 + title=grid><strong>2.1.</strong></a>, <a href="#display:grid" 4.1013 + title=grid><strong>2.5.</strong></a> 4.1014 + 4.1015 + <li>inline, <a href="#display:inline" 4.1016 + title=inline><strong>2.5.</strong></a> 4.1017 + 4.1018 + <li>inline-block, <a href="#display:inline-block" 4.1019 + title=inline-block><strong>2.5.</strong></a> 4.1020 + 4.1021 + <li>inline-flex, <a href="#display:inline-flex" 4.1022 + title=inline-flex><strong>2.5.</strong></a> 4.1023 + 4.1024 + <li>inline-grid, <a href="#display:inline-grid" 4.1025 + title=inline-grid><strong>2.5.</strong></a> 4.1026 + 4.1027 + <li>inline-level, <a href="#display-outside:inline-level" 4.1028 + title=inline-level><strong>2.2.</strong></a> 4.1029 + 4.1030 + <li>inline-list-item, <a href="#display:inline-list-item" 4.1031 + title=inline-list-item><strong>2.5.</strong></a> 4.1032 + 4.1033 + <li>inline-table, <a href="#display:inline-table" 4.1034 + title=inline-table><strong>2.5.</strong></a> 4.1035 + 4.1036 + <li>list-item, <a href="#display-extras:list-item" 4.1037 + title=list-item><strong>2.4.</strong></a>, <a href="#display:list-item" 4.1038 + title=list-item><strong>2.5.</strong></a> 4.1039 + 4.1040 + <li>none, <a href="#display-box:none" 4.1041 + title=none><strong>2.3.</strong></a>, <a href="#display:none" 4.1042 + title=none><strong>2.5.</strong></a> 4.1043 + 4.1044 + <li>normal, <a href="#display-box:normal" 4.1045 + title=normal><strong>2.3.</strong></a> 4.1046 + 4.1047 + <li>renderer, <a href="#renderer" title=renderer><strong>3.2.</strong></a> 4.1048 + 4.1049 + <li>style sheet 4.1050 + <ul> 4.1051 + <li>as conformance class, <a href="#style-sheet" 4.1052 + title="style sheet, as conformance class"><strong>3.2.</strong></a> 4.1053 + </ul> 4.1054 + 4.1055 + <li>table, <a href="#display-inside:table" 4.1056 + title=table><strong>2.1.</strong></a>, <a href="#display:table" 4.1057 + title=table><strong>2.5.</strong></a> 4.1058 + 4.1059 + <li>table-caption, <a href="#display-outside:table-caption" 4.1060 + title=table-caption><strong>2.2.</strong></a>, <a 4.1061 + href="#display:table-caption" 4.1062 + title=table-caption><strong>2.5.</strong></a> 4.1063 + 4.1064 + <li>table-cell, <a href="#display-outside:table-cell" 4.1065 + title=table-cell><strong>2.2.</strong></a>, <a href="#display:table-cell" 4.1066 + title=table-cell><strong>2.5.</strong></a> 4.1067 + 4.1068 + <li>table-column, <a href="#display-outside:table-column" 4.1069 + title=table-column><strong>2.2.</strong></a> 4.1070 + 4.1071 + <li>table-column-group, <a href="#display-outside:table-column-group" 4.1072 + title=table-column-group><strong>2.2.</strong></a> 4.1073 + 4.1074 + <li>table-footer-group, <a href="#display-outside:table-footer-group" 4.1075 + title=table-footer-group><strong>2.2.</strong></a> 4.1076 + 4.1077 + <li>table-header-group, <a href="#display-outside:table-header-group" 4.1078 + title=table-header-group><strong>2.2.</strong></a> 4.1079 + 4.1080 + <li>table-row, <a href="#display-outside:table-row" 4.1081 + title=table-row><strong>2.2.</strong></a> 4.1082 + 4.1083 + <li>table-row-group, <a href="#display-outside:table-row-group" 4.1084 + title=table-row-group><strong>2.2.</strong></a> 4.1085 + </ul> 4.1086 + <!--end-index--> 4.1087 + 4.1088 + <h2 class=no-num id=property-index> Property index</h2> 4.1089 + <!--begin-properties--> 4.1090 + 4.1091 + <table class=proptable> 4.1092 + <thead> 4.1093 + <tr> 4.1094 + <th>Property 4.1095 + 4.1096 + <th>Values 4.1097 + 4.1098 + <th>Initial 4.1099 + 4.1100 + <th>Applies to 4.1101 + 4.1102 + <th>Inh. 4.1103 + 4.1104 + <th>Percentages 4.1105 + 4.1106 + <th>Media 4.1107 + 4.1108 + <tbody> 4.1109 + <tr> 4.1110 + <th><a class=property href="#display-box">display-box</a> 4.1111 + 4.1112 + <td>normal | none | contents 4.1113 + 4.1114 + <td>normal 4.1115 + 4.1116 + <td>all elements 4.1117 + 4.1118 + <td>no 4.1119 + 4.1120 + <td>N/A 4.1121 + 4.1122 + <td> 4.1123 + 4.1124 + <tr> 4.1125 + <th><a class=property href="#display-extras">display-extras</a> 4.1126 + 4.1127 + <td>none | [ list-item ] 4.1128 + 4.1129 + <td>none 4.1130 + 4.1131 + <td>all elements 4.1132 + 4.1133 + <td>no 4.1134 + 4.1135 + <td>N/A 4.1136 + 4.1137 + <td> 4.1138 + 4.1139 + <tr> 4.1140 + <th><a class=property href="#display-inside">display-inside</a> 4.1141 + 4.1142 + <td>auto | block | table | flex | grid 4.1143 + 4.1144 + <td>auto 4.1145 + 4.1146 + <td>all elements 4.1147 + 4.1148 + <td>no 4.1149 + 4.1150 + <td>N/A 4.1151 + 4.1152 + <td> 4.1153 + 4.1154 + <tr> 4.1155 + <th><a class=property href="#display-outside">display-outside</a> 4.1156 + 4.1157 + <td>block-level | inline-level | table-row-group | table-header-group | 4.1158 + table-footer-group | table-row | table-cell | table-column-group | 4.1159 + table-column | table-caption 4.1160 + 4.1161 + <td>inline-level 4.1162 + 4.1163 + <td>all elements 4.1164 + 4.1165 + <td>no 4.1166 + 4.1167 + <td>N/A 4.1168 + 4.1169 + <td> 4.1170 + 4.1171 + <tr> 4.1172 + <th><a class=property href="#display">display</a> 4.1173 + 4.1174 + <td>inline | block | list-item | inline-list-item | inline-block | table 4.1175 + | inline-table | table-cell | table-caption | flex | inline-flex | grid 4.1176 + | inline-grid | none | [ <‘display-inside’> || 4.1177 + <‘display-outside’> || <‘display-box’> || 4.1178 + <‘display-extras’> ] 4.1179 + 4.1180 + <td>see individual properties 4.1181 + 4.1182 + <td>all elements 4.1183 + 4.1184 + <td>no 4.1185 + 4.1186 + <td>see individual properties 4.1187 + 4.1188 + <td> 4.1189 + </table> 4.1190 + <!--end-properties--> 4.1191 +</html> 4.1192 +<!-- Keep this comment at the end of the file 4.1193 +Local variables: 4.1194 +mode: sgml 4.1195 +sgml-declaration:"~/SGML/HTML4.decl" 4.1196 +sgml-default-doctype-name:"html" 4.1197 +sgml-minimize-attributes:t 4.1198 +sgml-nofill-elements:("pre" "style" "br") 4.1199 +sgml-live-element-indicator:t 4.1200 +sgml-omittag:nil 4.1201 +sgml-shorttag:nil 4.1202 +sgml-namecase-general:t 4.1203 +sgml-general-insert-case:lower 4.1204 +sgml-always-quote-attributes:t 4.1205 +sgml-indent-step:nil 4.1206 +sgml-indent-data:t 4.1207 +sgml-parent-document:nil 4.1208 +sgml-exposed-tags:nil 4.1209 +sgml-local-catalogs:nil 4.1210 +sgml-local-ecat-files:nil 4.1211 +End: 4.1212 +-->
5.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 5.2 +++ b/css-display-3/Overview.src.html Mon Oct 22 00:41:17 2012 +0200 5.3 @@ -0,0 +1,715 @@ 5.4 +<!DOCTYPE html> 5.5 +<html lang="en"> 5.6 +<head> 5.7 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5.8 + <title>CSS Display Module Level 3</title> 5.9 + <link rel=contents href="#contents"> 5.10 + <link rel=index href="#index"> 5.11 + <link rel="stylesheet" type="text/css" href="../default.css"> 5.12 + <link rel="stylesheet" type="text/css" 5.13 + href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css"> 5.14 + <style type="text/css"> 5.15 + /* delete this block when you've cleared out all the .replaceme elements */ 5.16 + .replaceme { 5.17 + border: solid red; 5.18 + padding: 0 0.5em; 5.19 + margin: 0 0.1em; 5.20 + background: yellow; 5.21 + color: green; 5.22 + } 5.23 + .replaceme:before { 5.24 + content: "FIXME("; 5.25 + color: black; 5.26 + } 5.27 + .replaceme:after { 5.28 + content: ")"; 5.29 + color: black; 5.30 + } 5.31 + </style> 5.32 +</head> 5.33 + 5.34 +<div class="head"> 5.35 +<!--logo--> 5.36 + 5.37 +<h1>CSS Display Module Level 3</h1> 5.38 + 5.39 +<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2> 5.40 +<dl> 5.41 + <dt>This version: 5.42 + <dd><a href="[VERSION]" class="replaceme">http://www.w3.org/TR/[YEAR]/ED-cssN-FIXME-[CDATE]/</a> 5.43 + 5.44 + <dt>Latest version: 5.45 + <dd><a href="http://www.w3.org/TR/[SHORTNAME]/">http://www.w3.org/TR/[SHORTNAME]/</a> 5.46 + 5.47 + <dt>Editor's draft: 5.48 + <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a> 5.49 + 5.50 + <dt>Previous version: 5.51 + <dd><a href="http://www.w3.org/PreviousVersionURI"> 5.52 + http://www.w3.org/PreviousVersionURI</a> 5.53 + 5.54 + <dt>Issue Tracking:</dt> 5.55 + <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/FIXME">http://www.w3.org/Style/CSS/Tracker/products/FIXME</a> 5.56 + 5.57 + <dt>Feedback:</dt> 5.58 + <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line “<kbd>[[SHORTNAME]] <var>… message topic …</var></kbd>” 5.59 + 5.60 + <dt>Editors: 5.61 + <dd class="h-card vcard"> 5.62 + <a class="p-name fn u-url url" rel="author" 5.63 + href="http://www.xanthir.com/">Tab Atkins Jr.</a> 5.64 + (<span class="p-org org">Google, Inc.</span>), 5.65 + <span class="u-email email">jackalmage@gmail.com</span> 5.66 +</dl> 5.67 + 5.68 +<!--copyright--> 5.69 + 5.70 +<hr title="Separator for header"> 5.71 +</div> 5.72 + 5.73 +<h2 class="no-num no-toc" id="abstract">Abstract</h2> 5.74 + 5.75 + <p> 5.76 + This module contains the features of CSS relating to the 'display' property. 5.77 + <a href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents 5.78 + (such as HTML and XML) 5.79 + on screen, on paper, in speech, etc. 5.80 + 5.81 +<h2 class="no-num no-toc" id="status">Status of this document</h2> 5.82 + 5.83 + <p> 5.84 + This is currently a personal draft, 5.85 + not yet approved by the CSSWG to be an Editor's Draft. 5.86 + (Ignore the branding on the side and heading, which are artifacts of the spec generation process.) 5.87 +<!--//status--> 5.88 + 5.89 +<p>The following features are at risk: … 5.90 + 5.91 +<h2 class="no-num no-toc" id="contents"> 5.92 +Table of contents</h2> 5.93 + 5.94 +<!--toc--> 5.95 + 5.96 +<h2 id="intro"> 5.97 +Introduction</h2> 5.98 + 5.99 + <p><em>This section is not normative.</em> 5.100 + 5.101 + <p> 5.102 + <var class="replaceme">Provide background, motivation, etc.</var></p> 5.103 + 5.104 +<h3 id="placement"> 5.105 +Module interactions</h3> 5.106 + 5.107 + <p class="replaceme"> 5.108 + Explain, normatively, how this module affects the definition of CSS.</p> 5.109 + 5.110 + <p> 5.111 + This module replaces and extends the <var class="replaceme">SUMMARIZE HERE</var> features defined in [[!CSS21]] sections <var class="replaceme">W.X and Y.Z</var>. 5.112 + 5.113 + <p> 5.114 + None of the properties in this module apply to the <code>::first-line</code> or <code>::first-letter</code> pseudo-elements. 5.115 + 5.116 +<h3 id="values"> 5.117 +Values</h3> 5.118 + 5.119 + <p>This specification follows the 5.120 + <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property 5.121 + definition conventions</a> from [[!CSS21]]. Value types not defined in 5.122 + this specification are defined in CSS Level 2 Revision 1 [[!CSS21]]. 5.123 + Other CSS modules may expand the definitions of these value types: for 5.124 + example [[CSS3COLOR]], when combined with this module, expands the 5.125 + definition of the <color> value type as used in this specification.</p> 5.126 + 5.127 + <p>In addition to the property-specific values listed in their definitions, 5.128 + all properties defined in this specification also accept the 5.129 + <a href="http://www.w3.org/TR/css3-values/#common-keywords">CSS-wide keywords</a> 5.130 + as their property value. For readability it has not been repeated explicitly. 5.131 + 5.132 +<h2> 5.133 +The Display Properties</h2> 5.134 + 5.135 + <p> 5.136 + The 'display' shorthand and its associated family of properties control the layout mode of elements 5.137 + (how the element determines the sizes and positions of itself and its descendants), 5.138 + and what boxes they and their descendants generate. 5.139 + 5.140 + 5.141 +<h3 id='the-display-inside'> 5.142 +Setting the layout mode: the 'display-inside' property</h3> 5.143 + 5.144 + <table class='propdef'> 5.145 + <tr> 5.146 + <th>Name: 5.147 + <td><dfn>display-inside</dfn> 5.148 + <tr> 5.149 + <th>Value: 5.150 + <td>auto | block | table | flex | grid 5.151 + <tr> 5.152 + <th>Initial: 5.153 + <td>auto 5.154 + <tr> 5.155 + <th>Applies To: 5.156 + <td>all elements 5.157 + <tr> 5.158 + <th>Inherited: 5.159 + <td>no 5.160 + <tr> 5.161 + <th>Percentages: 5.162 + <td>N/A 5.163 + <tr> 5.164 + <th>Computed Value: 5.165 + <td>a keyword 5.166 + </table> 5.167 + 5.168 + <dl> 5.169 + <dt><dfn id='display-inside:auto'>auto</dfn> 5.170 + <dd> 5.171 + If the element's computed 'display-outside' value is ''inline-level'', 5.172 + the element is an <i>inline element</i>, 5.173 + and lays out its contents using inline layout. [[!CSS21]] 5.174 + If the element's computed 'display-outside' value is ''table-row-group'', ''table-header-group'', ''table-footer-group'', ''table-row'', ''table-column-group'', or ''table-column'', 5.175 + this elements acts as normal for its given 'display-outside' value. 5.176 + Otherwise, this value computes to ''block''. 5.177 + 5.178 + <dt><dfn id='display-inside:block'>block</dfn> 5.179 + <dd> 5.180 + The element lays out its contents using block layout. [[!CSS21]] 5.181 + 5.182 + <dt><dfn id='display-inside:table'>table</dfn> 5.183 + <dd> 5.184 + The element lays out its contents using table layout. [[!CSS21]] 5.185 + 5.186 + <dt><dfn id='display-inside:flex'>flex</dfn> 5.187 + <dd> 5.188 + The element lays out its contents using flex layout. [[!CSS3-FLEXBOX]] 5.189 + 5.190 + <dt><dfn id='display-inside:grid'>grid</dfn> 5.191 + <dd> 5.192 + The element lays out its contents using grid layout. [[!CSS3-GRID]] 5.193 + </dl> 5.194 + 5.195 + 5.196 +<h3 id='the-display-outside'> 5.197 +Interacting with the layout mode: the 'display-outside' property</h3> 5.198 + 5.199 + <table class='propdef'> 5.200 + <tr> 5.201 + <th>Name: 5.202 + <td><dfn>display-outside</dfn> 5.203 + <tr> 5.204 + <th>Value: 5.205 + <td>block-level | inline-level | table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption 5.206 + <tr> 5.207 + <th>Initial: 5.208 + <td>inline-level 5.209 + <tr> 5.210 + <th>Applies To: 5.211 + <td>all elements 5.212 + <tr> 5.213 + <th>Inherited: 5.214 + <td>no 5.215 + <tr> 5.216 + <th>Percentages: 5.217 + <td>N/A 5.218 + <tr> 5.219 + <th>Computed Value: 5.220 + <td>as specified 5.221 + </table> 5.222 + 5.223 + <dl> 5.224 + <dt><dfn id='display-outside:block-level'>block-level</dfn> 5.225 + <dd> 5.226 + The element is <i>block-level</i>, 5.227 + and participates in a block formatting context. 5.228 + Other formatting contexts, 5.229 + such as flex formatting contexts, 5.230 + may also work with <i>block-level</i> elements. [[!CSS21]] 5.231 + 5.232 + <dt><dfn id='display-outside:inline-level'>inline-level</dfn> 5.233 + <dd> 5.234 + The element is <i>inline-level</i>, 5.235 + and participates in an inline formatting context. [[!CSS21]] 5.236 + 5.237 + <dt><dfn id='display-outside:table-row-group'>table-row-group</dfn>, <dfn id='display-outside:table-header-group'>table-header-group</dfn>, <dfn id='display-outside:table-footer-group'>table-footer-group</dfn>, <dfn id='display-outside:table-row'>table-row</dfn>, <dfn id='display-outside:table-cell'>table-cell</dfn>, <dfn id='display-outside:table-column-group'>table-column-group</dfn>, <dfn id='display-outside:table-column'>table-column</dfn>, <dfn id='display-outside:table-caption'>table-caption</dfn> 5.238 + <dd> 5.239 + The element is an internal table element, 5.240 + and participates in a table layout context. [[!CSS21]] 5.241 + </dl> 5.242 + 5.243 + <p class='issue'> 5.244 + Do we need special bits about some of the interactions with 'display-inside'? 5.245 + For example, how ''display:inline-level block;'' works? 5.246 + Or does that fall out of what exists, 5.247 + and the definitions of Block Layout in 2.1? 5.248 + (...or a new Block Layout spec, explaining all the 2.1 stuff more sanely?) 5.249 + 5.250 + <p class='issue'> 5.251 + Is <a href="http://lists.w3.org/Archives/Public/www-style/2012Jul/0450.html">fantasai's proposal for a run-in model</a> sane enough to include in this spec? 5.252 + 5.253 + 5.254 +<h3 id='the-display-box'> 5.255 +Controlling box generation: the 'display-box' property</h3> 5.256 + 5.257 + <table class='propdef'> 5.258 + <tr> 5.259 + <th>Name: 5.260 + <td><dfn>display-box</dfn> 5.261 + <tr> 5.262 + <th>Value: 5.263 + <td>normal | none | contents 5.264 + <tr> 5.265 + <th>Initial: 5.266 + <td>normal 5.267 + <tr> 5.268 + <th>Applies To: 5.269 + <td>all elements 5.270 + <tr> 5.271 + <th>Inherited: 5.272 + <td>no 5.273 + <tr> 5.274 + <th>Percentages: 5.275 + <td>N/A 5.276 + <tr> 5.277 + <th>Computed Value: 5.278 + <td>as specified 5.279 + </table> 5.280 + 5.281 + <dl> 5.282 + <dt><dfn id='display-box:normal'>normal</dfn> 5.283 + <dd> 5.284 + The element generates boxes as normal, 5.285 + per its other 'display-*' properties. 5.286 + 5.287 + <dt><dfn id='display-box:none'>none</dfn> 5.288 + <dd> 5.289 + The element generates no boxes at all. 5.290 + 5.291 + <dt><dfn id='display-box:contents'>contents</dfn> 5.292 + <dd> 5.293 + The element itself does not generate any boxes, 5.294 + but its children and pseudo-elements still generate boxes as normal. 5.295 + For the purposes of box generation and layout, 5.296 + the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree. 5.297 + </dl> 5.298 + 5.299 + <p class='issue'> 5.300 + Is there a need for a value that suppresses box generation for layout purposes, 5.301 + but still generates them for the purposes of animations/counters/etc.? 5.302 + 5.303 + <p class='issue'> 5.304 + ''contents'' currently only has an effect on box generation and layout. 5.305 + Other things that care about the document tree are unaffected, like counter scopes. 5.306 + Is this what we want? 5.307 + 5.308 + 5.309 +<h3 id='the-display-extras'> 5.310 +Additional stuff: the 'display-extras' property</h3> 5.311 + 5.312 + <table class='propdef'> 5.313 + <tr> 5.314 + <th>Name: 5.315 + <td><dfn>display-extras</dfn> 5.316 + <tr> 5.317 + <th>Value: 5.318 + <td>none | [ list-item ] 5.319 + <tr> 5.320 + <th>Initial: 5.321 + <td>none 5.322 + <tr> 5.323 + <th>Applies To: 5.324 + <td>all elements 5.325 + <tr> 5.326 + <th>Inherited: 5.327 + <td>no 5.328 + <tr> 5.329 + <th>Percentages: 5.330 + <td>N/A 5.331 + <tr> 5.332 + <th>Computed Value: 5.333 + <td>as specified 5.334 + </table> 5.335 + 5.336 + <dl> 5.337 + <dt><dfn id='display-extras:list-item'>list-item</dfn> 5.338 + <dd> 5.339 + The element generates a <code>::marker</code> pseudo-element 5.340 + and is considered a <a href="../css3-lists/#list-item">list item</a>. 5.341 + </dl> 5.342 + 5.343 +<h3 id='the-display'> 5.344 +The 'display' shorthand property</h3> 5.345 + 5.346 + <table class='propdef'> 5.347 + <tr> 5.348 + <th>Name: 5.349 + <td><dfn>display</dfn> 5.350 + <tr> 5.351 + <th>Value: 5.352 + <td>inline | block | list-item | inline-list-item | inline-block | table | inline-table | table-cell | table-caption | flex | inline-flex | grid | inline-grid | none | [ <'display-inside'> || <'display-outside'> || <'display-box'> || <'display-extras'> ] 5.353 + <tr> 5.354 + <th>Initial: 5.355 + <td>see individual properties 5.356 + <tr> 5.357 + <th>Applies To: 5.358 + <td>all elements 5.359 + <tr> 5.360 + <th>Inherited: 5.361 + <td>no 5.362 + <tr> 5.363 + <th>Percentages: 5.364 + <td>see individual properties 5.365 + <tr> 5.366 + <th>Computed Value: 5.367 + <td>see individual properties 5.368 + <tr> 5.369 + <th>Animatable: 5.370 + <td>see individual properties 5.371 + </table> 5.372 + 5.373 + <p> 5.374 + The single-keyword values listed explicitly in the grammar above are handled specially, 5.375 + for legacy reasons. 5.376 + All other single-keyword values, 5.377 + and all other values in general, 5.378 + are handled as normal for shorthands. 5.379 + 5.380 + <p class='issue'> 5.381 + The general rule for new layout modes seems to be that they're block-level by default. 5.382 + However, this conflicts with the default value of 'display-outside', which is ''inline-level''. 5.383 + What's the best way to address this? 5.384 + Simplest answer is to just expand this list of special values as we go along. 5.385 + Another possibility is to magic up the expansion in a different way, 5.386 + so that if the value is just a 'display-inside' keyword, 5.387 + 'display-outside' defaults to ''block-level''. 5.388 + If the latter is chosen, we could remove several more of the special expansions below 5.389 + (all the ones that are identical to a 'display-inside' value). 5.390 + 5.391 + <p class='note'> 5.392 + Several of the "special" expansions below are actually just what the shorthand would expand to normally. 5.393 + They're included here for clarity, 5.394 + as they're very familiar from long usage in CSS 2.1, 5.395 + before the 'display' property became a shorthand. 5.396 + 5.397 + <dl> 5.398 + <dt><dfn id='display:inline'>inline</dfn> 5.399 + <dd> 5.400 + Expands identically to ''inline-level auto''. 5.401 + 5.402 + <dt><dfn id='display:block'>block</dfn> 5.403 + <dd> 5.404 + Expands identically to ''block-level block''. 5.405 + 5.406 + <dt><dfn id='display:list-item'>list-item</dfn> 5.407 + <dd> 5.408 + Expands identically to ''block-level block list-item''. 5.409 + 5.410 + <dt><dfn id='display:inline-list-item'>inline-list-item</dfn> 5.411 + <dd> 5.412 + Expands identically to ''inline-level block list-item''. 5.413 + 5.414 + <dt><dfn id='display:inline-block'>inline-block</dfn> 5.415 + <dd> 5.416 + Expands identically to ''inline-level block''. 5.417 + 5.418 + <dt><dfn id='display:table'>table</dfn> 5.419 + <dd> 5.420 + Expands identically to ''block-level table''. 5.421 + 5.422 + <dt><dfn id='display:inline-table'>inline-table</dfn> 5.423 + <dd> 5.424 + Expands identically to ''inline-level table''. 5.425 + 5.426 + <dt><dfn id='display:table-caption'>table-caption</dfn> 5.427 + <dd> 5.428 + Expands identically to ''table-caption block''. 5.429 + 5.430 + <dt><dfn id='display:table-cell'>table-cell</dfn> 5.431 + <dd> 5.432 + Expands identically to ''table-cell block''. 5.433 + 5.434 + <dt><dfn id='display:flex'>flex</dfn> 5.435 + <dd> 5.436 + Expands identically to ''block-level flex''. 5.437 + 5.438 + <dt><dfn id='display:inline-flex'>inline-flex</dfn> 5.439 + <dd> 5.440 + Expands identically to ''inline-level flex''. 5.441 + 5.442 + <dt><dfn id='display:grid'>grid</dfn> 5.443 + <dd> 5.444 + Expands identically to ''block-level grid''. 5.445 + 5.446 + <dt><dfn id='display:inline-grid'>inline-grid</dfn> 5.447 + <dd> 5.448 + Expands identically to ''inline-level grid''. 5.449 + 5.450 + <dt><dfn id='display:none'>none</dfn> 5.451 + <dd> 5.452 + Expands identically to ''inline-level auto none''. 5.453 + </dl> 5.454 + 5.455 + 5.456 + 5.457 + 5.458 +<!-- 5.459 + 5.460 +TTTTTTTTTTTTTTTTTTTTTTTHHHHHHHHH HHHHHHHHHEEEEEEEEEEEEEEEEEEEEEE 5.461 +T:::::::::::::::::::::TH:::::::H H:::::::HE::::::::::::::::::::E 5.462 +T:::::::::::::::::::::TH:::::::H H:::::::HE::::::::::::::::::::E 5.463 +T:::::TT:::::::TT:::::THH::::::H H::::::HHEE::::::EEEEEEEEE::::E 5.464 +TTTTTT T:::::T TTTTTT H:::::H H:::::H E:::::E EEEEEE 5.465 + T:::::T H:::::H H:::::H E:::::E 5.466 + T:::::T H::::::HHHHH::::::H E::::::EEEEEEEEEE 5.467 + T:::::T H:::::::::::::::::H E:::::::::::::::E 5.468 + T:::::T H:::::::::::::::::H E:::::::::::::::E 5.469 + T:::::T H::::::HHHHH::::::H E::::::EEEEEEEEEE 5.470 + T:::::T H:::::H H:::::H E:::::E 5.471 + T:::::T H:::::H H:::::H E:::::E EEEEEE 5.472 + TT:::::::TT HH::::::H H::::::HHEE::::::EEEEEEEE:::::E 5.473 + T:::::::::T H:::::::H H:::::::HE::::::::::::::::::::E 5.474 + T:::::::::T H:::::::H H:::::::HE::::::::::::::::::::E 5.475 + TTTTTTTTTTT HHHHHHHHH HHHHHHHHHEEEEEEEEEEEEEEEEEEEEEE 5.476 + 5.477 + 5.478 + 5.479 +EEEEEEEEEEEEEEEEEEEEEENNNNNNNN NNNNNNNNDDDDDDDDDDDDD 5.480 +E::::::::::::::::::::EN:::::::N N::::::ND::::::::::::DDD 5.481 +E::::::::::::::::::::EN::::::::N N::::::ND:::::::::::::::DD 5.482 +EE::::::EEEEEEEEE::::EN:::::::::N N::::::NDDD:::::DDDDD:::::D 5.483 + E:::::E EEEEEEN::::::::::N N::::::N D:::::D D:::::D 5.484 + E:::::E N:::::::::::N N::::::N D:::::D D:::::D 5.485 + E::::::EEEEEEEEEE N:::::::N::::N N::::::N D:::::D D:::::D 5.486 + E:::::::::::::::E N::::::N N::::N N::::::N D:::::D D:::::D 5.487 + E:::::::::::::::E N::::::N N::::N:::::::N D:::::D D:::::D 5.488 + E::::::EEEEEEEEEE N::::::N N:::::::::::N D:::::D D:::::D 5.489 + E:::::E N::::::N N::::::::::N D:::::D D:::::D 5.490 + E:::::E EEEEEEN::::::N N:::::::::N D:::::D D:::::D 5.491 +EE::::::EEEEEEEE:::::EN::::::N N::::::::NDDD:::::DDDDD:::::D 5.492 +E::::::::::::::::::::EN::::::N N:::::::ND:::::::::::::::DD 5.493 +E::::::::::::::::::::EN::::::N N::::::ND::::::::::::DDD 5.494 +EEEEEEEEEEEEEEEEEEEEEENNNNNNNN NNNNNNNDDDDDDDDDDDDD 5.495 +--> 5.496 + 5.497 +<h2 id="conformance"> 5.498 +Conformance</h2> 5.499 + 5.500 +<h3 id="conventions"> 5.501 +Document conventions</h3> 5.502 + 5.503 + <p>Conformance requirements are expressed with a combination of 5.504 + descriptive assertions and RFC 2119 terminology. The key words “MUST”, 5.505 + “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, 5.506 + “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this 5.507 + document are to be interpreted as described in RFC 2119. 5.508 + However, for readability, these words do not appear in all uppercase 5.509 + letters in this specification. 5.510 + 5.511 + <p>All of the text of this specification is normative except sections 5.512 + explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p> 5.513 + 5.514 + <p>Examples in this specification are introduced with the words “for example” 5.515 + or are set apart from the normative text with <code>class="example"</code>, 5.516 + like this: 5.517 + 5.518 + <div class="example"> 5.519 + <p>This is an example of an informative example.</p> 5.520 + </div> 5.521 + 5.522 + <p>Informative notes begin with the word “Note” and are set apart from the 5.523 + normative text with <code>class="note"</code>, like this: 5.524 + 5.525 + <p class="note">Note, this is an informative note.</p> 5.526 + 5.527 +<h3 id="conformance-classes"> 5.528 +Conformance classes</h3> 5.529 + 5.530 + <p>Conformance to <var class="replaceme">CSS TEMPLATE Module</var> 5.531 + is defined for three conformance classes: 5.532 + <dl> 5.533 + <dt><dfn title="style sheet!!as conformance class">style sheet</dfn> 5.534 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 5.535 + style sheet</a>. 5.536 + <dt><dfn>renderer</dfn></dt> 5.537 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 5.538 + that interprets the semantics of a style sheet and renders 5.539 + documents that use them. 5.540 + <dt><dfn id="authoring-tool">authoring tool</dfn></dt> 5.541 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 5.542 + that writes a style sheet. 5.543 + </dl> 5.544 + 5.545 + <p>A style sheet is conformant to <var class="replaceme">CSS TEMPLATE Module</var> 5.546 + if all of its statements that use syntax defined in this module are valid 5.547 + according to the generic CSS grammar and the individual grammars of each 5.548 + feature defined in this module. 5.549 + 5.550 + <p>A renderer is conformant to <var class="replaceme">CSS TEMPLATE Module</var> 5.551 + if, in addition to interpreting the style sheet as defined by the 5.552 + appropriate specifications, it supports all the features defined 5.553 + by <var class="replaceme">CSS TEMPLATE Module</var> by parsing them correctly 5.554 + and rendering the document accordingly. However, the inability of a 5.555 + UA to correctly render a document due to limitations of the device 5.556 + does not make the UA non-conformant. (For example, a UA is not 5.557 + required to render color on a monochrome monitor.) 5.558 + 5.559 + <p>An authoring tool is conformant to <var class="replaceme">CSS TEMPLATE Module</var> 5.560 + if it writes style sheets that are syntactically correct according to the 5.561 + generic CSS grammar and the individual grammars of each feature in 5.562 + this module, and meet all other conformance requirements of style sheets 5.563 + as described in this module. 5.564 + 5.565 +<h3 id="partial"> 5.566 +Partial implementations</h3> 5.567 + 5.568 + <p>So that authors can exploit the forward-compatible parsing rules to 5.569 + assign fallback values, CSS renderers <strong>must</strong> 5.570 + treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore 5.571 + as appropriate</a>) any at-rules, properties, property values, keywords, 5.572 + and other syntactic constructs for which they have no usable level of 5.573 + support. In particular, user agents <strong>must not</strong> selectively 5.574 + ignore unsupported component values and honor supported values in a single 5.575 + multi-value property declaration: if any value is considered invalid 5.576 + (as unsupported values must be), CSS requires that the entire declaration 5.577 + be ignored.</p> 5.578 + 5.579 +<h3 id="experimental"> 5.580 +Experimental implementations</h3> 5.581 + 5.582 + <p>To avoid clashes with future CSS features, the CSS2.1 specification 5.583 + reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 5.584 + syntax</a> for proprietary and experimental extensions to CSS. 5.585 + 5.586 + <p>Prior to a specification reaching the Candidate Recommendation stage 5.587 + in the W3C process, all implementations of a CSS feature are considered 5.588 + experimental. The CSS Working Group recommends that implementations 5.589 + use a vendor-prefixed syntax for such features, including those in 5.590 + W3C Working Drafts. This avoids incompatibilities with future changes 5.591 + in the draft. 5.592 + </p> 5.593 + 5.594 +<h3 id="testing"> 5.595 +Non-experimental implementations</h3> 5.596 + 5.597 + <p>Once a specification reaches the Candidate Recommendation stage, 5.598 + non-experimental implementations are possible, and implementors should 5.599 + release an unprefixed implementation of any CR-level feature they 5.600 + can demonstrate to be correctly implemented according to spec. 5.601 + 5.602 + <p>To establish and maintain the interoperability of CSS across 5.603 + implementations, the CSS Working Group requests that non-experimental 5.604 + CSS renderers submit an implementation report (and, if necessary, the 5.605 + testcases used for that implementation report) to the W3C before 5.606 + releasing an unprefixed implementation of any CSS features. Testcases 5.607 + submitted to W3C are subject to review and correction by the CSS 5.608 + Working Group. 5.609 + 5.610 + <p>Further information on submitting testcases and implementation reports 5.611 + can be found from on the CSS Working Group's website at 5.612 + <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 5.613 + Questions should be directed to the 5.614 + <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> 5.615 + mailing list. 5.616 + 5.617 +<h3 id="cr-exit-criteria"> 5.618 +CR exit criteria</h3> 5.619 + 5.620 + <p class="replaceme">Remove this section unless/until the module is in CR.</p> 5.621 + 5.622 + <!-- This text was <a href="http://www.w3.org/Style/CSS/Tracker/actions/44"> decided on 2008-06-04.</a> --> 5.623 + 5.624 + <p> 5.625 + For this specification to be advanced to Proposed Recommendation, 5.626 + there must be at least two independent, interoperable implementations 5.627 + of each feature. Each feature may be implemented by a different set of 5.628 + products, there is no requirement that all features be implemented by 5.629 + a single product. For the purposes of this criterion, we define the 5.630 + following terms: 5.631 + 5.632 + <dl> 5.633 + <dt>independent <dd>each implementation must be developed by a 5.634 + different party and cannot share, reuse, or derive from code 5.635 + used by another qualifying implementation. Sections of code that 5.636 + have no bearing on the implementation of this specification are 5.637 + exempt from this requirement. 5.638 + 5.639 + <dt>interoperable <dd>passing the respective test case(s) in the 5.640 + official CSS test suite, or, if the implementation is not a Web 5.641 + browser, an equivalent test. Every relevant test in the test 5.642 + suite should have an equivalent test created if such a user 5.643 + agent (UA) is to be used to claim interoperability. In addition 5.644 + if such a UA is to be used to claim interoperability, then there 5.645 + must one or more additional UAs which can also pass those 5.646 + equivalent tests in the same way for the purpose of 5.647 + interoperability. The equivalent tests must be made publicly 5.648 + available for the purposes of peer review. 5.649 + 5.650 + <dt>implementation <dd>a user agent which: 5.651 + 5.652 + <ol class=inline> 5.653 + <li>implements the specification. 5.654 + 5.655 + <li>is available to the general public. The implementation may 5.656 + be a shipping product or other publicly available version 5.657 + (i.e., beta version, preview release, or “nightly build”). 5.658 + Non-shipping product releases must have implemented the 5.659 + feature(s) for a period of at least one month in order to 5.660 + demonstrate stability. 5.661 + 5.662 + <li>is not experimental (i.e., a version specifically designed 5.663 + to pass the test suite and is not intended for normal usage 5.664 + going forward). 5.665 + </ol> 5.666 + </dl> 5.667 + 5.668 + <p>The specification will remain Candidate Recommendation for at least 5.669 + six months. 5.670 + 5.671 +<h2 class=no-num id="acknowledgments"> 5.672 +Acknowledgments</h2> 5.673 + 5.674 + <p><var class="replaceme">[acknowledgments]</var></p> 5.675 + 5.676 +<h2 class=no-num id="references"> 5.677 +References</h2> 5.678 + 5.679 +<h3 class="no-num" id="normative-references"> 5.680 +Normative references</h3> 5.681 +<!--normative--> 5.682 + 5.683 +<h3 class="no-num" id="other-references"> 5.684 +Other references</h3> 5.685 +<!--informative--> 5.686 + 5.687 +<h2 class="no-num" id="index"> 5.688 +Index</h2> 5.689 +<!--index--> 5.690 + 5.691 +<h2 class="no-num" id="property-index"> 5.692 +Property index</h2> 5.693 +<!-- properties --> 5.694 + 5.695 +</body> 5.696 +</html> 5.697 +<!-- Keep this comment at the end of the file 5.698 +Local variables: 5.699 +mode: sgml 5.700 +sgml-declaration:"~/SGML/HTML4.decl" 5.701 +sgml-default-doctype-name:"html" 5.702 +sgml-minimize-attributes:t 5.703 +sgml-nofill-elements:("pre" "style" "br") 5.704 +sgml-live-element-indicator:t 5.705 +sgml-omittag:nil 5.706 +sgml-shorttag:nil 5.707 +sgml-namecase-general:t 5.708 +sgml-general-insert-case:lower 5.709 +sgml-always-quote-attributes:t 5.710 +sgml-indent-step:nil 5.711 +sgml-indent-data:t 5.712 +sgml-parent-document:nil 5.713 +sgml-exposed-tags:nil 5.714 +sgml-local-catalogs:nil 5.715 +sgml-local-ecat-files:nil 5.716 +End: 5.717 +--> 5.718 +
6.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 6.2 +++ b/css-text-decor-3/Overview.html Mon Oct 22 00:41:17 2012 +0200 6.3 @@ -0,0 +1,1908 @@ 6.4 +<!DOCTYPE html> 6.5 + 6.6 +<html lang=en> 6.7 + <head> 6.8 + <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 6.9 + <title>CSS Text Decoration Module Level 3 (CSS3 Text Decoration)</title> 6.10 + <!-- 6.11 + <link href="http://purl.org/dc/terms/" rel="schema.dcterms"> 6.12 + <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" rel="dcterms.rights"> 6.13 + --> 6.14 + 6.15 + <meta content="CSS Text Decoration Module Level 3 (CSS3 Text Decoration)" 6.16 + name=dcterms.title> 6.17 + <meta content=text name=dcterms.type> 6.18 + <meta content=2012-10-18 name=dcterms.issued> 6.19 + <meta content="Elika J. Etemad" name=dcterms.creator> 6.20 + <meta content="Koji Ishii" name=dcterms.creator> 6.21 + <meta content=W3C name=dcterms.publisher> 6.22 + <meta content="http://www.w3.org/TR/2012/ED-css-text-decor-3-20121018/" 6.23 + name=dcterms.identifier> 6.24 + <link href="#contents" rel=contents> 6.25 + <link href="#index" rel=index> 6.26 + <link href="../default.css" rel=stylesheet type="text/css"> 6.27 + <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet 6.28 + type="text/css"> 6.29 + 6.30 + <body> 6.31 + <div class=head> <!--begin-logo--> 6.32 + <p><a href="http://www.w3.org/"><img alt=W3C height=48 6.33 + src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--> 6.34 + 6.35 + <h1>CSS Text Decoration Module Level 3</h1> 6.36 + 6.37 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 18 October 6.38 + 2012</h2> 6.39 + 6.40 + <dl> 6.41 + <dt>This version: 6.42 + 6.43 + <dd><a 6.44 + href="http://dev.w3.org/csswg/css-text-decor-3/">http://dev.w3.org/csswg/css-text-decor-3/</a> 6.45 + <!-- 6.46 + <dd><a href="http://www.w3.org/TR/2012/WD-css3-text-20121018/">http://www.w3.org/TR/2012/WD-css3-text-20121018/</a></dd> 6.47 + --> 6.48 + 6.49 + <dt>Latest version: 6.50 + 6.51 + <dd><a 6.52 + href="http://www.w3.org/TR/css-text-decor-3/">http://www.w3.org/TR/css-text-decor-3/</a> 6.53 + 6.54 + <dt>Latest editor's draft: 6.55 + 6.56 + <dd><a 6.57 + href="http://dev.w3.org/csswg/css-text-decor-3/">http://dev.w3.org/csswg/css-text-decor-3/</a> 6.58 + 6.59 + <dt>Previous version: 6.60 + 6.61 + <dd><a 6.62 + href="http://www.w3.org/TR/2012/WD-css3-text-20120119/">http://www.w3.org/TR/2012/WD-css3-text-20120119/</a> 6.63 + 6.64 + <dt>Issues List: 6.65 + 6.66 + <dd><a 6.67 + href="http://www.w3.org/Style/CSS/Tracker/products/10">http://www.w3.org/Style/CSS/Tracker/products/10</a> 6.68 + 6.69 + <dt>Discussion: 6.70 + 6.71 + <dd><a 6.72 + href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> 6.73 + with subject line “<kbd>css-text-decor-3 <var>… message topic 6.74 + …</var></kbd>” 6.75 + 6.76 + <dt>Editors: 6.77 + 6.78 + <dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> 6.79 + (Mozilla) 6.80 + 6.81 + <dd><a href="mailto:koji.a.ishii@mail.rakuten.com">Koji Ishii</a> 6.82 + (Rakuten, Inc.) 6.83 + </dl> 6.84 + <!--begin-copyright--> 6.85 + <p class=copyright><a 6.86 + href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 6.87 + rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr 6.88 + title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a 6.89 + href="http://www.csail.mit.edu/"><abbr 6.90 + title="Massachusetts Institute of Technology">MIT</abbr></a>, <a 6.91 + href="http://www.ercim.eu/"><abbr 6.92 + title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, 6.93 + <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a 6.94 + href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, 6.95 + <a 6.96 + href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> 6.97 + and <a 6.98 + href="http://www.w3.org/Consortium/Legal/copyright-documents">document 6.99 + use</a> rules apply.</p> 6.100 + <!--end-copyright--> 6.101 + <hr title="Separator for header"> 6.102 + </div> 6.103 + 6.104 + <h2 class="no-num no-toc" id=abstract>Abstract</h2> 6.105 + 6.106 + <p>This module contains the features of CSS relating to text decoration, 6.107 + such as underlines, text shadows, and emphasis marks. <a 6.108 + href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing the 6.109 + rendering of structured documents (such as HTML and XML) on screen, on 6.110 + paper, in speech, etc. 6.111 + 6.112 + <h2 class="no-num no-toc" id=status>Status of this document</h2> 6.113 + 6.114 + <p><em>This section describes the status of this document at the time of 6.115 + its publication. Other documents may supersede this document. A list of 6.116 + current W3C publications and the latest revision of this technical report 6.117 + can be found in the <a href="http://www.w3.org/TR/">W3C technical reports 6.118 + index at http://www.w3.org/TR/.</a></em> 6.119 + 6.120 + <p>Publication as a Working Draft does not imply endorsement by the W3C 6.121 + Membership. This is a draft document and may be updated, replaced or 6.122 + obsoleted by other documents at any time. It is inappropriate to cite this 6.123 + document as other than work in progress. 6.124 + 6.125 + <p>This CSS module has been produced as a combined effort of the <a 6.126 + href="http://www.w3.org/International/Activity">W3C Internationalization 6.127 + Activity</a>, and the <a href="http://www.w3.org/Style/Activity">Style 6.128 + Activity</a> and is maintained by the <a 6.129 + href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>. It also 6.130 + includes contributions made by participants in the <a 6.131 + href="http://www.w3.org/Style/XSL/Group/">XSL Working Group</a> (<a 6.132 + href="http://cgi.w3.org/MemberAccess/AccessRequest">members only</a>). 6.133 + 6.134 + <p>This document was produced by a group operating under the <a 6.135 + href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 6.136 + 2004 W3C Patent Policy</a>. W3C maintains a <a 6.137 + href="http://www.w3.org/2004/01/pp-impl/32061/status" 6.138 + rel=disclosure>public list of any patent disclosures</a> made in 6.139 + connection with the deliverables of the group; that page also includes 6.140 + instructions for disclosing a patent. An individual who has actual 6.141 + knowledge of a patent which the individual believes contains <a 6.142 + href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential 6.143 + Claim(s)</a> must disclose the information in accordance with <a 6.144 + href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6.145 + 6 of the W3C Patent Policy</a>. 6.146 + 6.147 + <p><strong>Feedback on this draft should be posted to the (<a 6.148 + href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public 6.149 + mailing list <a 6.150 + href="mailto:www-style@w3.org">www-style@w3.org</a></strong> (see <a 6.151 + href="http://www.w3.org/Mail/Request">instructions</a>) <strong>with 6.152 + <kbd>[text-decor]</kbd> in the subject line.</strong> You are strongly 6.153 + encouraged to complain if you see something stupid in this draft. The 6.154 + editors will do their best to respond to all feedback. 6.155 + 6.156 + <p>The following features are at risk and may be cut from the spec during 6.157 + its CR period if there are no (correct) implementations: 6.158 + 6.159 + <ul> 6.160 + <li>the ‘<a href="#text-decoration-skip"><code 6.161 + class=property>text-decoration-skip</code></a>’ property / ‘<code 6.162 + class=css>ink</code>’ value 6.163 + </ul> 6.164 + 6.165 + <h2 class="no-num no-toc" id=contents> Table of Contents</h2> 6.166 + <!--begin-toc--> 6.167 + 6.168 + <ul class=toc> 6.169 + <li><a href="#intro"><span class=secno>1. </span> Introduction</a> 6.170 + <ul class=toc> 6.171 + <li><a href="#placement"><span class=secno>1.1. </span> Module 6.172 + Interactions</a> 6.173 + 6.174 + <li><a href="#values"><span class=secno>1.2. </span> Values</a> 6.175 + 6.176 + <li><a href="#terms"><span class=secno>1.3. </span>Terminology</a> 6.177 + </ul> 6.178 + 6.179 + <li><a href="#line-decoration"><span class=secno>2. </span> Line 6.180 + Decoration: Underline, Overline, and Strike-Through</a> 6.181 + <ul class=toc> 6.182 + <li><a href="#text-decoration-line-property"><span class=secno>2.1. 6.183 + </span> Text Decoration Lines: the ‘<code 6.184 + class=property>text-decoration-line</code>’ property</a> 6.185 + 6.186 + <li><a href="#text-decoration-color-property"><span class=secno>2.2. 6.187 + </span> Text Decoration Color: the ‘<code 6.188 + class=property>text-decoration-color</code>’ property</a> 6.189 + 6.190 + <li><a href="#text-decoration-style-property"><span class=secno>2.3. 6.191 + </span> Text Decoration Style: the ‘<code 6.192 + class=property>text-decoration-style</code>’ property</a> 6.193 + 6.194 + <li><a href="#text-decoration-property"><span class=secno>2.4. </span> 6.195 + Text Decoration Shorthand: the ‘<code 6.196 + class=property>text-decoration</code>’ property</a> 6.197 + 6.198 + <li><a href="#text-decoration-skip-property"><span class=secno>2.5. 6.199 + </span> Text Decoration Line Continuity: the ‘<code 6.200 + class=property>text-decoration-skip</code>’ property</a> 6.201 + 6.202 + <li><a href="#text-underline-position-property"><span class=secno>2.6. 6.203 + </span> Text Underline Position: the ‘<code 6.204 + class=property>text-underline-position</code>’ property</a> 6.205 + </ul> 6.206 + 6.207 + <li><a href="#emphasis-marks"><span class=secno>3. </span> Emphasis 6.208 + Marks</a> 6.209 + <ul class=toc> 6.210 + <li><a href="#text-emphasis-style-property"><span class=secno>3.1. 6.211 + </span> Emphasis Mark Style: the ‘<code 6.212 + class=property>text-emphasis-style</code>’ property</a> 6.213 + 6.214 + <li><a href="#text-emphasis-color-property"><span class=secno>3.2. 6.215 + </span> Emphasis Mark Color: the ‘<code 6.216 + class=property>text-emphasis-color</code>’ property</a> 6.217 + 6.218 + <li><a href="#text-emphasis-property"><span class=secno>3.3. </span> 6.219 + Emphasis Mark Shorthand: the ‘<code 6.220 + class=property>text-emphasis</code>’ property</a> 6.221 + 6.222 + <li><a href="#text-emphasis-position-property"><span class=secno>3.4. 6.223 + </span> Emphasis Mark Position: the ‘<code 6.224 + class=property>text-emphasis-position</code>’ property</a> 6.225 + </ul> 6.226 + 6.227 + <li><a href="#text-shadow-property"><span class=secno>4. </span> Text 6.228 + Shadows: the ‘<code class=property>text-shadow</code>’ property</a> 6.229 + 6.230 + <li><a href="#conformance"><span class=secno>5. </span> Conformance</a> 6.231 + <ul class=toc> 6.232 + <li><a href="#conventions"><span class=secno>5.1. </span> Document 6.233 + Conventions</a> 6.234 + 6.235 + <li><a href="#conformance-classes"><span class=secno>5.2. </span> 6.236 + Conformance Classes</a> 6.237 + 6.238 + <li><a href="#partial"><span class=secno>5.3. </span> Partial 6.239 + Implementations</a> 6.240 + 6.241 + <li><a href="#experimental"><span class=secno>5.4. </span> Experimental 6.242 + Implementations</a> 6.243 + 6.244 + <li><a href="#testing"><span class=secno>5.5. </span>Non-Experimental 6.245 + Implementations</a> 6.246 + 6.247 + <li><a href="#cr-exit-criteria"><span class=secno>5.6. </span> CR Exit 6.248 + Criteria</a> 6.249 + </ul> 6.250 + 6.251 + <li class=no-num><a href="#acknowledgements"> Appendix A: 6.252 + Acknowledgements</a> 6.253 + 6.254 + <li class=no-num><a href="#appendix-b-references">Appendix B: 6.255 + References</a> 6.256 + <ul class=toc> 6.257 + <li class=no-num><a href="#normative-ref">Normative references</a> 6.258 + 6.259 + <li class=no-num><a href="#informative-ref">Informative references</a> 6.260 + </ul> 6.261 + 6.262 + <li class=no-num><a href="#changes">Appendix C: Changes</a> 6.263 + 6.264 + <li class=no-num><a href="#default-stylesheet"> Appendix D: Default UA 6.265 + Stylesheet</a> 6.266 + </ul> 6.267 + <!--end-toc--> 6.268 + 6.269 + <h2 id=intro><span class=secno>1. </span> Introduction</h2> 6.270 + 6.271 + <p>[document here] 6.272 + 6.273 + <p class=issue>This draft describes features that are specific to certain 6.274 + scripts. There is an ongoing discussion about where these features belong: 6.275 + in existing CSS properties, in new CSS properties, or perhaps in other 6.276 + specifications. 6.277 + 6.278 + <h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3> 6.279 + 6.280 + <p>This module replaces and extends the text-level features defined in <a 6.281 + href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> chapter 16. 6.282 + 6.283 + <h3 id=values><span class=secno>1.2. </span> Values</h3> 6.284 + 6.285 + <p>This specification follows the <a 6.286 + href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property 6.287 + definition conventions</a> from <a href="#CSS21" 6.288 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in 6.289 + this specification are defined in CSS Level 2 Revision 1 <a 6.290 + href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS 6.291 + modules may expand the definitions of these value types: for example <a 6.292 + href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>, 6.293 + when combined with this module, expands the definition of the 6.294 + <color> value type as used in this specification. 6.295 + 6.296 + <p>In addition to the property-specific values listed in their definitions, 6.297 + all properties defined in this specification also accept the <a 6.298 + href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> 6.299 + keyword as their property value. For readability it has not been repeated 6.300 + explicitly. 6.301 + 6.302 + <p>The <dfn id=currentcolor>‘<code class=css>currentcolor</code>’</dfn> 6.303 + keyword here computes to itself and is resolved to the value of ‘<code 6.304 + class=property>color</code>’ after inheritance is performed. This is so 6.305 + that the ‘<a href="#text-emphasis-color"><code 6.306 + class=property>text-emphasis-color</code></a>’ by default matches the 6.307 + text ‘<code class=property>color</code>’. <span class=issue>CSS3 Color 6.308 + has not yet been errata'd to define it this way; currentcolor there is 6.309 + defined to compute to the value of ‘<code 6.310 + class=property>color</code>’, which gives it the wrong inheritance 6.311 + behavior.</span> 6.312 + 6.313 + <h3 id=terms><span class=secno>1.3. </span>Terminology</h3> 6.314 + 6.315 + <p>The terms <a 6.316 + href="http://www.w3.org/TR/css3-text/#grapheme-cluster"><dfn 6.317 + id=character>character</dfn></a>, <a 6.318 + href="http://www.w3.org/TR/css3-text/#letter"><dfn 6.319 + id=letter>letter</dfn></a>, and <a 6.320 + href="http://www.w3.org/TR/css3-text/#content-language"><dfn 6.321 + id=content-language>content language</dfn></a> as used in this 6.322 + specification are defined in <a href="#CSS3TEXT" 6.323 + rel=biblioentry>[CSS3TEXT]<!--{{!CSS3TEXT}}--></a>. Other terminology and 6.324 + concepts used in this specification are defined in <a href="#CSS21" 6.325 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> and <a 6.326 + href="#CSS3-WRITING-MODES" 6.327 + rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>. 6.328 + 6.329 + <h2 id=line-decoration><span class=secno>2. </span> Line Decoration: 6.330 + Underline, Overline, and Strike-Through</h2> 6.331 + 6.332 + <p> The following properties describe line decorations that are added to 6.333 + the content of an element. When specified on or propagated to an inline 6.334 + box, that box becomes a <dfn id=decorating-box>decorating box</dfn> for 6.335 + that decoration, applying the decoration to all its fragments. The 6.336 + decoration is then further propagated to any in-flow block-level boxes 6.337 + that split the inline (see <a 6.338 + href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">CSS2.1 6.339 + section 9.2.1.1</a>). When specified on or propagated to a block container 6.340 + that establishes an inline formatting context, the decorations are 6.341 + propagated to an anonymous inline box that wraps all the in-flow 6.342 + inline-level children of the block container. When specified on or 6.343 + propagated to a ruby box, the decorations are propagated only to the ruby 6.344 + base. For all other box types, the decorations are propagated to all 6.345 + in-flow children. 6.346 + 6.347 + <p class=note> Note that text decorations are not propagated to any 6.348 + out-of-flow descendants, nor to the contents of atomic inline-level 6.349 + descendants such as inline blocks and inline tables. They are also not 6.350 + propagated to inline children of inline boxes, although the decoration is 6.351 + <em>applied</em> to such boxes. 6.352 + 6.353 + <p> By default underlines, overlines, and line-throughs are applied only to 6.354 + non-replaced inline boxes, and are drawn over all text (including white 6.355 + space, letter spacing, and word spacing). Atomic inlines, such as images, 6.356 + are not decorated. The ‘<a href="#text-decoration-skip"><code 6.357 + class=property>text-decoration-skip</code></a>’ property can be used to 6.358 + modify this behavior, for example allowing atomic inlines to be underlined 6.359 + or requiring that white space be skipped. Margins, borders, and padding of 6.360 + the <a href="#decorating-box"><i>decorating box</i></a> are always 6.361 + skipped. 6.362 + 6.363 + <p>Relatively positioning a descendant moves all text decorations applied 6.364 + to it along with the descendant's text; it does not affect calculation of 6.365 + the decoration's initial position on that line. The ‘<code 6.366 + class=property>visibility</code>’ property, ‘<a 6.367 + href="#text-shadow"><code class=property>text-shadow</code></a>’, 6.368 + filters, and other graphical transformations likewise affect text 6.369 + decorations as part of the text they're drawn on, even if the decorations 6.370 + were specified on an ancestor box. 6.371 + 6.372 + <div class=example> 6.373 + <p>In the following style sheet and document fragment: 6.374 + 6.375 + <pre> 6.376 +<!-- --> blockquote { text-decoration: underline; color: blue; } 6.377 +<!-- --> em { display: block; } 6.378 +<!-- --> cite { color: fuchsia; }</pre> 6.379 + 6.380 + <pre> 6.381 +<!-- --> <blockquote> 6.382 +<!-- --> <p> 6.383 +<!-- --> <span> 6.384 +<!-- --> Help, help! 6.385 +<!-- --> <em> I am under a hat! </em> 6.386 +<!-- --> 6.387 +<!-- --> <cite> —GwieF </cite> 6.388 +<!-- --> </span> 6.389 +<!-- --> </p> 6.390 +<!-- --> </blockquote></pre> 6.391 + 6.392 + <p>...the underlining for the blockquote element is propagated to an 6.393 + anonymous inline box that surrounds the span element, causing the text 6.394 + "Help, help!" to be blue, with the blue underlining from the anonymous 6.395 + inline underneath it, the color being taken from the blockquote element. 6.396 + The <code><em>text</em></code> in the em block is also 6.397 + underlined, as it is in an in-flow block to which the underline is 6.398 + propagated. The final line of text is fuchsia, but the underline 6.399 + underneath it is still the blue underline from the anonymous inline 6.400 + element. 6.401 + 6.402 + <p><img alt="Sample rendering of the above underline example" 6.403 + src=underline-example.png> 6.404 + 6.405 + <p>This diagram shows the boxes involved in the example above. The rounded 6.406 + aqua line represents the anonymous inline element wrapping the inline 6.407 + contents of the paragraph element, the rounded blue line represents the 6.408 + span element, and the orange lines represent the blocks. 6.409 + </div> 6.410 + 6.411 + <h3 id=text-decoration-line-property><span class=secno>2.1. </span> Text 6.412 + Decoration Lines: the ‘<a href="#text-decoration-line"><code 6.413 + class=property>text-decoration-line</code></a>’ property</h3> 6.414 + 6.415 + <table class=propdef> 6.416 + <tbody> 6.417 + <tr> 6.418 + <th>Name: 6.419 + 6.420 + <td><dfn id=text-decoration-line>text-decoration-line</dfn> 6.421 + 6.422 + <tr> 6.423 + <th><a href="#values">Value</a>: 6.424 + 6.425 + <td>none | [ underline || overline || line-through || blink ] 6.426 + 6.427 + <tr> 6.428 + <th>Initial: 6.429 + 6.430 + <td>none 6.431 + 6.432 + <tr> 6.433 + <th>Applies to: 6.434 + 6.435 + <td>all elements 6.436 + 6.437 + <tr> 6.438 + <th>Inherited: 6.439 + 6.440 + <td>no (but see prose) 6.441 + 6.442 + <tr> 6.443 + <th>Percentages: 6.444 + 6.445 + <td>N/A 6.446 + 6.447 + <tr> 6.448 + <th>Media: 6.449 + 6.450 + <td>visual 6.451 + 6.452 + <tr> 6.453 + <th>Computed value: 6.454 + 6.455 + <td>as specified 6.456 + </table> 6.457 + 6.458 + <p>Specifies what line decorations, if any, are added to the element. 6.459 + Values have the following meanings: 6.460 + 6.461 + <dl> 6.462 + <dt><dfn id=none title="text-decoration-line:none">‘<code 6.463 + class=css>none</code>’</dfn> 6.464 + 6.465 + <dd>Neither produces nor inhibits text decoration. 6.466 + 6.467 + <dt><dfn id=underline>‘<code class=css>underline</code>’</dfn> 6.468 + 6.469 + <dd>Each line of text is underlined. 6.470 + 6.471 + <dt><dfn id=overline>‘<code class=css>overline</code>’</dfn> 6.472 + 6.473 + <dd>Each line of text has a line above it (i.e. on the opposite side from 6.474 + an underline). 6.475 + 6.476 + <dt><dfn id=line-through>‘<code class=css>line-through</code>’</dfn> 6.477 + 6.478 + <dd>Each line of text has a line through the middle. 6.479 + 6.480 + <dt><dfn id=blink>‘<code class=css>blink</code>’</dfn> 6.481 + 6.482 + <dd> The text blinks (alternates between visible and invisible). 6.483 + Conforming user agents may simply not blink the text. Note that not 6.484 + blinking the text is one technique to satisfy <a 6.485 + href="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">checkpoint 6.486 + 3.3 of WAI-UAAG</a>. This value is <strong>deprecated</strong> in favor 6.487 + of Animations <a href="#CSS3-ANIMATIONS" 6.488 + rel=biblioentry>[CSS3-ANIMATIONS]<!--{{CSS3-ANIMATIONS}}--></a>. 6.489 + </dl> 6.490 + 6.491 + <p> In determining the position and thickness of text decoration lines, 6.492 + user agents should first determine, per line, an "ideal" size and position 6.493 + for every fragment of a single <a href="#decorating-box"><i>decorating 6.494 + box</i></a>, then position the decoration as follows: 6.495 + 6.496 + <dl> 6.497 + <dt>overlines (and <i>over</i>-positioned underlines) 6.498 + 6.499 + <dd> Position the line with respect to the highest <i>over</i> content 6.500 + edge of the decorated fragments. 6.501 + 6.502 + <dt><a href="#alphabetic"><i>alphabetic</i></a> underlines 6.503 + 6.504 + <dd> Position the line to an average of the ideal underlines of the 6.505 + decorated fragments, ignoring any fragments with non-initial ‘<code 6.506 + class=property>vertical-align</code>’, but below the lowest alphabetic 6.507 + baseline considered. 6.508 + 6.509 + <dt>non-alphabetic underlines (and <i>under</i>-positioned overlines) 6.510 + 6.511 + <dd> Position the line with respect to the lowest <i>under</i> content 6.512 + edge of the decorated fragments. 6.513 + 6.514 + <dt>line-throughs 6.515 + 6.516 + <dd> For each set of decorated fragments with the same ‘<code 6.517 + class=property>font-size</code>’, compute an ideal position averaged 6.518 + from their direct contents and font metrics, ignoring any fragments with 6.519 + non-initial ‘<code class=property>vertical-align</code>’ and 6.520 + assigning them the ideal position of their parent. Position the portion 6.521 + of the line across each decorated fragment at the fragment's ideal 6.522 + position. (Essentially, this performs the same sort of averaging as for 6.523 + alphabetic underlines, but recomputes the position when drawing across a 6.524 + descendant with a different computed ‘<code 6.525 + class=property>font-size</code>’.) <span class=issue>Need an example 6.526 + here</span> 6.527 + </dl> 6.528 + 6.529 + <div class=example> 6.530 + <p>The following figure shows the averaging for underline: 6.531 + 6.532 + <p><img 6.533 + alt="In the first rendering of the underlined text '1st a' with 'st' as a superscript, both the '1st' and the 'a' are rendered in a small font. In the second rendering, the 'a' is rendered in a larger font. In the third, both '1st' and 'a' are large." 6.534 + height=105 src=underline-averaging.gif width=326> 6.535 + 6.536 + <p>In the three fragments of underlined text, the underline is drawn 6.537 + consecutively lower and thicker as the ratio of large text to small text 6.538 + increases. 6.539 + </div> 6.540 + 6.541 + <h3 id=text-decoration-color-property><span class=secno>2.2. </span> Text 6.542 + Decoration Color: the ‘<a href="#text-decoration-color"><code 6.543 + class=property>text-decoration-color</code></a>’ property</h3> 6.544 + 6.545 + <table class=propdef> 6.546 + <tbody> 6.547 + <tr> 6.548 + <th>Name: 6.549 + 6.550 + <td><dfn id=text-decoration-color>text-decoration-color</dfn> 6.551 + 6.552 + <tr> 6.553 + <th><a href="#values">Value</a>: 6.554 + 6.555 + <td><a href="http://www.w3.org/TR/css3-color/#color0"><span 6.556 + class=value-inst-color><color></span></a> 6.557 + 6.558 + <tr> 6.559 + <th>Initial: 6.560 + 6.561 + <td><a 6.562 + href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> 6.563 + 6.564 + <tr> 6.565 + <th>Applies to: 6.566 + 6.567 + <td>all elements 6.568 + 6.569 + <tr> 6.570 + <th>Inherited: 6.571 + 6.572 + <td>no 6.573 + 6.574 + <tr> 6.575 + <th>Percentages: 6.576 + 6.577 + <td>N/A 6.578 + 6.579 + <tr> 6.580 + <th>Media: 6.581 + 6.582 + <td>visual 6.583 + 6.584 + <tr> 6.585 + <th>Computed value: 6.586 + 6.587 + <td>the computed color 6.588 + </table> 6.589 + 6.590 + <p>This property specifies the color of text decoration (underlines 6.591 + overlines, and line-throughs) set on the element with ‘<a 6.592 + href="#text-decoration-line"><code 6.593 + class=property>text-decoration-line</code></a>’. 6.594 + 6.595 + <p> The color of text decorations must remain the same on all decorations 6.596 + originating from a given element, even if descendant boxes have different 6.597 + specified colors. 6.598 + 6.599 + <h3 id=text-decoration-style-property><span class=secno>2.3. </span> Text 6.600 + Decoration Style: the ‘<a href="#text-decoration-style"><code 6.601 + class=property>text-decoration-style</code></a>’ property</h3> 6.602 + 6.603 + <table class=propdef> 6.604 + <tbody> 6.605 + <tr> 6.606 + <th>Name: 6.607 + 6.608 + <td><dfn id=text-decoration-style>text-decoration-style</dfn> 6.609 + 6.610 + <tr> 6.611 + <th><a href="#values">Value</a>: 6.612 + 6.613 + <td>solid | double | dotted | dashed | wavy 6.614 + 6.615 + <tr> 6.616 + <th>Initial: 6.617 + 6.618 + <td>solid 6.619 + 6.620 + <tr> 6.621 + <th>Applies to: 6.622 + 6.623 + <td>all elements 6.624 + 6.625 + <tr> 6.626 + <th>Inherited: 6.627 + 6.628 + <td>no 6.629 + 6.630 + <tr> 6.631 + <th>Percentages: 6.632 + 6.633 + <td>N/A 6.634 + 6.635 + <tr> 6.636 + <th>Media: 6.637 + 6.638 + <td>visual 6.639 + 6.640 + <tr> 6.641 + <th>Computed value: 6.642 + 6.643 + <td>as specified 6.644 + </table> 6.645 + 6.646 + <p>This property specifies the style of the line(s) drawn for text 6.647 + decoration specified on the element. Values have the same meaning as for 6.648 + the <a 6.649 + href="http://www.w3.org/TR/css3-background/#the-border-style">border-style 6.650 + properties</a> <a href="#CSS3BG" 6.651 + rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. ‘<code 6.652 + class=css>wavy</code>’ indicates a wavy line. 6.653 + 6.654 + <p> The style of text decorations must remain the same on all decorations 6.655 + originating from a given element, even if descendant boxes have different 6.656 + specified styles. 6.657 + 6.658 + <h3 id=text-decoration-property><span class=secno>2.4. </span> Text 6.659 + Decoration Shorthand: the ‘<a href="#text-decoration"><code 6.660 + class=property>text-decoration</code></a>’ property</h3> 6.661 + 6.662 + <table class=propdef> 6.663 + <tbody> 6.664 + <tr> 6.665 + <th>Name: 6.666 + 6.667 + <td><dfn id=text-decoration>text-decoration</dfn> 6.668 + 6.669 + <tr> 6.670 + <th><a href="#values">Value</a>: 6.671 + 6.672 + <td><var><a 6.673 + href="#text-decoration-line"><text-decoration-line></a></var> || 6.674 + <var><a 6.675 + href="#text-decoration-style"><text-decoration-style></a></var> 6.676 + || <var><a 6.677 + href="#text-decoration-color"><text-decoration-color></a></var> 6.678 + 6.679 + <tr> 6.680 + <th>Initial: 6.681 + 6.682 + <td>none 6.683 + 6.684 + <tr> 6.685 + <th>Applies to: 6.686 + 6.687 + <td>all elements 6.688 + 6.689 + <tr> 6.690 + <th>Inherited: 6.691 + 6.692 + <td>no 6.693 + 6.694 + <tr> 6.695 + <th>Percentages: 6.696 + 6.697 + <td>N/A 6.698 + 6.699 + <tr> 6.700 + <th>Media: 6.701 + 6.702 + <td>visual 6.703 + 6.704 + <tr> 6.705 + <th>Computed value: 6.706 + 6.707 + <td>as specified 6.708 + </table> 6.709 + 6.710 + <p>This property is a shorthand for setting ‘<a 6.711 + href="#text-decoration-line"><code 6.712 + class=property>text-decoration-line</code></a>’, ‘<a 6.713 + href="#text-decoration-color"><code 6.714 + class=property>text-decoration-color</code></a>’, and ‘<a 6.715 + href="#text-decoration-style"><code 6.716 + class=property>text-decoration-style</code></a>’ in one declaration. 6.717 + Omitted values are set to their initial values. A ‘<a 6.718 + href="#text-decoration"><code class=property>text-decoration</code></a>’ 6.719 + declaration that omits both the ‘<a href="#text-decoration-color"><code 6.720 + class=property>text-decoration-color</code></a>’ and ‘<a 6.721 + href="#text-decoration-style"><code 6.722 + class=property>text-decoration-style</code></a>’ values is 6.723 + backwards-compatible with CSS Levels 1 and 2. 6.724 + 6.725 + <div class=example> 6.726 + <p>The following example underlines unvisited links with a solid blue 6.727 + underline in CSS1 and CSS2 UAs and a navy dotted underline in CSS3 UAs. 6.728 + 6.729 + <pre><code class=css> 6.730 +<!-- -->:link { 6.731 +<!-- --> color: blue; 6.732 +<!-- --> text-decoration: underline; 6.733 +<!-- --> text-decoration: navy dotted underline; /* <a 6.734 + href="http://www.w3.org/TR/CSS21/syndata.html#ignore">Ignored</a> in CSS1/CSS2 UAs */ 6.735 +<!-- -->}</code></pre> 6.736 + </div> 6.737 + 6.738 + <h3 id=text-decoration-skip-property><span class=secno>2.5. </span> Text 6.739 + Decoration Line Continuity: the ‘<a href="#text-decoration-skip"><code 6.740 + class=property>text-decoration-skip</code></a>’ property</h3> 6.741 + 6.742 + <table class=propdef> 6.743 + <tbody> 6.744 + <tr> 6.745 + <th>Name: 6.746 + 6.747 + <td><dfn id=text-decoration-skip>text-decoration-skip</dfn> 6.748 + 6.749 + <tr> 6.750 + <th><a href="#values">Value</a>: 6.751 + 6.752 + <td>none | [ objects || spaces || ink || edges || box-decoration ] 6.753 + 6.754 + <tr> 6.755 + <th>Initial: 6.756 + 6.757 + <td>objects 6.758 + 6.759 + <tr> 6.760 + <th>Applies to: 6.761 + 6.762 + <td>all elements 6.763 + 6.764 + <tr> 6.765 + <th>Inherited: 6.766 + 6.767 + <td>yes 6.768 + 6.769 + <tr> 6.770 + <th>Percentages: 6.771 + 6.772 + <td>N/A 6.773 + 6.774 + <tr> 6.775 + <th>Media: 6.776 + 6.777 + <td>visual 6.778 + 6.779 + <tr> 6.780 + <th>Computed value: 6.781 + 6.782 + <td>as specified 6.783 + </table> 6.784 + 6.785 + <p>This property specifies what parts of the element's content any text 6.786 + decoration affecting the element must skip over. It controls all text 6.787 + decoration lines drawn by the element and also any text decoration lines 6.788 + drawn by its ancestors. Values have the following meanings: 6.789 + 6.790 + <dl> 6.791 + <dt><dfn id=none0 title="text-decoration-skip:none">‘<code 6.792 + class=css>none</code>’</dfn> 6.793 + 6.794 + <dd>Skip nothing: text-decoration is drawn for all text content and for 6.795 + inline replaced elements. 6.796 + 6.797 + <dt><dfn id=objects title="text-decoration-skip:objects">‘<code 6.798 + class=css>objects</code>’</dfn> 6.799 + 6.800 + <dd>Skip this element if it is an atomic inline (such as an image or 6.801 + inline-block). 6.802 + 6.803 + <dt><dfn id=spaces title="text-decoration-skip:spaces">‘<code 6.804 + class=css>spaces</code>’</dfn> 6.805 + 6.806 + <dd>Skip white space: this includes regular spaces (U+0020) and tabs 6.807 + (U+0009), as well as nbsp (U+00A0), ideographic space (U+3000), all fixed 6.808 + width spaces (such as U+2000–U+200A, U+202F and U+205F), and any 6.809 + adjacent letter-spacing or word-spacing. 6.810 + 6.811 + <dt><dfn id=ink title="text-decoration-skip:ink">‘<code 6.812 + class=css>ink</code>’</dfn> 6.813 + 6.814 + <dd>Skip over where glyphs are drawn: interrupt the decoration line to let 6.815 + text show through where the text decoration would otherwise cross over a 6.816 + glyph. The UA may also skip a small distance to either side of the glyph 6.817 + outline. 6.818 + 6.819 + <dt><dfn id=edges title="text-decoration-skip:edges">‘<code 6.820 + class=css>edges</code>’</dfn> 6.821 + 6.822 + <dd>The UA should place the start and end of the line inwards from the 6.823 + content edge of the <i>decorating element</i> so that, e.g. two 6.824 + underlined elements side-by-side do not appear to have a single 6.825 + underline. (This is important in Chinese, where underlining is a form of 6.826 + punctuation.) 6.827 + 6.828 + <dt><dfn id=box-decoration 6.829 + title="text-decoration-skip:box-decoration">‘<code 6.830 + class=css>box-decoration</code>’</dfn> 6.831 + 6.832 + <dd> Skip over the box's margin, border, and padding areas. Note that this 6.833 + only has an effect on decorations imposed by an ancestor. 6.834 + </dl> 6.835 + 6.836 + <p class=note>Note that this property inherits and that descendant elements 6.837 + can have a different setting. 6.838 + 6.839 + <p class=note> Note that CSS 2.1 required skipping margins, borders, and 6.840 + padding always. In this level, by default only the margins, borders, and 6.841 + padding of the <i>decorating element</i> are skipped. 6.842 + 6.843 + <h3 id=text-underline-position-property><span class=secno>2.6. </span> Text 6.844 + Underline Position: the ‘<a href="#text-underline-position"><code 6.845 + class=property>text-underline-position</code></a>’ property</h3> 6.846 + 6.847 + <table class=propdef> 6.848 + <tbody> 6.849 + <tr> 6.850 + <th>Name: 6.851 + 6.852 + <td><dfn id=text-underline-position>text-underline-position</dfn> 6.853 + 6.854 + <tr> 6.855 + <th><a href="#values">Value</a>: 6.856 + 6.857 + <td>auto | alphabetic | [ below || [ left | right ] ] 6.858 + 6.859 + <tr> 6.860 + <th>Initial: 6.861 + 6.862 + <td>auto 6.863 + 6.864 + <tr> 6.865 + <th>Applies to: 6.866 + 6.867 + <td>all elements 6.868 + 6.869 + <tr> 6.870 + <th>Inherited: 6.871 + 6.872 + <td>yes 6.873 + 6.874 + <tr> 6.875 + <th>Percentages: 6.876 + 6.877 + <td>N/A 6.878 + 6.879 + <tr> 6.880 + <th>Media: 6.881 + 6.882 + <td>visual 6.883 + 6.884 + <tr> 6.885 + <th>Computed value: 6.886 + 6.887 + <td>as specified 6.888 + </table> 6.889 + 6.890 + <p>This property sets the position of an underline specified on the same 6.891 + element: it does not affect underlines specified by ancestor elements. 6.892 + Values have the following meanings: 6.893 + 6.894 + <dl> 6.895 + <dt><dfn id=auto>‘<code class=css>auto</code>’</dfn> 6.896 + 6.897 + <dd>The user agent may use any algorithm to determine the underline's 6.898 + position; however it must be placed at or below the alphabetic baseline. 6.899 + <p class=note>It is suggested that the underline position be ‘<a 6.900 + href="#alphabetic"><code class=css>alphabetic</code></a>’ unless it 6.901 + crosses either subscripted (or otherwise lowered) text, or it affects 6.902 + characters from Asian scripts such as Han or Tibetan, for which an 6.903 + alphabetic underline is too high: in such cases, aligning to the em box 6.904 + edge as described for ‘<code class=css>below left</code>’ is more 6.905 + appropriate. 6.906 + 6.907 + <dt><dfn id=alphabetic>‘<code class=css>alphabetic</code>’</dfn> 6.908 + 6.909 + <dd>The underline is positioned relative to the alphabetic baseline. In 6.910 + this case the underline is likely to cross some descenders. 6.911 + <div class=figure> 6.912 + <p><img 6.913 + alt="In a typical Latin font, the underline is positioned slightly below the alphabetic baseline, leaving a gap between the line and the bottom of most Latin letters, but crossing through descenders such as the stem of a 'p'." 6.914 + src=underline-position-alphabetic.png 6.915 + title="text-underline-position: alphabetic"> 6.916 + 6.917 + <p class=caption>‘<code class=css>text-underline-position: 6.918 + alphabetic</code>’ 6.919 + </div> 6.920 + 6.921 + <dt><dfn id=below>‘<code class=css>below</code>’</dfn> 6.922 + 6.923 + <dd>In horizontal writing modes, the underline is positioned relative to 6.924 + the under edge of the element's content box. In this case the underline 6.925 + usually does not cross the descenders. (This is sometimes called 6.926 + "accounting" underline.) If the underline affects descendants with a 6.927 + lower content edge, the user agent should shift the underline down 6.928 + further to the lowest underlined content box edge. The user agent may 6.929 + ignore elements with ‘<code class=css>vertical-align</code>’ values 6.930 + given as lengths, percentages, ‘<code class=css>top</code>’, or 6.931 + ‘<code class=css>bottom</code>’ when making this adjustment. (Note 6.932 + that images that are not affected by the underline per ‘<a 6.933 + href="#text-decoration-skip"><code 6.934 + class=property>text-decoration-skip</code></a>’ will not affect the 6.935 + position of the underline.) 6.936 + <div class=figure> 6.937 + <p><img 6.938 + alt="In a typical Latin font, the underline is far enough below the text that it does not cross the bottom of a 'g'." 6.939 + src=underline-position-below.png 6.940 + title="text-underline-position: below"> 6.941 + 6.942 + <p class=caption>‘<code class=css>text-underline-position: 6.943 + below</code>’ 6.944 + </div> 6.945 + 6.946 + <div class=example> 6.947 + <p>Because ‘<a href="#text-underline-position"><code 6.948 + class=property>text-underline-position</code></a>’ inherits, and is 6.949 + not reset by the ‘<a href="#text-decoration"><code 6.950 + class=property>text-decoration</code></a>’ shorthand, the following 6.951 + example switches the document to use ‘<a href="#below"><code 6.952 + class=css>below</code></a>’ underlining, which can be more 6.953 + appropriate for writing systems with long, complicated descenders. It 6.954 + is also often useful for mathematical or chemical texts that use many 6.955 + subscripts. 6.956 + 6.957 + <pre>:root { text-underline-position: below; }</pre> 6.958 + </div> 6.959 + 6.960 + <dt><dfn id=left>‘<code class=css>left</code>’</dfn> 6.961 + 6.962 + <dd>In vertical writing modes, the underline is aligned as for ‘<a 6.963 + href="#below"><code class=css>below</code></a>’, on the left edge of 6.964 + the text. 6.965 + 6.966 + <dt><dfn id=right>‘<code class=css>right</code>’</dfn> 6.967 + 6.968 + <dd>In vertical writing modes, the underline is aligned as for ‘<a 6.969 + href="#below"><code class=css>below</code></a>’, except it is aligned 6.970 + to the right edge of the text. If this causes the underline to be drawn 6.971 + on the "over" side of the text, then an overline also switches sides and 6.972 + is drawn on the "under" side. 6.973 + </dl> 6.974 + 6.975 + <p>If ‘<a href="#below"><code class=css>below</code></a>’ is specified 6.976 + alone, ‘<a href="#left"><code class=css>left</code></a>’ is also 6.977 + implied. If ‘<a href="#left"><code class=css>left</code></a>’ or ‘<a 6.978 + href="#right"><code class=css>right</code></a>’ is specified alone, 6.979 + ‘<a href="#below"><code class=css>below</code></a>’ is also implied. 6.980 + 6.981 + <p class=issue> Should ‘<code class=css>above</code>’/‘<a 6.982 + href="#below"><code class=css>below</code></a>’ be ‘<code 6.983 + class=css>over</code>’/‘<code class=css>under</code>’ to match text 6.984 + decoration names? 6.985 + 6.986 + <div class=figure id=fig-text-underline-position> 6.987 + <table> 6.988 + <tbody> 6.989 + <tr> 6.990 + <td> <img 6.991 + alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left' places the underline on the left side of the text." 6.992 + src=underline-position-left.png title="text-underline-position: left"> 6.993 + 6.994 + <td> <img 6.995 + alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right' places the underline on the right side of the text." 6.996 + src=underline-position-right.png 6.997 + title="text-underline-position: right"> 6.998 + 6.999 + <tr> 6.1000 + <td>‘<a href="#left"><code class=css>left</code></a>’ 6.1001 + 6.1002 + <td>‘<a href="#right"><code class=css>right</code></a>’ 6.1003 + </table> 6.1004 + 6.1005 + <p class=caption>In vertical writing modes, the ‘<a 6.1006 + href="#text-underline-position"><code 6.1007 + class=property>text-underline-position</code></a>’ values ‘<a 6.1008 + href="#left"><code class=css>left</code></a>’ and ‘<a 6.1009 + href="#right"><code class=css>right</code></a>’ allow placing the 6.1010 + underline on either side of the text. (In horizontal writing modes, both 6.1011 + values are treated as ‘<a href="#below"><code 6.1012 + class=css>below</code></a>’.) 6.1013 + </div> 6.1014 + 6.1015 + <div class=example> 6.1016 + <p>The following example styles modern Chinese, Japanese, and Korean texts 6.1017 + with the appropriate underline positions in both horizontal and vertical 6.1018 + text: 6.1019 + 6.1020 + <pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: below right; } 6.1021 +<!-- -->:root:lang(zh), [lang|=zh] { text-underline-position: below left; }</pre> 6.1022 + </div> 6.1023 + 6.1024 + <div class=note> 6.1025 + <p>In some cases (such as in OpenType) the font format can offer 6.1026 + information about the appropriate position of an underline. Typically 6.1027 + this information gives the position of an ‘<a href="#alphabetic"><code 6.1028 + class=css>alphabetic</code></a>’ underline; in some cases (especially 6.1029 + in CJK fonts), it gives the position of a ‘<code class=css>below 6.1030 + left</code>’ underline. (In this case, the font's underline metrics 6.1031 + typically touch the bottom edge of the em box). The UA is encouraged to 6.1032 + use information (such as the underline thickness, or appropriate 6.1033 + alphabetic alignment) from the font wherever appropriate. 6.1034 + </div> 6.1035 + 6.1036 + <h2 id=emphasis-marks><span class=secno>3. </span> Emphasis Marks</h2> 6.1037 + 6.1038 + <p>East Asian documents traditionally use small symbols next to each glyph 6.1039 + to emphasize a run of text. For example: 6.1040 + 6.1041 + <div class=figure> 6.1042 + <p> <img alt="Example of emphasis in Japanese appearing above the text" 6.1043 + class=example height=28 src=text-emphasis-ja.gif width=225> 6.1044 + 6.1045 + <p class=caption>Accent emphasis (shown in blue for clarity) applied to 6.1046 + Japanese text 6.1047 + </div> 6.1048 + 6.1049 + <h3 id=text-emphasis-style-property><span class=secno>3.1. </span> Emphasis 6.1050 + Mark Style: the ‘<a href="#text-emphasis-style"><code 6.1051 + class=property>text-emphasis-style</code></a>’ property</h3> 6.1052 + 6.1053 + <table class=propdef> 6.1054 + <tbody> 6.1055 + <tr> 6.1056 + <th>Name: 6.1057 + 6.1058 + <td><dfn id=text-emphasis-style>text-emphasis-style</dfn> 6.1059 + 6.1060 + <tr> 6.1061 + <th><a href="#values">Value</a>: 6.1062 + 6.1063 + <td>none | [ [ filled | open ] || [ dot | circle | double-circle | 6.1064 + triangle | sesame ] ] | <a class=noxref 6.1065 + href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string"><span 6.1066 + class=value-inst-string><string></span></a> 6.1067 + 6.1068 + <tr> 6.1069 + <th>Initial: 6.1070 + 6.1071 + <td>none 6.1072 + 6.1073 + <tr> 6.1074 + <th>Applies to: 6.1075 + 6.1076 + <td>all elements 6.1077 + 6.1078 + <tr> 6.1079 + <th>Inherited: 6.1080 + 6.1081 + <td>yes 6.1082 + 6.1083 + <tr> 6.1084 + <th>Percentages: 6.1085 + 6.1086 + <td>N/A 6.1087 + 6.1088 + <tr> 6.1089 + <th>Media: 6.1090 + 6.1091 + <td>visual 6.1092 + 6.1093 + <tr> 6.1094 + <th>Computed value: 6.1095 + 6.1096 + <td>‘<code class=property>none</code>’, a pair of keywords 6.1097 + representing the shape and fill, or a string 6.1098 + </table> 6.1099 + 6.1100 + <p>This property applies emphasis marks to the element's text. Values have 6.1101 + the following meanings: 6.1102 + 6.1103 + <dl> 6.1104 + <dt><dfn id=none1 title="text-emphasis:none">‘<code 6.1105 + class=css>none</code>’</dfn> 6.1106 + 6.1107 + <dd>No emphasis marks. 6.1108 + 6.1109 + <dt><dfn id=filled title="text-emphasis:filled">‘<code 6.1110 + class=css>filled</code>’</dfn> 6.1111 + 6.1112 + <dd>The shape is filled with solid color. 6.1113 + 6.1114 + <dt><dfn id=open title="text-emphasis:open">‘<code 6.1115 + class=css>open</code>’</dfn> 6.1116 + 6.1117 + <dd>The shape is hollow. 6.1118 + 6.1119 + <dt><dfn id=dot title="text-emphasis:dot">‘<code 6.1120 + class=css>dot</code>’</dfn> 6.1121 + 6.1122 + <dd>Display small circles as marks. The filled dot is U+2022 ‘<code 6.1123 + class=css>•</code>’, and the open dot is U+25E6 ‘<code 6.1124 + class=css>◦</code>’. 6.1125 + 6.1126 + <dt><dfn id=circle title="text-emphasis:circle">‘<code 6.1127 + class=css>circle</code>’</dfn> 6.1128 + 6.1129 + <dd>Display large circles as marks. The filled circle is U+25CF ‘<code 6.1130 + class=css>●</code>’, and the open circle is U+25CB ‘<code 6.1131 + class=css>○</code>’. 6.1132 + 6.1133 + <dt><dfn id=double-circle title="text-emphasis:double-circle">‘<code 6.1134 + class=css>double-circle</code>’</dfn> 6.1135 + 6.1136 + <dd>Display double circles as marks. The filled double-circle is U+25C9 6.1137 + ‘<code class=css>◉</code>’, and the open double-circle is U+25CE 6.1138 + ‘<code class=css>◎</code>’. 6.1139 + 6.1140 + <dt><dfn id=triangle title="text-emphasis:triangle">‘<code 6.1141 + class=css>triangle</code>’</dfn> 6.1142 + 6.1143 + <dd>Display triangles as marks. The filled triangle is U+25B2 ‘<code 6.1144 + class=css>▲</code>’, and the open triangle is U+25B3 ‘<code 6.1145 + class=css>△</code>’. 6.1146 + 6.1147 + <dt><dfn id=sesame title="text-emphasis:sesame">‘<code 6.1148 + class=css>sesame</code>’</dfn> 6.1149 + 6.1150 + <dd>Display sesames as marks. The filled sesame is U+FE45 ‘<code 6.1151 + class=css>﹅</code>’, and the open sesame is U+FE46 ‘<code 6.1152 + class=css>﹆</code>’. 6.1153 + 6.1154 + <dt><dfn id=ltstringgt title="text-emphasis:sesame">‘<code 6.1155 + class=css><var><string></var></code>’</dfn> 6.1156 + 6.1157 + <dd>Display the given string as marks. Authors should not specify more 6.1158 + than one <a href="#character"><i>character</i></a> in <string>. The 6.1159 + UA may truncate or ignore strings consisting of more than one grapheme 6.1160 + cluster. 6.1161 + </dl> 6.1162 + 6.1163 + <p>If a shape keyword is specified but neither of ‘<code 6.1164 + class=css>filled</code>’ nor ‘<code class=css>open</code>’ is 6.1165 + specified, ‘<code class=css>filled</code>’ is assumed. If only 6.1166 + ‘<code class=css>filled</code>’ or ‘<code class=css>open</code>’ 6.1167 + is specified, the shape keyword computes to ‘<code 6.1168 + class=css>circle</code>’ in horizontal writing mode and ‘<code 6.1169 + class=css>sesame</code>’ in vertical writing mode. 6.1170 + 6.1171 + <p>The marks should be drawn using the element's font settings with its 6.1172 + size scaled down to 50%. However, not all fonts have all these glyphs, and 6.1173 + some fonts use inappropriate sizes for emphasis marks in these code 6.1174 + points. The UA may opt to use a font known to be good for emphasis marks, 6.1175 + or the marks may instead be synthesized by the UA. Marks must remain 6.1176 + upright in vertical writing modes: like CJK characters, they do not rotate 6.1177 + to match the writing mode. 6.1178 + 6.1179 + <p class=note> One example of good fonts for emphasis marks is Adobe's 6.1180 + opensource project, <a 6.1181 + href="http://sourceforge.net/adobe/kenten-generic/">Kenten Generic 6.1182 + OpenType Font</a>, which is specially designed for the emphasis marks. 6.1183 + 6.1184 + <p>The marks are drawn once for each <a 6.1185 + href="#character"><i>character</i></a>. However, emphasis marks are not 6.1186 + drawn for characters that are: 6.1187 + 6.1188 + <ul> 6.1189 + <li><a href="http://www.w3.org/TR/css3-text/#word-separator">Word 6.1190 + separators</a> or that belong to the Unicode separator classes (Z*). (But 6.1191 + note that emphasis marks <em>are</em> drawn for a space that combines 6.1192 + with any combining characters.) 6.1193 + 6.1194 + <li>Characters belonging to the Unicode classes for control codes and 6.1195 + unassigned characters (Cc, Cf, Cn). 6.1196 + </ul> 6.1197 + 6.1198 + <p>If emphasis marks are drawn for characters for which ruby is drawn in 6.1199 + the same position as the emphasis mark, the ruby should be stacked between 6.1200 + the emphasis marks and the base text. In this case, the position of the 6.1201 + emphasis marks for a given element should be determined as if all 6.1202 + characters have ruby boxes of the same height as the highest ruby box in 6.1203 + the element. If the UA is not capable of drawing ruby and emphasis marks 6.1204 + on the same side, the UA may hide ruby and draw only emphasis marks. 6.1205 + 6.1206 + <div class=figure> 6.1207 + <p><img 6.1208 + alt="Example of emphasis marks applied to 4 characters, and ruby to 2 of them" 6.1209 + height=50 src=text-emphasis-ruby.png width=134> 6.1210 + 6.1211 + <p class=caption>Emphasis marks applied to 4 characters, and ruby to 2 of 6.1212 + them 6.1213 + </div> 6.1214 + 6.1215 + <p class=note>A future level of CSS may define controls to specify what to 6.1216 + do when emphasis marks and ruby text coincide. 6.1217 + 6.1218 + <h3 id=text-emphasis-color-property><span class=secno>3.2. </span> Emphasis 6.1219 + Mark Color: the ‘<a href="#text-emphasis-color"><code 6.1220 + class=property>text-emphasis-color</code></a>’ property</h3> 6.1221 + 6.1222 + <table class=propdef> 6.1223 + <tbody> 6.1224 + <tr> 6.1225 + <th>Name: 6.1226 + 6.1227 + <td><dfn id=text-emphasis-color>text-emphasis-color</dfn> 6.1228 + 6.1229 + <tr> 6.1230 + <th><a href="#values">Value</a>: 6.1231 + 6.1232 + <td><color> 6.1233 + 6.1234 + <tr> 6.1235 + <th>Initial: 6.1236 + 6.1237 + <td><a 6.1238 + href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> 6.1239 + 6.1240 + <tr> 6.1241 + <th>Applies to: 6.1242 + 6.1243 + <td>all elements 6.1244 + 6.1245 + <tr> 6.1246 + <th>Inherited: 6.1247 + 6.1248 + <td>yes 6.1249 + 6.1250 + <tr> 6.1251 + <th>Percentages: 6.1252 + 6.1253 + <td>N/A 6.1254 + 6.1255 + <tr> 6.1256 + <th>Media: 6.1257 + 6.1258 + <td>visual 6.1259 + 6.1260 + <tr> 6.1261 + <th>Computed value: 6.1262 + 6.1263 + <td>as specified 6.1264 + </table> 6.1265 + 6.1266 + <p>This property specifies the foreground color of the emphasis marks. 6.1267 + 6.1268 + <p class=note> The correct behavior of this property depends on an 6.1269 + outstanding erratum on <a href="#CSS3COLOR" 6.1270 + rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a> that has the ‘<a 6.1271 + href="#currentcolor"><code class=css>currentColor</code></a>’ keyword 6.1272 + inherit as itself, and to take the value of the ‘<code 6.1273 + class=property>color</code>’ property as its <em>used</em> (not 6.1274 + computed) value. 6.1275 + 6.1276 + <h3 id=text-emphasis-property><span class=secno>3.3. </span> Emphasis Mark 6.1277 + Shorthand: the ‘<a href="#text-emphasis"><code 6.1278 + class=property>text-emphasis</code></a>’ property</h3> 6.1279 + 6.1280 + <table class=propdef> 6.1281 + <tbody> 6.1282 + <tr> 6.1283 + <th>Name: 6.1284 + 6.1285 + <td><dfn id=text-emphasis>text-emphasis</dfn> 6.1286 + 6.1287 + <tr> 6.1288 + <th><a href="#values">Value</a>: 6.1289 + 6.1290 + <td>‘<code class=css><<a 6.1291 + href="#text-emphasis-style">text-emphasis-style</a>></code>’ || 6.1292 + ‘<code class=css><<a 6.1293 + href="#text-emphasis-color">text-emphasis-color</a>></code>’ 6.1294 + 6.1295 + <tr> 6.1296 + <th>Initial: 6.1297 + 6.1298 + <td>see individual properties 6.1299 + 6.1300 + <tr> 6.1301 + <th>Applies to: 6.1302 + 6.1303 + <td>all elements 6.1304 + 6.1305 + <tr> 6.1306 + <th>Inherited: 6.1307 + 6.1308 + <td>yes 6.1309 + 6.1310 + <tr> 6.1311 + <th>Percentages: 6.1312 + 6.1313 + <td>N/A 6.1314 + 6.1315 + <tr> 6.1316 + <th>Media: 6.1317 + 6.1318 + <td>visual 6.1319 + 6.1320 + <tr> 6.1321 + <th>Computed value: 6.1322 + 6.1323 + <td>see individual properties 6.1324 + </table> 6.1325 + 6.1326 + <p>This property is a shorthand for setting ‘<a 6.1327 + href="#text-emphasis-style"><code 6.1328 + class=property>text-emphasis-style</code></a>’ and ‘<a 6.1329 + href="#text-emphasis-color"><code 6.1330 + class=property>text-emphasis-color</code></a>’ in one declaration. 6.1331 + Omitted values are set to their initial values. 6.1332 + 6.1333 + <p class=note>Note that ‘<a href="#text-emphasis-position"><code 6.1334 + class=property>text-emphasis-position</code></a>’ is not reset in this 6.1335 + shorthand. This is because typically the shape and color vary, but the 6.1336 + position is consistent for a particular language throughout the document. 6.1337 + Therefore the position should inherit independently. 6.1338 + 6.1339 + <h3 id=text-emphasis-position-property><span class=secno>3.4. </span> 6.1340 + Emphasis Mark Position: the ‘<a href="#text-emphasis-position"><code 6.1341 + class=property>text-emphasis-position</code></a>’ property</h3> 6.1342 + 6.1343 + <table class=propdef> 6.1344 + <tbody> 6.1345 + <tr> 6.1346 + <th>Name: 6.1347 + 6.1348 + <td><dfn id=text-emphasis-position>text-emphasis-position</dfn> 6.1349 + 6.1350 + <tr> 6.1351 + <th><a href="#values">Value</a>: 6.1352 + 6.1353 + <td>[ above | below ] && [ right | left ] 6.1354 + 6.1355 + <tr> 6.1356 + <th>Initial: 6.1357 + 6.1358 + <td>above right 6.1359 + 6.1360 + <tr> 6.1361 + <th>Applies to: 6.1362 + 6.1363 + <td>all elements 6.1364 + 6.1365 + <tr> 6.1366 + <th>Inherited: 6.1367 + 6.1368 + <td>yes 6.1369 + 6.1370 + <tr> 6.1371 + <th>Percentages: 6.1372 + 6.1373 + <td>N/A 6.1374 + 6.1375 + <tr> 6.1376 + <th>Media: 6.1377 + 6.1378 + <td>visual 6.1379 + 6.1380 + <tr> 6.1381 + <th>Computed value: 6.1382 + 6.1383 + <td>as specified 6.1384 + </table> 6.1385 + 6.1386 + <p>This property describes where emphasis marks are drawn at. The values 6.1387 + have following meanings: 6.1388 + 6.1389 + <dl> 6.1390 + <dt><dfn id=above title="text-emphasis:above">‘<code 6.1391 + class=css>above</code>’</dfn> 6.1392 + 6.1393 + <dd>Draw marks over the text in horizontal writing mode. 6.1394 + 6.1395 + <dt><dfn id=below0 title="text-emphasis:below">‘<code 6.1396 + class=css>below</code>’</dfn> 6.1397 + 6.1398 + <dd>Draw marks under the text in horizontal writing mode. 6.1399 + 6.1400 + <dt><dfn id=right0 title="text-emphasis:right">‘<code 6.1401 + class=css>right</code>’</dfn> 6.1402 + 6.1403 + <dd>Draw marks to the right of the text in vertical writing mode. 6.1404 + 6.1405 + <dt><dfn id=left0 title="text-emphasis:left">‘<code 6.1406 + class=css>left</code>’</dfn> 6.1407 + 6.1408 + <dd>Draw marks to the left of the text in vertical writing mode. 6.1409 + </dl> 6.1410 + 6.1411 + <p class=issue> Should ‘<code class=css>above</code>’/‘<a 6.1412 + href="#below"><code class=css>below</code></a>’ be ‘<code 6.1413 + class=css>over</code>’/‘<code class=css>under</code>’ to match text 6.1414 + decoration names? 6.1415 + 6.1416 + <p>Emphasis marks are drawn exactly as if each character was assigned the 6.1417 + mark as its ruby annotation text with the ruby position given by ‘<a 6.1418 + href="#text-emphasis-position"><code 6.1419 + class=property>text-emphasis-position</code></a>’ and the ruby alignment 6.1420 + as centered. 6.1421 + 6.1422 + <p>The effect of emphasis marks on the line height is the same as for ruby 6.1423 + text. 6.1424 + 6.1425 + <div class=note> 6.1426 + <p>Note, the preferred position of emphasis marks depends on the language. 6.1427 + In Japanese for example, the preferred position is ‘<code 6.1428 + class=css>above right</code>’. In Chinese, on the other hand, the 6.1429 + preferred position is ‘<code class=css>below right</code>’. The 6.1430 + informative table below summarizes the preferred emphasis mark positions 6.1431 + for Chinese and Japanese: 6.1432 + 6.1433 + <table class=data> 6.1434 + <caption>Preferred emphasis mark and ruby position</caption> 6.1435 + 6.1436 + <thead> 6.1437 + <tr> 6.1438 + <th rowspan=2 scope=col>Language 6.1439 + 6.1440 + <th colspan=2 scope=col>Preferred mark position 6.1441 + 6.1442 + <th colspan=2 rowspan=2 scope=col>Illustration 6.1443 + 6.1444 + <tr> 6.1445 + <th>Horizontal 6.1446 + 6.1447 + <th>Vertical 6.1448 + 6.1449 + <tbody> 6.1450 + <tr> 6.1451 + <td scope=row>Japanese 6.1452 + 6.1453 + <td>above 6.1454 + 6.1455 + <td>right 6.1456 + 6.1457 + <td> <img 6.1458 + alt="Emphasis marks appear above each emphasized character in horizontal Japanese text." 6.1459 + height=28 src=text-emphasis-ja.gif 6.1460 + title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text" 6.1461 + width=225> 6.1462 + 6.1463 + <td rowspan=2> <img 6.1464 + alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text." 6.1465 + height=89 src=text-emphasis-v.gif 6.1466 + title="Emphasis applied on the right of a fragment of Japanese text" 6.1467 + width=34> <!-- 6.1468 + <tr> 6.1469 + <td scope="row">Mongolian 6.1470 + <td><span class="issue">?</span> 6.1471 + <td>right 6.1472 + --> 6.1473 + 6.1474 + <tr> 6.1475 + <td scope=row>Chinese 6.1476 + 6.1477 + <td>below 6.1478 + 6.1479 + <td>right 6.1480 + 6.1481 + <td> <img 6.1482 + alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text." 6.1483 + height=28 src=text-emphasis-zh.gif 6.1484 + title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text" 6.1485 + width=133> 6.1486 + </table> 6.1487 + </div> 6.1488 + 6.1489 + <h2 id=text-shadow-property><span class=secno>4. </span> Text Shadows: the 6.1490 + ‘<a href="#text-shadow"><code class=property>text-shadow</code></a>’ 6.1491 + property</h2> 6.1492 + 6.1493 + <table class=propdef> 6.1494 + <tbody> 6.1495 + <tr> 6.1496 + <th>Name: 6.1497 + 6.1498 + <td><dfn id=text-shadow>text-shadow</dfn> 6.1499 + 6.1500 + <tr> 6.1501 + <th><a href="#values">Value</a>: 6.1502 + 6.1503 + <td>none | [ <length>{2,3} && <color>? ]# 6.1504 + 6.1505 + <tr> 6.1506 + <th>Initial: 6.1507 + 6.1508 + <td>none 6.1509 + 6.1510 + <tr> 6.1511 + <th>Applies to: 6.1512 + 6.1513 + <td>all elements 6.1514 + 6.1515 + <tr> 6.1516 + <th>Inherited: 6.1517 + 6.1518 + <td>yes 6.1519 + 6.1520 + <tr> 6.1521 + <th>Percentages: 6.1522 + 6.1523 + <td>N/A 6.1524 + 6.1525 + <tr> 6.1526 + <th>Media: 6.1527 + 6.1528 + <td>visual 6.1529 + 6.1530 + <tr> 6.1531 + <th>Computed value: 6.1532 + 6.1533 + <td>a color plus three absolute <length>s 6.1534 + </table> 6.1535 + 6.1536 + <p>This property accepts a comma-separated list of shadow effects to be 6.1537 + applied to the text of the element. Values are interpreted as for <a 6.1538 + href="http://www.w3.org/TR/css3-background/#the-box-shadow">‘<code 6.1539 + class=property>box-shadow</code>’</a> <a href="#CSS3BG" 6.1540 + rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. (But note that spread 6.1541 + values are not allowed.) The shadow is applied to all of the element's 6.1542 + text as well as any text decorations it specifies. 6.1543 + 6.1544 + <p>The shadow effects are applied front-to-back: the first shadow is on 6.1545 + top. The shadows may thus overlay each other, but they never overlay the 6.1546 + text itself. The shadow must be painted at a stack level between the 6.1547 + element's border and/or background, if present, and the elements text and 6.1548 + text decoration. UAs should avoid painting text shadows over text in 6.1549 + adjacent elements belonging to the same stack level and stacking context. 6.1550 + (This may mean that the exact stack level of the shadows depends on 6.1551 + whether the element has a border or background: the exact stacking 6.1552 + behavior of text shadows is thus UA-defined.) 6.1553 + 6.1554 + <p>Unlike ‘<code class=property>box-shadow</code>’, text shadows are 6.1555 + not clipped to the shadowed shape and may show through if the text is 6.1556 + partially-transparent. Like ‘<code class=property>box-shadow</code>’, 6.1557 + text shadows do not influence layout, and do not trigger scrolling or 6.1558 + increase the size of the scrollable area. 6.1559 + 6.1560 + <p class=note>The painting order of shadows defined here is the opposite of 6.1561 + that defined in the 1998 <a 6.1562 + href="http://www.w3.org/TR/1998/REC-CSS2-19980512">CSS2 6.1563 + Recommendation</a>. 6.1564 + 6.1565 + <p>The ‘<a href="#text-shadow"><code class=css>text-shadow</code></a>’ 6.1566 + property applies to both the <code>::first-line</code> and 6.1567 + <code>::first-letter</code> pseudo-elements. 6.1568 + 6.1569 + <h2 id=conformance><span class=secno>5. </span> Conformance</h2> 6.1570 + 6.1571 + <h3 id=conventions><span class=secno>5.1. </span> Document Conventions</h3> 6.1572 + 6.1573 + <p>Conformance requirements are expressed with a combination of descriptive 6.1574 + assertions and RFC 2119 terminology. The key words “MUST”, “MUST 6.1575 + NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, 6.1576 + “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the 6.1577 + normative parts of this document are to be interpreted as described in RFC 6.1578 + 2119. However, for readability, these words do not appear in all uppercase 6.1579 + letters in this specification. 6.1580 + 6.1581 + <p>All of the text of this specification is normative except sections 6.1582 + explicitly marked as non-normative, examples, and notes. <a 6.1583 + href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a> 6.1584 + 6.1585 + <p>Examples in this specification are introduced with the words “for 6.1586 + example” or are set apart from the normative text with 6.1587 + <code>class="example"</code>, like this: 6.1588 + 6.1589 + <div class=example> 6.1590 + <p>This is an example of an informative example. 6.1591 + </div> 6.1592 + 6.1593 + <p>Informative notes begin with the word “Note” and are set apart from 6.1594 + the normative text with <code>class="note"</code>, like this: 6.1595 + 6.1596 + <p class=note>Note, this is an informative note. 6.1597 + 6.1598 + <h3 id=conformance-classes><span class=secno>5.2. </span> Conformance 6.1599 + Classes</h3> 6.1600 + 6.1601 + <p>Conformance to CSS Text Level 3 is defined for three conformance 6.1602 + classes: 6.1603 + 6.1604 + <dl> 6.1605 + <dt><dfn id=style-sheet title="style sheet!!as conformance class">style 6.1606 + sheet</dfn> 6.1607 + 6.1608 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 6.1609 + style sheet</a>. 6.1610 + 6.1611 + <dt><dfn id=renderer>renderer</dfn> 6.1612 + 6.1613 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 6.1614 + that interprets the semantics of a style sheet and renders documents that 6.1615 + use them. 6.1616 + 6.1617 + <dt><dfn id=authoring-tool>authoring tool</dfn> 6.1618 + 6.1619 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 6.1620 + that writes a style sheet. 6.1621 + </dl> 6.1622 + 6.1623 + <p>A style sheet is conformant to CSS Text Level 3 if all of its 6.1624 + declarations that use properties defined in this module have values that 6.1625 + are valid according to the generic CSS grammar and the individual grammars 6.1626 + of each property as given in this module. 6.1627 + 6.1628 + <p>A renderer is conformant to CSS Text Level 3 if, in addition to 6.1629 + interpreting the style sheet as defined by the appropriate specifications, 6.1630 + it supports all the features defined by CSS Text Level 3 by parsing them 6.1631 + correctly and rendering the document accordingly. However, the inability 6.1632 + of a UA to correctly render a document due to limitations of the device 6.1633 + does not make the UA non-conformant. (For example, a UA is not required to 6.1634 + render color on a monochrome monitor.) 6.1635 + 6.1636 + <p>An authoring tool is conformant to CSS Text Level 3 if it writes style 6.1637 + sheets that are syntactically correct according to the generic CSS grammar 6.1638 + and the individual grammars of each feature in this module, and meet all 6.1639 + other conformance requirements of style sheets as described in this 6.1640 + module. 6.1641 + 6.1642 + <h3 id=partial><span class=secno>5.3. </span> Partial Implementations</h3> 6.1643 + 6.1644 + <p>So that authors can exploit the forward-compatible parsing rules to 6.1645 + assign fallback values, CSS renderers <strong>must</strong> treat as 6.1646 + invalid (and <a 6.1647 + href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as 6.1648 + appropriate</a>) any at-rules, properties, property values, keywords, and 6.1649 + other syntactic constructs for which they have no usable level of support. 6.1650 + In particular, user agents <strong>must not</strong> selectively ignore 6.1651 + unsupported component values and honor supported values in a single 6.1652 + multi-value property declaration: if any value is considered invalid (as 6.1653 + unsupported values must be), CSS requires that the entire declaration be 6.1654 + ignored. 6.1655 + 6.1656 + <h3 id=experimental><span class=secno>5.4. </span> Experimental 6.1657 + Implementations</h3> 6.1658 + 6.1659 + <p>To avoid clashes with future CSS features, the CSS2.1 specification 6.1660 + reserves a <a 6.1661 + href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 6.1662 + syntax</a> for proprietary and experimental extensions to CSS. 6.1663 + 6.1664 + <p>Prior to a specification reaching the Candidate Recommendation stage in 6.1665 + the W3C process, all implementations of a CSS feature are considered 6.1666 + experimental. The CSS Working Group recommends that implementations use a 6.1667 + vendor-prefixed syntax for such features, including those in W3C Working 6.1668 + Drafts. This avoids incompatibilities with future changes in the draft. 6.1669 + 6.1670 + <h3 id=testing><span class=secno>5.5. </span>Non-Experimental 6.1671 + Implementations</h3> 6.1672 + 6.1673 + <p>Once a specification reaches the Candidate Recommendation stage, 6.1674 + non-experimental implementations are possible, and implementors should 6.1675 + release an unprefixed implementation of any CR-level feature they can 6.1676 + demonstrate to be correctly implemented according to spec. 6.1677 + 6.1678 + <p>To establish and maintain the interoperability of CSS across 6.1679 + implementations, the CSS Working Group requests that non-experimental CSS 6.1680 + renderers submit an implementation report (and, if necessary, the 6.1681 + testcases used for that implementation report) to the W3C before releasing 6.1682 + an unprefixed implementation of any CSS features. Testcases submitted to 6.1683 + W3C are subject to review and correction by the CSS Working Group. 6.1684 + 6.1685 + <p>Further information on submitting testcases and implementation reports 6.1686 + can be found from on the CSS Working Group's website at <a 6.1687 + href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 6.1688 + Questions should be directed to the <a 6.1689 + href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> 6.1690 + mailing list. 6.1691 + 6.1692 + <h3 id=cr-exit-criteria><span class=secno>5.6. </span> CR Exit Criteria</h3> 6.1693 + 6.1694 + <p> For this specification to be advanced to Proposed Recommendation, there 6.1695 + must be at least two independent, interoperable implementations of each 6.1696 + feature. Each feature may be implemented by a different set of products, 6.1697 + there is no requirement that all features be implemented by a single 6.1698 + product. For the purposes of this criterion, we define the following 6.1699 + terms: 6.1700 + 6.1701 + <dl> 6.1702 + <dt>independent 6.1703 + 6.1704 + <dd>each implementation must be developed by a different party and cannot 6.1705 + share, reuse, or derive from code used by another qualifying 6.1706 + implementation. Sections of code that have no bearing on the 6.1707 + implementation of this specification are exempt from this requirement. 6.1708 + 6.1709 + <dt>interoperable 6.1710 + 6.1711 + <dd>passing the respective test case(s) in the official CSS test suite, 6.1712 + or, if the implementation is not a Web browser, an equivalent test. Every 6.1713 + relevant test in the test suite should have an equivalent test created if 6.1714 + such a user agent (UA) is to be used to claim interoperability. In 6.1715 + addition if such a UA is to be used to claim interoperability, then there 6.1716 + must one or more additional UAs which can also pass those equivalent 6.1717 + tests in the same way for the purpose of interoperability. The equivalent 6.1718 + tests must be made publicly available for the purposes of peer review. 6.1719 + 6.1720 + <dt>implementation 6.1721 + 6.1722 + <dd>a user agent which: 6.1723 + <ol class=inline> 6.1724 + <li>implements the specification. 6.1725 + 6.1726 + <li>is available to the general public. The implementation may be a 6.1727 + shipping product or other publicly available version (i.e., beta 6.1728 + version, preview release, or “nightly build”). Non-shipping product 6.1729 + releases must have implemented the feature(s) for a period of at least 6.1730 + one month in order to demonstrate stability. 6.1731 + 6.1732 + <li>is not experimental (i.e., a version specifically designed to pass 6.1733 + the test suite and is not intended for normal usage going forward). 6.1734 + </ol> 6.1735 + </dl> 6.1736 + 6.1737 + <p>The specification will remain Candidate Recommendation for at least six 6.1738 + months. 6.1739 + 6.1740 + <h2 class=no-num id=acknowledgements> Appendix A: Acknowledgements</h2> 6.1741 + 6.1742 + <p>This specification would not have been possible without the help from: 6.1743 + Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett, 6.1744 + Martin Dürst, Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye 6.1745 + Gittelman, Ian Hickson, Martin Heijdra, Richard Ishida, Masayasu Ishikawa, 6.1746 + Michael Jochimsen, Eric LeVine, Ambrose Li, Håkon Wium Lie, Chris Lilley, 6.1747 + Ken Lunde, Nat McCully, Shinyu Murakami, Paul Nelson, Chris Pratley, 6.1748 + Marcin Sawicki, Arnold Schrijver, Rahul Sonnad, Michel Suignard, Takao 6.1749 + Suzuki, Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi 6.1750 + Yabe and Steve Zilles. 6.1751 + 6.1752 + <h2 class=no-num id=appendix-b-references>Appendix B: References</h2> 6.1753 + 6.1754 + <h3 class=no-num id=normative-ref>Normative references</h3> 6.1755 + <!--begin-normative--> 6.1756 + <!-- Sorted by label --> 6.1757 + 6.1758 + <dl class=bibliography> 6.1759 + <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 6.1760 + <!----> 6.1761 + 6.1762 + <dt id=CSS21>[CSS21] 6.1763 + 6.1764 + <dd>Bert Bos; et al. <a 6.1765 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style 6.1766 + Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June 6.1767 + 2011. W3C Recommendation. URL: <a 6.1768 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> 6.1769 + </dd> 6.1770 + <!----> 6.1771 + 6.1772 + <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES] 6.1773 + 6.1774 + <dd>Elika J. Etemad; Koji Ishii. <a 6.1775 + href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/"><cite>CSS 6.1776 + Writing Modes Module Level 3.</cite></a> 1 May 2012. W3C Working Draft. 6.1777 + (Work in progress.) URL: <a 6.1778 + href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/</a> 6.1779 + </dd> 6.1780 + <!----> 6.1781 + 6.1782 + <dt id=CSS3BG>[CSS3BG] 6.1783 + 6.1784 + <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a 6.1785 + href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS 6.1786 + Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C 6.1787 + Candidate Recommendation. (Work in progress.) URL: <a 6.1788 + href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a> 6.1789 + </dd> 6.1790 + <!----> 6.1791 + 6.1792 + <dt id=CSS3TEXT>[CSS3TEXT] 6.1793 + 6.1794 + <dd>Elika J. Etemad; Koji Ishii. <a 6.1795 + href="http://www.w3.org/TR/2012/WD-css3-text-20120814/"><cite>CSS Text 6.1796 + Level 3.</cite></a> 14 August 2012. W3C Working Draft. (Work in 6.1797 + progress.) URL: <a 6.1798 + href="http://www.w3.org/TR/2012/WD-css3-text-20120814/">http://www.w3.org/TR/2012/WD-css3-text-20120814/</a> 6.1799 + </dd> 6.1800 + <!----> 6.1801 + 6.1802 + <dt id=RFC2119>[RFC2119] 6.1803 + 6.1804 + <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key 6.1805 + words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet 6.1806 + RFC 2119. URL: <a 6.1807 + href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a> 6.1808 + </dd> 6.1809 + <!----> 6.1810 + </dl> 6.1811 + <!--end-normative--> 6.1812 + 6.1813 + <h3 class=no-num id=informative-ref>Informative references</h3> 6.1814 + <!--begin-informative--> 6.1815 + <!-- Sorted by label --> 6.1816 + 6.1817 + <dl class=bibliography> 6.1818 + <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 6.1819 + <!----> 6.1820 + 6.1821 + <dt id=CSS3-ANIMATIONS>[CSS3-ANIMATIONS] 6.1822 + 6.1823 + <dd>Dean Jackson; et al. <a 6.1824 + href="http://www.w3.org/TR/2012/WD-css3-animations-20120403/"><cite>CSS 6.1825 + Animations.</cite></a> 3 April 2012. W3C Working Draft. (Work in 6.1826 + progress.) URL: <a 6.1827 + href="http://www.w3.org/TR/2012/WD-css3-animations-20120403/">http://www.w3.org/TR/2012/WD-css3-animations-20120403/</a> 6.1828 + </dd> 6.1829 + <!----> 6.1830 + 6.1831 + <dt id=CSS3COLOR>[CSS3COLOR] 6.1832 + 6.1833 + <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a 6.1834 + href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color 6.1835 + Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a 6.1836 + href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a> 6.1837 + </dd> 6.1838 + <!----> 6.1839 + </dl> 6.1840 + <!--end-informative--> 6.1841 + 6.1842 + <h2 class=no-num id=changes>Appendix C: Changes</h2> 6.1843 + 6.1844 + <h2 class=no-num id=default-stylesheet> Appendix D: Default UA Stylesheet</h2> 6.1845 + 6.1846 + <p> This appendix is informative, and is to help UA developers to implement 6.1847 + default stylesheet, but UA developers are free to ignore or change. 6.1848 + 6.1849 + <div class=example> 6.1850 + <pre><code class=css> 6.1851 +<!-- -->s, strike, del { 6.1852 +<!-- --> text-decoration: line-through; 6.1853 +<!-- -->} 6.1854 +<!-- --> 6.1855 +<!-- -->u, ins, :link, :visited { 6.1856 +<!-- --> text-decoration: underline; 6.1857 +<!-- -->} 6.1858 +<!-- --> 6.1859 +<!-- -->abbr[title], acronym[title] { 6.1860 +<!-- --> text-decoration: dotted underline; 6.1861 +<!-- -->} 6.1862 +<!-- --> 6.1863 +<!-- -->/* disable inheritance of text-emphasis marks to ruby text: 6.1864 +<!-- --> emphasis marks should only apply to base text */ 6.1865 +<!-- -->rt { text-emphasis: none; } 6.1866 +<!-- --> 6.1867 +<!-- -->:root:lang(zh), [lang|=zh] { 6.1868 +<!-- -->/* default emphasis mark position is 'below right' for Chinese */ 6.1869 +<!-- --> text-emphasis-position: below right; 6.1870 +<!-- -->} 6.1871 +<!-- --> 6.1872 +<!-- -->:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { 6.1873 +<!-- -->/* default underline position is 'below right' for Japanese and Korean */ 6.1874 +<!-- --> text-underline-position: below right; 6.1875 +<!-- -->} 6.1876 +<!-- --> 6.1877 +<!-- -->:root:lang(zh), [lang|=zh] { 6.1878 +<!-- -->/* default underline position is 'below left' for Chinese */ 6.1879 +<!-- --> text-underline-position: below left; 6.1880 +<!-- -->} 6.1881 +<!-- --> 6.1882 +<!-- -->blink { 6.1883 +<!-- --> text-decoration-line: blink; 6.1884 +<!-- -->} 6.1885 +</code></pre> 6.1886 + </div> 6.1887 + 6.1888 + <p class=issue> If you find any issues, recommendations to add, or 6.1889 + corrections, please send the information to <a 6.1890 + href="mailto:www-style@w3.org">www-style@w3.org</a> with 6.1891 + <kbd>[css3-text-decor]</kbd> in the subject line. 6.1892 + 6.1893 + <div class=example> 6.1894 + <p> While ‘<code class=css>text-decoration-line: blink</code>’ can't 6.1895 + be fully reproduced with other existing properties, authors can achieve a 6.1896 + very similar effect with the following CSS: 6.1897 + 6.1898 + <pre> 6.1899 +<!-- -->@keyframes blink { 6.1900 +<!-- --> 0% { 6.1901 +<!-- --> visibility: hidden; 6.1902 +<!-- --> animation-timing-function: step-end; 6.1903 +<!-- --> } 6.1904 +<!-- --> 25%, 100% { 6.1905 +<!-- --> visibility: visible; 6.1906 +<!-- --> } 6.1907 +<!-- -->} 6.1908 +<!-- -->blink { 6.1909 +<!-- --> animation: blink 1s infinite; 6.1910 +<!-- -->}</pre> 6.1911 + </div>
7.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 7.2 +++ b/css-text-decor-3/Overview.src.html Mon Oct 22 00:41:17 2012 +0200 7.3 @@ -0,0 +1,1338 @@ 7.4 +<!DOCTYPE html> 7.5 +<html lang="en"> 7.6 +<head> 7.7 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 7.8 + <title>CSS Text Decoration Module Level 3 (CSS3 Text Decoration)</title> 7.9 + <link rel=contents href="#contents"> 7.10 + <link rel=index href="#index"> 7.11 + <link rel="stylesheet" type="text/css" href="../default.css"> 7.12 + <link rel="stylesheet" type="text/css" 7.13 + href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css"> 7.14 + 7.15 +</head> 7.16 + 7.17 +<div class="head"> 7.18 +<!--logo--> 7.19 + 7.20 +<h1>CSS Text Decoration Module Level 3</h1> 7.21 + 7.22 +<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2> 7.23 +<dl> 7.24 + <dt>This version:</dt> 7.25 + 7.26 + <dd><a href="http://dev.w3.org/csswg/css-text-decor-3/">http://dev.w3.org/csswg/css-text-decor-3/</a> 7.27 + <!-- 7.28 + <dd><a href="http://www.w3.org/TR/[YEAR]/WD-css3-text-[CDATE]/">http://www.w3.org/TR/[YEAR]/WD-css3-text-[CDATE]/</a></dd> 7.29 + --> 7.30 + 7.31 + <dt>Latest version:</dt> 7.32 + <dd><a href="http://www.w3.org/TR/[SHORTNAME]/">http://www.w3.org/TR/[SHORTNAME]/</a></dd> 7.33 + 7.34 + <dt>Latest editor's draft:</dt> 7.35 + <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a></dd> 7.36 + 7.37 + <dt>Previous version:</dt> 7.38 + <dd><a 7.39 + href="http://www.w3.org/TR/2012/WD-css3-text-20120119/">http://www.w3.org/TR/2012/WD-css3-text-20120119/</a> 7.40 + 7.41 + <dt>Issues List:</dt> 7.42 + <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/10">http://www.w3.org/Style/CSS/Tracker/products/10</a> 7.43 + 7.44 + <dt>Discussion:</dt> 7.45 + <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line “<kbd>[SHORTNAME] <var>… message topic …</var></kbd>” 7.46 + 7.47 + <dt>Editors:</dt> 7.48 + <dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> (Mozilla)</dd> 7.49 + <dd><a href="mailto:koji.a.ishii@mail.rakuten.com">Koji Ishii</a> (Rakuten, Inc.)</dd> 7.50 +</dl> 7.51 + 7.52 +<!--copyright--> 7.53 + 7.54 +<hr title="Separator for header"> 7.55 +</div> 7.56 + 7.57 +<h2 class="no-num no-toc" id="abstract">Abstract</h2> 7.58 + 7.59 + <p>This module contains the features of CSS relating to 7.60 + text decoration, such as underlines, text shadows, and emphasis marks. 7.61 + <a href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing 7.62 + the rendering of structured documents (such as HTML and XML) on screen, on 7.63 + paper, in speech, etc. 7.64 + 7.65 +<h2 class="no-num no-toc" id="status">Status of this document</h2> 7.66 + 7.67 + 7.68 + <p><em>This section describes the status of this document at the time of 7.69 + its publication. Other documents may supersede this document. A list of 7.70 + current W3C publications and the latest revision of this technical report 7.71 + can be found in the <a href="http://www.w3.org/TR/">W3C technical reports 7.72 + index at http://www.w3.org/TR/.</a></em> 7.73 + 7.74 + <p>Publication as a Working Draft does not imply endorsement by the W3C 7.75 + Membership. This is a draft document and may be updated, replaced or 7.76 + obsoleted by other documents at any time. It is inappropriate to cite this 7.77 + document as other than work in progress. 7.78 + 7.79 + <p>This CSS module has been produced as a combined effort of the <a 7.80 + href="http://www.w3.org/International/Activity">W3C Internationalization Activity</a>, 7.81 + and the <a href="http://www.w3.org/Style/Activity">Style Activity</a> and is maintained 7.82 + by the <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>. It also 7.83 + includes contributions made by participants in the <a 7.84 + href="http://www.w3.org/Style/XSL/Group/">XSL Working Group</a> (<a 7.85 + href="http://cgi.w3.org/MemberAccess/AccessRequest">members 7.86 + only</a>). 7.87 + 7.88 + <p>This document was produced by a group operating under the <a 7.89 + href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 7.90 + 2004 W3C Patent Policy</a>. W3C maintains a <a 7.91 + href="http://www.w3.org/2004/01/pp-impl/32061/status" 7.92 + rel=disclosure>public list of any patent disclosures</a> made in 7.93 + connection with the deliverables of the group; that page also includes 7.94 + instructions for disclosing a patent. An individual who has actual 7.95 + knowledge of a patent which the individual believes contains <a 7.96 + href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential 7.97 + Claim(s)</a> must disclose the information in accordance with <a 7.98 + href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 7.99 + 6 of the W3C Patent Policy</a>.</p> 7.100 + 7.101 + <p><strong>Feedback on this draft should be posted to the 7.102 + (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) 7.103 + public mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a></strong> 7.104 + (see <a href="http://www.w3.org/Mail/Request">instructions</a>) <strong>with 7.105 + <kbd>[text-decor]</kbd> in the subject line.</strong> 7.106 + You are strongly encouraged to complain if you see something stupid 7.107 + in this draft. The editors will do their best to respond to all feedback.</p> 7.108 + 7.109 + <p>The following features are at risk and may be cut from the spec during 7.110 + its CR period if there are no (correct) implementations:</p> 7.111 + <ul> 7.112 + <li>the 'text-decoration-skip' property / ''ink'' value 7.113 + </ul> 7.114 + 7.115 +<h2 class="no-num no-toc" id="contents"> 7.116 +Table of Contents</h2> 7.117 + 7.118 +<!--toc--> 7.119 + 7.120 +<h2 id="intro"> 7.121 +Introduction</h2> 7.122 + 7.123 + <p>[document here]</p> 7.124 + 7.125 + <p class="issue">This draft describes features that are specific to certain scripts. 7.126 + There is an ongoing discussion about where these features belong: in 7.127 + existing CSS properties, in new CSS properties, or perhaps in other 7.128 + specifications. 7.129 + 7.130 + 7.131 +<h3 id="placement"> 7.132 +Module Interactions</h3> 7.133 + 7.134 + <p>This module replaces and extends the text-level 7.135 + features defined in [[!CSS21]] chapter 16. 7.136 + 7.137 +<h3 id="values"> 7.138 +Values</h3> 7.139 + 7.140 + <p>This specification follows the 7.141 + <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property 7.142 + definition conventions</a> from [[!CSS21]]. Value types not defined in 7.143 + this specification are defined in CSS Level 2 Revision 1 [[!CSS21]]. 7.144 + Other CSS modules may expand the definitions of these value types: for 7.145 + example [[CSS3COLOR]], when combined with this module, expands the 7.146 + definition of the <color> value type as used in this specification.</p> 7.147 + 7.148 + <p>In addition to the property-specific values listed in their definitions, 7.149 + all properties defined in this specification also accept the 7.150 + <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> 7.151 + keyword as their property value. For readability it has not been repeated 7.152 + explicitly. 7.153 + 7.154 + <p>The <dfn>''currentcolor''</dfn> keyword here computes to itself and is 7.155 + resolved to the value of 'color' after inheritance is performed. This is 7.156 + so that the 'text-emphasis-color' by default matches the text 'color'. 7.157 + <span class="issue">CSS3 Color has not yet been errata'd to define it this way; 7.158 + currentcolor there is defined to compute to the value of 'color', 7.159 + which gives it the wrong inheritance behavior.</span> 7.160 + 7.161 +<h3 id="terms">Terminology</h3> 7.162 + 7.163 + <p>The terms <a href="http://www.w3.org/TR/css3-text/#grapheme-cluster"><dfn>character</dfn></a>, 7.164 + <a href="http://www.w3.org/TR/css3-text/#letter"><dfn>letter</dfn></a>, and 7.165 + <a href="http://www.w3.org/TR/css3-text/#content-language"><dfn>content language</dfn></a> 7.166 + as used in this specification are defined in [[!CSS3TEXT]]. 7.167 + Other terminology and concepts used in this specification are defined 7.168 + in [[!CSS21]] and [[!CSS3-WRITING-MODES]]. 7.169 + 7.170 +<h2 id="line-decoration"> 7.171 +Line Decoration: Underline, Overline, and Strike-Through</h2> 7.172 + 7.173 + <p> 7.174 + The following properties describe line decorations that are added to the content of an element. 7.175 + When specified on or propagated to an inline box, 7.176 + that box becomes a <dfn>decorating box</dfn> for that decoration, 7.177 + applying the decoration to all its fragments. 7.178 + The decoration is then further propagated to any in-flow block-level boxes that split the inline 7.179 + (see <a href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">CSS2.1 section 9.2.1.1</a>). 7.180 + When specified on or propagated to a block container that establishes an inline formatting context, 7.181 + the decorations are propagated to an anonymous inline box that wraps all the in-flow inline-level children of the block container. 7.182 + When specified on or propagated to a ruby box, 7.183 + the decorations are propagated only to the ruby base. 7.184 + For all other box types, 7.185 + the decorations are propagated to all in-flow children. 7.186 + 7.187 + <p class="note"> 7.188 + Note that text decorations are not propagated to any out-of-flow descendants, 7.189 + nor to the contents of atomic inline-level descendants such as inline blocks and inline tables. 7.190 + They are also not propagated to inline children of inline boxes, 7.191 + although the decoration is <em>applied</em> to such boxes. 7.192 + 7.193 + <p> 7.194 + By default underlines, overlines, and line-throughs are applied only to non-replaced inline boxes, 7.195 + and are drawn over all text (including white space, letter spacing, and word spacing). 7.196 + Atomic inlines, such as images, are not decorated. 7.197 + The 'text-decoration-skip' property can be used to modify this behavior, 7.198 + for example allowing atomic inlines to be underlined 7.199 + or requiring that white space be skipped. 7.200 + Margins, borders, and padding of the <i>decorating box</i> are always skipped. 7.201 + 7.202 + <p>Relatively positioning a descendant moves all text decorations 7.203 + applied to it along with the descendant's text; it does not affect 7.204 + calculation of the decoration's initial position on that line. 7.205 + The 'visibility' property, 'text-shadow', filters, and other graphical transformations 7.206 + likewise affect text decorations as part of the text they're drawn on, 7.207 + even if the decorations were specified on an ancestor box. 7.208 + 7.209 + <div class="example"> 7.210 + <p>In the following style sheet and document fragment:</p> 7.211 + <pre> 7.212 +<!-- --> blockquote { text-decoration: underline; color: blue; } 7.213 +<!-- --> em { display: block; } 7.214 +<!-- --> cite { color: fuchsia; }</pre> 7.215 + <pre> 7.216 +<!-- --> <blockquote> 7.217 +<!-- --> <p> 7.218 +<!-- --> <span> 7.219 +<!-- --> Help, help! 7.220 +<!-- --> <em> I am under a hat! </em> 7.221 +<!-- --> 7.222 +<!-- --> <cite> —GwieF </cite> 7.223 +<!-- --> </span> 7.224 +<!-- --> </p> 7.225 +<!-- --> </blockquote></pre> 7.226 + <p>...the underlining for the blockquote element is propagated to an 7.227 + anonymous inline box that surrounds the span element, causing 7.228 + the text "Help, help!" to be blue, with the blue underlining from 7.229 + the anonymous inline underneath it, the color being taken from the 7.230 + blockquote element. The <code><em>text</em></code> 7.231 + in the em block is also underlined, as it is in an in-flow block to 7.232 + which the underline is propagated. The final line of text is fuchsia, 7.233 + but the underline underneath it is still the blue underline from the 7.234 + anonymous inline element.</p> 7.235 + <p><img src="underline-example.png" alt="Sample rendering of the above underline example"></p> 7.236 + <p>This diagram shows the boxes involved in the example above. The 7.237 + rounded aqua line represents the anonymous inline element wrapping 7.238 + the inline contents of the paragraph element, the rounded blue line 7.239 + represents the span element, and the orange lines represent the 7.240 + blocks.</p> 7.241 + </div> 7.242 + 7.243 +<h3 id="text-decoration-line-property"> 7.244 +Text Decoration Lines: the 'text-decoration-line' property</h3> 7.245 + 7.246 + <table class="propdef"> 7.247 + <tr> 7.248 + <th>Name: 7.249 + <td><dfn>text-decoration-line</dfn> 7.250 + <tr> 7.251 + <th><a href="#values">Value</a>: 7.252 + <td>none | [ underline || overline || line-through || blink ] 7.253 + 7.254 + <tr> 7.255 + <th>Initial: 7.256 + <td>none 7.257 + <tr> 7.258 + <th>Applies to: 7.259 + <td>all elements 7.260 + <tr> 7.261 + <th>Inherited: 7.262 + <td>no (but see prose) 7.263 + <tr> 7.264 + <th>Percentages: 7.265 + <td>N/A 7.266 + <tr> 7.267 + <th>Media: 7.268 + <td>visual 7.269 + <tr> 7.270 + <th>Computed value: 7.271 + <td>as specified 7.272 + </table> 7.273 + 7.274 + <p>Specifies what line decorations, if any, are added to the element. 7.275 + Values have the following meanings:</p> 7.276 + 7.277 + <dl> 7.278 + <dt><dfn title="text-decoration-line:none">''none''</dfn> 7.279 + <dd>Neither produces nor inhibits text decoration. 7.280 + <dt><dfn>''underline''</dfn> 7.281 + <dd>Each line of text is underlined. 7.282 + <dt><dfn>''overline''</dfn> 7.283 + <dd>Each line of text has a line above it (i.e. on the opposite 7.284 + side from an underline). 7.285 + <dt><dfn>''line-through''</dfn> 7.286 + <dd>Each line of text has a line through the middle. 7.287 + <dt><dfn>''blink''</dfn> 7.288 + <dd> 7.289 + The text blinks (alternates between visible and invisible). 7.290 + Conforming user agents may simply not blink the text. 7.291 + 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>. 7.292 + This value is <strong>deprecated</strong> in favor of Animations [[CSS3-ANIMATIONS]]. 7.293 + </dl> 7.294 + 7.295 + <p> 7.296 + In determining the position and thickness of text decoration lines, 7.297 + user agents should first determine, per line, 7.298 + an "ideal" size and position for every fragment of a single <i>decorating box</i>, 7.299 + then position the decoration as follows: 7.300 + 7.301 + <dl> 7.302 + <dt>overlines (and <i>over</i>-positioned underlines) 7.303 + <dd> 7.304 + Position the line with respect to the highest <i>over</i> content edge of the decorated fragments. 7.305 + 7.306 + <dt><i>alphabetic</i> underlines 7.307 + <dd> 7.308 + Position the line to an average of the ideal underlines of the decorated fragments, 7.309 + ignoring any fragments with non-initial 'vertical-align', 7.310 + but below the lowest alphabetic baseline considered. 7.311 + 7.312 + <dt>non-alphabetic underlines (and <i>under</i>-positioned overlines) 7.313 + <dd> 7.314 + Position the line with respect to the lowest <i>under</i> content edge of the decorated fragments. 7.315 + 7.316 + <dt>line-throughs 7.317 + <dd> 7.318 + For each set of decorated fragments with the same 'font-size', 7.319 + compute an ideal position averaged from their direct contents and font metrics, 7.320 + ignoring any fragments with non-initial 'vertical-align' and assigning them the ideal position of their parent. 7.321 + Position the portion of the line across each decorated fragment at the fragment's ideal position. 7.322 + (Essentially, this performs the same sort of averaging as for alphabetic underlines, 7.323 + but recomputes the position when drawing across a descendant with a different computed 'font-size'.) 7.324 + <span class="issue">Need an example here</span> 7.325 + </dl> 7.326 + 7.327 + <div class="example"> 7.328 + <p>The following figure shows the averaging for underline: 7.329 + <p><img alt="In the first rendering of the underlined text '1st a' 7.330 + with 'st' as a superscript, both the '1st' and the 'a' 7.331 + are rendered in a small font. In the second rendering, 7.332 + the 'a' is rendered in a larger font. In the third, both 7.333 + '1st' and 'a' are large." 7.334 + height="105" src="underline-averaging.gif" width="326"> 7.335 + <p>In the three fragments of underlined text, the underline is drawn 7.336 + consecutively lower and thicker as the ratio of large text to small 7.337 + text increases.</p> 7.338 + </div> 7.339 + 7.340 +<h3 id="text-decoration-color-property"> 7.341 +Text Decoration Color: the 'text-decoration-color' property</h3> 7.342 + 7.343 + <table class="propdef"> 7.344 + <tr> 7.345 + <th>Name: 7.346 + <td><dfn>text-decoration-color</dfn> 7.347 + <tr> 7.348 + <th><a href="#values">Value</a>: 7.349 + <td><a href="http://www.w3.org/TR/css3-color/#color0"><span class="value-inst-color"><color></span></a> 7.350 + 7.351 + <tr> 7.352 + <th>Initial: 7.353 + <td><a href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> 7.354 + <tr> 7.355 + <th>Applies to: 7.356 + <td>all elements 7.357 + <tr> 7.358 + <th>Inherited: 7.359 + <td>no 7.360 + <tr> 7.361 + <th>Percentages: 7.362 + <td>N/A 7.363 + <tr> 7.364 + <th>Media: 7.365 + <td>visual 7.366 + <tr> 7.367 + <th>Computed value: 7.368 + <td>the computed color 7.369 + </table> 7.370 + 7.371 + <p>This property specifies the color of text decoration (underlines 7.372 + overlines, and line-throughs) set on the element with 7.373 + 'text-decoration-line'.</p> 7.374 + 7.375 + <p> 7.376 + The color of text decorations must remain the same on all decorations originating from a given element, 7.377 + even if descendant boxes have different specified colors. 7.378 + 7.379 +<h3 id="text-decoration-style-property"> 7.380 +Text Decoration Style: the 'text-decoration-style' property</h3> 7.381 + 7.382 + <table class="propdef"> 7.383 + <tr> 7.384 + <th>Name: 7.385 + <td><dfn>text-decoration-style</dfn> 7.386 + <tr> 7.387 + <th><a href="#values">Value</a>: 7.388 + <td>solid | double | dotted | dashed | wavy 7.389 + 7.390 + <tr> 7.391 + <th>Initial: 7.392 + <td>solid 7.393 + <tr> 7.394 + <th>Applies to: 7.395 + <td>all elements 7.396 + <tr> 7.397 + <th>Inherited: 7.398 + <td>no 7.399 + <tr> 7.400 + <th>Percentages: 7.401 + <td>N/A 7.402 + <tr> 7.403 + <th>Media: 7.404 + <td>visual 7.405 + <tr> 7.406 + <th>Computed value: 7.407 + <td>as specified 7.408 + </table> 7.409 + 7.410 + <p>This property specifies the style of the line(s) drawn for 7.411 + text decoration specified on the element. Values have the 7.412 + same meaning as for the 7.413 + <a href="http://www.w3.org/TR/css3-background/#the-border-style">border-style 7.414 + properties</a> [[!CSS3BG]]. ''wavy'' indicates a wavy line.</p> 7.415 + 7.416 + <p> 7.417 + The style of text decorations must remain the same on all decorations originating from a given element, 7.418 + even if descendant boxes have different specified styles. 7.419 + 7.420 +<h3 id="text-decoration-property"> 7.421 +Text Decoration Shorthand: the 'text-decoration' property</h3> 7.422 + 7.423 + <table class="propdef"> 7.424 + <tr> 7.425 + <th>Name: 7.426 + <td><dfn>text-decoration</dfn> 7.427 + <tr> 7.428 + <th><a href="#values">Value</a>: 7.429 + <td><var><a href="#text-decoration-line"><text-decoration-line></a></var> || 7.430 + <var><a href="#text-decoration-style"><text-decoration-style></a></var> || 7.431 + <var><a href="#text-decoration-color"><text-decoration-color></a></var> 7.432 + 7.433 + <tr> 7.434 + <th>Initial: 7.435 + <td>none 7.436 + <tr> 7.437 + <th>Applies to: 7.438 + <td>all elements 7.439 + <tr> 7.440 + <th>Inherited: 7.441 + <td>no 7.442 + <tr> 7.443 + <th>Percentages: 7.444 + <td>N/A 7.445 + <tr> 7.446 + <th>Media: 7.447 + <td>visual 7.448 + <tr> 7.449 + <th>Computed value: 7.450 + <td>as specified 7.451 + </table> 7.452 + 7.453 + <p>This property is a shorthand for setting 'text-decoration-line', 7.454 + 'text-decoration-color', and 'text-decoration-style' in one declaration. 7.455 + Omitted values are set to their initial values. A 'text-decoration' 7.456 + declaration that omits both the 'text-decoration-color' 7.457 + and 'text-decoration-style' values is backwards-compatible 7.458 + with CSS Levels 1 and 2.</p> 7.459 + 7.460 + <div class="example"> 7.461 + <p>The following example underlines unvisited links with a solid blue 7.462 + underline in CSS1 and CSS2 UAs and a navy dotted underline in CSS3 UAs.</p> 7.463 + 7.464 + <pre><code class="css"> 7.465 +<!-- -->:link { 7.466 +<!-- --> color: blue; 7.467 +<!-- --> text-decoration: underline; 7.468 +<!-- --> text-decoration: navy dotted underline; /* <a href="http://www.w3.org/TR/CSS21/syndata.html#ignore">Ignored</a> in CSS1/CSS2 UAs */ 7.469 +<!-- -->}</code></pre> 7.470 + </div> 7.471 + 7.472 +<h3 id="text-decoration-skip-property"> 7.473 +Text Decoration Line Continuity: the 'text-decoration-skip' property</h3> 7.474 + 7.475 + <table class="propdef"> 7.476 + <tr> 7.477 + <th>Name: 7.478 + <td><dfn>text-decoration-skip</dfn> 7.479 + <tr> 7.480 + <th><a href="#values">Value</a>: 7.481 + <td>none | [ objects || spaces || ink || edges || box-decoration ] 7.482 + 7.483 + <tr> 7.484 + <th>Initial: 7.485 + <td>objects 7.486 + <tr> 7.487 + <th>Applies to: 7.488 + <td>all elements 7.489 + <tr> 7.490 + <th>Inherited: 7.491 + <td>yes 7.492 + <tr> 7.493 + <th>Percentages: 7.494 + <td>N/A 7.495 + <tr> 7.496 + <th>Media: 7.497 + <td>visual 7.498 + <tr> 7.499 + <th>Computed value: 7.500 + <td>as specified 7.501 + </table> 7.502 + 7.503 + <p>This property specifies what parts of the element's content 7.504 + any text decoration affecting the element must skip over. It 7.505 + controls all text decoration lines drawn by the element 7.506 + and also any text decoration lines drawn by its ancestors. 7.507 + Values have the following meanings:</p> 7.508 + 7.509 + <dl> 7.510 + <dt><dfn title="text-decoration-skip:none">''none''</dfn></dt> 7.511 + <dd>Skip nothing: text-decoration is drawn for all text content 7.512 + and for inline replaced elements.</dd> 7.513 + <dt><dfn title="text-decoration-skip:objects">''objects''</dfn></dt> 7.514 + <dd>Skip this element if it is an atomic inline (such as an 7.515 + image or inline-block).</dd> 7.516 + <dt><dfn title="text-decoration-skip:spaces">''spaces''</dfn></dt> 7.517 + <dd>Skip white space: this includes regular spaces (U+0020) and 7.518 + tabs (U+0009), as well as nbsp (U+00A0), ideographic space 7.519 + (U+3000), all fixed width spaces (such as U+2000–U+200A, 7.520 + U+202F and U+205F), and any adjacent letter-spacing or 7.521 + word-spacing.</dd> 7.522 + <dt><dfn title="text-decoration-skip:ink">''ink''</dfn></dt> 7.523 + <dd>Skip over where glyphs are drawn: interrupt the decoration 7.524 + line to let text show through where the text decoration would 7.525 + otherwise cross over a glyph. The UA may also skip a small 7.526 + distance to either side of the glyph outline.</dd> 7.527 + <dt><dfn title="text-decoration-skip:edges">''edges''</dfn></dt> 7.528 + <dd>The UA should place the start and end of the line inwards from 7.529 + the content edge of the <i>decorating element</i> so that, e.g. two 7.530 + underlined elements side-by-side do not appear to have a single 7.531 + underline. (This is important in Chinese, where underlining is a 7.532 + form of punctuation.)</dd> 7.533 + <dt><dfn title="text-decoration-skip:box-decoration">''box-decoration''</dfn> 7.534 + <dd> 7.535 + Skip over the box's margin, border, and padding areas. 7.536 + Note that this only has an effect on decorations imposed by an ancestor. 7.537 + </dl> 7.538 + 7.539 + <p class="note">Note that this property inherits and that descendant 7.540 + elements can have a different setting.</p> 7.541 + 7.542 + <p class='note'> 7.543 + Note that CSS 2.1 required skipping margins, borders, and padding always. 7.544 + In this level, by default only the margins, borders, and padding of the <i>decorating element</i> are skipped. 7.545 + 7.546 +<h3 id="text-underline-position-property"> 7.547 +Text Underline Position: the 'text-underline-position' property</h3> 7.548 + 7.549 + <table class="propdef"> 7.550 + <tr> 7.551 + <th>Name: 7.552 + <td><dfn>text-underline-position</dfn> 7.553 + <tr> 7.554 + <th><a href="#values">Value</a>: 7.555 + <td>auto | alphabetic | [ below || [ left | right ] ] 7.556 + 7.557 + <tr> 7.558 + <th>Initial: 7.559 + <td>auto 7.560 + <tr> 7.561 + <th>Applies to: 7.562 + <td>all elements 7.563 + <tr> 7.564 + <th>Inherited: 7.565 + <td>yes 7.566 + <tr> 7.567 + <th>Percentages: 7.568 + <td>N/A 7.569 + <tr> 7.570 + <th>Media: 7.571 + <td>visual 7.572 + <tr> 7.573 + <th>Computed value: 7.574 + <td>as specified 7.575 + </table> 7.576 + 7.577 + <p>This property sets the position of an underline specified 7.578 + on the same element: it does not affect underlines specified by 7.579 + ancestor elements. Values have the following meanings:</p> 7.580 + 7.581 + <dl> 7.582 + <dt><dfn>''auto''</dfn></dt> 7.583 + <dd>The user agent may use any algorithm to determine the 7.584 + underline's position; however it must be placed at or below 7.585 + the alphabetic baseline. 7.586 + <p class="note">It is suggested that the underline position 7.587 + be ''alphabetic'' unless it crosses either subscripted (or 7.588 + otherwise lowered) text, or it affects characters from Asian 7.589 + scripts such as Han or Tibetan, for which an alphabetic 7.590 + underline is too high: in such cases, aligning to the em box 7.591 + edge as described for ''below left'' is more appropriate. 7.592 + <dt><dfn>''alphabetic''</dfn></dt> 7.593 + <dd>The underline is positioned relative to the alphabetic baseline. In 7.594 + this case the underline is likely to cross some descenders. 7.595 + <div class="figure"> 7.596 + <p><img title="text-underline-position: alphabetic" 7.597 + alt="In a typical Latin font, the underline is positioned slightly 7.598 + below the alphabetic baseline, leaving a gap between the line 7.599 + and the bottom of most Latin letters, but crossing through 7.600 + descenders such as the stem of a 'p'." 7.601 + src="underline-position-alphabetic.png" 7.602 + > 7.603 + <p class="caption">''text-underline-position: alphabetic''</p> 7.604 + </div> 7.605 + <dt><dfn>''below''</dfn></dt> 7.606 + <dd>In horizontal writing modes, the underline is positioned 7.607 + relative to the under edge of the element's content box. 7.608 + In this case the underline usually does not cross the descenders. 7.609 + (This is sometimes called "accounting" underline.) 7.610 + If the underline affects descendants with a lower content edge, 7.611 + the user agent should shift the underline down further to the 7.612 + lowest underlined content box edge. 7.613 + The user agent may ignore elements with ''vertical-align'' 7.614 + values given as lengths, percentages, ''top'', or ''bottom'' 7.615 + when making this adjustment. 7.616 + (Note that images that are not affected by the underline per 7.617 + 'text-decoration-skip' will not affect the position of the 7.618 + underline.) 7.619 + <div class="figure"> 7.620 + <p><img title="text-underline-position: below" 7.621 + alt="In a typical Latin font, the underline is far enough 7.622 + below the text that it does not cross the bottom of a 'g'." 7.623 + src="underline-position-below.png" 7.624 + > 7.625 + <p class="caption">''text-underline-position: below''</p> 7.626 + </div> 7.627 + <div class="example"> 7.628 + <p>Because 'text-underline-position' inherits, and is not reset 7.629 + by the 'text-decoration' shorthand, the following example 7.630 + switches the document to use ''below'' underlining, which can 7.631 + be more appropriate for writing systems with long, complicated 7.632 + descenders. It is also often useful for mathematical or chemical 7.633 + texts that use many subscripts. 7.634 + <pre>:root { text-underline-position: below; }</pre> 7.635 + </div> 7.636 + <dt><dfn>''left''</dfn></dt> 7.637 + <dd>In vertical writing modes, the underline is aligned as for 7.638 + ''below'', on the left edge of the text.</dd> 7.639 + <dt><dfn>''right''</dfn></dt> 7.640 + <dd>In vertical writing modes, the underline is aligned as for 7.641 + ''below'', except it is aligned to the right edge of the text. 7.642 + If this causes the underline to be drawn on the "over" side of 7.643 + the text, then an overline also switches sides and is drawn on 7.644 + the "under" side.</dd> 7.645 + </dl> 7.646 + 7.647 + <p>If ''below'' is specified alone, ''left'' is also implied. 7.648 + If ''left'' or ''right'' is specified alone, ''below'' is also 7.649 + implied. 7.650 + 7.651 + <p class="issue"> 7.652 + Should ''above''/''below'' be ''over''/''under'' to match text decoration names? 7.653 + 7.654 + <div class="figure" id="fig-text-underline-position"> 7.655 + <table> 7.656 + <tr> 7.657 + <td> 7.658 + <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left' 7.659 + places the underline on the left side of the text." 7.660 + title="text-underline-position: left" 7.661 + src="underline-position-left.png" 7.662 + > 7.663 + 7.664 + <td> 7.665 + <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right' 7.666 + places the underline on the right side of the text." 7.667 + title="text-underline-position: right" 7.668 + src="underline-position-right.png" 7.669 + > 7.670 + 7.671 + <tr> 7.672 + <td>''left'' 7.673 + <td>''right'' 7.674 + </table> 7.675 + <p class="caption">In vertical writing modes, the 'text-underline-position' 7.676 + values ''left'' and ''right'' allow placing the underline on either 7.677 + side of the text. (In horizontal writing modes, both values are 7.678 + treated as ''below''.)</p> 7.679 + </div> 7.680 + 7.681 + <div class="example"> 7.682 + <p>The following example styles modern Chinese, Japanese, and Korean 7.683 + texts with the appropriate underline positions in both horizontal 7.684 + and vertical text: 7.685 + <pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: below right; } 7.686 +<!-- -->:root:lang(zh), [lang|=zh] { text-underline-position: below left; }</pre> 7.687 + </div> 7.688 + 7.689 + <div class="note"> 7.690 + <p>In some cases (such as in OpenType) the font format can offer 7.691 + information about the appropriate position of an underline. 7.692 + Typically this information gives the position of an ''alphabetic'' 7.693 + underline; in some cases (especially in CJK fonts), it gives 7.694 + the position of a ''below left'' underline. (In this case, 7.695 + the font's underline metrics typically touch the bottom edge 7.696 + of the em box). 7.697 + The UA is encouraged to use information (such as the underline 7.698 + thickness, or appropriate alphabetic alignment) from the font 7.699 + wherever appropriate. 7.700 + </p> 7.701 + </div> 7.702 + 7.703 +<h2 id="emphasis-marks"> 7.704 +Emphasis Marks</h2> 7.705 + 7.706 + <p>East Asian documents traditionally use small symbols next to each glyph to emphasize 7.707 + a run of text. For example:</p> 7.708 + 7.709 + <div class="figure"> 7.710 + <p> 7.711 + <img alt="Example of emphasis in Japanese appearing above the text" 7.712 + class="example" src="text-emphasis-ja.gif" height="28" width="225"></p> 7.713 + <p class="caption">Accent emphasis (shown in blue for clarity) applied to Japanese text</p> 7.714 + </div> 7.715 + 7.716 +<h3 id="text-emphasis-style-property"> 7.717 +Emphasis Mark Style: the 'text-emphasis-style' property</h3> 7.718 + 7.719 + <table class="propdef"> 7.720 + <tr> 7.721 + <th>Name: 7.722 + <td><dfn>text-emphasis-style</dfn> 7.723 + <tr> 7.724 + <th><a href="#values">Value</a>: 7.725 + <td>none | 7.726 + [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | 7.727 + <a class="noxref" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string"><span class="value-inst-string"><string></span></a> 7.728 + 7.729 + <tr> 7.730 + <th>Initial: 7.731 + <td>none 7.732 + <tr> 7.733 + <th>Applies to: 7.734 + <td>all elements 7.735 + <tr> 7.736 + <th>Inherited: 7.737 + <td>yes 7.738 + <tr> 7.739 + <th>Percentages: 7.740 + <td>N/A 7.741 + <tr> 7.742 + <th>Media: 7.743 + <td>visual 7.744 + <tr> 7.745 + <th>Computed value: 7.746 + <td>'none', a pair of keywords representing the shape and fill, or 7.747 + a string 7.748 + </table> 7.749 + 7.750 + <p>This property applies emphasis marks to the element's text. 7.751 + Values have the following meanings:</p> 7.752 + 7.753 + <dl> 7.754 + <dt><dfn title="text-emphasis:none">''none''</dfn></dt> 7.755 + <dd>No emphasis marks.</dd> 7.756 + <dt><dfn title="text-emphasis:filled">''filled''</dfn></dt> 7.757 + <dd>The shape is filled with solid color.</dd> 7.758 + <dt><dfn title="text-emphasis:open">''open''</dfn></dt> 7.759 + <dd>The shape is hollow.</dd> 7.760 + <dt><dfn title="text-emphasis:dot">''dot''</dfn></dt> 7.761 + <dd>Display small circles as marks. 7.762 + The filled dot is U+2022 '•', and the open dot is U+25E6 '◦'.</dd> 7.763 + <dt><dfn title="text-emphasis:circle">''circle''</dfn></dt> 7.764 + <dd>Display large circles as marks. 7.765 + The filled circle is U+25CF '●', and the open circle is U+25CB '○'.</dd> 7.766 + <dt><dfn title="text-emphasis:double-circle">''double-circle''</dfn></dt> 7.767 + <dd>Display double circles as marks. 7.768 + The filled double-circle is U+25C9 '◉', and the open double-circle is U+25CE '◎'.</dd> 7.769 + <dt><dfn title="text-emphasis:triangle">''triangle''</dfn></dt> 7.770 + <dd>Display triangles as marks. 7.771 + The filled triangle is U+25B2 '▲', and the open triangle is U+25B3 '△'.</dd> 7.772 + <dt><dfn title="text-emphasis:sesame">''sesame''</dfn></dt> 7.773 + <dd>Display sesames as marks. 7.774 + The filled sesame is U+FE45 '﹅', and the open sesame is U+FE46 '﹆'.</dd> 7.775 + <dt><dfn title="text-emphasis:sesame">''<var><string></var>''</dfn></dt> 7.776 + <dd>Display the given string as marks. 7.777 + Authors should not specify more than one <i>character</i> in <string>. 7.778 + The UA may truncate or ignore strings consisting of more than one grapheme cluster.</dd> 7.779 + </dl> 7.780 + 7.781 + <p>If a shape keyword is specified but neither of ''filled'' nor ''open'' is 7.782 + specified, ''filled'' is assumed. If only ''filled'' or ''open'' is specified, 7.783 + the shape keyword computes to ''circle'' in horizontal writing mode and 7.784 + ''sesame'' in vertical writing mode.</p> 7.785 + 7.786 + <p>The marks should be drawn using the element's font settings with its 7.787 + size scaled down to 50%. However, not all fonts have all these glyphs, 7.788 + and some fonts use inappropriate sizes for emphasis marks in these 7.789 + code points. The UA may opt to use a font known to be good for 7.790 + emphasis marks, or the marks may instead be synthesized by the UA. 7.791 + Marks must remain upright in vertical writing modes: like CJK 7.792 + characters, they do not rotate to match the writing mode.</p> 7.793 + 7.794 + <p class="note"> 7.795 + One example of good fonts for emphasis marks is Adobe's opensource project, 7.796 + <a href="http://sourceforge.net/adobe/kenten-generic/">Kenten Generic OpenType Font</a>, 7.797 + which is specially designed for the emphasis marks. 7.798 + </p> 7.799 + 7.800 + <p>The marks are drawn once for each <i>character</i>. However, 7.801 + emphasis marks are not drawn for characters that are:</p> 7.802 + <ul> 7.803 + <li><a href="http://www.w3.org/TR/css3-text/#word-separator">Word separators</a> or that 7.804 + belong to the Unicode separator classes (Z*). 7.805 + (But note that emphasis marks <em>are</em> drawn for a space 7.806 + that combines with any combining characters.)</li> 7.807 + <li>Characters belonging to the Unicode classes for control codes 7.808 + and unassigned characters (Cc, Cf, Cn).</li> 7.809 + </ul> 7.810 + 7.811 + <p>If emphasis marks are drawn for characters 7.812 + for which ruby is drawn in the same position as the emphasis mark, 7.813 + the ruby should be stacked between the emphasis marks and the base text. 7.814 + In this case, the position of the emphasis marks for a given element 7.815 + should be determined as if all characters have ruby boxes 7.816 + of the same height as the highest ruby box in the element. 7.817 + If the UA is not capable of drawing ruby and emphasis marks on the same side, 7.818 + the UA may hide ruby and draw only emphasis marks.</p> 7.819 + <div class="figure"> 7.820 + <p><img 7.821 + alt="Example of emphasis marks applied to 4 characters, and ruby to 2 of them" 7.822 + src="text-emphasis-ruby.png" width="134" height="50"></p> 7.823 + <p class="caption">Emphasis marks applied to 4 characters, and ruby to 2 of them</p> 7.824 + </div> 7.825 + 7.826 + <p class="note">A future level of CSS may define controls to specify 7.827 + what to do when emphasis marks and ruby text coincide.</p> 7.828 + 7.829 +<h3 id="text-emphasis-color-property"> 7.830 +Emphasis Mark Color: the 'text-emphasis-color' property</h3> 7.831 + 7.832 + <table class="propdef"> 7.833 + <tr> 7.834 + <th>Name: 7.835 + <td><dfn>text-emphasis-color</dfn> 7.836 + <tr> 7.837 + <th><a href="#values">Value</a>: 7.838 + <td><color> 7.839 + <tr> 7.840 + <th>Initial: 7.841 + <td><a href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> 7.842 + <tr> 7.843 + <th>Applies to: 7.844 + <td>all elements 7.845 + <tr> 7.846 + <th>Inherited: 7.847 + <td>yes 7.848 + <tr> 7.849 + <th>Percentages: 7.850 + <td>N/A 7.851 + <tr> 7.852 + <th>Media: 7.853 + <td>visual 7.854 + <tr> 7.855 + <th>Computed value: 7.856 + <td>as specified 7.857 + </table> 7.858 + 7.859 + <p>This property specifies the foreground color of the emphasis marks.</p> 7.860 + 7.861 + <p class="note"> 7.862 + The correct behavior of this property depends on an outstanding erratum on [[CSS3COLOR]] 7.863 + that has the ''currentColor'' keyword inherit as itself, 7.864 + and to take the value of the 'color' property as its <em>used</em> (not computed) value. 7.865 + 7.866 +<h3 id="text-emphasis-property"> 7.867 +Emphasis Mark Shorthand: the 'text-emphasis' property</h3> 7.868 + 7.869 + <table class="propdef"> 7.870 + <tr> 7.871 + <th>Name: 7.872 + <td><dfn>text-emphasis</dfn> 7.873 + <tr> 7.874 + <th><a href="#values">Value</a>: 7.875 + <td>'<<a href="#text-emphasis-style">text-emphasis-style</a>>' || '<<a href="#text-emphasis-color">text-emphasis-color</a>>' 7.876 + 7.877 + <tr> 7.878 + <th>Initial: 7.879 + <td>see individual properties 7.880 + <tr> 7.881 + <th>Applies to: 7.882 + <td>all elements 7.883 + <tr> 7.884 + <th>Inherited: 7.885 + <td>yes 7.886 + <tr> 7.887 + <th>Percentages: 7.888 + <td>N/A 7.889 + <tr> 7.890 + <th>Media: 7.891 + <td>visual 7.892 + <tr> 7.893 + <th>Computed value: 7.894 + <td>see individual properties 7.895 + </table> 7.896 + 7.897 + <p>This property is a shorthand for setting 7.898 + 'text-emphasis-style' and 'text-emphasis-color' 7.899 + in one declaration. 7.900 + Omitted values are set to their initial values.</p> 7.901 + 7.902 + <p class="note">Note that 'text-emphasis-position' is not reset in this 7.903 + shorthand. This is because typically the shape and color vary, but the 7.904 + position is consistent for a particular language throughout the document. 7.905 + Therefore the position should inherit independently.</p> 7.906 + 7.907 +<h3 id="text-emphasis-position-property"> 7.908 +Emphasis Mark Position: the 'text-emphasis-position' property</h3> 7.909 + 7.910 + <table class="propdef"> 7.911 + <tr> 7.912 + <th>Name: 7.913 + <td><dfn>text-emphasis-position</dfn> 7.914 + <tr> 7.915 + <th><a href="#values">Value</a>: 7.916 + <td>[ above | below ] && [ right | left ] 7.917 + 7.918 + <tr> 7.919 + <th>Initial: 7.920 + <td>above right 7.921 + <tr> 7.922 + <th>Applies to: 7.923 + <td>all elements 7.924 + <tr> 7.925 + <th>Inherited: 7.926 + <td>yes 7.927 + <tr> 7.928 + <th>Percentages: 7.929 + <td>N/A 7.930 + <tr> 7.931 + <th>Media: 7.932 + <td>visual 7.933 + <tr> 7.934 + <th>Computed value: 7.935 + <td>as specified 7.936 + </table> 7.937 + 7.938 + <p>This property describes where emphasis marks are drawn at. 7.939 + The values have following meanings:</p> 7.940 + 7.941 + <dl> 7.942 + <dt><dfn title="text-emphasis:above">''above''</dfn></dt> 7.943 + <dd>Draw marks over the text in horizontal writing mode.</dd> 7.944 + <dt><dfn title="text-emphasis:below">''below''</dfn></dt> 7.945 + <dd>Draw marks under the text in horizontal writing mode.</dd> 7.946 + <dt><dfn title="text-emphasis:right">''right''</dfn></dt> 7.947 + <dd>Draw marks to the right of the text in vertical writing mode.</dd> 7.948 + <dt><dfn title="text-emphasis:left">''left''</dfn></dt> 7.949 + <dd>Draw marks to the left of the text in vertical writing mode.</dd> 7.950 + </dl> 7.951 + 7.952 + <p class="issue"> 7.953 + Should ''above''/''below'' be ''over''/''under'' to match text decoration names? 7.954 + 7.955 + <p>Emphasis marks are drawn exactly as if each character was 7.956 + assigned the mark as its ruby annotation text with the ruby position 7.957 + given by 'text-emphasis-position' and the ruby alignment as centered. 7.958 + 7.959 + <p>The effect of emphasis marks on the line height is the same as for 7.960 + ruby text.</p> 7.961 + 7.962 + <div class="note"> 7.963 + <p>Note, the preferred position of emphasis marks depends on the 7.964 + language. In Japanese for example, the preferred position is 7.965 + ''above right''. In Chinese, on the other hand, the preferred 7.966 + position is ''below right''. 7.967 + The informative table below summarizes the preferred 7.968 + emphasis mark positions for Chinese and Japanese:</p> 7.969 + 7.970 + <table class="data"> 7.971 + <caption>Preferred emphasis mark and ruby position</caption> 7.972 + <thead> 7.973 + <tr> 7.974 + <th scope="col" rowspan=2>Language 7.975 + <th scope="col" colspan=2>Preferred mark position 7.976 + <th scope="col" colspan=2 rowspan=2>Illustration 7.977 + <tr> 7.978 + <th>Horizontal 7.979 + <th>Vertical 7.980 + </thead> 7.981 + <tbody> 7.982 + <tr> 7.983 + <td scope="row">Japanese 7.984 + <td>above 7.985 + <td>right 7.986 + <td> 7.987 + <img alt="Emphasis marks appear above each emphasized character in horizontal Japanese text." 7.988 + title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text" 7.989 + src="text-emphasis-ja.gif" height="28" width="225"> 7.990 + 7.991 + <td rowspan="2"> 7.992 + <img alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text." 7.993 + title="Emphasis applied on the right of a fragment of Japanese text" 7.994 + src="text-emphasis-v.gif" height="89" width="34"> 7.995 + 7.996 + <!-- 7.997 + <tr> 7.998 + <td scope="row">Mongolian 7.999 + <td><span class="issue">?</span> 7.1000 + <td>right 7.1001 + --> 7.1002 + <tr> 7.1003 + <td scope="row">Chinese 7.1004 + <td>below 7.1005 + <td>right 7.1006 + <td> 7.1007 + <img alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text." 7.1008 + title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text" 7.1009 + src="text-emphasis-zh.gif" height="28" width="133"> 7.1010 + </tbody> 7.1011 + </table> 7.1012 + </div> 7.1013 + 7.1014 +<h2 id="text-shadow-property"> 7.1015 +Text Shadows: the 'text-shadow' property</h2> 7.1016 + 7.1017 + <table class="propdef"> 7.1018 + <tr> 7.1019 + <th>Name: 7.1020 + <td><dfn>text-shadow</dfn> 7.1021 + <tr> 7.1022 + <th><a href="#values">Value</a>: 7.1023 + <td>none | [ <length>{2,3} && <color>? ]# 7.1024 + <tr> 7.1025 + <th>Initial: 7.1026 + <td>none 7.1027 + <tr> 7.1028 + <th>Applies to: 7.1029 + <td>all elements 7.1030 + <tr> 7.1031 + <th>Inherited: 7.1032 + <td>yes 7.1033 + <tr> 7.1034 + <th>Percentages: 7.1035 + <td>N/A 7.1036 + <tr> 7.1037 + <th>Media: 7.1038 + <td>visual 7.1039 + <tr> 7.1040 + <th>Computed value: 7.1041 + <td>a color plus three absolute <length>s 7.1042 + </table> 7.1043 + 7.1044 + <p>This property accepts a comma-separated list of shadow effects to 7.1045 + be applied to the text of the element. Values are interpreted as for 7.1046 + <a href="http://www.w3.org/TR/css3-background/#the-box-shadow">'box-shadow'</a> 7.1047 + [[!CSS3BG]]. (But note that spread values are not allowed.) 7.1048 + The shadow is applied to all of the element's text as well as any 7.1049 + text decorations it specifies. 7.1050 + 7.1051 + <p>The shadow effects are applied front-to-back: the first shadow is on 7.1052 + top. The shadows may thus overlay each other, but they never overlay 7.1053 + the text itself. The shadow must be painted at a stack level between 7.1054 + the element's border and/or background, if present, and the elements 7.1055 + text and text decoration. UAs should avoid painting text shadows over 7.1056 + text in adjacent elements belonging to the same stack level and stacking 7.1057 + context. (This may mean that the exact stack level of the shadows depends 7.1058 + on whether the element has a border or background: the exact stacking 7.1059 + behavior of text shadows is thus UA-defined.)</p> 7.1060 + 7.1061 + <p>Unlike 'box-shadow', text shadows are not clipped to the shadowed 7.1062 + shape and may show through if the text is partially-transparent. 7.1063 + Like 'box-shadow', text shadows do not influence layout, and do not 7.1064 + trigger scrolling or increase the size of the scrollable area. 7.1065 + 7.1066 + <p class="note">The painting order of shadows defined here is the opposite 7.1067 + of that defined in the 1998 7.1068 + <a href="http://www.w3.org/TR/1998/REC-CSS2-19980512">CSS2 Recommendation</a>.</p> 7.1069 + 7.1070 + <p>The ''text-shadow'' property applies to both the 7.1071 + <code>::first-line</code> and <code>::first-letter</code> 7.1072 + pseudo-elements.</p> 7.1073 + 7.1074 +<h2 id="conformance"> 7.1075 +Conformance</h2> 7.1076 + 7.1077 +<h3 id="conventions"> 7.1078 +Document Conventions</h3> 7.1079 + 7.1080 + <p>Conformance requirements are expressed with a combination of 7.1081 + descriptive assertions and RFC 2119 terminology. The key words “MUST”, 7.1082 + “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, 7.1083 + “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this 7.1084 + document are to be interpreted as described in RFC 2119. 7.1085 + However, for readability, these words do not appear in all uppercase 7.1086 + letters in this specification. 7.1087 + 7.1088 + <p>All of the text of this specification is normative except sections 7.1089 + explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p> 7.1090 + 7.1091 + <p>Examples in this specification are introduced with the words “for example” 7.1092 + or are set apart from the normative text with <code>class="example"</code>, 7.1093 + like this: 7.1094 + 7.1095 + <div class="example"> 7.1096 + <p>This is an example of an informative example.</p> 7.1097 + </div> 7.1098 + 7.1099 + <p>Informative notes begin with the word “Note” and are set apart from the 7.1100 + normative text with <code>class="note"</code>, like this: 7.1101 + 7.1102 + <p class="note">Note, this is an informative note.</p> 7.1103 + 7.1104 +<h3 id="conformance-classes"> 7.1105 +Conformance Classes</h3> 7.1106 + 7.1107 + <p>Conformance to CSS Text Level 3 7.1108 + is defined for three conformance classes: 7.1109 + <dl> 7.1110 + <dt><dfn title="style sheet!!as conformance class">style sheet</dfn> 7.1111 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 7.1112 + style sheet</a>. 7.1113 + <dt><dfn>renderer</dfn></dt> 7.1114 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 7.1115 + that interprets the semantics of a style sheet and renders 7.1116 + documents that use them. 7.1117 + <dt><dfn id="authoring-tool">authoring tool</dfn></dt> 7.1118 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 7.1119 + that writes a style sheet. 7.1120 + </dl> 7.1121 + 7.1122 + <p>A style sheet is conformant to CSS Text Level 3 7.1123 + if all of its declarations that use properties defined in this module 7.1124 + have values that are valid according to the generic CSS grammar and the 7.1125 + individual grammars of each property as given in this module. 7.1126 + 7.1127 + <p>A renderer is conformant to CSS Text Level 3 7.1128 + if, in addition to interpreting the style sheet as defined by the 7.1129 + appropriate specifications, it supports all the features defined 7.1130 + by CSS Text Level 3 by parsing them correctly 7.1131 + and rendering the document accordingly. However, the inability of a 7.1132 + UA to correctly render a document due to limitations of the device 7.1133 + does not make the UA non-conformant. (For example, a UA is not 7.1134 + required to render color on a monochrome monitor.) 7.1135 + 7.1136 + <p>An authoring tool is conformant to CSS Text Level 3 7.1137 + if it writes style sheets that are syntactically correct according to the 7.1138 + generic CSS grammar and the individual grammars of each feature in 7.1139 + this module, and meet all other conformance requirements of style sheets 7.1140 + as described in this module. 7.1141 + 7.1142 +<h3 id="partial"> 7.1143 +Partial Implementations</h3> 7.1144 + 7.1145 + <p>So that authors can exploit the forward-compatible parsing rules to 7.1146 + assign fallback values, CSS renderers <strong>must</strong> 7.1147 + treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore 7.1148 + as appropriate</a>) any at-rules, properties, property values, keywords, 7.1149 + and other syntactic constructs for which they have no usable level of 7.1150 + support. In particular, user agents <strong>must not</strong> selectively 7.1151 + ignore unsupported component values and honor supported values in a single 7.1152 + multi-value property declaration: if any value is considered invalid 7.1153 + (as unsupported values must be), CSS requires that the entire declaration 7.1154 + be ignored.</p> 7.1155 + 7.1156 +<h3 id="experimental"> 7.1157 +Experimental Implementations</h3> 7.1158 + 7.1159 + <p>To avoid clashes with future CSS features, the CSS2.1 specification 7.1160 + reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 7.1161 + syntax</a> for proprietary and experimental extensions to CSS. 7.1162 + 7.1163 + <p>Prior to a specification reaching the Candidate Recommendation stage 7.1164 + in the W3C process, all implementations of a CSS feature are considered 7.1165 + experimental. The CSS Working Group recommends that implementations 7.1166 + use a vendor-prefixed syntax for such features, including those in 7.1167 + W3C Working Drafts. This avoids incompatibilities with future changes 7.1168 + in the draft. 7.1169 + </p> 7.1170 + 7.1171 +<h3 id="testing">Non-Experimental Implementations</h3> 7.1172 + 7.1173 + <p>Once a specification reaches the Candidate Recommendation stage, 7.1174 + non-experimental implementations are possible, and implementors should 7.1175 + release an unprefixed implementation of any CR-level feature they 7.1176 + can demonstrate to be correctly implemented according to spec. 7.1177 + 7.1178 + <p>To establish and maintain the interoperability of CSS across 7.1179 + implementations, the CSS Working Group requests that non-experimental 7.1180 + CSS renderers submit an implementation report (and, if necessary, the 7.1181 + testcases used for that implementation report) to the W3C before 7.1182 + releasing an unprefixed implementation of any CSS features. Testcases 7.1183 + submitted to W3C are subject to review and correction by the CSS 7.1184 + Working Group. 7.1185 + 7.1186 + <p>Further information on submitting testcases and implementation reports 7.1187 + can be found from on the CSS Working Group's website at 7.1188 + <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 7.1189 + Questions should be directed to the 7.1190 + <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> 7.1191 + mailing list. 7.1192 + 7.1193 +<h3 id="cr-exit-criteria"> 7.1194 +CR Exit Criteria</h3> 7.1195 + 7.1196 + <p> 7.1197 + For this specification to be advanced to Proposed Recommendation, 7.1198 + there must be at least two independent, interoperable implementations 7.1199 + of each feature. Each feature may be implemented by a different set of 7.1200 + products, there is no requirement that all features be implemented by 7.1201 + a single product. For the purposes of this criterion, we define the 7.1202 + following terms: 7.1203 + 7.1204 + <dl> 7.1205 + <dt>independent <dd>each implementation must be developed by a 7.1206 + different party and cannot share, reuse, or derive from code 7.1207 + used by another qualifying implementation. Sections of code that 7.1208 + have no bearing on the implementation of this specification are 7.1209 + exempt from this requirement. 7.1210 + 7.1211 + <dt>interoperable <dd>passing the respective test case(s) in the 7.1212 + official CSS test suite, or, if the implementation is not a Web 7.1213 + browser, an equivalent test. Every relevant test in the test 7.1214 + suite should have an equivalent test created if such a user 7.1215 + agent (UA) is to be used to claim interoperability. In addition 7.1216 + if such a UA is to be used to claim interoperability, then there 7.1217 + must one or more additional UAs which can also pass those 7.1218 + equivalent tests in the same way for the purpose of 7.1219 + interoperability. The equivalent tests must be made publicly 7.1220 + available for the purposes of peer review. 7.1221 + 7.1222 + <dt>implementation <dd>a user agent which: 7.1223 + 7.1224 + <ol class=inline> 7.1225 + <li>implements the specification. 7.1226 + 7.1227 + <li>is available to the general public. The implementation may 7.1228 + be a shipping product or other publicly available version 7.1229 + (i.e., beta version, preview release, or “nightly build”). 7.1230 + Non-shipping product releases must have implemented the 7.1231 + feature(s) for a period of at least one month in order to 7.1232 + demonstrate stability. 7.1233 + 7.1234 + <li>is not experimental (i.e., a version specifically designed 7.1235 + to pass the test suite and is not intended for normal usage 7.1236 + going forward). 7.1237 + </ol> 7.1238 + </dl> 7.1239 + 7.1240 + <p>The specification will remain Candidate Recommendation for at least 7.1241 + six months. 7.1242 + 7.1243 +<h2 class="no-num" id="acknowledgements"> 7.1244 + Appendix A: Acknowledgements</h2> 7.1245 + 7.1246 + <p>This specification would not have been possible without the help from: 7.1247 + Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett, 7.1248 + Martin Dürst, 7.1249 + Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye Gittelman, Ian 7.1250 + Hickson, Martin Heijdra, Richard Ishida, Masayasu Ishikawa, 7.1251 + Michael Jochimsen, Eric LeVine, Ambrose Li, Håkon Wium Lie, Chris Lilley, 7.1252 + Ken Lunde, Nat McCully, Shinyu Murakami, Paul Nelson, Chris Pratley, Marcin Sawicki, 7.1253 + Arnold Schrijver, Rahul Sonnad, Michel Suignard, Takao Suzuki, 7.1254 + Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi Yabe 7.1255 + and Steve Zilles.</p> 7.1256 + 7.1257 +<h2 class="no-num">Appendix B: References</h2> 7.1258 + 7.1259 +<h3 class="no-num" id="normative-ref">Normative references</h3> 7.1260 +<!--normative--> 7.1261 + 7.1262 +<h3 class="no-num" id="informative-ref">Informative references</h3> 7.1263 +<!--informative--> 7.1264 + 7.1265 +<h2 class="no-num" id="changes">Appendix C: 7.1266 +Changes</h2> 7.1267 + 7.1268 + 7.1269 + 7.1270 + 7.1271 +<h2 class="no-num" id="default-stylesheet"> 7.1272 +Appendix D: Default UA Stylesheet</h2> 7.1273 + 7.1274 + <p> 7.1275 + This appendix is informative, 7.1276 + and is to help UA developers to implement default stylesheet, 7.1277 + but UA developers are free to ignore or change. 7.1278 + 7.1279 + <div class="example"> 7.1280 + <pre><code class="css"> 7.1281 +<!-- -->s, strike, del { 7.1282 +<!-- --> text-decoration: line-through; 7.1283 +<!-- -->} 7.1284 +<!-- --> 7.1285 +<!-- -->u, ins, :link, :visited { 7.1286 +<!-- --> text-decoration: underline; 7.1287 +<!-- -->} 7.1288 +<!-- --> 7.1289 +<!-- -->abbr[title], acronym[title] { 7.1290 +<!-- --> text-decoration: dotted underline; 7.1291 +<!-- -->} 7.1292 +<!-- --> 7.1293 +<!-- -->/* disable inheritance of text-emphasis marks to ruby text: 7.1294 +<!-- --> emphasis marks should only apply to base text */ 7.1295 +<!-- -->rt { text-emphasis: none; } 7.1296 +<!-- --> 7.1297 +<!-- -->:root:lang(zh), [lang|=zh] { 7.1298 +<!-- -->/* default emphasis mark position is 'below right' for Chinese */ 7.1299 +<!-- --> text-emphasis-position: below right; 7.1300 +<!-- -->} 7.1301 +<!-- --> 7.1302 +<!-- -->:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { 7.1303 +<!-- -->/* default underline position is 'below right' for Japanese and Korean */ 7.1304 +<!-- --> text-underline-position: below right; 7.1305 +<!-- -->} 7.1306 +<!-- --> 7.1307 +<!-- -->:root:lang(zh), [lang|=zh] { 7.1308 +<!-- -->/* default underline position is 'below left' for Chinese */ 7.1309 +<!-- --> text-underline-position: below left; 7.1310 +<!-- -->} 7.1311 +<!-- --> 7.1312 +<!-- -->blink { 7.1313 +<!-- --> text-decoration-line: blink; 7.1314 +<!-- -->} 7.1315 +</code></pre> 7.1316 + </div> 7.1317 + 7.1318 + <p class="issue"> 7.1319 + If you find any issues, recommendations to add, or corrections, 7.1320 + please send the information to <a href="mailto:www-style@w3.org">www-style@w3.org</a> 7.1321 + with <kbd>[css3-text-decor]</kbd> in the subject line. 7.1322 + 7.1323 + <div class='example'> 7.1324 + <p> 7.1325 + While ''text-decoration-line: blink'' can't be fully reproduced with other existing properties, 7.1326 + authors can achieve a very similar effect with the following CSS: 7.1327 + 7.1328 + <pre> 7.1329 +<!-- -->@keyframes blink { 7.1330 +<!-- --> 0% { 7.1331 +<!-- --> visibility: hidden; 7.1332 +<!-- --> animation-timing-function: step-end; 7.1333 +<!-- --> } 7.1334 +<!-- --> 25%, 100% { 7.1335 +<!-- --> visibility: visible; 7.1336 +<!-- --> } 7.1337 +<!-- -->} 7.1338 +<!-- -->blink { 7.1339 +<!-- --> animation: blink 1s infinite; 7.1340 +<!-- -->}</pre> 7.1341 + </div> 7.1342 \ No newline at end of file
8.1 Binary file css-text-decor-3/text-emphasis-ja.gif has changed
9.1 Binary file css-text-decor-3/text-emphasis-ruby.png has changed
10.1 Binary file css-text-decor-3/text-emphasis-v.gif has changed
11.1 Binary file css-text-decor-3/text-emphasis-zh.gif has changed
12.1 Binary file css-text-decor-3/underline-averaging.gif has changed
13.1 Binary file css-text-decor-3/underline-example.png has changed
14.1 Binary file css-text-decor-3/underline-position-alphabetic.png has changed
15.1 Binary file css-text-decor-3/underline-position-below.png has changed
16.1 Binary file css-text-decor-3/underline-position-left.png has changed
17.1 Binary file css-text-decor-3/underline-position-right.png has changed
18.1 --- a/css3-background/Overview.html Mon Oct 22 00:33:44 2012 +0200 18.2 +++ b/css3-background/Overview.html Mon Oct 22 00:41:17 2012 +0200 18.3 @@ -17,6 +17,9 @@ 18.4 </style> 18.5 <link href="http://www.w3.org/StyleSheets/TR/W3C-CR.css" rel=stylesheet 18.6 type="text/css"> 18.7 + <script defer="defer" 18.8 + src="http://test.csswg.org/harness/annotate.js#CSS3-BACKGROUND_DEV" 18.9 + type="text/javascript"></script> 18.10 18.11 <body> 18.12 <div class=head> <!--begin-logo-->
19.1 --- a/css3-background/Overview.src.html Mon Oct 22 00:33:44 2012 +0200 19.2 +++ b/css3-background/Overview.src.html Mon Oct 22 00:41:17 2012 +0200 19.3 @@ -16,6 +16,9 @@ 19.4 </style> 19.5 <link rel="stylesheet" type="text/css" 19.6 href="http://www.w3.org/StyleSheets/TR/W3C-WD.css"> 19.7 + <script defer="defer" 19.8 + src="http://test.csswg.org/harness/annotate.js#CSS3-BACKGROUND_DEV" 19.9 + type="text/javascript"></script> 19.10 </head> 19.11 19.12 <body>
20.1 --- a/css3-conditional/Overview.html Mon Oct 22 00:33:44 2012 +0200 20.2 +++ b/css3-conditional/Overview.html Mon Oct 22 00:41:17 2012 +0200 20.3 @@ -7,16 +7,17 @@ 20.4 <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 20.5 <title>CSS Conditional Rules Module Level 3</title> 20.6 20.7 - <link href="http://purl.org/dc/terms/" rel=schema.DC> 20.8 - <meta content="CSS Conditional Rules Module Level 3" name=DC.title> 20.9 - <meta content=text name=DC.type> 20.10 - <meta content=2012-09-25 name=DC.issued> 20.11 - <meta content="http://dev.w3.org/csswg/css3-conditional/" name=DC.creator> 20.12 - <meta content=W3C name=DC.publisher> 20.13 - <meta content="http://www.w3.org/TR/2012/ED-css3-conditional-20120925/" 20.14 - name=DC.identifier> 20.15 + <link href="http://purl.org/dc/terms/" rel=schema.dcterms> 20.16 <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 20.17 - rel=DC.rights> 20.18 + rel=dcterms.rights> 20.19 + <meta content="CSS Conditional Rules Module Level 3" name=dcterms.title> 20.20 + <meta content=text name=dcterms.type> 20.21 + <meta content=2012-10-12 name=dcterms.issued> 20.22 + <meta content="http://dev.w3.org/csswg/css3-conditional/" 20.23 + name=dcterms.creator> 20.24 + <meta content=W3C name=dcterms.publisher> 20.25 + <meta content="http://www.w3.org/TR/2012/ED-css3-conditional-20121012/" 20.26 + name=dcterms.identifier> 20.27 <link href="../default.css" rel=stylesheet type="text/css"> 20.28 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet 20.29 type="text/css"> 20.30 @@ -28,14 +29,14 @@ 20.31 20.32 <h1>CSS Conditional Rules Module Level 3</h1> 20.33 20.34 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 25 September 20.35 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 12 October 20.36 2012</h2> 20.37 20.38 <dl> 20.39 <dt>This version: 20.40 20.41 - <dd><a href="http://www.w3.org/TR/2012/ED-css3-conditional-20120925/"> 20.42 - http://www.w3.org/TR/2012/ED-css3-conditional-20120925/</a> 20.43 + <dd><a href="http://www.w3.org/TR/2012/ED-css3-conditional-20121012/"> 20.44 + http://www.w3.org/TR/2012/ED-css3-conditional-20121012/</a> 20.45 20.46 <dt>Latest version: 20.47 20.48 @@ -50,7 +51,7 @@ 20.49 <dt>Previous version: 20.50 20.51 <dd><a 20.52 - href="http://www.w3.org/TR/2011/WD-css3-conditional-20110901/">http://www.w3.org/TR/2011/WD-css3-conditional-20110901/</a> 20.53 + href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/">http://www.w3.org/TR/2012/WD-css3-conditional-20120911/</a> 20.54 20.55 <dt>Editors: 20.56 20.57 @@ -105,9 +106,8 @@ 20.58 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, which builds on CSS level 1 20.59 <a href="#CSS1" rel=biblioentry>[CSS1]<!--{{CSS1}}--></a>. The main 20.60 extensions compared to level 2 are allowing nesting of certain at-rules 20.61 - inside ‘<code class=css>@media</code>’, the addition of the ‘<a 20.62 - href="#dfn-support"><code class=css>@supports</code></a>’ and ‘<code 20.63 - class=css>@document</code>’ rules for conditional processing. 20.64 + inside ‘<code class=css>@media</code>’, and the addition of the 20.65 + ‘<code class=css>@supports</code>’ rule for conditional processing. 20.66 20.67 <h2 class="no-num no-toc" id=status>Status of this document</h2> 20.68 <!--begin-status--> 20.69 @@ -159,15 +159,18 @@ 20.70 be removed to advance the other features in this specification to 20.71 Proposed Recommendation. 20.72 20.73 - <li>The ‘<a href="#dfn-support"><code class=css>@supports</code></a>’ 20.74 - rule is at risk; if interoperable implementations are not found, it may 20.75 - be removed to advance the other features in this specification to 20.76 - Proposed Recommendation. 20.77 - 20.78 - <li>The ‘<code class=css>@document</code>’ rule is at risk; if 20.79 + <li>The ‘<code class=css>@supports</code>’ rule is at risk; if 20.80 interoperable implementations are not found, it may be removed to advance 20.81 the other features in this specification to Proposed Recommendation. 20.82 </ul> 20.83 + <!-- 20.84 + 20.85 + Things to go in level 4: 20.86 + 20.87 + * Create some way to put these new conditional things on an @import. 20.88 + * The @document rule (commented out, down below). 20.89 + 20.90 +--> 20.91 20.92 <h2 class="no-num no-toc" id=contents>Table of contents</h2> 20.93 <!--begin-toc--> 20.94 @@ -203,53 +206,49 @@ 20.95 </span>Definition of support</a> 20.96 </ul> 20.97 20.98 - <li><a href="#at-document"><span class=secno>7. </span>Document queries: 20.99 - the ‘<code class=css>@document</code>’ rule</a> 20.100 - 20.101 - <li><a href="#apis"><span class=secno>8. </span>APIs</a> 20.102 + <li><a href="#apis"><span class=secno>7. </span>APIs</a> 20.103 <ul class=toc> 20.104 - <li><a href="#extentions-to-cssrule-interface"><span class=secno>8.1. 20.105 + <li><a href="#extentions-to-cssrule-interface"><span class=secno>7.1. 20.106 </span> Extensions to the <code>CSSRule</code> interface</a> 20.107 20.108 - <li><a href="#the-cssgroupingrule-interface"><span class=secno>8.2. 20.109 + <li><a href="#the-cssgroupingrule-interface"><span class=secno>7.2. 20.110 </span> The <code>CSSGroupingRule</code> interface</a> 20.111 20.112 - <li><a href="#the-cssconditionrule-interface"><span class=secno>8.3. 20.113 + <li><a href="#the-cssconditionrule-interface"><span class=secno>7.3. 20.114 </span> The <code>CSSConditionRule</code> interface</a> 20.115 20.116 - <li><a href="#the-cssmediarule-interface"><span class=secno>8.4. </span> 20.117 + <li><a href="#the-cssmediarule-interface"><span class=secno>7.4. </span> 20.118 The <code>CSSMediaRule</code> interface</a> 20.119 20.120 - <li><a href="#the-csssupportsrule-interface"><span class=secno>8.5. 20.121 + <li><a href="#the-csssupportsrule-interface"><span class=secno>7.5. 20.122 </span> The <code>CSSSupportsRule</code> interface</a> 20.123 20.124 - <li><a href="#the-cssdocumentrule-interface"><span class=secno>8.6. 20.125 - </span> The <code>CSSDocumentRule</code> interface</a> 20.126 - 20.127 - <li><a href="#the-css-interface"><span class=secno>8.7. </span> The 20.128 + <li><a href="#the-css-interface"><span class=secno>7.6. </span> The 20.129 <code>CSS</code> interface, and the <code title="">supports()</code> 20.130 function</a> 20.131 </ul> 20.132 20.133 - <li><a href="#conformance"><span class=secno>9. </span>Conformance</a> 20.134 + <li class=no-num><a href="#grammar">Grammar</a> 20.135 + 20.136 + <li><a href="#conformance"><span class=secno>8. </span>Conformance</a> 20.137 <ul class=toc> 20.138 - <li><a href="#base-modules"><span class=secno>9.1. </span>Base 20.139 + <li><a href="#base-modules"><span class=secno>8.1. </span>Base 20.140 Modules</a> 20.141 20.142 - <li><a href="#conformance-classes"><span class=secno>9.2. 20.143 + <li><a href="#conformance-classes"><span class=secno>8.2. 20.144 </span>Conformance Classes</a> 20.145 20.146 - <li><a href="#partial"><span class=secno>9.3. </span> Partial 20.147 + <li><a href="#partial"><span class=secno>8.3. </span> Partial 20.148 Implementations</a> 20.149 20.150 - <li><a href="#experimental"><span class=secno>9.4. </span>Experimental 20.151 + <li><a href="#experimental"><span class=secno>8.4. </span>Experimental 20.152 Implementations</a> 20.153 20.154 - <li><a href="#cr-exit-criteria"><span class=secno>9.5. </span>CR Exit 20.155 + <li><a href="#cr-exit-criteria"><span class=secno>8.5. </span>CR Exit 20.156 Criteria</a> 20.157 </ul> 20.158 20.159 - <li class=no-num><a href="#grammar">Grammar</a> 20.160 + <li><a href="#changes"><span class=secno>9. </span> Changes</a> 20.161 20.162 <li class=no-num><a href="#acknowledgments">Acknowledgments</a> 20.163 20.164 @@ -288,23 +287,17 @@ 20.165 features involving @-rules with media specific style sheets within a 20.166 single style sheet. 20.167 20.168 - <p>This specification also defines additional types of conditional group 20.169 - rules, ‘<a href="#dfn-support"><code class=css>@supports</code></a>’ 20.170 - and ‘<code class=css>@document</code>’, to address author and user 20.171 + <p>This specification also defines an additional type of conditional group 20.172 + rule, ‘<code class=css>@supports</code>’, to address author and user 20.173 requirements. 20.174 20.175 - <p>The ‘<a href="#dfn-support"><code class=css>@supports</code></a>’ 20.176 - rule allows CSS to be conditioned on implementation support for CSS 20.177 - properties and values. This rule makes it much easier for authors to use 20.178 - new CSS features and provide good fallback for implementations that do not 20.179 - support those features. This is particularly important for CSS features 20.180 - that provide new layout mechanisms, and for other cases where a set of 20.181 - related styles needs to be conditioned on property support. 20.182 - 20.183 - <p>The ‘<code class=css>@document</code>’ rule allows CSS to be 20.184 - conditioned on the page to which the style sheet is being applied. This 20.185 - allows users to apply styles to a particular page or group of pages, which 20.186 - greatly increases the power of user style sheets. 20.187 + <p>The ‘<code class=css>@supports</code>’ rule allows CSS to be 20.188 + conditioned on implementation support for CSS properties and values. This 20.189 + rule makes it much easier for authors to use new CSS features and provide 20.190 + good fallback for implementations that do not support those features. This 20.191 + is particularly important for CSS features that provide new layout 20.192 + mechanisms, and for other cases where a set of related styles needs to be 20.193 + conditioned on property support. 20.194 20.195 <h3 id=placement><span class=secno>1.2. </span>Module Interactions</h3> 20.196 20.197 @@ -369,15 +362,6 @@ 20.198 20.199 <p>causes a particular CSS rule (making elements with ID "navigation" be 20.200 display:none) apply only when the style sheet is used for a print medium. 20.201 - Likewise, this CSS rule: 20.202 - 20.203 - <pre>@document url("http://www.example.com/") { 20.204 - #example1 { display: none } 20.205 -}</pre> 20.206 - 20.207 - <p>does the same type of conditional application, but using a different 20.208 - condition: whether the style sheet is being applied to the page 20.209 - <code>http://www.example.com/</code>. 20.210 </div> 20.211 20.212 <p>Each conditional group rule has a condition, which at any time evaluates 20.213 @@ -421,11 +405,6 @@ 20.214 <h2 id=contents-of><span class=secno>3. </span>Contents of conditional 20.215 group rules</h2> 20.216 20.217 - <p class=issue>There is also likely demand for using these conditions with 20.218 - ‘<code class=css>@import</code>’. We should see if we can come up with 20.219 - sensible syntax for that, perhaps functional notation at the end of the 20.220 - ‘<code class=css>@import</code>’ rule. 20.221 - 20.222 <p>The syntax of each conditional group rule consists of some syntax 20.223 specific to the type of rule followed by a <dfn id=group-rule-body>group 20.224 rule body</dfn>, which is a block (pair of braces) containing a sequence 20.225 @@ -444,7 +423,7 @@ 20.226 20.227 <pre>nested_statement 20.228 : ruleset | media | page | font_face_rule | keyframes_rule | 20.229 - supports_rule | document_rule 20.230 + supports_rule 20.231 ; 20.232 20.233 group_rule_body 20.234 @@ -452,13 +431,13 @@ 20.235 ;</pre> 20.236 20.237 <p> in which all the productions are defined in that grammar with the 20.238 - exception of <code>font_face_rule</code> <span class=issue>not</span> 20.239 - defined in <a href="#CSS3-FONTS" 20.240 + exception of <code>font_face_rule</code> defined in <a href="#CSS3-FONTS" 20.241 rel=biblioentry>[CSS3-FONTS]<!--{{!CSS3-FONTS}}--></a>, 20.242 <code>keyframes_rule</code> defined in <a href="#CSS3-ANIMATIONS" 20.243 rel=biblioentry>[CSS3-ANIMATIONS]<!--{{!CSS3-ANIMATIONS}}--></a>, and 20.244 - <code>media</code>, <a href="#supportsrule"><code>supports_rule</code></a> 20.245 - and <code>document_rule</code> defined in this specification. 20.246 + <code>media</code> and <a 20.247 + href="#supports_rule"><code>supports_rule</code></a> defined in this 20.248 + specification. 20.249 20.250 <p>In general, future CSS specifications that add new @-rules that are not 20.251 forbidden to occur after some other types of rules should modify this 20.252 @@ -495,10 +474,10 @@ 20.253 <h2 id=at-media><span class=secno>5. </span>Media-specific style sheets: 20.254 the ‘<code class=css>@media</code>’ rule</h2> 20.255 20.256 - <p>The <dfn id=media-rule>‘<code class=css>@media</code>’ rule</dfn> is 20.257 - a conditional group rule whose condition is a media query. It consists of 20.258 - the at-keyword ‘<code class=css>@media</code>’ followed by a (possibly 20.259 - empty) media query (as defined in <a href="#MEDIAQ" 20.260 + <p>The <dfn id=atmedia-rule>‘<code class=css>@media</code>’ rule</dfn> 20.261 + is a conditional group rule whose condition is a media query. It consists 20.262 + of the at-keyword ‘<code class=css>@media</code>’ followed by a 20.263 + (possibly empty) media query list (as defined in <a href="#MEDIAQ" 20.264 rel=biblioentry>[MEDIAQ]<!--{{!MEDIAQ}}--></a>), followed by a group rule 20.265 body. The condition of the rule is the result of the media query. 20.266 20.267 @@ -533,10 +512,10 @@ 20.268 href="http://www.w3.org/TR/CSS21/grammar.html">Grammar of CSS 2.1</a> (<a 20.269 href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, Appendix G). 20.270 20.271 - <h2 id=at-supports><span class=secno>6. </span>Feature queries: the ‘<a 20.272 - href="#dfn-support"><code class=css>@supports</code></a>’ rule</h2> 20.273 + <h2 id=at-supports><span class=secno>6. </span>Feature queries: the 20.274 + ‘<code class=css>@supports</code>’ rule</h2> 20.275 20.276 - <p>The <dfn id=supports-rule>‘<code class=css>@supports</code>’ 20.277 + <p>The <dfn id=atsupports-rule>‘<code class=css>@supports</code>’ 20.278 rule</dfn> is a conditional group rule whose condition tests whether the 20.279 user agent supports CSS property:value pairs. Authors can use it to write 20.280 style sheets that use new features when available but degrade gracefully 20.281 @@ -546,10 +525,10 @@ 20.282 tied to the support for certain features, as is the case for use of new 20.283 layout system features. 20.284 20.285 - <p>The syntax of the condition in the ‘<a href="#dfn-support"><code 20.286 - class=css>@supports</code></a>’ rule is slightly more complicated than 20.287 - for the other conditional group rules (though has some similarities to 20.288 - media queries) since: 20.289 + <p>The syntax of the condition in the ‘<code 20.290 + class=css>@supports</code>’ rule is slightly more complicated than for 20.291 + the other conditional group rules (though has some similarities to media 20.292 + queries) since: 20.293 20.294 <ul> 20.295 <li>negation is needed so that the new-feature styles and the fallback 20.296 @@ -564,79 +543,76 @@ 20.297 alternatives are vendor-prefixed properties or values 20.298 </ul> 20.299 20.300 - <p>Therefore, the syntax of the ‘<a href="#dfn-support"><code 20.301 - class=css>@supports</code></a>’ rule allows testing for property:value 20.302 - pairs, and arbitrary conjunctions (and), disjunctions (or), and negations 20.303 - (not) of them. 20.304 + <p>Therefore, the syntax of the ‘<code class=css>@supports</code>’ rule 20.305 + allows testing for property:value pairs, and arbitrary conjunctions (and), 20.306 + disjunctions (or), and negations (not) of them. 20.307 20.308 <p>This extends the lexical scanner in the <a 20.309 href="http://www.w3.org/TR/CSS21/grammar.html">Grammar of CSS 2.1</a> (<a 20.310 href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, Appendix G) by 20.311 adding: 20.312 20.313 - <pre>@{S}{U}{P}{P}{O}{R}{T}{S} {return SUPPORTS_SYM;}</pre> 20.314 + <pre> 20.315 +@{S}{U}{P}{P}{O}{R}{T}{S} {return SUPPORTS_SYM;} 20.316 +{O}{R} {return OR;} 20.317 +</pre> 20.318 20.319 <p>and the grammar by adding 20.320 20.321 - <pre><dfn id=supportsrule>supports_rule</dfn> 20.322 - : SUPPORTS_SYM S+ supports_condition group_rule_body 20.323 + <pre><dfn id="supports_rule">supports_rule</dfn> 20.324 + : SUPPORTS_SYM S* supports_condition group_rule_body 20.325 ; 20.326 20.327 <dfn 20.328 - id=supportscondition>supports_condition</dfn> 20.329 + id="supports_condition">supports_condition</dfn> 20.330 : supports_negation | supports_conjunction | supports_disjunction | 20.331 supports_condition_in_parens 20.332 ; 20.333 20.334 <dfn 20.335 - id=supportsconditioninparens>supports_condition_in_parens</dfn> 20.336 + id="supports_condition_in_parens">supports_condition_in_parens</dfn> 20.337 : ( '(' S* supports_condition ')' S* ) | supports_declaration_condition 20.338 ; 20.339 20.340 <dfn 20.341 - id=supportsnegation>supports_negation</dfn> 20.342 - : 'not' S* supports_condition_in_parens 20.343 + id="supports_negation">supports_negation</dfn> 20.344 + : NOT S* supports_condition_in_parens 20.345 ; 20.346 20.347 <dfn 20.348 - id=supportsconjunction>supports_conjunction</dfn> 20.349 - : supports_condition_in_parens ( 'and' S* supports_condition_in_parens )+ 20.350 + id="supports_conjunction">supports_conjunction</dfn> 20.351 + : supports_condition_in_parens ( AND S* supports_condition_in_parens )+ 20.352 ; 20.353 20.354 <dfn 20.355 - id=supportsdisjunction>supports_disjunction</dfn> 20.356 - : supports_condition_in_parens ( 'or' S* supports_condition_in_parens )+ 20.357 + id="supports_disjunction">supports_disjunction</dfn> 20.358 + : supports_condition_in_parens ( OR S* supports_condition_in_parens )+ 20.359 ; 20.360 20.361 <dfn 20.362 - id=supportsdeclarationcondition>supports_declaration_condition</dfn> 20.363 - : '(' S* core_declaration ')' S* 20.364 + id="supports_declaration_condition">supports_declaration_condition</dfn> 20.365 + : '(' S* core_declaration ')' S* | FUNCTION S* [any|unused]* ')' 20.366 ;</pre> 20.367 20.368 <p>in which <code>core_declaration</code> is the production 20.369 <code>declaration</code> in the core syntax of CSS defined in <a 20.370 href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">section 4.1.1 20.371 (Tokenization)</a> of <a href="#CSS21" 20.372 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. 20.373 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, and the <code>AND</code> and 20.374 + <code>NOT</code> tokens are defined in the Media Queries specification <a 20.375 + href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{!MEDIAQ}}--></a>. 20.376 20.377 - <p>Any ‘<a href="#dfn-support"><code class=css>@supports</code></a>’ 20.378 - rule that does not parse according to the grammar above is invalid. Style 20.379 - sheets <strong>must not</strong> use such a rule and processors 20.380 - <strong>must</strong> ignore such a rule. 20.381 + <p>Any ‘<code class=css>@supports</code>’ rule that does not parse 20.382 + according to the grammar above is invalid. Style sheets <strong>must 20.383 + not</strong> use such a rule and processors <strong>must</strong> ignore 20.384 + such a rule. 20.385 20.386 <p class=note>Note that this means that declarations that meet the 20.387 forward-compatible syntax for declarations are permitted (and support for 20.388 - them is then tested by the ‘<a href="#dfn-support"><code 20.389 - class=css>@supports</code></a>’ rule), but declarations that do not meet 20.390 - the forward-compatible syntax for declarations cause the entire ‘<a 20.391 - href="#dfn-support"><code class=css>@supports</code></a>’ rule to be 20.392 - ignored. 20.393 - 20.394 - <p class=issue>Is any further allowance for forward-compatible parsing 20.395 - needed, for example, to allow additional features (such as, say, selector 20.396 - tests) to be added to the ‘<a href="#dfn-support"><code 20.397 - class=css>@supports</code></a>’ rule? Or are these forward-compatible 20.398 - parsing rules the best solution for such future expansion anyway? 20.399 + them is then tested by the ‘<code class=css>@supports</code>’ rule), 20.400 + but declarations that do not meet the forward-compatible syntax for 20.401 + declarations cause the entire ‘<code class=css>@supports</code>’ rule 20.402 + to be ignored. 20.403 20.404 <p>Each of these grammar terms is associated with a boolean result, as 20.405 follows: 20.406 @@ -649,38 +625,41 @@ 20.407 <dt>supports_condition_in_parens 20.408 20.409 <dd> The result is the result of the single <a 20.410 - href="#supportscondition"><code>supports_condition</code></a> or <a 20.411 - href="#supportsdeclarationcondition"><code>supports_declaration_condition</code></a> 20.412 + href="#supports_condition"><code>supports_condition</code></a> or <a 20.413 + href="#supports_declaration_condition"><code>supports_declaration_condition</code></a> 20.414 child term. 20.415 20.416 <dt>supports_negation 20.417 20.418 <dd> The result is the <em>negation</em> of the result of the <a 20.419 - href="#supportsconditioninparens"><code>supports_condition_in_parens</code></a> 20.420 + href="#supports_condition_in_parens"><code>supports_condition_in_parens</code></a> 20.421 child term. 20.422 20.423 <dt>supports_conjunction 20.424 20.425 <dd> The result is true if the result of <em>all</em> of the <a 20.426 - href="#supportsconditioninparens"><code>supports_condition_in_parens</code></a> 20.427 + href="#supports_condition_in_parens"><code>supports_condition_in_parens</code></a> 20.428 child terms is true; otherwise it is false. 20.429 20.430 <dt>supports_disjunction 20.431 20.432 <dd> The result is true if the result of <em>any</em> of the <a 20.433 - href="#supportsconditioninparens"><code>supports_condition_in_parens</code></a> 20.434 + href="#supports_condition_in_parens"><code>supports_condition_in_parens</code></a> 20.435 child terms is true; otherwise it is false. 20.436 20.437 <dt>supports_declaration_condition 20.438 20.439 - <dd> The result is whether the CSS processor <a 20.440 - href="#support-definition">supports</a> the declaration. 20.441 + <dd> The result is false if this corresponds to a functional notation; 20.442 + otherwise, the result is whether the CSS processor <a 20.443 + href="#support-definition">supports</a> the declaration within the 20.444 + parentheses. <span class=note>Note that future levels may define 20.445 + functions that can evaluate to true.</span> 20.446 </dl> 20.447 20.448 - <p>The condition of the ‘<a href="#dfn-support"><code 20.449 - class=css>@supports</code></a>’ rule is the result of the <a 20.450 - href="#supportscondition"><code>supports_condition</code></a> term that is 20.451 - a child of the <a href="#supportsrule"><code>supports_rule</code></a> 20.452 + <p>The condition of the ‘<code class=css>@supports</code>’ rule is the 20.453 + result of the <a 20.454 + href="#supports_condition"><code>supports_condition</code></a> term that 20.455 + is a child of the <a href="#supports_rule"><code>supports_rule</code></a> 20.456 term. 20.457 20.458 <div class=example> 20.459 @@ -692,16 +671,16 @@ 20.460 #article { background: white; color: black; } 20.461 }</pre> 20.462 20.463 - <p>applies the rules inside the ‘<a href="#dfn-support"><code 20.464 - class=css>@supports</code></a>’ rule only when ‘<code 20.465 - class=css>display: flexbox</code>’ is supported. 20.466 + <p>applies the rules inside the ‘<code class=css>@supports</code>’ 20.467 + rule only when ‘<code class=css>display: flexbox</code>’ is 20.468 + supported. 20.469 </div> 20.470 20.471 <div class=example> 20.472 - <p>The following example shows an additional ‘<a 20.473 - href="#dfn-support"><code class=css>@supports</code></a>’ rule that can 20.474 - be used to provide an alternative for when ‘<code class=css>display: 20.475 - flexbox</code>’ is not supported: 20.476 + <p>The following example shows an additional ‘<code 20.477 + class=css>@supports</code>’ rule that can be used to provide an 20.478 + alternative for when ‘<code class=css>display: flexbox</code>’ is not 20.479 + supported: 20.480 20.481 <pre>@supports not ( display: flexbox ) { 20.482 body { width: 100%; height: 100%; background: white; color: black; } 20.483 @@ -838,250 +817,225 @@ 20.484 fallback (either in the <a href="#CSS1" 20.485 rel=biblioentry>[CSS1]<!--{{CSS1}}--></a> sense of declarations that are 20.486 overridden by later declarations or with the new capabilities provided by 20.487 - the ‘<a href="#dfn-support"><code class=css>@supports</code></a>’ rule 20.488 - in this specification) that works correctly for the features implemented. 20.489 - This applies especially to compound values; implementations must implement 20.490 - all parts of the value in order to consider the declaration supported, 20.491 - either inside a ruleset or in the declaration condition of an ‘<a 20.492 - href="#dfn-support"><code class=css>@supports</code></a>’ rule. 20.493 + the ‘<code class=css>@supports</code>’ rule in this specification) 20.494 + that works correctly for the features implemented. This applies especially 20.495 + to compound values; implementations must implement all parts of the value 20.496 + in order to consider the declaration supported, either inside a ruleset or 20.497 + in the declaration condition of an ‘<code class=css>@supports</code>’ 20.498 + rule.</p> 20.499 + <!-- 20.500 +<h2 id="at-document">Document queries: the '@document' rule</h2> 20.501 20.502 - <h2 id=at-document><span class=secno>7. </span>Document queries: the 20.503 - ‘<code class=css>@document</code>’ rule</h2> 20.504 +<p>The <dfn>'@document' rule</dfn> is a conditional group 20.505 +rule whose condition depends on the 20.506 +<a href="#url-of-doc">URL of the document being styled</a>. 20.507 +This allows style sheets, particularly user style sheets, to have styles 20.508 +that only apply to a set of pages rather than to all pages using the 20.509 +style sheet.</p> 20.510 20.511 - <p>The <dfn id=document-rule>‘<code class=css>@document</code>’ 20.512 - rule</dfn> is a conditional group rule whose condition depends on the <a 20.513 - href="#url-of-doc">URL of the document being styled</a>. This allows style 20.514 - sheets, particularly user style sheets, to have styles that only apply to 20.515 - a set of pages rather than to all pages using the style sheet. 20.516 +<p class="issue">Given that this @-rule is intended primarily for user 20.517 +style sheets, what should this specification say about its use in author 20.518 +style sheets? Should it be forbidden? Should use instead be 20.519 +discouraged? Or should this specification remain neutral on the 20.520 +topic, since there are valid uses in author style sheets?</p> 20.521 20.522 - <p class=issue>Given that this @-rule is intended primarily for user style 20.523 - sheets, what should this specification say about its use in author style 20.524 - sheets? Should it be forbidden? Should use instead be discouraged? Or 20.525 - should this specification remain neutral on the topic, since there are 20.526 - valid uses in author style sheets? 20.527 +<p id="url-of-doc">The <dfn>URL of the document being styled</dfn> is 20.528 +the URI at which the document is located, excluding any fragment 20.529 +identifiers. (This means, for example, that HTTP redirects have been 20.530 +followed.) If the styles are being applied inside a complete document 20.531 +embedded into the presentation of another (e.g., [[HTML5]]'s <code 20.532 +class="html">iframe</code>, <code class="html">object</code>, or <code 20.533 +class="html">img</code> elements), the relevant URI is that of the 20.534 +frame, not of its container. However, if content from other documents 20.535 +is mixed in via mechanisms that mix content from one document into 20.536 +another (e.g., [[SVG11]]'s <code>use</code> element), then the 20.537 +address of the container document is used.</p> 20.538 20.539 - <p id=url-of-doc>The <dfn id=url-of-the-document-being-styled>URL of the 20.540 - document being styled</dfn> is the URI at which the document is located, 20.541 - excluding any fragment identifiers. (This means, for example, that HTTP 20.542 - redirects have been followed.) If the styles are being applied inside a 20.543 - complete document embedded into the presentation of another (e.g., <a 20.544 - href="#HTML5" rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>'s <code 20.545 - class=html>iframe</code>, <code class=html>object</code>, or <code 20.546 - class=html>img</code> elements), the relevant URI is that of the frame, 20.547 - not of its container. However, if content from other documents is mixed in 20.548 - via mechanisms that mix content from one document into another (e.g., <a 20.549 - href="#SVG11" rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>'s 20.550 - <code>use</code> element), then the address of the container document is 20.551 - used. 20.552 +<p class="note">Note: In [[HTML5]], this is the 20.553 +<a href="http://dev.w3.org/html5/spec/dom.html#documents">document's address</a> 20.554 +of a document in a 20.555 +<a href="http://dev.w3.org/html5/spec/browsers.html#browsing-context">browsing context</a>.</p> 20.556 20.557 - <p class=note>Note: In <a href="#HTML5" 20.558 - rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>, this is the <a 20.559 - href="http://dev.w3.org/html5/spec/dom.html#documents">document's 20.560 - address</a> of a document in a <a 20.561 - href="http://dev.w3.org/html5/spec/browsers.html#browsing-context">browsing 20.562 - context</a>. 20.563 +<div class="issue">What form of normalization is done on URLs and domains 20.564 +before matching? In particular, this specification needs to describe: 20.565 +<ul> 20.566 +<li>what form is used for the <a href="#url-of-doc">URL of the document 20.567 +being styled</a> (and what has been normalized in that form)</li> 20.568 +<li>what normalization (if any) happens to the argument of each of the match 20.569 +functions before the comparison that they describe and</li> 20.570 +<li>whether the 20.571 +comparison algorithm used is string comparison or some other URL 20.572 +comparison algorithm.</li></ul></div> 20.573 20.574 - <div class=issue>What form of normalization is done on URLs and domains 20.575 - before matching? In particular, this specification needs to describe: 20.576 - <ul> 20.577 - <li>what form is used for the <a href="#url-of-doc">URL of the document 20.578 - being styled</a> (and what has been normalized in that form) 20.579 +<p>The '@document' rule's condition is written as a 20.580 +comma-separated list of <dfn>URL matching functions</dfn>, and the 20.581 +condition evaluates to true whenever any one of those functions 20.582 +evaluates to true. The following URL matching functions are 20.583 +permitted:</p> 20.584 20.585 - <li>what normalization (if any) happens to the argument of each of the 20.586 - match functions before the comparison that they describe and 20.587 +<dl> 20.588 + <dt><dfn id="url-exact" title="url()|URL matching functions::exact"><url></dfn></dt> 20.589 20.590 - <li>whether the comparison algorithm used is string comparison or some 20.591 - other URL comparison algorithm. 20.592 - </ul> 20.593 - </div> 20.594 + <dd> 20.595 + <p>The 'url()' function is the <dfn>exact url matching 20.596 + function</dfn>. It evaluates to true whenever the <a 20.597 + href="#url-of-doc">URL of the document being styled</a> is exactly 20.598 + the URL given.</p> 20.599 20.600 - <p>The ‘<code class=css>@document</code>’ rule's condition is written 20.601 - as a comma-separated list of <dfn id=url-matching-functions>URL matching 20.602 - functions</dfn>, and the condition evaluates to true whenever any one of 20.603 - those functions evaluates to true. The following URL matching functions 20.604 - are permitted: 20.605 + <p class="Note">The 'url()' function, since it is a core syntax 20.606 + element in CSS, is allowed (subject to different character 20.607 + limitations and thus escaping requirements) to contain an unquoted 20.608 + value (in addition to the string values that are allowed as 20.609 + arguments for all four functions).</p> 20.610 20.611 - <dl> 20.612 - <dt><dfn id=url-exact 20.613 - title="url()|URL matching functions::exact"><url></dfn> 20.614 - 20.615 - <dd> 20.616 - <p>The ‘<a href="#url-exact"><code class=css>url()</code></a>’ 20.617 - function is the <dfn id=exact-url-matching-function>exact url matching 20.618 - function</dfn>. It evaluates to true whenever the <a 20.619 - href="#url-of-doc">URL of the document being styled</a> is exactly the 20.620 - URL given. 20.621 - 20.622 - <p class=Note>The ‘<a href="#url-exact"><code 20.623 - class=css>url()</code></a>’ function, since it is a core syntax 20.624 - element in CSS, is allowed (subject to different character limitations 20.625 - and thus escaping requirements) to contain an unquoted value (in 20.626 - addition to the string values that are allowed as arguments for all four 20.627 - functions). 20.628 - 20.629 - <div class=example> 20.630 - <p>For example, this rule: 20.631 - 20.632 - <pre>@document url("http://www.w3.org/Style/CSS/") { 20.633 + <div class="example"> 20.634 + <p>For example, this rule:</p> 20.635 +<pre>@document url("http://www.w3.org/Style/CSS/") { 20.636 #summary { background: yellow; color: black} 20.637 }</pre> 20.638 + <p>styles the <code class="html">summary</code> element on the page 20.639 + <code>http://www.w3.org/Style/CSS/</code>, but not on any other 20.640 + pages.</p> 20.641 + </div> 20.642 + </dd> 20.643 20.644 - <p>styles the <code class=html>summary</code> element on the page 20.645 - <code>http://www.w3.org/Style/CSS/</code>, but not on any other pages. 20.646 - </div> 20.647 + <dt><dfn id="url-prefix" title="url-prefix()|URL matching functions::prefix">url-prefix(<string>)</dfn></dt> 20.648 20.649 - <dt><dfn id=url-prefix 20.650 - title="url-prefix()|URL matching functions::prefix">url-prefix(<string>)</dfn> 20.651 - 20.652 - <dd> 20.653 - <p>The ‘<a href="#url-prefix"><code 20.654 - class=css>url-prefix()</code></a>’ function is the <dfn 20.655 - id=url-prefix-matching-function>url prefix matching function</dfn>. It 20.656 - evaluates to true whenever the <a href="#url-of-doc">URL of the document 20.657 - being styled</a> has the argument to the function as an initial 20.658 - substring (which is true when the two strings are equal). When the 20.659 - argument is the empty string, it evaluates to true for all documents. 20.660 - 20.661 - <div class=example> 20.662 - <p>For example, this rule: 20.663 - 20.664 - <pre>@document url-prefix("http://www.w3.org/Style/CSS/") { 20.665 + <dd> 20.666 + <p>The 'url-prefix()' function is the <dfn>url prefix 20.667 + matching function</dfn>. It evaluates to true whenever the 20.668 + <a href="#url-of-doc">URL of the document being styled</a> 20.669 + has the argument to the function as an 20.670 + initial substring (which is true when the two strings are equal). 20.671 + When the argument is the empty string, it evaluates to true for all 20.672 + documents.</p> 20.673 + <div class="example"> 20.674 + <p>For example, this rule:</p> 20.675 +<pre>@document url-prefix("http://www.w3.org/Style/CSS/") { 20.676 #summary { background: yellow; color: black} 20.677 }</pre> 20.678 + <p>styles the <code class="html">summary</code> element on the page 20.679 + <code>http://www.w3.org/Style/CSS/</code> and on the page 20.680 + <code>http://www.w3.org/Style/CSS/Test</code>, but it does not 20.681 + affect the page <code>http://www.w3.org/</code> or the page 20.682 + <code>http://www.example.com/Style/CSS/</code>.</p> 20.683 + </div> 20.684 + </dd> 20.685 20.686 - <p>styles the <code class=html>summary</code> element on the page 20.687 - <code>http://www.w3.org/Style/CSS/</code> and on the page 20.688 - <code>http://www.w3.org/Style/CSS/Test</code>, but it does not affect 20.689 - the page <code>http://www.w3.org/</code> or the page 20.690 - <code>http://www.example.com/Style/CSS/</code>. 20.691 - </div> 20.692 + <dt><dfn id="url-domain" title="domain()|URL matching functions::domain">domain(<string>)</dfn></dt> 20.693 20.694 - <dt><dfn id=url-domain 20.695 - title="domain()|URL matching functions::domain">domain(<string>)</dfn> 20.696 - 20.697 - <dd> 20.698 - <p>The ‘<a href="#url-domain"><code class=css>domain()</code></a>’ 20.699 - function is the <dfn id=domain-matching-function>domain matching 20.700 - function</dfn>. It evaluates to true whenever the <a 20.701 - href="#url-of-doc">URL of the document being styled</a> has a host 20.702 - subcomponent (as defined in <a href="#URI" 20.703 - rel=biblioentry>[URI]<!--{{!URI}}--></a>) and that host subcomponent is 20.704 - exactly the argument to the ‘<a href="#url-domain"><code 20.705 - class=css>domain()</code></a>’ function or a final substring of the 20.706 - host component is a period (U+002E) immediately followed by the argument 20.707 - to the ‘<a href="#url-domain"><code class=css>domain()</code></a>’ 20.708 - function. 20.709 - 20.710 - <div class=example> 20.711 - <p>For example, this rule: 20.712 - 20.713 - <pre>@document domain("w3.org") { 20.714 + <dd> 20.715 + <p>The 'domain()' function is the <dfn>domain 20.716 + matching function</dfn>. It evaluates to true whenever 20.717 + the <a href="#url-of-doc">URL of the document being styled</a> 20.718 + has a host subcomponent (as defined in [[!URI]]) 20.719 + and that host subcomponent is exactly the argument to the 20.720 + 'domain()' function or a final substring of the host 20.721 + component is a period (U+002E) immediately followed by the argument 20.722 + to the 'domain()' function.</p> 20.723 + <div class="example"> 20.724 + <p>For example, this rule:</p> 20.725 +<pre>@document domain("w3.org") { 20.726 body { font-size: 16px ! important } 20.727 }</pre> 20.728 - 20.729 - <p>changes the font size of the body element for pages such as 20.730 + <p>changes the font size of the body element for pages such as 20.731 <code>http://www.w3.org/Style/CSS/</code> and 20.732 <code>http://w3.org/Style/CSS/</code> and 20.733 - <code>http://lists.w3.org/Archives/Public/www-style/</code> but it does 20.734 - not affect the page <code>http://www.example.com/Style/CSS/</code>. 20.735 + <code>http://lists.w3.org/Archives/Public/www-style/</code> 20.736 + but it does not affect the page 20.737 + <code>http://www.example.com/Style/CSS/</code>.</p> 20.738 </div> 20.739 + </dd> 20.740 20.741 - <dt><dfn id=url-regexp 20.742 - title="regexp()|URL matching functions::regular expression">regexp(<string>)</dfn> 20.743 + <dt><dfn id="url-regexp" title="regexp()|URL matching functions::regular expression">regexp(<string>)</dfn></dt> 20.744 20.745 - <dd> 20.746 + <dd> 20.747 <p>The contents of the <string> argument <strong>must</strong> 20.748 - match the JavaScript <code>Pattern</code> production (<a 20.749 - href="#ECMA-262-5.1" 20.750 - rel=biblioentry>[ECMA-262-5.1]<!--{{!ECMA-262-5.1}}--></a>, section 20.751 - 15.10.1). However, failing to do so is not a CSS syntax error and does 20.752 - not trigger any error handling for CSS syntax errors. 20.753 + match the JavaScript <code>Pattern</code> production 20.754 + ([[!ECMA-262-5.1]], section 15.10.1). However, 20.755 + failing to do so is not a CSS syntax error and does not trigger any 20.756 + error handling for CSS syntax errors.</p> 20.757 20.758 - <p>The ‘<a href="#url-regexp"><code class=css>regexp()</code></a>’ 20.759 - function evaluates to true whenever the string argument compiled as a 20.760 - JavaScript regular expression with the <code>global</code>, 20.761 - <code>ignoreCase</code> and <code>multiline</code> flags 20.762 - <em>disabled</em> (see <a href="#ECMA-262-5.1" 20.763 - rel=biblioentry>[ECMA-262-5.1]<!--{{!ECMA-262-5.1}}--></a>, sections 20.764 - 15.10.7.2 through 15.10.7.4) compiles successfully and the resulting 20.765 - regular expression matches the entirety of the <a href="#url-of-doc">URL 20.766 - of the document being styled</a>. 20.767 + <p>The ''regexp()'' function evaluates to true whenever the string 20.768 + argument compiled as a JavaScript regular expression with the 20.769 + <code>global</code>, <code>ignoreCase</code> and 20.770 + <code>multiline</code> flags <em>disabled</em> 20.771 + (see [[!ECMA-262-5.1]], sections 15.10.7.2 through 15.10.7.4) 20.772 + compiles successfully and the resulting regular expression matches 20.773 + the entirety of the 20.774 + <a href="#url-of-doc">URL of the document being styled</a>.</p> 20.775 20.776 - <p class=note>Note that regular expression must match the entire URL, not 20.777 - just a part of it. 20.778 + <p class="note">Note that regular expression must match the entire 20.779 + URL, not just a part of it.</p> 20.780 20.781 - <p class=note>Note that this definition intentionally matches the 20.782 - behavior of the <a 20.783 - href="http://dev.w3.org/html5/spec/common-input-element-attributes.html#attr-input-pattern"><code 20.784 - class=html>pattern</code> attribute</a> on the <code 20.785 - class=html>input</code> element in <a href="#HTML5" 20.786 - rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>. 20.787 + <p class="note">Note that this definition intentionally matches the 20.788 + behavior of the <a 20.789 + href="http://dev.w3.org/html5/spec/common-input-element-attributes.html#attr-input-pattern"><code class="html">pattern</code> 20.790 + attribute</a> on the <code class="html">input</code> element 20.791 + in [[HTML5]].</p> 20.792 20.793 - <div class=example> 20.794 - <p>For example, this rule: 20.795 - 20.796 - <pre>@document regexp("http://www.w3.org/TR/\\d{4}/[^/]*-CSS2-\\d{8}/") { 20.797 + <div class="example"> 20.798 + <p>For example, this rule:</p> 20.799 +<pre>@document regexp("http://www.w3.org/TR/\\d{4}/[^/]*-CSS2-\\d{8}/") { 20.800 body { font-size: 20px ! important } 20.801 }</pre> 20.802 + <p>changes the font size of the body element for pages such as 20.803 + <code>http://www.w3.org/TR/2011/PR-CSS2-20110412/</code>.</p> 20.804 + <p class="note">Note that the backslashes in the regular 20.805 + expression require CSS escaping as ''\\''.</p> 20.806 + </div> 20.807 + </dd> 20.808 20.809 - <p>changes the font size of the body element for pages such as 20.810 - <code>http://www.w3.org/TR/2011/PR-CSS2-20110412/</code>. 20.811 +</dl> 20.812 20.813 - <p class=note>Note that the backslashes in the regular expression 20.814 - require CSS escaping as ‘<code class=css>\\</code>’. 20.815 - </div> 20.816 - </dl> 20.817 +<p>Implementations <strong>must</strong> treat any unknown URL matching 20.818 +functions as a syntax error, and thus ignore the '@document' rule. 20.819 +<span class="issue">Should we instead have more complicated error 20.820 +handling rules to make forward-compatibility work differently, or is 20.821 +this rule the best solution for such future expansion anyway?</span></p> 20.822 20.823 - <p>Implementations <strong>must</strong> treat any unknown URL matching 20.824 - functions as a syntax error, and thus ignore the ‘<code 20.825 - class=css>@document</code>’ rule. <span class=issue>Should we instead 20.826 - have more complicated error handling rules to make forward-compatibility 20.827 - work differently, or is this rule the best solution for such future 20.828 - expansion anyway?</span> 20.829 +<div class="issue">This syntax doesn't offer any ability to do negations, 20.830 +which has been requested in <a 20.831 +href="https://bugzilla.mozilla.org/show_bug.cgi?id=349813">Mozilla bug 20.832 +349813</a>. Use cases that people have wanted negations for 20.833 +include: 20.834 +<ul> 20.835 + <li>User style sheets that want a particular rule in general, but know 20.836 + that that rule does more harm than good on specific sites.</li> 20.837 + <li>Authors who have a rule that they want to apply to most of their 20.838 + pages, but wish to make a few exceptions for.</li> 20.839 +</ul> 20.840 +</div> 20.841 20.842 - <div class=issue>This syntax doesn't offer any ability to do negations, 20.843 - which has been requested in <a 20.844 - href="https://bugzilla.mozilla.org/show_bug.cgi?id=349813">Mozilla bug 20.845 - 349813</a>. Use cases that people have wanted negations for include: 20.846 - <ul> 20.847 - <li>User style sheets that want a particular rule in general, but know 20.848 - that that rule does more harm than good on specific sites. 20.849 - 20.850 - <li>Authors who have a rule that they want to apply to most of their 20.851 - pages, but wish to make a few exceptions for. 20.852 - </ul> 20.853 - </div> 20.854 - 20.855 - <p>This extends the lexical scanner in the <a 20.856 - href="http://www.w3.org/TR/CSS21/grammar.html">Grammar of CSS 2.1</a> (<a 20.857 - href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, Appendix G) by 20.858 - adding: 20.859 - 20.860 - <pre>@{D}{O}{C}{U}{M}{E}{N}{T} {return DOCUMENT_SYM;}</pre> 20.861 - 20.862 - <p>and the grammar by adding 20.863 - 20.864 - <pre>document_rule 20.865 +<p>This extends the lexical scanner in the 20.866 +<a href="http://www.w3.org/TR/CSS21/grammar.html">Grammar of CSS 2.1</a> 20.867 +([[!CSS21]], Appendix G) by adding: 20.868 +<pre>@{D}{O}{C}{U}{M}{E}{N}{T} {return DOCUMENT_SYM;}</pre> 20.869 +<p>and the grammar by adding</p> 20.870 +<pre>document_rule 20.871 : DOCUMENT_SYM S+ url_match_fn ( "," S* url_match_fn )* group_rule_body 20.872 ; 20.873 20.874 url_match_fn 20.875 : (URI | FUNCTION S* STRING S* ')' ) S* 20.876 ;</pre> 20.877 +--> 20.878 20.879 - <h2 id=apis><span class=secno>8. </span>APIs</h2> 20.880 + <h2 id=apis><span class=secno>7. </span>APIs</h2> 20.881 20.882 - <h3 id=extentions-to-cssrule-interface><span class=secno>8.1. </span> 20.883 + <h3 id=extentions-to-cssrule-interface><span class=secno>7.1. </span> 20.884 Extensions to the <code>CSSRule</code> interface</h3> 20.885 20.886 <p>The <code>CSSRule</code> interface is extended as follows: 20.887 20.888 <pre class=idl>partial interface CSSRule { 20.889 const unsigned short SUPPORTS_RULE = 12; 20.890 + <!-- 20.891 const unsigned short DOCUMENT_RULE = 13; 20.892 + --> 20.893 }</pre> 20.894 20.895 - <h3 id=the-cssgroupingrule-interface><span class=secno>8.2. </span> The <a 20.896 + <h3 id=the-cssgroupingrule-interface><span class=secno>7.2. </span> The <a 20.897 href="#cssgroupingrule"><code>CSSGroupingRule</code></a> interface</h3> 20.898 20.899 <p>The <dfn id=cssgroupingrule><code>CSSGroupingRule</code></dfn> interface 20.900 @@ -1116,7 +1070,7 @@ 20.901 CSS rule list returned by <code>cssRules</code> at <var>index</var>. 20.902 </dl> 20.903 20.904 - <h3 id=the-cssconditionrule-interface><span class=secno>8.3. </span> The <a 20.905 + <h3 id=the-cssconditionrule-interface><span class=secno>7.3. </span> The <a 20.906 href="#cssconditionrule"><code>CSSConditionRule</code></a> interface</h3> 20.907 20.908 <p>The <dfn id=cssconditionrule><code>CSSConditionRule</code></dfn> 20.909 @@ -1157,7 +1111,7 @@ 20.910 </ol> 20.911 </dl> 20.912 20.913 - <h3 id=the-cssmediarule-interface><span class=secno>8.4. </span> The <a 20.914 + <h3 id=the-cssmediarule-interface><span class=secno>7.4. </span> The <a 20.915 href="#cssmediarule"><code>CSSMediaRule</code></a> interface</h3> 20.916 20.917 <p>The <dfn id=cssmediarule><code>CSSMediaRule</code></dfn> interface 20.918 @@ -1184,26 +1138,25 @@ 20.919 <code>media.mediaText</code> attribute on the rule. 20.920 </dl> 20.921 20.922 - <h3 id=the-csssupportsrule-interface><span class=secno>8.5. </span> The <a 20.923 + <h3 id=the-csssupportsrule-interface><span class=secno>7.5. </span> The <a 20.924 href="#csssupportsrule"><code>CSSSupportsRule</code></a> interface</h3> 20.925 20.926 <p>The <dfn id=csssupportsrule><code>CSSSupportsRule</code></dfn> interface 20.927 - represents a ‘<a href="#dfn-support"><code 20.928 - class=css>@supports</code></a>’ rule. 20.929 + represents a ‘<code class=css>@supports</code>’ rule. 20.930 20.931 <pre class=idl>interface CSSSupportsRule : CSSConditionRule { 20.932 }</pre> 20.933 + <!-- 20.934 +<h3 id="the-cssdocumentrule-interface"> 20.935 +The <code>CSSDocumentRule</code> interface</h3> 20.936 20.937 - <h3 id=the-cssdocumentrule-interface><span class=secno>8.6. </span> The <a 20.938 - href="#cssdocumentrule"><code>CSSDocumentRule</code></a> interface</h3> 20.939 +<p>The <dfn><code>CSSDocumentRule</code></dfn> interface represents a ''@document'' rule.</p> 20.940 20.941 - <p>The <dfn id=cssdocumentrule><code>CSSDocumentRule</code></dfn> interface 20.942 - represents a ‘<code class=css>@document</code>’ rule. 20.943 +<pre class='idl'>interface CSSDocumentRule : CSSConditionRule { 20.944 +}</pre> 20.945 +--> 20.946 20.947 - <pre class=idl>interface CSSDocumentRule : CSSConditionRule { 20.948 -}</pre> 20.949 - 20.950 - <h3 id=the-css-interface><span class=secno>8.7. </span> The <a 20.951 + <h3 id=the-css-interface><span class=secno>7.6. </span> The <a 20.952 href="#CSS-interface"><code>CSS</code></a> interface, and the <code 20.953 title="">supports()</code> function</h3> 20.954 20.955 @@ -1231,13 +1184,24 @@ 20.956 <p> When invoked with a single <var>conditionText</var> argument, it must 20.957 return <code>true</code> if <var>conditionText</var>, when parsed and 20.958 evaluated as a <a 20.959 - href="#supportscondition"><code>supports_condition</code></a>, would 20.960 + href="#supports_condition"><code>supports_condition</code></a>, would 20.961 return true. Otherwise, it must return <code>false</code>. 20.962 </dl> 20.963 20.964 - <h2 id=conformance><span class=secno>9. </span>Conformance</h2> 20.965 + <h2 class=no-num id=grammar>Grammar</h2> 20.966 20.967 - <h3 id=base-modules><span class=secno>9.1. </span>Base Modules</h3> 20.968 + <p>In order to allow these new @-rules in CSS style sheets, this 20.969 + specification modifies the <code>stylesheet</code> production in the <a 20.970 + href="http://www.w3.org/TR/CSS21/grammar.html">Appendix G</a> grammar of 20.971 + <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> by replacing 20.972 + the <code>media</code> production defined in <a href="#CSS21" 20.973 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> with the <code>media</code> 20.974 + production defined in this one, and additionally inserting <code>| 20.975 + supports_rule</code> alongside <code>ruleset | media | page</code>. 20.976 + 20.977 + <h2 id=conformance><span class=secno>8. </span>Conformance</h2> 20.978 + 20.979 + <h3 id=base-modules><span class=secno>8.1. </span>Base Modules</h3> 20.980 20.981 <p>This specification defines conformance in terms of base modules, which 20.982 are modules that this specification builds on top of. The base modules of 20.983 @@ -1270,7 +1234,7 @@ 20.984 such syntax does not make a style sheet nonconformant and failure to treat 20.985 such syntax as invalid does not make a processor nonconformant. 20.986 20.987 - <h3 id=conformance-classes><span class=secno>9.2. </span>Conformance 20.988 + <h3 id=conformance-classes><span class=secno>8.2. </span>Conformance 20.989 Classes</h3> 20.990 20.991 <p>Conformance to the CSS Conditional Rules Module is defined for three 20.992 @@ -1315,7 +1279,7 @@ 20.993 it writes style sheets that conform to the module and (if it reads CSS) it 20.994 is a conformant processor. 20.995 20.996 - <h3 id=partial><span class=secno>9.3. </span> Partial Implementations</h3> 20.997 + <h3 id=partial><span class=secno>8.3. </span> Partial Implementations</h3> 20.998 20.999 <p>So that authors can exploit the forward-compatible parsing rules to 20.1000 assign fallback values, CSS renderers <strong>must</strong> treat as 20.1001 @@ -1329,7 +1293,7 @@ 20.1002 unsupported values must be), CSS requires that the entire declaration be 20.1003 ignored. 20.1004 20.1005 - <h3 id=experimental><span class=secno>9.4. </span>Experimental 20.1006 + <h3 id=experimental><span class=secno>8.4. </span>Experimental 20.1007 Implementations</h3> 20.1008 20.1009 <p>To avoid clashes with future CSS features, the CSS specifications 20.1010 @@ -1343,7 +1307,7 @@ 20.1011 should implement the non-prefixed syntax for any feature they consider to 20.1012 be correctly implemented according to spec. 20.1013 20.1014 - <h3 id=cr-exit-criteria><span class=secno>9.5. </span>CR Exit Criteria</h3> 20.1015 + <h3 id=cr-exit-criteria><span class=secno>8.5. </span>CR Exit Criteria</h3> 20.1016 20.1017 <p>For this specification to be advanced to Proposed Recommendation, there 20.1018 must be at least two independent, interoperable implementations of each 20.1019 @@ -1391,17 +1355,39 @@ 20.1020 <p>The specification will remain Candidate Recommendation for at least six 20.1021 months. 20.1022 20.1023 - <h2 class=no-num id=grammar>Grammar</h2> 20.1024 + <h2 id=changes><span class=secno>9. </span> Changes</h2> 20.1025 20.1026 - <p>In order to allow these new @-rules in CSS style sheets, this 20.1027 - specification modifies the <code>stylesheet</code> production in the <a 20.1028 - href="http://www.w3.org/TR/CSS21/grammar.html">Appendix G</a> grammar of 20.1029 - <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> by replacing 20.1030 - the <code>media</code> production defined in <a href="#CSS21" 20.1031 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> with the <code>media</code> 20.1032 - production defined in this one, and additionally inserting <code>| 20.1033 - supports_rule | document_rule</code> alongside <code>ruleset | media | 20.1034 - page</code>. 20.1035 + <p>The following (non-editorial) changes were made to this specification 20.1036 + since the <a 20.1037 + href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/">11 20.1038 + September 2012 Working Draft</a>: 20.1039 + 20.1040 + <ul> 20.1041 + <li>Removed ‘<code class=css>@document</code>’ rule; it has been 20.1042 + deferred to Level 4. 20.1043 + 20.1044 + <li>Allow functional notation in ‘<code class=css>@supports</code>’ 20.1045 + queries to be valid (to allow for future extensions), but treat such 20.1046 + notations as always being false. 20.1047 + 20.1048 + <li>Corrected the grammar as follows: 20.1049 + <pre> 20.1050 +- : SUPPORTS_SYM S+ supports_condition group_rule_body 20.1051 ++ : SUPPORTS_SYM S* supports_condition group_rule_body 20.1052 +</pre> 20.1053 + 20.1054 + <pre> 20.1055 +- : (URI | FUNCTION) S* 20.1056 ++ : (URI | FUNCTION S* STRING S* ')' ) S* 20.1057 +</pre> 20.1058 + 20.1059 + <li>Switched "and", "or", and "not" keywords to use appropriate 20.1060 + productions rather than literals. 20.1061 + 20.1062 + <li>Clarified definition of support used for interpreting ‘<code 20.1063 + class=css>@support</code>’ rules and its relationship to CSS 20.1064 + forwards-compatible parsing rules. 20.1065 + </ul> 20.1066 20.1067 <h2 class=no-num id=acknowledgments>Acknowledgments</h2> 20.1068 20.1069 @@ -1453,16 +1439,6 @@ 20.1070 </dd> 20.1071 <!----> 20.1072 20.1073 - <dt id=ECMA-262-5.1>[ECMA-262-5.1] 20.1074 - 20.1075 - <dd><a 20.1076 - href="http://www.ecma-international.org/publications/standards/Ecma-262.htm"><cite>ECMAScript 20.1077 - Language Specification, Edition 5.1.</cite></a> June 2011. ISO/IEC 20.1078 - 16262:2011. URL: <a 20.1079 - href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">http://www.ecma-international.org/publications/standards/Ecma-262.htm</a> 20.1080 - </dd> 20.1081 - <!----> 20.1082 - 20.1083 <dt id=MEDIAQ>[MEDIAQ] 20.1084 20.1085 <dd>Florian Rivoal. <a 20.1086 @@ -1480,16 +1456,6 @@ 20.1087 href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a> 20.1088 </dd> 20.1089 <!----> 20.1090 - 20.1091 - <dt id=URI>[URI] 20.1092 - 20.1093 - <dd>T. Berners-Lee; R. Fielding; L. Masinter. <a 20.1094 - href="http://www.ietf.org/rfc/rfc3986.txt"><cite>Uniform Resource 20.1095 - Identifiers (URI): generic syntax.</cite></a> January 2005. Internet RFC 20.1096 - 3986. URL: <a 20.1097 - href="http://www.ietf.org/rfc/rfc3986.txt">http://www.ietf.org/rfc/rfc3986.txt</a> 20.1098 - </dd> 20.1099 - <!----> 20.1100 </dl> 20.1101 <!--end-normative--> 20.1102 20.1103 @@ -1520,25 +1486,6 @@ 20.1104 href="http://www.w3.org/TR/2012/WD-css3-transitions-20120403/">http://www.w3.org/TR/2012/WD-css3-transitions-20120403/</a> 20.1105 </dd> 20.1106 <!----> 20.1107 - 20.1108 - <dt id=HTML5>[HTML5] 20.1109 - 20.1110 - <dd>Ian Hickson. <a 20.1111 - href="http://www.w3.org/TR/2011/WD-html5-20110525/"><cite>HTML5.</cite></a> 20.1112 - 25 May 2011. W3C Working Draft. (Work in progress.) URL: <a 20.1113 - href="http://www.w3.org/TR/2011/WD-html5-20110525/">http://www.w3.org/TR/2011/WD-html5-20110525/</a> 20.1114 - </dd> 20.1115 - <!----> 20.1116 - 20.1117 - <dt id=SVG11>[SVG11] 20.1118 - 20.1119 - <dd>Erik Dahlström; et al. <a 20.1120 - href="http://www.w3.org/TR/2011/REC-SVG11-20110816/"><cite>Scalable 20.1121 - Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011. 20.1122 - W3C Recommendation. URL: <a 20.1123 - href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a> 20.1124 - </dd> 20.1125 - <!----> 20.1126 </dl> 20.1127 <!--end-informative--> 20.1128 20.1129 @@ -1552,110 +1499,63 @@ 20.1130 <li>conformance 20.1131 <ul> 20.1132 <li>authoring tool, <a href="#conform-authoring-tool" 20.1133 - title="conformance, authoring tool"><strong>9.2.</strong></a> 20.1134 + title="conformance, authoring tool"><strong>8.2.</strong></a> 20.1135 20.1136 <li>processor, <a href="#conform-processor" 20.1137 - title="conformance, processor"><strong>9.2.</strong></a> 20.1138 + title="conformance, processor"><strong>8.2.</strong></a> 20.1139 20.1140 <li>style sheet, <a href="#conform-style-sheet" 20.1141 - title="conformance, style sheet"><strong>9.2.</strong></a> 20.1142 + title="conformance, style sheet"><strong>8.2.</strong></a> 20.1143 </ul> 20.1144 20.1145 <li><a href="#CSS-interface"><code>CSS</code></a>, <a 20.1146 - href="#CSS-interface" title=CSS><strong>8.7.</strong></a> 20.1147 + href="#CSS-interface" title=CSS><strong>7.6.</strong></a> 20.1148 20.1149 <li><a href="#cssconditionrule"><code>CSSConditionRule</code></a>, <a 20.1150 - href="#cssconditionrule" title=CSSConditionRule><strong>8.3.</strong></a> 20.1151 - 20.1152 - <li><a href="#cssdocumentrule"><code>CSSDocumentRule</code></a>, <a 20.1153 - href="#cssdocumentrule" title=CSSDocumentRule><strong>8.6.</strong></a> 20.1154 + href="#cssconditionrule" title=CSSConditionRule><strong>7.3.</strong></a> 20.1155 20.1156 <li><a href="#cssgroupingrule"><code>CSSGroupingRule</code></a>, <a 20.1157 - href="#cssgroupingrule" title=CSSGroupingRule><strong>8.2.</strong></a> 20.1158 + href="#cssgroupingrule" title=CSSGroupingRule><strong>7.2.</strong></a> 20.1159 20.1160 <li><a href="#cssmediarule"><code>CSSMediaRule</code></a>, <a 20.1161 - href="#cssmediarule" title=CSSMediaRule><strong>8.4.</strong></a> 20.1162 + href="#cssmediarule" title=CSSMediaRule><strong>7.4.</strong></a> 20.1163 20.1164 <li><a href="#csssupportsrule"><code>CSSSupportsRule</code></a>, <a 20.1165 - href="#csssupportsrule" title=CSSSupportsRule><strong>8.5.</strong></a> 20.1166 - 20.1167 - <li>‘<code class=css>@document</code>’ rule, <a href="#document-rule" 20.1168 - title="'@document' rule"><strong>7.</strong></a> 20.1169 - 20.1170 - <li>domain(), <a href="#url-domain" 20.1171 - title="domain()"><strong>7.</strong></a> 20.1172 - 20.1173 - <li>domain matching function, <a href="#domain-matching-function" 20.1174 - title="domain matching function"><strong>7.</strong></a> 20.1175 - 20.1176 - <li>exact url matching function, <a href="#exact-url-matching-function" 20.1177 - title="exact url matching function"><strong>7.</strong></a> 20.1178 + href="#csssupportsrule" title=CSSSupportsRule><strong>7.5.</strong></a> 20.1179 20.1180 <li>group rule body, <a href="#group-rule-body" 20.1181 title="group rule body"><strong>3.</strong></a> 20.1182 20.1183 - <li>‘<code class=css>@media</code>’ rule, <a href="#media-rule" 20.1184 + <li>‘<code class=css>@media</code>’ rule, <a href="#atmedia-rule" 20.1185 title="'@media' rule"><strong>5.</strong></a> 20.1186 20.1187 - <li>regexp(), <a href="#url-regexp" 20.1188 - title="regexp()"><strong>7.</strong></a> 20.1189 - 20.1190 <li>support, <a href="#dfn-support" 20.1191 title=support><strong>6.1.</strong></a> 20.1192 20.1193 - <li>supports_condition, <a href="#supportscondition" 20.1194 + <li>supports_condition, <a href="#supports_condition" 20.1195 title="supports_condition"><strong>6.</strong></a> 20.1196 20.1197 - <li>supports_condition_in_parens, <a href="#supportsconditioninparens" 20.1198 + <li>supports_condition_in_parens, <a href="#supports_condition_in_parens" 20.1199 title="supports_condition_in_parens"><strong>6.</strong></a> 20.1200 20.1201 - <li>supports_conjunction, <a href="#supportsconjunction" 20.1202 + <li>supports_conjunction, <a href="#supports_conjunction" 20.1203 title="supports_conjunction"><strong>6.</strong></a> 20.1204 20.1205 <li>supports_declaration_condition, <a 20.1206 - href="#supportsdeclarationcondition" 20.1207 + href="#supports_declaration_condition" 20.1208 title="supports_declaration_condition"><strong>6.</strong></a> 20.1209 20.1210 - <li>supports_disjunction, <a href="#supportsdisjunction" 20.1211 + <li>supports_disjunction, <a href="#supports_disjunction" 20.1212 title="supports_disjunction"><strong>6.</strong></a> 20.1213 20.1214 - <li>supports_negation, <a href="#supportsnegation" 20.1215 + <li>supports_negation, <a href="#supports_negation" 20.1216 title="supports_negation"><strong>6.</strong></a> 20.1217 20.1218 - <li>‘<a href="#dfn-support"><code class=css>@supports</code></a>’ 20.1219 - rule, <a href="#supports-rule" 20.1220 - title="'@supports' rule"><strong>6.</strong></a> 20.1221 + <li>‘<code class=css>@supports</code>’ rule, <a 20.1222 + href="#atsupports-rule" title="'@supports' rule"><strong>6.</strong></a> 20.1223 20.1224 - <li>supports_rule, <a href="#supportsrule" 20.1225 + <li>supports_rule, <a href="#supports_rule" 20.1226 title="supports_rule"><strong>6.</strong></a> 20.1227 - 20.1228 - <li>url(), <a href="#url-exact" title="url()"><strong>7.</strong></a> 20.1229 - 20.1230 - <li>URL matching functions, <a href="#url-matching-functions" 20.1231 - title="URL matching functions"><strong>7.</strong></a> 20.1232 - <ul> 20.1233 - <li>domain, <a href="#url-domain" 20.1234 - title="URL matching functions, domain"><strong>7.</strong></a> 20.1235 - 20.1236 - <li>exact, <a href="#url-exact" 20.1237 - title="URL matching functions, exact"><strong>7.</strong></a> 20.1238 - 20.1239 - <li>prefix, <a href="#url-prefix" 20.1240 - title="URL matching functions, prefix"><strong>7.</strong></a> 20.1241 - 20.1242 - <li>regular expression, <a href="#url-regexp" 20.1243 - title="URL matching functions, regular expression"><strong>7.</strong></a> 20.1244 - </ul> 20.1245 - 20.1246 - <li>URL of the document being styled, <a 20.1247 - href="#url-of-the-document-being-styled" 20.1248 - title="URL of the document being styled"><strong>7.</strong></a> 20.1249 - 20.1250 - <li>url-prefix(), <a href="#url-prefix" 20.1251 - title="url-prefix()"><strong>7.</strong></a> 20.1252 - 20.1253 - <li>url prefix matching function, <a href="#url-prefix-matching-function" 20.1254 - title="url prefix matching function"><strong>7.</strong></a> 20.1255 </ul> 20.1256 <!--end-index--> 20.1257 </html>
21.1 --- a/css3-conditional/Overview.src.html Mon Oct 22 00:33:44 2012 +0200 21.2 +++ b/css3-conditional/Overview.src.html Mon Oct 22 00:41:17 2012 +0200 21.3 @@ -27,7 +27,7 @@ 21.4 <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a> 21.5 21.6 <dt>Previous version: 21.7 - <dd><a href="http://www.w3.org/TR/2011/WD-css3-conditional-20110901/">http://www.w3.org/TR/2011/WD-css3-conditional-20110901/</a></dd> 21.8 + <dd><a href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/">http://www.w3.org/TR/2012/WD-css3-conditional-20120911/</a></dd> 21.9 21.10 <dt>Editors: 21.11 <dd class=vcard><a class=fn href="http://dbaron.org/">L. David Baron</a>, 21.12 @@ -64,8 +64,8 @@ 21.13 which builds on CSS level 1 [[CSS1]]. 21.14 The main extensions compared to level 2 are 21.15 allowing nesting of certain at-rules inside '@media', 21.16 - the addition of the '@supports' and '@document' 21.17 - rules for conditional processing. 21.18 + and the addition of the '@supports' 21.19 + rule for conditional processing. 21.20 21.21 <h2 class="no-num no-toc" id="status">Status of this document</h2> 21.22 21.23 @@ -89,12 +89,16 @@ 21.24 <li>The '@supports' rule is at risk; if interoperable 21.25 implementations are not found, it may be removed to advance the other 21.26 features in this specification to Proposed Recommendation.</li> 21.27 +</ul> 21.28 21.29 - <li>The '@document' rule is at risk; if interoperable 21.30 - implementations are not found, it may be removed to advance the other 21.31 - features in this specification to Proposed Recommendation.</li> 21.32 +<!-- 21.33 21.34 -</ul> 21.35 + Things to go in level 4: 21.36 + 21.37 + * Create some way to put these new conditional things on an @import. 21.38 + * The @document rule (commented out, down below). 21.39 + 21.40 +--> 21.41 21.42 <h2 class="no-num no-toc" id="contents">Table of contents</h2> 21.43 21.44 @@ -121,8 +125,8 @@ 21.45 to combine CSS features involving @-rules with media specific style 21.46 sheets within a single style sheet.</p> 21.47 21.48 - <p>This specification also defines additional types of conditional 21.49 - group rules, '@supports' and '@document', to 21.50 + <p>This specification also defines an additional type of conditional 21.51 + group rule, '@supports', to 21.52 address author and user requirements.</p> 21.53 21.54 <p>The '@supports' rule allows CSS to be conditioned on 21.55 @@ -133,11 +137,6 @@ 21.56 mechanisms, and for other cases where a set of related styles needs to 21.57 be conditioned on property support.</p> 21.58 21.59 - <p>The '@document' rule allows CSS to be conditioned on the 21.60 - page to which the style sheet is being applied. This allows users to 21.61 - apply styles to a particular page or group of pages, which greatly 21.62 - increases the power of user style sheets.</p> 21.63 - 21.64 <h3 id="placement">Module Interactions</h3> 21.65 21.66 <p>This module replaces and extends the '@media' rule 21.67 @@ -191,13 +190,7 @@ 21.68 }</pre> 21.69 <p>causes a particular CSS rule (making elements with ID "navigation" be 21.70 display:none) apply only when the style sheet is used for a print 21.71 -medium. Likewise, this CSS rule:</p> 21.72 -<pre>@document url("http://www.example.com/") { 21.73 - #example1 { display: none } 21.74 -}</pre> 21.75 -<p>does the same type of conditional application, but using a different 21.76 -condition: whether the style sheet is being applied to the page 21.77 -<code>http://www.example.com/</code>.</p> 21.78 +medium. 21.79 </div> 21.80 21.81 <p>Each conditional group rule has a condition, which at any time 21.82 @@ -238,11 +231,6 @@ 21.83 21.84 <h2 id="contents-of">Contents of conditional group rules</h2> 21.85 21.86 -<p class="issue">There is also likely demand for using these 21.87 -conditions with '@import'. We should see if we can 21.88 -come up with sensible syntax for that, perhaps functional notation 21.89 -at the end of the '@import' rule.</p> 21.90 - 21.91 <p>The syntax of each conditional group rule consists of some syntax 21.92 specific to the type of rule followed by a <dfn>group rule body</dfn>, 21.93 which is a block (pair of braces) containing a sequence of rules.</p> 21.94 @@ -259,7 +247,7 @@ 21.95 21.96 <pre>nested_statement 21.97 : ruleset | media | page | font_face_rule | keyframes_rule | 21.98 - supports_rule | document_rule 21.99 + supports_rule 21.100 ; 21.101 21.102 group_rule_body 21.103 @@ -267,10 +255,10 @@ 21.104 ;</pre> 21.105 <p> 21.106 in which all the productions are defined in that grammar with the 21.107 -exception of <code>font_face_rule</code> <span class="issue">not</span> 21.108 +exception of <code>font_face_rule</code> 21.109 defined in [[!CSS3-FONTS]], <code>keyframes_rule</code> defined in 21.110 -[[!CSS3-ANIMATIONS]], and <code>media</code>, <code>supports_rule</code> 21.111 -and <code>document_rule</code> defined in this specification.</p> 21.112 +[[!CSS3-ANIMATIONS]], and <code>media</code> and <code>supports_rule</code> 21.113 +defined in this specification.</p> 21.114 21.115 <p>In general, future CSS specifications that add new @-rules that are 21.116 not forbidden to occur after some other types of rules should modify 21.117 @@ -307,7 +295,7 @@ 21.118 21.119 <p>The <dfn>'@media' rule</dfn> is a conditional group rule whose 21.120 condition is a media query. It consists of the at-keyword 21.121 -'@media' followed by a (possibly empty) media query (as 21.122 +'@media' followed by a (possibly empty) media query list (as 21.123 defined in [[!MEDIAQ]]), followed by a group rule body. The condition 21.124 of the rule is the result of the media query.</p> 21.125 21.126 @@ -368,10 +356,13 @@ 21.127 <p>This extends the lexical scanner in the 21.128 <a href="http://www.w3.org/TR/CSS21/grammar.html">Grammar of CSS 2.1</a> 21.129 ([[!CSS21]], Appendix G) by adding: 21.130 -<pre>@{S}{U}{P}{P}{O}{R}{T}{S} {return SUPPORTS_SYM;}</pre> 21.131 +<pre> 21.132 +@{S}{U}{P}{P}{O}{R}{T}{S} {return SUPPORTS_SYM;} 21.133 +{O}{R} {return OR;} 21.134 +</pre> 21.135 <p>and the grammar by adding</p> 21.136 <pre><dfn>supports_rule</dfn> 21.137 - : SUPPORTS_SYM S+ supports_condition group_rule_body 21.138 + : SUPPORTS_SYM S* supports_condition group_rule_body 21.139 ; 21.140 21.141 <dfn>supports_condition</dfn> 21.142 @@ -384,24 +375,26 @@ 21.143 ; 21.144 21.145 <dfn>supports_negation</dfn> 21.146 - : 'not' S* supports_condition_in_parens 21.147 + : NOT S* supports_condition_in_parens 21.148 ; 21.149 21.150 <dfn>supports_conjunction</dfn> 21.151 - : supports_condition_in_parens ( 'and' S* supports_condition_in_parens )+ 21.152 + : supports_condition_in_parens ( AND S* supports_condition_in_parens )+ 21.153 ; 21.154 21.155 <dfn>supports_disjunction</dfn> 21.156 - : supports_condition_in_parens ( 'or' S* supports_condition_in_parens )+ 21.157 + : supports_condition_in_parens ( OR S* supports_condition_in_parens )+ 21.158 ; 21.159 21.160 <dfn>supports_declaration_condition</dfn> 21.161 - : '(' S* core_declaration ')' S* 21.162 + : '(' S* core_declaration ')' S* | FUNCTION S* [any|unused]* ')' 21.163 ;</pre> 21.164 <p>in which <code>core_declaration</code> is the production 21.165 <code>declaration</code> in the core syntax of CSS defined in <a 21.166 href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">section 21.167 -4.1.1 (Tokenization)</a> of [[!CSS21]].</p> 21.168 +4.1.1 (Tokenization)</a> of [[!CSS21]], 21.169 +and the <code>AND</code> and <code>NOT</code> tokens are defined in 21.170 +the Media Queries specification [[!MEDIAQ]].</p> 21.171 21.172 <p>Any ''@supports'' rule that does not parse according to the grammar 21.173 above is invalid. Style sheets <strong>must not</strong> use such a 21.174 @@ -413,12 +406,6 @@ 21.175 that do not meet the forward-compatible syntax for declarations cause 21.176 the entire ''@supports'' rule to be ignored.</p> 21.177 21.178 -<p class="issue">Is any further allowance for forward-compatible parsing 21.179 -needed, for example, to allow additional features (such as, say, 21.180 -selector tests) to be added to the ''@supports'' rule? Or are these 21.181 -forward-compatible parsing rules the best solution for such future 21.182 -expansion anyway?</p> 21.183 - 21.184 <p>Each of these grammar terms is associated with a boolean result, as 21.185 follows:</p> 21.186 <dl> 21.187 @@ -455,8 +442,11 @@ 21.188 21.189 <dt>supports_declaration_condition</dt> 21.190 <dd> 21.191 - The result is whether the CSS processor <a 21.192 - href="#support-definition">supports</a> the declaration. 21.193 + The result is false if this corresponds to a functional notation; 21.194 + otherwise, the result is whether the CSS processor <a 21.195 + href="#support-definition">supports</a> the declaration 21.196 + within the parentheses. 21.197 + <span class="note">Note that future levels may define functions that can evaluate to true.</span> 21.198 </dd> 21.199 </dl> 21.200 21.201 @@ -602,6 +592,7 @@ 21.202 in order to consider the declaration supported, either inside a ruleset 21.203 or in the declaration condition of an ''@supports'' rule.</p> 21.204 21.205 +<!-- 21.206 <h2 id="at-document">Document queries: the '@document' rule</h2> 21.207 21.208 <p>The <dfn>'@document' rule</dfn> is a conditional group 21.209 @@ -797,6 +788,8 @@ 21.210 url_match_fn 21.211 : (URI | FUNCTION S* STRING S* ')' ) S* 21.212 ;</pre> 21.213 +--> 21.214 + 21.215 21.216 <h2 id="apis">APIs</h2> 21.217 21.218 @@ -807,7 +800,9 @@ 21.219 21.220 <pre class='idl'>partial interface CSSRule { 21.221 const unsigned short SUPPORTS_RULE = 12; 21.222 + <!-- 21.223 const unsigned short DOCUMENT_RULE = 13; 21.224 + --> 21.225 }</pre> 21.226 21.227 21.228 @@ -911,7 +906,7 @@ 21.229 <pre class='idl'>interface CSSSupportsRule : CSSConditionRule { 21.230 }</pre> 21.231 21.232 - 21.233 +<!-- 21.234 <h3 id="the-cssdocumentrule-interface"> 21.235 The <code>CSSDocumentRule</code> interface</h3> 21.236 21.237 @@ -919,6 +914,7 @@ 21.238 21.239 <pre class='idl'>interface CSSDocumentRule : CSSConditionRule { 21.240 }</pre> 21.241 +--> 21.242 21.243 21.244 <h3 id='the-css-interface'> 21.245 @@ -951,6 +947,17 @@ 21.246 </dl> 21.247 21.248 21.249 +<h2 class=no-num id="grammar">Grammar</h2> 21.250 + 21.251 +<p>In order to allow these new @-rules in CSS style sheets, this 21.252 +specification modifies the <code>stylesheet</code> production in the <a 21.253 +href="http://www.w3.org/TR/CSS21/grammar.html">Appendix G</a> grammar of 21.254 +[[!CSS21]] by replacing the <code>media</code> production defined in 21.255 +[[!CSS21]] with the <code>media</code> production defined in this one, 21.256 +and additionally inserting <code>| supports_rule</code> 21.257 +alongside <code>ruleset | media | page</code>.</p> 21.258 + 21.259 + 21.260 <h2 id="conformance">Conformance</h2> 21.261 21.262 <h3 id="base-modules">Base Modules</h3> 21.263 @@ -1094,15 +1101,29 @@ 21.264 <p>The specification will remain Candidate Recommendation for at least 21.265 six months. 21.266 21.267 -<h2 class=no-num id="grammar">Grammar</h2> 21.268 +<h2 id="changes"> 21.269 +Changes</h2> 21.270 21.271 -<p>In order to allow these new @-rules in CSS style sheets, this 21.272 -specification modifies the <code>stylesheet</code> production in the <a 21.273 -href="http://www.w3.org/TR/CSS21/grammar.html">Appendix G</a> grammar of 21.274 -[[!CSS21]] by replacing the <code>media</code> production defined in 21.275 -[[!CSS21]] with the <code>media</code> production defined in this one, 21.276 -and additionally inserting <code>| supports_rule | document_rule</code> 21.277 -alongside <code>ruleset | media | page</code>.</p> 21.278 +<p>The following (non-editorial) changes were made to this specification since the 21.279 +<a href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/">11 September 2012 Working Draft</a>: 21.280 + 21.281 +<ul> 21.282 + <li>Removed ''@document'' rule; it has been deferred to Level 4. 21.283 + <li>Allow functional notation in ''@supports'' queries to be valid (to allow for future extensions), 21.284 + but treat such notations as always being false. 21.285 + <li>Corrected the grammar as follows: 21.286 +<pre> 21.287 +- : SUPPORTS_SYM S+ supports_condition group_rule_body 21.288 ++ : SUPPORTS_SYM S* supports_condition group_rule_body 21.289 +</pre> 21.290 +<pre> 21.291 +- : (URI | FUNCTION) S* 21.292 ++ : (URI | FUNCTION S* STRING S* ')' ) S* 21.293 +</pre> 21.294 + <li>Switched "and", "or", and "not" keywords to use appropriate productions rather than literals. 21.295 + <li>Clarified definition of support used for interpreting ''@support'' rules 21.296 + and its relationship to CSS forwards-compatible parsing rules. 21.297 +</ul> 21.298 21.299 <h2 class=no-num id="acknowledgments">Acknowledgments</h2> 21.300
22.1 --- a/css3-exclusions/Exclusions.src.html Mon Oct 22 00:33:44 2012 +0200 22.2 +++ b/css3-exclusions/Exclusions.src.html Mon Oct 22 00:41:17 2012 +0200 22.3 @@ -335,7 +335,7 @@ 22.4 The above figure illustrates how exclusions are combined. The outermost box represents 22.5 an element's content box. The A, B, C and D darker gray boxes represent exclusions 22.6 in the element's <span>wrapping context</span>. A, B, C and D have their respective 'wrap-flow' 22.7 - set to 'both', 'start', 'end' and 'clear' respectively. The lighter gray areas show 22.8 + computed to 'both', 'start', 'end' and 'clear' respectively. The lighter gray areas show 22.9 the additional areas that are excluded for inline layout as a result of the 'wrap-flow' 22.10 value. For example, the area to the right of 'B' cannot be used for inline layout 22.11 because the 'wrap-flow' for 'B' is 'start'. 22.12 @@ -479,7 +479,7 @@ 22.13 <div class="note"> 22.14 Exclusions defined by an element's descendants still contribute to their containing block's 22.15 <span>wrapping context</span>. If that containing block is a child of an element with 'wrap-through' 22.16 - set to none, or the element itself, then exclusion still have an effect on the children of that 22.17 + computes to none, or the element itself, then exclusion still have an effect on the children of that 22.18 containing block element. 22.19 </div> 22.20 22.21 @@ -1336,14 +1336,29 @@ 22.22 22.23 <h3 id="declaring-shapes">Declaring Shapes</h3> 22.24 <p> 22.25 - Shapes are declared with the 'shape-outside' or 'shape-inside' properties. 22.26 - The 'shape-outside' property changes the geometry of an <span>exclusion element</span>'s 22.27 - <span>exclusion area</span> or or a float element's <span>float area</span>. 22.28 - If the element is not an <span>exclusion element</span> 22.29 - (see the 'wrap-flow' property) or a float, then the 'shape-outside' property has no effect. 22.30 + Shapes are declared with 22.31 + the 'shape-outside' 22.32 + or 'shape-inside' properties, 22.33 + with possible modifications 22.34 + from the 'shape-margin' 22.35 + and 'shape-padding' properties. 22.36 + The shape defined by 22.37 + the 'shape-outside' 22.38 + and 'shape-margin' properties 22.39 + changes the geometry 22.40 + of an <span>exclusion element</span>'s 22.41 + <span>exclusion area</span> 22.42 + or a float element's 22.43 + <span>float area</span>. 22.44 + If the element is not 22.45 + an <span>exclusion element</span> 22.46 + (see the 'wrap-flow' property) 22.47 + or a float, 22.48 + then the 'shape-outside' property 22.49 + has no effect. 22.50 </p> 22.51 <p> 22.52 - The 'shape-inside' property defines an element's <span>content area</span> and 22.53 + The shape defined by the 'shape-inside' and 'shape-padding' properties defines an element's <span>content area</span> and 22.54 the element's inline flow content wraps into that shape. The 'shape-inside' property 22.55 applies to all block-level elements. 22.56 </p> 22.57 @@ -1422,7 +1437,7 @@ 22.58 and 'A', 'B', 'C' and 'C' represent exclusions 22.59 with a complex shape 22.60 and their 'wrap-flow' property 22.61 - set to 'both', 'start', 'end' and 'clear', 22.62 + computes to 'both', 'start', 'end' and 'clear', 22.63 respectively.</p> 22.64 22.65 <p>As illustrated in the picture, 22.66 @@ -1532,9 +1547,9 @@ 22.67 </div> 22.68 22.69 <p>Overflow content can overlap 22.70 - the bottom edge of a shape-inside, 22.71 + the bottom edge of a shape, 22.72 and overflow content can be displayed 22.73 - below the content area defined by shape-inside. 22.74 + below the content area defined by shape. 22.75 When content overflows in the block direction, 22.76 the last line in the content area determines its width(s) 22.77 by finding the minimum shape width(s) 22.78 @@ -1546,13 +1561,18 @@ 22.79 or a zero-width line 22.80 if (for instance) the shape's bottom edge 22.81 is a continuous curve. 22.82 + In degenerate cases, 22.83 + there may be no content 22.84 + that fits inside the content area 22.85 + defined by the shape. 22.86 Further overflow is laid out 22.87 - as if the shape-inside was set to 'auto'.</p> 22.88 + below the shape's bottom edge 22.89 + as if 'shape-inside' computes to 'auto'.</p> 22.90 22.91 <div class='figure'> 22.92 <img alt="Overflow interacting with rounded rect" style="display:inline-block;vertical-align:top" src="images/rounded-rect-overflow.png"/> 22.93 <img alt="Overflow interacting with ellipse" style="display:inline-block;vertical-align:top" src="images/ellipse-overflow.png"/> 22.94 - <p class="caption">Overflow interacting with the bottom edge of shapes.</p> 22.95 + <p class="caption">Overflow interacting with the bottom edge of shapes defined by 'shape-inside' and 'shape-padding'.</p> 22.96 </div> 22.97 22.98 <!-- End section "The shape-inside property" -->
23.1 --- a/css3-exclusions/Overview.html Mon Oct 22 00:33:44 2012 +0200 23.2 +++ b/css3-exclusions/Overview.html Mon Oct 22 00:41:17 2012 +0200 23.3 @@ -7,16 +7,18 @@ 23.4 <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 23.5 <title>CSS Exclusions and Shapes Module Level 3</title> 23.6 23.7 - <link href="http://purl.org/dc/terms/" rel=schema.DC> 23.8 - <meta content="CSS Exclusions and Shapes Module Level 3" name=DC.title> 23.9 - <meta content=text name=DC.type> 23.10 - <meta content=2012-10-01 name=DC.issued> 23.11 - <meta content="http://dev.w3.org/csswg/css3-exclusions/" name=DC.creator> 23.12 - <meta content=W3C name=DC.publisher> 23.13 - <meta content="http://www.w3.org/TR/2012/ED-css3-exclusions-20121001/" 23.14 - name=DC.identifier> 23.15 + <link href="http://purl.org/dc/terms/" rel=schema.dcterms> 23.16 <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 23.17 - rel=DC.rights> 23.18 + rel=dcterms.rights> 23.19 + <meta content="CSS Exclusions and Shapes Module Level 3" 23.20 + name=dcterms.title> 23.21 + <meta content=text name=dcterms.type> 23.22 + <meta content=2012-10-19 name=dcterms.issued> 23.23 + <meta content="http://dev.w3.org/csswg/css3-exclusions/" 23.24 + name=dcterms.creator> 23.25 + <meta content=W3C name=dcterms.publisher> 23.26 + <meta content="http://www.w3.org/TR/2012/ED-css3-exclusions-20121019/" 23.27 + name=dcterms.identifier> 23.28 <link href="../shared/style/default.css" rel=stylesheet type="text/css"> 23.29 <style type="text/css"> 23.30 .singleImgExample { 23.31 @@ -50,14 +52,15 @@ 23.32 23.33 <h1 id=css-exclusions-module>CSS Exclusions and Shapes Module Level 3</h1> 23.34 23.35 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 1 October 2012</h2> 23.36 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 19 October 23.37 + 2012</h2> 23.38 23.39 <dl> 23.40 <dt>This version: 23.41 23.42 <dd><a 23.43 href="http://dev.w3.org/csswg/css3-exclusions/">http://dev.w3.org/csswg/css3-exclusions/</a></dd> 23.44 - <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-exclusions-20121001/">http://www.w3.org/TR/2012/WD-css3-exclusions-20121001/</a></dd>--> 23.45 + <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-exclusions-20121019/">http://www.w3.org/TR/2012/WD-css3-exclusions-20121019/</a></dd>--> 23.46 23.47 <dt>Latest version: 23.48 23.49 @@ -631,7 +634,7 @@ 23.50 boxes represent exclusions in the element's <a 23.51 href="#wrapping-context">wrapping context</a>. A, B, C and D have their 23.52 respective ‘<a href="#wrap-flow"><code 23.53 - class=property>wrap-flow</code></a>’ set to ‘<code 23.54 + class=property>wrap-flow</code></a>’ computed to ‘<code 23.55 class=property>both</code>’, ‘<code class=property>start</code>’, 23.56 ‘<code class=property>end</code>’ and ‘<code 23.57 class=property>clear</code>’ respectively. The lighter gray areas show 23.58 @@ -800,7 +803,7 @@ 23.59 contribute to their containing block's <a 23.60 href="#wrapping-context">wrapping context</a>. If that containing block is 23.61 a child of an element with ‘<a href="#wrap-through"><code 23.62 - class=property>wrap-through</code></a>’ set to none, or the element 23.63 + class=property>wrap-through</code></a>’ computes to none, or the element 23.64 itself, then exclusion still have an effect on the children of that 23.65 containing block element.</div> 23.66 23.67 @@ -1765,22 +1768,29 @@ 23.68 <p> Shapes are declared with the ‘<a href="#shape-outside"><code 23.69 class=property>shape-outside</code></a>’ or ‘<a 23.70 href="#shape-inside"><code class=property>shape-inside</code></a>’ 23.71 - properties. The ‘<a href="#shape-outside"><code 23.72 - class=property>shape-outside</code></a>’ property changes the geometry 23.73 - of an <a href="#exclusion-element">exclusion element</a>‘<code 23.74 - class=css>s <a href="#exclusion-area">exclusion area</a> or or a float 23.75 - element</code>’s <a href="#float-area">float area</a>. If the element is 23.76 - not an <a href="#exclusion-element">exclusion element</a> (see the ‘<a 23.77 + properties, with possible modifications from the ‘<a 23.78 + href="#shape-margin"><code class=property>shape-margin</code></a>’ and 23.79 + ‘<a href="#shape-padding"><code 23.80 + class=property>shape-padding</code></a>’ properties. The shape defined 23.81 + by the ‘<a href="#shape-outside"><code 23.82 + class=property>shape-outside</code></a>’ and ‘<a 23.83 + href="#shape-margin"><code class=property>shape-margin</code></a>’ 23.84 + properties changes the geometry of an <a 23.85 + href="#exclusion-element">exclusion element</a>‘<code class=css>s <a 23.86 + href="#exclusion-area">exclusion area</a> or a float element</code>’s <a 23.87 + href="#float-area">float area</a>. If the element is not an <a 23.88 + href="#exclusion-element">exclusion element</a> (see the ‘<a 23.89 href="#wrap-flow"><code class=property>wrap-flow</code></a>’ property) 23.90 or a float, then the ‘<a href="#shape-outside"><code 23.91 class=property>shape-outside</code></a>’ property has no effect. 23.92 23.93 - <p> The ‘<a href="#shape-inside"><code 23.94 - class=property>shape-inside</code></a>’ property defines an element's <a 23.95 - href="#content-area">content area</a> and the element's inline flow 23.96 - content wraps into that shape. The ‘<a href="#shape-inside"><code 23.97 - class=property>shape-inside</code></a>’ property applies to all 23.98 - block-level elements. 23.99 + <p> The shape defined by the ‘<a href="#shape-inside"><code 23.100 + class=property>shape-inside</code></a>’ and ‘<a 23.101 + href="#shape-padding"><code class=property>shape-padding</code></a>’ 23.102 + properties defines an element's <a href="#content-area">content area</a> 23.103 + and the element's inline flow content wraps into that shape. The ‘<a 23.104 + href="#shape-inside"><code class=property>shape-inside</code></a>’ 23.105 + property applies to all block-level elements. 23.106 23.107 <h4 id=shape-outside-property><span class=secno>4.4.1. </span>The ‘<a 23.108 href="#shape-outside"><code class=property>shape-outside</code></a>’ 23.109 @@ -1875,7 +1885,7 @@ 23.110 class=property>B</code>’, ‘<code class=property>C</code>’ and 23.111 ‘<code class=property>C</code>’ represent exclusions with a complex 23.112 shape and their ‘<a href="#wrap-flow"><code 23.113 - class=property>wrap-flow</code></a>’ property set to ‘<code 23.114 + class=property>wrap-flow</code></a>’ property computes to ‘<code 23.115 class=property>both</code>’, ‘<code class=property>start</code>’, 23.116 ‘<code class=property>end</code>’ and ‘<code 23.117 class=property>clear</code>’, respectively. 23.118 @@ -2009,22 +2019,28 @@ 23.119 <p class=caption>Effect of shape-inside on inline content. 23.120 </div> 23.121 23.122 - <p>Overflow content can overlap the bottom edge of a shape-inside, and 23.123 - overflow content can be displayed below the content area defined by 23.124 - shape-inside. When content overflows in the block direction, the last line 23.125 - in the content area determines its width(s) by finding the minimum shape 23.126 - width(s) in the remaining area between the line's top edge and the shape's 23.127 - bottom edge. This can result in the line intersecting the shape's bottom 23.128 - edge, or a zero-width line if (for instance) the shape's bottom edge is a 23.129 - continuous curve. Further overflow is laid out as if the shape-inside was 23.130 - set to ‘<code class=property>auto</code>’. 23.131 + <p>Overflow content can overlap the bottom edge of a shape, and overflow 23.132 + content can be displayed below the content area defined by shape. When 23.133 + content overflows in the block direction, the last line in the content 23.134 + area determines its width(s) by finding the minimum shape width(s) in the 23.135 + remaining area between the line's top edge and the shape's bottom edge. 23.136 + This can result in the line intersecting the shape's bottom edge, or a 23.137 + zero-width line if (for instance) the shape's bottom edge is a continuous 23.138 + curve. In degenerate cases, there may be no content that fits inside the 23.139 + content area defined by the shape. Further overflow is laid out below the 23.140 + shape's bottom edge as if ‘<a href="#shape-inside"><code 23.141 + class=property>shape-inside</code></a>’ computes to ‘<code 23.142 + class=property>auto</code>’. 23.143 23.144 <div class=figure> <img alt="Overflow interacting with rounded rect" 23.145 src="images/rounded-rect-overflow.png" 23.146 style="display:inline-block;vertical-align:top"> <img 23.147 alt="Overflow interacting with ellipse" src="images/ellipse-overflow.png" 23.148 style="display:inline-block;vertical-align:top"> 23.149 - <p class=caption>Overflow interacting with the bottom edge of shapes. 23.150 + <p class=caption>Overflow interacting with the bottom edge of shapes 23.151 + defined by ‘<a href="#shape-inside"><code 23.152 + class=property>shape-inside</code></a>’ and ‘<a 23.153 + href="#shape-padding"><code class=property>shape-padding</code></a>’. 23.154 </div> 23.155 <!-- End section "The shape-inside property" --> 23.156
24.1 --- a/css3-exclusions/images/ellipse-overflow.graffle Mon Oct 22 00:33:44 2012 +0200 24.2 +++ b/css3-exclusions/images/ellipse-overflow.graffle Mon Oct 22 00:41:17 2012 +0200 24.3 @@ -14,7 +14,7 @@ 24.4 <key>BackgroundGraphic</key> 24.5 <dict> 24.6 <key>Bounds</key> 24.7 - <string>{{0, 0}, {576.00002479553223, 733}}</string> 24.8 + <string>{{0, 0}, {576, 733}}</string> 24.9 <key>Class</key> 24.10 <string>SolidGraphic</string> 24.11 <key>ID</key> 24.12 @@ -46,7 +46,7 @@ 24.13 <key>Creator</key> 24.14 <string>Alan Stearns</string> 24.15 <key>DisplayScale</key> 24.16 - <string>1 0/72 in = 1 0/72 in</string> 24.17 + <string>1 0/72 in = 1.0000 in</string> 24.18 <key>GraphDocumentVersion</key> 24.19 <integer>8</integer> 24.20 <key>GraphicsList</key> 24.21 @@ -90,6 +90,82 @@ 24.22 </dict> 24.23 <dict> 24.24 <key>Bounds</key> 24.25 + <string>{{169.19999408721924, 95.925125122070312}, {237.59999084472656, 166.64974975585938}}</string> 24.26 + <key>Class</key> 24.27 + <string>ShapedGraphic</string> 24.28 + <key>ID</key> 24.29 + <integer>23</integer> 24.30 + <key>Shape</key> 24.31 + <string>Circle</string> 24.32 + <key>Style</key> 24.33 + <dict> 24.34 + <key>fill</key> 24.35 + <dict> 24.36 + <key>Draws</key> 24.37 + <string>NO</string> 24.38 + </dict> 24.39 + <key>shadow</key> 24.40 + <dict> 24.41 + <key>Draws</key> 24.42 + <string>NO</string> 24.43 + </dict> 24.44 + <key>stroke</key> 24.45 + <dict> 24.46 + <key>Color</key> 24.47 + <dict> 24.48 + <key>b</key> 24.49 + <string>0.501953</string> 24.50 + <key>g</key> 24.51 + <string>0.0292403</string> 24.52 + <key>r</key> 24.53 + <string>0</string> 24.54 + </dict> 24.55 + <key>CornerRadius</key> 24.56 + <real>50</real> 24.57 + </dict> 24.58 + </dict> 24.59 + </dict> 24.60 + <dict> 24.61 + <key>Bounds</key> 24.62 + <string>{{176.50001239776611, 103.5}, {223, 151.5}}</string> 24.63 + <key>Class</key> 24.64 + <string>ShapedGraphic</string> 24.65 + <key>ID</key> 24.66 + <integer>4</integer> 24.67 + <key>Shape</key> 24.68 + <string>Circle</string> 24.69 + <key>Style</key> 24.70 + <dict> 24.71 + <key>fill</key> 24.72 + <dict> 24.73 + <key>Draws</key> 24.74 + <string>NO</string> 24.75 + </dict> 24.76 + <key>shadow</key> 24.77 + <dict> 24.78 + <key>Draws</key> 24.79 + <string>NO</string> 24.80 + </dict> 24.81 + <key>stroke</key> 24.82 + <dict> 24.83 + <key>Color</key> 24.84 + <dict> 24.85 + <key>b</key> 24.86 + <string>0.501953</string> 24.87 + <key>g</key> 24.88 + <string>0.0292403</string> 24.89 + <key>r</key> 24.90 + <string>0</string> 24.91 + </dict> 24.92 + <key>CornerRadius</key> 24.93 + <real>50</real> 24.94 + <key>Pattern</key> 24.95 + <integer>1</integer> 24.96 + </dict> 24.97 + </dict> 24.98 + </dict> 24.99 + <dict> 24.100 + <key>Bounds</key> 24.101 <string>{{208.25003433227539, 202.5}, {159.5, 28.75}}</string> 24.102 <key>Class</key> 24.103 <string>ShapedGraphic</string> 24.104 @@ -538,36 +614,6 @@ 24.105 </dict> 24.106 <dict> 24.107 <key>Bounds</key> 24.108 - <string>{{176.50001239776611, 103.5}, {223, 151.5}}</string> 24.109 - <key>Class</key> 24.110 - <string>ShapedGraphic</string> 24.111 - <key>ID</key> 24.112 - <integer>4</integer> 24.113 - <key>Shape</key> 24.114 - <string>Circle</string> 24.115 - <key>Style</key> 24.116 - <dict> 24.117 - <key>fill</key> 24.118 - <dict> 24.119 - <key>Draws</key> 24.120 - <string>NO</string> 24.121 - </dict> 24.122 - <key>shadow</key> 24.123 - <dict> 24.124 - <key>Draws</key> 24.125 - <string>NO</string> 24.126 - </dict> 24.127 - <key>stroke</key> 24.128 - <dict> 24.129 - <key>CornerRadius</key> 24.130 - <real>50</real> 24.131 - <key>Pattern</key> 24.132 - <integer>1</integer> 24.133 - </dict> 24.134 - </dict> 24.135 - </dict> 24.136 - <dict> 24.137 - <key>Bounds</key> 24.138 <string>{{144.00004291534424, 284.75}, {288, 28.75}}</string> 24.139 <key>Class</key> 24.140 <string>ShapedGraphic</string> 24.141 @@ -838,7 +884,7 @@ 24.142 <key>MasterSheets</key> 24.143 <array/> 24.144 <key>ModificationDate</key> 24.145 - <string>2012-10-01 20:14:45 +0000</string> 24.146 + <string>2012-10-19 18:39:21 +0000</string> 24.147 <key>Modifier</key> 24.148 <string>Alan Stearns</string> 24.149 <key>NotesVisible</key> 24.150 @@ -869,7 +915,7 @@ 24.151 <key>NSPaperSize</key> 24.152 <array> 24.153 <string>size</string> 24.154 - <string>{612.00002479553223, 792}</string> 24.155 + <string>{612, 792}</string> 24.156 </array> 24.157 <key>NSPrintReverseOrientation</key> 24.158 <array>
25.1 Binary file css3-exclusions/images/ellipse-overflow.png has changed
26.1 --- a/css3-exclusions/images/rounded-rect-overflow.graffle Mon Oct 22 00:33:44 2012 +0200 26.2 +++ b/css3-exclusions/images/rounded-rect-overflow.graffle Mon Oct 22 00:41:17 2012 +0200 26.3 @@ -14,9 +14,16 @@ 26.4 <key>BackgroundGraphic</key> 26.5 <dict> 26.6 <key>Bounds</key> 26.7 - <string>{{0, 0}, {576.00002479553223, 733}}</string> 26.8 + <string>{{0, 0}, {576, 733}}</string> 26.9 <key>Class</key> 26.10 <string>SolidGraphic</string> 26.11 + <key>FontInfo</key> 26.12 + <dict> 26.13 + <key>Font</key> 26.14 + <string>Helvetica</string> 26.15 + <key>Size</key> 26.16 + <real>13</real> 26.17 + </dict> 26.18 <key>ID</key> 26.19 <integer>2</integer> 26.20 <key>Style</key> 26.21 @@ -53,6 +60,80 @@ 26.22 <array> 26.23 <dict> 26.24 <key>Bounds</key> 26.25 + <string>{{144.00001239776611, 75}, {288, 216}}</string> 26.26 + <key>Class</key> 26.27 + <string>ShapedGraphic</string> 26.28 + <key>ID</key> 26.29 + <integer>1</integer> 26.30 + <key>Shape</key> 26.31 + <string>Rectangle</string> 26.32 + <key>Style</key> 26.33 + <dict> 26.34 + <key>fill</key> 26.35 + <dict> 26.36 + <key>Draws</key> 26.37 + <string>NO</string> 26.38 + </dict> 26.39 + <key>shadow</key> 26.40 + <dict> 26.41 + <key>Draws</key> 26.42 + <string>NO</string> 26.43 + </dict> 26.44 + <key>stroke</key> 26.45 + <dict> 26.46 + <key>Color</key> 26.47 + <dict> 26.48 + <key>b</key> 26.49 + <string>0.336538</string> 26.50 + <key>g</key> 26.51 + <string>0.692383</string> 26.52 + <key>r</key> 26.53 + <string>0.371516</string> 26.54 + </dict> 26.55 + <key>Width</key> 26.56 + <real>2</real> 26.57 + </dict> 26.58 + </dict> 26.59 + </dict> 26.60 + <dict> 26.61 + <key>Bounds</key> 26.62 + <string>{{167.40000629425049, 95.55023193359375}, {241.19999694824219, 174.8995361328125}}</string> 26.63 + <key>Class</key> 26.64 + <string>ShapedGraphic</string> 26.65 + <key>ID</key> 26.66 + <integer>23</integer> 26.67 + <key>Shape</key> 26.68 + <string>Rectangle</string> 26.69 + <key>Style</key> 26.70 + <dict> 26.71 + <key>fill</key> 26.72 + <dict> 26.73 + <key>Draws</key> 26.74 + <string>NO</string> 26.75 + </dict> 26.76 + <key>shadow</key> 26.77 + <dict> 26.78 + <key>Draws</key> 26.79 + <string>NO</string> 26.80 + </dict> 26.81 + <key>stroke</key> 26.82 + <dict> 26.83 + <key>Color</key> 26.84 + <dict> 26.85 + <key>b</key> 26.86 + <string>0.506072</string> 26.87 + <key>g</key> 26.88 + <string>0</string> 26.89 + <key>r</key> 26.90 + <string>0.0107934</string> 26.91 + </dict> 26.92 + <key>CornerRadius</key> 26.93 + <real>50</real> 26.94 + </dict> 26.95 + </dict> 26.96 + </dict> 26.97 + <dict> 26.98 + <key>Bounds</key> 26.99 <string>{{144.00004291534424, 304.75}, {288, 28.75}}</string> 26.100 <key>Class</key> 26.101 <string>ShapedGraphic</string> 26.102 @@ -165,7 +246,7 @@ 26.103 </dict> 26.104 <dict> 26.105 <key>Bounds</key> 26.106 - <string>{{190.25002479553223, 218.5}, {195.49998474121094, 28.75}}</string> 26.107 + <string>{{186.2499942779541, 218.5}, {203.5, 28.75}}</string> 26.108 <key>Class</key> 26.109 <string>ShapedGraphic</string> 26.110 <key>FontInfo</key> 26.111 @@ -389,7 +470,7 @@ 26.112 </dict> 26.113 <dict> 26.114 <key>Bounds</key> 26.115 - <string>{{183.50001239776611, 132.25}, {209, 28.75}}</string> 26.116 + <string>{{178.74998950958252, 132.25}, {219.00001525878906, 28.75}}</string> 26.117 <key>Class</key> 26.118 <string>ShapedGraphic</string> 26.119 <key>FontInfo</key> 26.120 @@ -501,7 +582,7 @@ 26.121 </dict> 26.122 <dict> 26.123 <key>Bounds</key> 26.124 - <string>{{226.00000858306885, 103.5}, {124.00000762939453, 28.75}}</string> 26.125 + <string>{{217.62500095367432, 103.5}, {140.75, 28.75}}</string> 26.126 <key>Class</key> 26.127 <string>ShapedGraphic</string> 26.128 <key>FontInfo</key> 26.129 @@ -613,7 +694,7 @@ 26.130 </dict> 26.131 <dict> 26.132 <key>Bounds</key> 26.133 - <string>{{175.50001239776611, 161}, {223, 28.75}}</string> 26.134 + <string>{{176.50001239776611, 161}, {223, 28.75}}</string> 26.135 <key>Class</key> 26.136 <string>ShapedGraphic</string> 26.137 <key>FontInfo</key> 26.138 @@ -746,8 +827,17 @@ 26.139 </dict> 26.140 <key>stroke</key> 26.141 <dict> 26.142 + <key>Color</key> 26.143 + <dict> 26.144 + <key>b</key> 26.145 + <string>0.506072</string> 26.146 + <key>g</key> 26.147 + <string>0</string> 26.148 + <key>r</key> 26.149 + <string>0.0107934</string> 26.150 + </dict> 26.151 <key>CornerRadius</key> 26.152 - <real>50</real> 26.153 + <real>41</real> 26.154 <key>Pattern</key> 26.155 <integer>1</integer> 26.156 </dict> 26.157 @@ -755,7 +845,7 @@ 26.158 </dict> 26.159 <dict> 26.160 <key>Bounds</key> 26.161 - <string>{{226.00000858306885, 247.25}, {124.00000762939453, 28.75}}</string> 26.162 + <string>{{217.62500095367432, 247.25}, {140.75, 28.75}}</string> 26.163 <key>Class</key> 26.164 <string>ShapedGraphic</string> 26.165 <key>FontInfo</key> 26.166 @@ -867,43 +957,6 @@ 26.167 </dict> 26.168 <dict> 26.169 <key>Bounds</key> 26.170 - <string>{{144.00001239776611, 75}, {288, 216}}</string> 26.171 - <key>Class</key> 26.172 - <string>ShapedGraphic</string> 26.173 - <key>ID</key> 26.174 - <integer>1</integer> 26.175 - <key>Shape</key> 26.176 - <string>Rectangle</string> 26.177 - <key>Style</key> 26.178 - <dict> 26.179 - <key>fill</key> 26.180 - <dict> 26.181 - <key>Draws</key> 26.182 - <string>NO</string> 26.183 - </dict> 26.184 - <key>shadow</key> 26.185 - <dict> 26.186 - <key>Draws</key> 26.187 - <string>NO</string> 26.188 - </dict> 26.189 - <key>stroke</key> 26.190 - <dict> 26.191 - <key>Color</key> 26.192 - <dict> 26.193 - <key>b</key> 26.194 - <string>0.336538</string> 26.195 - <key>g</key> 26.196 - <string>0.692383</string> 26.197 - <key>r</key> 26.198 - <string>0.371516</string> 26.199 - </dict> 26.200 - <key>Width</key> 26.201 - <real>2</real> 26.202 - </dict> 26.203 - </dict> 26.204 - </dict> 26.205 - <dict> 26.206 - <key>Bounds</key> 26.207 <string>{{144.00004291534424, 276}, {288, 28.75}}</string> 26.208 <key>Class</key> 26.209 <string>ShapedGraphic</string> 26.210 @@ -1062,7 +1115,7 @@ 26.211 <key>MasterSheets</key> 26.212 <array/> 26.213 <key>ModificationDate</key> 26.214 - <string>2012-09-28 00:06:34 +0000</string> 26.215 + <string>2012-10-19 18:46:12 +0000</string> 26.216 <key>Modifier</key> 26.217 <string>Alan Stearns</string> 26.218 <key>NotesVisible</key> 26.219 @@ -1093,7 +1146,7 @@ 26.220 <key>NSPaperSize</key> 26.221 <array> 26.222 <string>size</string> 26.223 - <string>{612.00002479553223, 792}</string> 26.224 + <string>{612, 792}</string> 26.225 </array> 26.226 <key>NSPrintReverseOrientation</key> 26.227 <array> 26.228 @@ -1138,7 +1191,7 @@ 26.229 <key>ExpandedCanvases</key> 26.230 <array/> 26.231 <key>Frame</key> 26.232 - <string>{{894, 390}, {711, 872}}</string> 26.233 + <string>{{894, 129}, {1029, 1133}}</string> 26.234 <key>ListView</key> 26.235 <true/> 26.236 <key>OutlineWidth</key> 26.237 @@ -1152,15 +1205,15 @@ 26.238 <key>SidebarWidth</key> 26.239 <integer>120</integer> 26.240 <key>VisibleRegion</key> 26.241 - <string>{{0, 0}, {576, 733}}</string> 26.242 + <string>{{71.5, 0}, {440, 489.5}}</string> 26.243 <key>Zoom</key> 26.244 - <real>1</real> 26.245 + <real>2</real> 26.246 <key>ZoomValues</key> 26.247 <array> 26.248 <array> 26.249 <string>Canvas 1</string> 26.250 - <real>1</real> 26.251 - <real>1</real> 26.252 + <real>2</real> 26.253 + <real>4</real> 26.254 </array> 26.255 </array> 26.256 </dict>
27.1 Binary file css3-exclusions/images/rounded-rect-overflow.png has changed
28.1 --- a/css3-flexbox/Overview.html Mon Oct 22 00:33:44 2012 +0200 28.2 +++ b/css3-flexbox/Overview.html Mon Oct 22 00:41:17 2012 +0200 28.3 @@ -1,23 +1,24 @@ 28.4 <!DOCTYPE html> 28.5 28.6 <html lang=en> 28.7 - <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ "> 28.8 + <head> 28.9 <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 28.10 <title>CSS Flexible Box Layout Module</title> 28.11 - 28.12 - <link href="http://purl.org/dc/terms/" rel=schema.DC> 28.13 - <meta content="CSS Flexible Box Layout Module" name=DC.title> 28.14 - <meta content=text name=DC.type> 28.15 - <meta content=2012-09-21 name=DC.issued> 28.16 - <meta content="http://dev.w3.org/csswg/css3-flexbox/" name=DC.creator> 28.17 - <meta content=W3C name=DC.publisher> 28.18 - <meta content="http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/" 28.19 - name=DC.identifier> 28.20 - <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 28.21 - rel=DC.rights> 28.22 + <!-- 28.23 + <link href="http://purl.org/dc/terms/" rel="schema.dcterms"> 28.24 + <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" rel="dcterms.rights"> 28.25 + --> 28.26 + 28.27 + <meta content="CSS Flexible Box Layout Module" name=dcterms.title> 28.28 + <meta content=text name=dcterms.type> 28.29 + <meta content=2012-10-16 name=dcterms.issued> 28.30 + <meta content="http://dev.w3.org/csswg/css3-flexbox/" name=dcterms.creator> 28.31 + <meta content=W3C name=dcterms.publisher> 28.32 + <meta content="http://www.w3.org/TR/2012/ED-css3-flexbox-20121016/" 28.33 + name=dcterms.identifier> 28.34 <link href="http://dev.w3.org/csswg/default.css" rel=stylesheet 28.35 type="text/css"> 28.36 - <link href="http://www.w3.org/StyleSheets/TR/W3C-CR" rel=stylesheet 28.37 + <link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel=stylesheet 28.38 type="text/css"> 28.39 <style> 28.40 code.one-line { white-space: pre; } 28.41 @@ -216,31 +217,30 @@ 28.42 28.43 <h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1> 28.44 28.45 - <h2 class="no-num no-toc" id=w3c-working>W3C Candidate Recommendation, 21 28.46 - September 2012</h2> 28.47 + <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 16 October 2012</h2> 28.48 28.49 <dl> 28.50 <dt>This version: 28.51 + <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20121016/">http://www.w3.org/TR/2012/CR-css3-flexbox-20121016/</a>--> 28.52 + 28.53 + <dd><a 28.54 + href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a> 28.55 + 28.56 + <dt>Latest version: 28.57 + <!--<dd><a href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a>--> 28.58 + 28.59 + <dd><a 28.60 + href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a> 28.61 + 28.62 + <dt>Editor's Draft: 28.63 + 28.64 + <dd><a 28.65 + href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a> 28.66 + 28.67 + <dt>Previous version: 28.68 28.69 <dd><a 28.70 href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/">http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/</a> 28.71 - <!--<dd><a href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a> --> 28.72 - 28.73 - <dt>Latest version: 28.74 - <!--<dd><a href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a>--> 28.75 - 28.76 - <dd><a 28.77 - href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a> 28.78 - 28.79 - <dt>Editor's Draft: 28.80 - 28.81 - <dd><a 28.82 - href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a> 28.83 - 28.84 - <dt>Previous version: 28.85 - 28.86 - <dd><a 28.87 - href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/</a> 28.88 28.89 <dt>Issues List: 28.90 28.91 @@ -313,46 +313,35 @@ 28.92 <h2 class="no-num no-toc" id=status>Status of this document</h2> 28.93 <!--begin-status--> 28.94 28.95 - <p><em>This section describes the status of this document at the time of 28.96 - its publication. Other documents may supersede this document. A list of 28.97 - current W3C publications and the latest revision of this technical report 28.98 - can be found in the <a href="http://www.w3.org/TR/">W3C technical reports 28.99 - index at http://www.w3.org/TR/.</a></em> 28.100 - 28.101 - <p>This document was produced by the <a 28.102 - href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> as a <a 28.103 - href="http://www.w3.org/Consortium/Process/tr#RecsCR">Candidate 28.104 - Recommendation.</a> 28.105 - 28.106 - <p>A Candidate Recommendation is a document that has been widely reviewed 28.107 - and is ready for implementation. W3C encourages everybody to implement 28.108 - this specification and return comments to the (<a 28.109 + <p>This is a public copy of the editors' draft. It is provided for 28.110 + discussion only and may change at any moment. Its publication here does 28.111 + not imply endorsement of its contents by W3C. Don't cite this document 28.112 + other than as work in progress. 28.113 + 28.114 + <p>The (<a 28.115 href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public 28.116 mailing list <a 28.117 href="mailto:www-style@w3.org?Subject=%5Bcss3-flexbox%5D%20PUT%20SUBJECT%20HERE"> 28.118 www-style@w3.org</a> (see <a 28.119 - href="http://www.w3.org/Mail/Request">instructions</a>). When sending 28.120 - e-mail, please put the text “css3-flexbox” in the subject, preferably 28.121 - like this: “[<!---->css3-flexbox<!---->] <em>…summary of 28.122 - comment…</em>” 28.123 - 28.124 - <p>Publication as a Candidate Recommendation does not imply endorsement by 28.125 - the W3C Membership. This is a draft document and may be updated, replaced 28.126 - or obsoleted by other documents at any time. It is inappropriate to cite 28.127 - this document as other than work in progress. 28.128 + href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for 28.129 + discussion of this specification. When sending e-mail, please put the text 28.130 + “css3-flexbox” in the subject, preferably like this: 28.131 + “[<!---->css3-flexbox<!---->] <em>…summary of comment…</em>” 28.132 + 28.133 + <p>This document was produced by the <a href="/Style/CSS/members">CSS 28.134 + Working Group</a> (part of the <a href="/Style/">Style Activity</a>). 28.135 28.136 <p>This document was produced by a group operating under the <a 28.137 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 28.138 - 2004 W3C Patent Policy</a>. W3C maintains a <a 28.139 - href="http://www.w3.org/2004/01/pp-impl/32061/status" 28.140 + href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent 28.141 + Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status" 28.142 rel=disclosure>public list of any patent disclosures</a> made in 28.143 connection with the deliverables of the group; that page also includes 28.144 instructions for disclosing a patent. An individual who has actual 28.145 knowledge of a patent which the individual believes contains <a 28.146 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential"> 28.147 - Essential Claim(s)</a> must disclose the information in accordance with <a 28.148 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure"> 28.149 - section 6 of the W3C Patent Policy</a>.</p> 28.150 + href="/Consortium/Patent-Policy-20040205/#def-essential">Essential 28.151 + Claim(s)</a> must disclose the information in accordance with <a 28.152 + href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the 28.153 + W3C Patent Policy</a>.</p> 28.154 <!--end-status--> 28.155 28.156 <p>The CR period will last at least until 20 March 2013. At the time of 28.157 @@ -396,7 +385,7 @@ 28.158 <li><a href="#flex-items"><span class=secno>4. </span> Flex Items</a> 28.159 <ul class=toc> 28.160 <li><a href="#abspos-items"><span class=secno>4.1. </span> 28.161 - Absolutely-Positioned Flex Items</a> 28.162 + Absolutely-Positioned Flex Children</a> 28.163 28.164 <li><a href="#item-margins"><span class=secno>4.2. </span> Flex Item 28.165 Margins</a> 28.166 @@ -920,12 +909,12 @@ 28.167 28.168 <p> The contents of a <a href="#flex-container"><i>flex container</i></a> 28.169 consists of zero or more <dfn id=flex-item title="flex item">flex 28.170 - items</dfn>: each child of a <a href="#flex-container"><i>flex 28.171 + items</dfn>: each in-flow child of a <a href="#flex-container"><i>flex 28.172 container</i></a> becomes a <a href="#flex-item"><i>flex item</i></a>, and 28.173 each contiguous run of text that is directly contained inside a <a 28.174 href="#flex-container"><i>flex container</i></a> is wrapped in an 28.175 - anonymous <a href="#flex-item"><i>flex item</i></a>. However, an anonymous 28.176 - flex item that contains only <a 28.177 + anonymous <a href="#flex-item"><i>flex item</i></a> element. However, an 28.178 + anonymous flex item that contains only <a 28.179 href="http://www.w3.org/TR/CSS21/text.html#white-space-prop">white 28.180 space</a> is not rendered, as if it were ‘<code 28.181 class=css>display:none</code>’. 28.182 @@ -1007,28 +996,29 @@ 28.183 href="#flex-item"><i>flex item</i></a>. 28.184 28.185 <h3 id=abspos-items><span class=secno>4.1. </span> Absolutely-Positioned 28.186 - Flex Items</h3> 28.187 - 28.188 - <p> An absolutely-positioned <a href="#flex-item"><i>flex item</i></a> does 28.189 - not participate in flex layout beyond the <a 28.190 - href="#algo-flex-order">reordering step</a>. However, if both ‘<code 28.191 - class=property>left</code>’ and ‘<code class=property>right</code>’ 28.192 - or both ‘<code class=property>top</code>’ and ‘<code 28.193 - class=property>bottom</code>’ are ‘<code class=css>auto</code>’, 28.194 - then the used value of those properties are computed from its <dfn 28.195 - id=flex-item-static-position>static position</dfn>, as follows: 28.196 + Flex Children</h3> 28.197 + 28.198 + <p> An absolutely-positioned child element of a <a 28.199 + href="#flex-container"><i>flex container</i></a> does not participate in 28.200 + flex layout beyond the <a href="#algo-flex-order">reordering step</a>. 28.201 + However, if both ‘<code class=property>left</code>’ and ‘<code 28.202 + class=property>right</code>’ or both ‘<code 28.203 + class=property>top</code>’ and ‘<code class=property>bottom</code>’ 28.204 + are ‘<code class=css>auto</code>’, then the used value of those 28.205 + properties are computed from its <dfn id=flex-item-static-position>static 28.206 + position</dfn>, as follows: 28.207 28.208 <p> If both ‘<code class=property>left</code>’ and ‘<code 28.209 class=property>right</code>’ are ‘<code class=css>auto</code>’, the 28.210 - <a href="#flex-item"><i>flex item</i></a> must be positioned so that its 28.211 - <a href="#main-start"><i>main-start</i></a> or <a 28.212 + absolutely-positioned child must be positioned so that its <a 28.213 + href="#main-start"><i>main-start</i></a> or <a 28.214 href="#cross-start"><i>cross-start</i></a> edge (whichever is in the 28.215 horizontal axis) is aligned with the <a 28.216 href="#flex-item-static-position"><i>static position</i></a>. If both 28.217 ‘<code class=property>top</code>’ and ‘<code 28.218 class=property>bottom</code>’ are ‘<code class=css>auto</code>’, the 28.219 - <a href="#flex-item"><i>flex item</i></a> must be positioned so that its 28.220 - <a href="#main-start"><i>main-start</i></a> or <a 28.221 + absolutely-positioned child must be positioned so that its <a 28.222 + href="#main-start"><i>main-start</i></a> or <a 28.223 href="#cross-start"><i>cross-start</i></a> edge (whichever is in the 28.224 vertical axis) is aligned with the <a 28.225 href="#flex-item-static-position"><i>static position</i></a>. 28.226 @@ -1036,16 +1026,16 @@ 28.227 <p> In the <a href="#main-axis"><i>main axis</i></a>, 28.228 28.229 <ol> 28.230 - <li> If there is a subsequent in-flow <a href="#flex-item"><i>flex 28.231 - item</i></a> on the same <i>flex line</i>, the <a 28.232 + <li> If there is a subsequent <a href="#flex-item"><i>flex item</i></a> on 28.233 + the same <i>flex line</i>, the <a 28.234 href="#flex-item-static-position"><i>static position</i></a> is the outer 28.235 <a href="#main-start"><i>main-start</i></a> edge of that <a 28.236 href="#flex-item"><i>flex item</i></a>. 28.237 28.238 - <li> Otherwise, if there is a preceding in-flow <a 28.239 - href="#flex-item"><i>flex item</i></a> on the same <i>flex line</i>, the 28.240 - <a href="#flex-item-static-position"><i>static position</i></a> is the 28.241 - outer <a href="#main-end"><i>main-end</i></a> edge of that <a 28.242 + <li> Otherwise, if there is a preceding <a href="#flex-item"><i>flex 28.243 + item</i></a> on the same <i>flex line</i>, the <a 28.244 + href="#flex-item-static-position"><i>static position</i></a> is the outer 28.245 + <a href="#main-end"><i>main-end</i></a> edge of that <a 28.246 href="#flex-item"><i>flex item</i></a>. 28.247 28.248 <li> Otherwise, the <a href="#flex-item-static-position"><i>static 28.249 @@ -1054,16 +1044,16 @@ 28.250 class=property>justify-content</code></a>’ on the <a 28.251 href="#flex-container"><i>flex container</i></a> as if the <a 28.252 href="#flex-item-static-position"><i>static position</i></a> were 28.253 - represented by a zero-sized flex item. 28.254 + represented by a zero-sized <a href="#flex-item"><i>flex item</i></a>. 28.255 </ol> 28.256 28.257 <p> In the <a href="#cross-axis"><i>cross axis</i></a>, 28.258 28.259 <ol> 28.260 - <li> If there is a preceding in-flow <a href="#flex-item"><i>flex 28.261 - item</i></a>, the <a href="#flex-item-static-position"><i>static 28.262 - position</i></a> is the <a href="#cross-start"><i>cross-start</i></a> 28.263 - edge of the <i>flex-line</i> that item is in. 28.264 + <li> If there is a preceding <a href="#flex-item"><i>flex item</i></a>, 28.265 + the <a href="#flex-item-static-position"><i>static position</i></a> is 28.266 + the <a href="#cross-start"><i>cross-start</i></a> edge of the 28.267 + <i>flex-line</i> that item is in. 28.268 28.269 <li> Otherwise, the <a href="#flex-item-static-position"><i>static 28.270 position</i></a> is the <i>cross-start edge</i> of the first <i>flex 28.271 @@ -1634,8 +1624,8 @@ 28.272 <p> Note that the ‘<a href="#flex-flow"><code 28.273 class=property>flex-flow</code></a>’ directions are <i>writing-mode</i> 28.274 sensitive. In vertical Japanese, for example, a ‘<a 28.275 - href="#flex-flow-row"><code class=css>row</code></a>’ flexbox lays out 28.276 - its contents from top to bottom, as seen in this example: 28.277 + href="#flex-flow-row"><code class=css>row</code></a>’ flex container 28.278 + lays out its contents from top to bottom, as seen in this example: 28.279 28.280 <table style="margin: 1em auto; text-align: center;"> 28.281 <thead> 28.282 @@ -1687,7 +1677,7 @@ 28.283 <tr> 28.284 <th>Applies to: 28.285 28.286 - <td>flex items 28.287 + <td>flex items and absolutely-positioned flex container children 28.288 28.289 <tr> 28.290 <th>Inherited: 28.291 @@ -1863,7 +1853,7 @@ 28.292 <p> This example shows four buttons that do not fit horizontally. 28.293 28.294 <pre><style> 28.295 -#flexbox { 28.296 +#flex { 28.297 display: flex; 28.298 flex-flow: row wrap; 28.299 width: 300px; 28.300 @@ -1873,7 +1863,7 @@ 28.301 } 28.302 <style> 28.303 28.304 -<div id="flexbox"> 28.305 +<div id="flex"> 28.306 <div class='item'>1</div> 28.307 <div class='item'>2</div> 28.308 <div class='item'>3</div> 28.309 @@ -2374,10 +2364,11 @@ 28.310 horizontal and vertical centering. 28.311 28.312 <p class=note> While the alignment properties are defined in the Box 28.313 - Alignment spec, Flexbox reproduces the definitions of the relevant ones 28.314 - here so as to not create a normative dependency that may slow down 28.315 - advancement of the spec. These properties apply only to flex layout until 28.316 - Box Alignment is finished and defines their effect for other layout modes. 28.317 + Alignment spec, Flexible Box Layout reproduces the definitions of the 28.318 + relevant ones here so as to not create a normative dependency that may 28.319 + slow down advancement of the spec. These properties apply only to flex 28.320 + layout until Box Alignment is finished and defines their effect for other 28.321 + layout modes. 28.322 28.323 <h3 id=auto-margins><span class=secno>8.1. </span> Aligning with ‘<code 28.324 class=css>auto</code>’ margins</h3> 28.325 @@ -2473,8 +2464,8 @@ 28.326 <figcaption> The items in the figure on the left are centered with 28.327 margins, while those in the figure on the right are centered with ‘<a 28.328 href="#align-self"><code class=property>align-self</code></a>’. If this 28.329 - column flexbox was placed against the left edge of the page, the margin 28.330 - behavior would be more desirable, as the long item would be fully 28.331 + column flex container was placed against the left edge of the page, the 28.332 + margin behavior would be more desirable, as the long item would be fully 28.333 readable. In other circumstances, the true centering behavior might be 28.334 better. </figcaption> </figure> 28.335 </div> 28.336 @@ -2876,7 +2867,7 @@ 28.337 the <i>cross-axis</i>, similar to how ‘<a href="#justify-content"><code 28.338 class=property>justify-content</code></a>’ aligns individual items 28.339 within the <i>main-axis</i>. Note, this property has no effect when the 28.340 - flexbox has only a single line. Values have the following meanings: 28.341 + flex container has only a single line. Values have the following meanings: 28.342 28.343 <dl> 28.344 <dt><dfn id=align-content-flex-start>‘<code 28.345 @@ -3134,14 +3125,16 @@ 28.346 <li id=algo-anon-box> <strong>Generate anonymous flex items</strong> as 28.347 described in the <a href="#flex-items">Flex Items</a> section. 28.348 28.349 - <li id=algo-flex-order> <strong>Re-order the flex items according to their 28.350 - ‘<a href="#order"><code class=property>order</code></a>’.</strong> 28.351 - The items with the lowest (most negative) ‘<a href="#order"><code 28.352 + <li id=algo-flex-order> <strong>Re-order the flex items and absolutely 28.353 + positioned flex container children according to their ‘<a 28.354 + href="#order"><code class=property>order</code></a>’.</strong> The 28.355 + elements with the lowest (most negative) ‘<a href="#order"><code 28.356 class=property>order</code></a>’ values are first in the ordering. If 28.357 - multiple items share a ‘<a href="#order"><code 28.358 + multiple elements share an ‘<a href="#order"><code 28.359 class=property>order</code></a>’ value, they're ordered by document 28.360 - order. This affects the order in which the flex items generate boxes in 28.361 - the box-tree, and how the rest of this algorithm deals with the items. 28.362 + order. This affects the order in which the elements generate boxes in the 28.363 + box-tree, and how the rest of this algorithm deals with the generated 28.364 + flex items. 28.365 </ol> 28.366 28.367 <h3 id=line-sizing><span class=secno>9.2. </span> Line Length Determination</h3> 28.368 @@ -3983,43 +3976,12 @@ 28.369 <h2 class=no-num id=changes>Changes</h2> 28.370 28.371 <p> The following significant changes were made since the <a 28.372 - href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/">12 June 2012 28.373 - Last Call Working Draft</a>: 28.374 + href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/">21 September 28.375 + 2012 Candidate Recommendation</a>: 28.376 28.377 <ul> 28.378 - <li>All children of a flex container now become flex items (not just those 28.379 - that are not ‘<code class=css>inline</code>’). 28.380 - 28.381 - <li>Defined <a href="#painting">painting behavior of flex items</a>. 28.382 - 28.383 - <li>Made ‘<code class=property>z-index</code>’ automatically apply to 28.384 - flex items. 28.385 - 28.386 - <li>Changed how absolutely-positioned flex container children are handled 28.387 - so that they don't impact layout. 28.388 - 28.389 - <li>Defined which properties apply to the table wrapper box vs. the table 28.390 - box of a table element. 28.391 - 28.392 - <li>Defined interaction of ‘<a href="#order"><code 28.393 - class=property>order</code></a>’ and <a 28.394 - href="http://www.w3.org/TR/css3-speech/">speech</a>, <a 28.395 - href="http://www.w3.org/TR/css3-ui/#nav-index">‘<code 28.396 - class=property>nav-index</code>’</a>. 28.397 - 28.398 - <li>Corrected errors in the <a href="#layout-algorithm">flex layout 28.399 - algorithm</a>. 28.400 - 28.401 - <li>Defined <a href="#flex-baselines">baselines in flex layout</a>. 28.402 - 28.403 - <li>Various clarifications to the <a href="#flex-containers">flex 28.404 - containers</a> and <a href="#flex-items">flex items</a> chapters. 28.405 - 28.406 - <li>Clarified parsing of the ‘<a href="#flex"><code 28.407 - class=property>flex</code></a>’ shorthand and unitless zeroes. 28.408 - 28.409 - <li>Added or rewrote many examples to make them more realistic and more 28.410 - interesting. 28.411 + <li>Absolutely positioned children of a flex container are no longer 28.412 + called "flex items" (to avoid terminology confusion). 28.413 </ul> 28.414 28.415 <p>A <a 28.416 @@ -4252,7 +4214,7 @@ 28.417 28.418 <td>0 28.419 28.420 - <td>flex items 28.421 + <td>flex items and absolutely-positioned flex container children 28.422 28.423 <td>no 28.424
29.1 --- a/css3-flexbox/Overview.src.html Mon Oct 22 00:33:44 2012 +0200 29.2 +++ b/css3-flexbox/Overview.src.html Mon Oct 22 00:41:17 2012 +0200 29.3 @@ -204,8 +204,8 @@ 29.4 29.5 <dl> 29.6 <dt>This version: 29.7 - <dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/CR-css3-flexbox-[CDATE]/</a> 29.8 - <!--<dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a> --> 29.9 + <!--<dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/CR-css3-flexbox-[CDATE]/</a>--> 29.10 + <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a> 29.11 <dt>Latest version: 29.12 <!--<dd><a href="[LATEST]">[LATEST]</a>--> 29.13 <dd><a href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a> 29.14 @@ -214,7 +214,7 @@ 29.15 <dd><a href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a> 29.16 29.17 <dt>Previous version: 29.18 - <dd><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/</a> 29.19 + <dd><a href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/">http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/</a> 29.20 29.21 <dt>Issues List: 29.22 <dd><a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&component=Flexbox&resolution=---">Bugzilla Bugs for Flexbox</a> 29.23 @@ -589,10 +589,10 @@ 29.24 29.25 <p> 29.26 The contents of a <i>flex container</i> consists of zero or more <dfn title="flex item" id="flex-item">flex items</dfn>: 29.27 - each child of a <i>flex container</i> 29.28 + each in-flow child of a <i>flex container</i> 29.29 becomes a <i>flex item</i>, 29.30 and each contiguous run of text that is directly contained inside a <i>flex container</i> 29.31 - is wrapped in an anonymous <i>flex item</i>. 29.32 + is wrapped in an anonymous <i>flex item</i> element. 29.33 However, an anonymous flex item that contains only 29.34 <a href="http://www.w3.org/TR/CSS21/text.html#white-space-prop">white space</a> 29.35 is not rendered, as if it were ''display:none''. 29.36 @@ -665,10 +665,10 @@ 29.37 and the table box were the <i>flex item</i>. 29.38 29.39 <h3 id='abspos-items'> 29.40 -Absolutely-Positioned Flex Items</h3> 29.41 +Absolutely-Positioned Flex Children</h3> 29.42 29.43 <p> 29.44 - An absolutely-positioned <i>flex item</i> does not participate in flex layout 29.45 + An absolutely-positioned child element of a <i>flex container</i> does not participate in flex layout 29.46 beyond the <a href="#algo-flex-order">reordering step</a>. 29.47 However, if both 'left' and 'right' or both 'top' and 'bottom' are ''auto'', 29.48 then the used value of those properties 29.49 @@ -676,12 +676,12 @@ 29.50 29.51 <p> 29.52 If both 'left' and 'right' are ''auto'', 29.53 - the <i>flex item</i> must be positioned so that 29.54 + the absolutely-positioned child must be positioned so that 29.55 its <i>main-start</i> or <i>cross-start</i> edge 29.56 (whichever is in the horizontal axis) 29.57 is aligned with the <i>static position</i>. 29.58 If both 'top' and 'bottom' are ''auto'', 29.59 - the <i>flex item</i> must be positioned so that 29.60 + the absolutely-positioned child must be positioned so that 29.61 its <i>main-start</i> or <i>cross-start</i> edge 29.62 (whichever is in the vertical axis) 29.63 is aligned with the <i>static position</i>. 29.64 @@ -691,17 +691,17 @@ 29.65 29.66 <ol> 29.67 <li> 29.68 - If there is a subsequent in-flow <i>flex item</i> on the same <i>flex line</i>, 29.69 + If there is a subsequent <i>flex item</i> on the same <i>flex line</i>, 29.70 the <i>static position</i> is the outer <i>main-start</i> edge of that <i>flex item</i>. 29.71 29.72 <li> 29.73 - Otherwise, if there is a preceding in-flow <i>flex item</i> on the same <i>flex line</i>, 29.74 + Otherwise, if there is a preceding <i>flex item</i> on the same <i>flex line</i>, 29.75 the <i>static position</i> is the outer <i>main-end</i> edge of that <i>flex item</i>. 29.76 29.77 <li> 29.78 Otherwise, the <i>static position</i> is determined 29.79 by the value of 'justify-content' on the <i>flex container</i> 29.80 - as if the <i>static position</i> were represented by a zero-sized flex item. 29.81 + as if the <i>static position</i> were represented by a zero-sized <i>flex item</i>. 29.82 </ol> 29.83 29.84 <p> 29.85 @@ -709,7 +709,7 @@ 29.86 29.87 <ol> 29.88 <li> 29.89 - If there is a preceding in-flow <i>flex item</i>, 29.90 + If there is a preceding <i>flex item</i>, 29.91 the <i>static position</i> is the <i>cross-start</i> edge of the <i>flex-line</i> 29.92 that item is in. 29.93 <li> 29.94 @@ -1169,7 +1169,7 @@ 29.95 <p> 29.96 Note that the 'flex-flow' directions are <i>writing-mode</i> sensitive. 29.97 In vertical Japanese, for example, 29.98 - a ''row'' flexbox lays out its contents from top to bottom, 29.99 + a ''row'' flex container lays out its contents from top to bottom, 29.100 as seen in this example: 29.101 29.102 <table style="margin: 1em auto; text-align: center;"> 29.103 @@ -1208,7 +1208,7 @@ 29.104 <td>0 29.105 <tr> 29.106 <th>Applies to: 29.107 - <td>flex items 29.108 + <td>flex items and absolutely-positioned flex container children 29.109 <tr> 29.110 <th>Inherited: 29.111 <td>no 29.112 @@ -1367,7 +1367,7 @@ 29.113 This example shows four buttons that do not fit horizontally. 29.114 29.115 <pre><style> 29.116 -#flexbox { 29.117 +#flex { 29.118 display: flex; 29.119 flex-flow: row wrap; 29.120 width: 300px; 29.121 @@ -1377,7 +1377,7 @@ 29.122 } 29.123 <style> 29.124 29.125 -<div id="flexbox"> 29.126 +<div id="flex"> 29.127 <div class='item'>1</div> 29.128 <div class='item'>2</div> 29.129 <div class='item'>3</div> 29.130 @@ -1767,7 +1767,7 @@ 29.131 29.132 <p class='note'> 29.133 While the alignment properties are defined in the Box Alignment spec, 29.134 - Flexbox reproduces the definitions of the relevant ones here 29.135 + Flexible Box Layout reproduces the definitions of the relevant ones here 29.136 so as to not create a normative dependency that may slow down advancement of the spec. 29.137 These properties apply only to flex layout 29.138 until Box Alignment is finished 29.139 @@ -1865,7 +1865,7 @@ 29.140 <figcaption> 29.141 The items in the figure on the left are centered with margins, 29.142 while those in the figure on the right are centered with 'align-self'. 29.143 - If this column flexbox was placed against the left edge of the page, 29.144 + If this column flex container was placed against the left edge of the page, 29.145 the margin behavior would be more desirable, 29.146 as the long item would be fully readable. 29.147 In other circumstances, 29.148 @@ -2146,7 +2146,7 @@ 29.149 The 'align-content' property aligns a flex container's lines within the flex container 29.150 when there is extra space in the <i>cross-axis</i>, 29.151 similar to how 'justify-content' aligns individual items within the <i>main-axis</i>. 29.152 - Note, this property has no effect when the flexbox has only a single line. 29.153 + Note, this property has no effect when the flex container has only a single line. 29.154 Values have the following meanings: 29.155 29.156 <dl> 29.157 @@ -2402,12 +2402,12 @@ 29.158 as described in the <a href="#flex-items">Flex Items</a> section. 29.159 29.160 <li id='algo-flex-order'> 29.161 - <strong>Re-order the flex items according to their 'order'.</strong> 29.162 - The items with the lowest (most negative) 'order' values are first in the ordering. 29.163 - If multiple items share a 'order' value, 29.164 + <strong>Re-order the flex items and absolutely positioned flex container children according to their 'order'.</strong> 29.165 + The elements with the lowest (most negative) 'order' values are first in the ordering. 29.166 + If multiple elements share an 'order' value, 29.167 they're ordered by document order. 29.168 - This affects the order in which the flex items generate boxes in the box-tree, 29.169 - and how the rest of this algorithm deals with the items. 29.170 + This affects the order in which the elements generate boxes in the box-tree, 29.171 + and how the rest of this algorithm deals with the generated flex items. 29.172 </ol> 29.173 29.174 <h3 id='line-sizing'> 29.175 @@ -3280,21 +3280,9 @@ 29.176 29.177 <p> 29.178 The following significant changes were made since the 29.179 - <a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/">12 June 2012 Last Call Working Draft</a>: 29.180 + <a href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/">21 September 2012 Candidate Recommendation</a>: 29.181 <ul> 29.182 - <li>All children of a flex container now become flex items (not just those that are not ''inline''). 29.183 - <li>Defined <a href="#painting">painting behavior of flex items</a>. 29.184 - <li>Made 'z-index' automatically apply to flex items. 29.185 - <li>Changed how absolutely-positioned flex container children are handled so that they don't impact layout. 29.186 - <li>Defined which properties apply to the table wrapper box vs. the table box of a table element. 29.187 - <li>Defined interaction of 'order' and <a href="http://www.w3.org/TR/css3-speech/">speech</a>, <a href="http://www.w3.org/TR/css3-ui/#nav-index">'nav-index'</a>. 29.188 - <li>Corrected errors in the <a href="#layout-algorithm">flex layout algorithm</a>. 29.189 - <li>Defined <a href="#flex-baselines">baselines in flex layout</a>. 29.190 - <li>Various clarifications to the 29.191 - <a href="#flex-containers">flex containers</a> and 29.192 - <a href="#flex-items">flex items</a> chapters. 29.193 - <li>Clarified parsing of the 'flex' shorthand and unitless zeroes. 29.194 - <li>Added or rewrote many examples to make them more realistic and more interesting. 29.195 + <li>Absolutely positioned children of a flex container are no longer called "flex items" (to avoid terminology confusion). 29.196 </ul> 29.197 29.198 <p>A <a href="http://dev.w3.org/csswg/css3-flexbox/issues-lc-2012">Disposition of Last Call Comments</a> is available.
30.1 --- a/css3-grid-layout/Overview.html Mon Oct 22 00:33:44 2012 +0200 30.2 +++ b/css3-grid-layout/Overview.html Mon Oct 22 00:41:17 2012 +0200 30.3 @@ -6,16 +6,17 @@ 30.4 <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 30.5 <title>CSS Grid Layout</title> 30.6 30.7 - <link href="http://purl.org/dc/terms/" rel=schema.DC> 30.8 - <meta content="CSS Grid Layout" name=DC.title> 30.9 - <meta content=text name=DC.type> 30.10 - <meta content=2012-09-08 name=DC.issued> 30.11 - <meta content="http://dev.w3.org/csswg/css3-grid-layout/" name=DC.creator> 30.12 - <meta content=W3C name=DC.publisher> 30.13 - <meta content="http://www.w3.org/TR/2012/ED-css3-grid-layout-20120908/" 30.14 - name=DC.identifier> 30.15 + <link href="http://purl.org/dc/terms/" rel=schema.dcterms> 30.16 <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 30.17 - rel=DC.rights> 30.18 + rel=dcterms.rights> 30.19 + <meta content="CSS Grid Layout" name=dcterms.title> 30.20 + <meta content=text name=dcterms.type> 30.21 + <meta content=2012-10-16 name=dcterms.issued> 30.22 + <meta content="http://dev.w3.org/csswg/css3-grid-layout/" 30.23 + name=dcterms.creator> 30.24 + <meta content=W3C name=dcterms.publisher> 30.25 + <meta content="http://www.w3.org/TR/2012/ED-css3-grid-layout-20121016/" 30.26 + name=dcterms.identifier> 30.27 <link href="../default.css" rel=stylesheet type="text/css"> 30.28 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet 30.29 type="text/css"> 30.30 @@ -57,11 +58,11 @@ 30.31 <h1 class=title id=title>CSS Grid Layout</h1> 30.32 30.33 <h2 class="no-num no-toc" id=longstatus-date-3-march-2012>Editor's Draft, 30.34 - 8 September 2012</h2> 30.35 + 16 October 2012</h2> 30.36 30.37 <dl> 30.38 <dt>This version:</dt> 30.39 - <!-- <dd><a href="http://www.w3.org/TR/2012/ED-css3-grid-layout-20120908/">http://www.w3.org/TR/2012/WD-css3-grid-layout-20120908/</a> --> 30.40 + <!-- <dd><a href="http://www.w3.org/TR/2012/ED-css3-grid-layout-20121016/">http://www.w3.org/TR/2012/WD-css3-grid-layout-20121016/</a> --> 30.41 30.42 <dd><a 30.43 href="http://dev.w3.org/csswg/css3-grid-layout/">http://dev.w3.org/csswg/css3-grid-layout/</a> 30.44 @@ -514,10 +515,10 @@ 30.45 </div> 30.46 30.47 <div class=sidefigure> 30.48 - <p> <img alt="Image: An arrangment suitable for landscape orientation." 30.49 + <p> <img alt="Image: An arrangement suitable for landscape orientation." 30.50 src="images/game-landscape.png"> 30.51 30.52 - <p class=caption>An arrangment suitable for ‘<code 30.53 + <p class=caption>An arrangement suitable for ‘<code 30.54 class=css>landscape</code>’ orientation. 30.55 </div> 30.56 30.57 @@ -1309,9 +1310,9 @@ 30.58 href="#grid-area-concept"><i>grid areas</i></a> may have the same 30.59 identifier. Duplicate identifiers define a <a 30.60 href="#grid-area-concept"><i>grid area</i></a> which spans multiple 30.61 - tracks, and must therefore therefore be geometrically adjacent to each 30.62 - other, forming a rectangular shape. A declaration which fails to meet 30.63 - these criteria will be dropped. 30.64 + tracks, and must therefore be geometrically adjacent to each other, 30.65 + forming a rectangular shape. A declaration which fails to meet these 30.66 + criteria will be dropped. 30.67 30.68 <p> In the following example, a ‘<a href="#grid-template"><code 30.69 class=property>grid-template</code></a>’ property is used to create a 30.70 @@ -1828,7 +1829,7 @@ 30.71 <h3 id=grid-shorthand-properties0><span class=secno>6.2. </span>Grid 30.72 shorthand properties</h3> 30.73 30.74 - <p>For all shorthand properties below, specifiying an <identifier> 30.75 + <p>For all shorthand properties below, specifying an <identifier> 30.76 sets the values of all longhand properties associated with the 30.77 shorthand property to the values associated with the <identifier> 30.78 . 30.79 @@ -2407,14 +2408,14 @@ 30.80 href="#grid-auto-flow"><code 30.81 class=property>grid-auto-flow</code></a>’ property controls the 30.82 direction in which the search for unoccupied space takes place, and 30.83 - whether rows or columns are added as needed to accomodate the content. 30.84 + whether rows or columns are added as needed to accommodate the content. 30.85 30.86 <p> A ‘<a href="#grid-auto-flow"><code 30.87 class=property>grid-auto-flow</code></a>’ value of ‘<a 30.88 href="#rows"><code class=css>rows</code></a>’ will place <a 30.89 href="#grid-item"><i>grid item</i></a>s in row-major order by searching 30.90 across columns and then rows for unoccupied space, and will create 30.91 - additional rows as needed to accomodate content <a 30.92 + additional rows as needed to accommodate content <a 30.93 href="#grid-item"><i>grid item</i></a>s. Similarly, a ‘<a 30.94 href="#grid-auto-flow"><code 30.95 class=property>grid-auto-flow</code></a>’ value of ‘<a 30.96 @@ -2524,7 +2525,7 @@ 30.97 href="#rows"><code class=css>rows</code></a>’ which instructs the 30.98 grid to search across its three columns starting with the first row, 30.99 then the next, adding rows as needed until sufficient space is located 30.100 - to accomodate the position of any auto-placed <a 30.101 + to accommodate the position of any auto-placed <a 30.102 href="#grid-item"><i>Grid item</i></a>. Figure 11 illustrates the 30.103 result. 30.104 30.105 @@ -2861,7 +2862,7 @@ 30.106 30.107 <li>That each <a href="#grid-track"><i>Grid track</i></a> grows from 30.108 the breadth which satisfied its MinTrackSizingFunction to a breadth 30.109 - which satifies its MaxTrackSizingFunction, subject to 30.110 + which satisfies its MaxTrackSizingFunction, subject to 30.111 RemainingSpace. 30.112 </ol> 30.113 30.114 @@ -2899,7 +2900,7 @@ 30.115 href="#grid-track"><i>Grid track</i></a> now contains the resolved 30.116 value for its MaxTrackSizingFunction. 30.117 30.118 - <p> In step 3, the second goal of this function is satisified as each 30.119 + <p> In step 3, the second goal of this function is satisfied as each 30.120 (non-fraction-sized) <a href="#grid-track"><i>Grid track</i></a> 30.121 attempts to grow from the UsedBreadth value to the MaxBreadth value, 30.122 subject to RemainingSpace. 30.123 @@ -3083,13 +3084,13 @@ 30.124 30.125 <p class=issue> Currently this algorithm embodies several heuristics 30.126 which regulate the growth of spanning <a href="#grid-item"><i>Grid 30.127 - items</i></a> to accomodate certain use cases. (E.g. the game example 30.128 - in Figures 2 and 3 above.) These heuristics should be a normative 30.129 - part of this specification to ensure interoperability. To the extent 30.130 - additional use cases can be identified that cannot be satisfied by 30.131 - following the current heuristics, the normative algorithm can be 30.132 - updated, or additional mechanisms can be introduced for fine-grained 30.133 - control of content-based TrackSizingFunction. 30.134 + items</i></a> to accommodate certain use cases. (E.g. the game 30.135 + example in Figures 2 and 3 above.) These heuristics should be a 30.136 + normative part of this specification to ensure interoperability. To 30.137 + the extent additional use cases can be identified that cannot be 30.138 + satisfied by following the current heuristics, the normative 30.139 + algorithm can be updated, or additional mechanisms can be introduced 30.140 + for fine-grained control of content-based TrackSizingFunction. 30.141 30.142 <dl> 30.143 <dt> <dfn 30.144 @@ -3648,7 +3649,7 @@ 30.145 <li>Section 10.2: Updated DistributeSpaceToTracks to us TracksForGrowth 30.146 in step 4, rather than all Grid Tracks. 30.147 30.148 - <li>Section 10.2: Fixed minor spelling error "Contstriant" 30.149 + <li>Section 10.2: Fixed minor spelling error "Constraint" 30.150 30.151 <li>Section 11: Added a definition of the preferred minimum width and 30.152 the preferred width of the Grid element. 30.153 @@ -3783,10 +3784,10 @@ 30.154 <dt id=CSS3VAL>[CSS3VAL] 30.155 30.156 <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a 30.157 - href="http://www.w3.org/TR/2012/WD-css3-values-20120308/"><cite>CSS 30.158 - Values and Units Module Level 3.</cite></a> 8 March 2012. W3C Working 30.159 - Draft. (Work in progress.) URL: <a 30.160 - href="http://www.w3.org/TR/2012/WD-css3-values-20120308/">http://www.w3.org/TR/2012/WD-css3-values-20120308/</a> 30.161 + href="http://www.w3.org/TR/2012/CR-css3-values-20120828/"><cite>CSS 30.162 + Values and Units Module Level 3.</cite></a> 28 August 2012. W3C 30.163 + Candidate Recommendation. (Work in progress.) URL: <a 30.164 + href="http://www.w3.org/TR/2012/CR-css3-values-20120828/">http://www.w3.org/TR/2012/CR-css3-values-20120828/</a> 30.165 </dd> 30.166 <!----> 30.167 </dl>
31.1 --- a/css3-grid-layout/Overview.src.html Mon Oct 22 00:33:44 2012 +0200 31.2 +++ b/css3-grid-layout/Overview.src.html Mon Oct 22 00:41:17 2012 +0200 31.3 @@ -227,9 +227,9 @@ 31.4 31.5 <div class="sidefigure"> 31.6 <p> 31.7 - <img alt="Image: An arrangment suitable for landscape orientation." src="images/game-landscape.png" /> 31.8 + <img alt="Image: An arrangement suitable for landscape orientation." src="images/game-landscape.png" /> 31.9 </p> 31.10 - <p class="caption">An arrangment suitable for ''landscape'' orientation.</p> 31.11 + <p class="caption">An arrangement suitable for ''landscape'' orientation.</p> 31.12 </div> 31.13 <p> 31.14 Continuing the prior example, the author also wants the game to adapt to the space available on traditional computer monitors, handheld devices, 31.15 @@ -779,7 +779,7 @@ 31.16 <i>Grid areas</i> can also be defined explicitly using <a href="http://www.w3.org/TR/css3-syntax/Overview.html#identifiers">identifiers</a> via the 'grid-template' property. The 'grid-template' property provides a visualization of the <i>Grid element</i>’s structure while simultaneously defining the <i>Grid areas</i> which can be used to position and size the child elements of the Grid. 31.17 </p> 31.18 <p> 31.19 - A row is created for every separate string listed for the grid-template property, and a column is created for each identifier or period in each string. Note that all strings must have the same number of columns. A period represents an unnamed area in the <i>grid element</i> that cannot be used to position or size a <i>grid item</i>. An identifier creates a named <i>grid area</i> that can be used to position and size <i>grid items</i>. No two <i>grid areas</i> may have the same identifier. Duplicate identifiers define a <i>grid area</i> which spans multiple tracks, and must therefore therefore be geometrically adjacent to each other, forming a rectangular shape. A declaration which fails to meet these criteria will be dropped. 31.20 + A row is created for every separate string listed for the grid-template property, and a column is created for each identifier or period in each string. Note that all strings must have the same number of columns. A period represents an unnamed area in the <i>grid element</i> that cannot be used to position or size a <i>grid item</i>. An identifier creates a named <i>grid area</i> that can be used to position and size <i>grid items</i>. No two <i>grid areas</i> may have the same identifier. Duplicate identifiers define a <i>grid area</i> which spans multiple tracks, and must therefore be geometrically adjacent to each other, forming a rectangular shape. A declaration which fails to meet these criteria will be dropped. 31.21 </p> 31.22 <p> 31.23 In the following example, a 'grid-template' property is used to create a page layout where areas are defined for header content <code>head</code>, navigational content <code>nav</code>, footer content <code>foot</code>, and main content <code>main</code>. Accordingly, the template creates three rows, two columns, and four areas. The <code>head</code> area spans both columns and the first row of the grid. Columns are the tracks that run in the inline direction and rows are the tracks running in the direction of block progression. See Grid Writing Modes for more details. 31.24 @@ -1177,7 +1177,7 @@ 31.25 <div id="grid-shorthand-properties" class="section"> 31.26 <h3>Grid shorthand properties</h3> 31.27 31.28 - <p>For all shorthand properties below, specifiying an <identifier> sets the values of all longhand properties associated with the shorthand property to the values associated with the <identifier> .</p> 31.29 + <p>For all shorthand properties below, specifying an <identifier> sets the values of all longhand properties associated with the shorthand property to the values associated with the <identifier> .</p> 31.30 31.31 <p>The 'grid-column-position' and 'grid-column-span' properties can be simultaneously specified with the 'grid-column' shorthand property. Likewise, the 'grid-row-position' and 'grid-row-span' properties can be simultaneously specified with the 'grid-row' shorthand property. Note that the first input refers to the starting <i>grid line</i>, while the second, optional input refers to the span of the <i>grid item</i> if an integer, and the ending <i>grid line</i> if a string. Note also that the second input cannot be a string if the first input is ''auto''. 31.32 </p> 31.33 @@ -1589,11 +1589,11 @@ 31.34 <h3>Automatic Placement of Grid Items</h3> 31.35 <p> 31.36 <i>Grid items</i> can be automatically placed into an unoccupied space of the Grid. 31.37 - The 'grid-auto-flow' property controls the direction in which the search for unoccupied space takes place, and whether rows or columns are added as needed to accomodate the content. 31.38 + The 'grid-auto-flow' property controls the direction in which the search for unoccupied space takes place, and whether rows or columns are added as needed to accommodate the content. 31.39 </p> 31.40 <p> 31.41 A 'grid-auto-flow' value of ''rows'' will place <i>grid item</i>s in row-major order by searching across columns and then rows for unoccupied space, and will create additional rows 31.42 - as needed to accomodate content <i>grid item</i>s. Similarly, a 'grid-auto-flow' value of ''columns'' will place <i>grid item</i>s in column-major order, creating new columns as needed. 31.43 + as needed to accommodate content <i>grid item</i>s. Similarly, a 'grid-auto-flow' value of ''columns'' will place <i>grid item</i>s in column-major order, creating new columns as needed. 31.44 </p> 31.45 <table id="grid-auto-flow-property" class="propdef"> 31.46 <tbody> 31.47 @@ -1651,7 +1651,7 @@ 31.48 In the following example, there are three columns, each auto-sized to their contents. 31.49 No rows are explicitly defined. The 'grid-auto-flow' property is ''rows'' which instructs the grid 31.50 to search across its three columns starting with the first row, then the next, adding rows 31.51 - as needed until sufficient space is located to accomodate the position of any auto-placed 31.52 + as needed until sufficient space is located to accommodate the position of any auto-placed 31.53 <i>Grid item</i>. 31.54 Figure 11 illustrates the result. 31.55 </p> 31.56 @@ -1881,7 +1881,7 @@ 31.57 </p> 31.58 <ol> 31.59 <li>That each <i>Grid track</i> satisfies its MinTrackSizingFunction</li> 31.60 - <li>That each <i>Grid track</i> grows from the breadth which satisfied its MinTrackSizingFunction to a breadth which satifies its MaxTrackSizingFunction, subject to RemainingSpace.</li> 31.61 + <li>That each <i>Grid track</i> grows from the breadth which satisfied its MinTrackSizingFunction to a breadth which satisfies its MaxTrackSizingFunction, subject to RemainingSpace.</li> 31.62 </ol> 31.63 <p> 31.64 For the purposes of resolving the breadth that satisfies the MinTrackSizingFunction and MaxTrackSizingFunction, each <i>Grid track</i> falls into one of three categories: 31.65 @@ -1897,7 +1897,7 @@ 31.66 the UsedBreadth variable of each GridTrack now satisfies its MinTrackSizingFunction. The MaxBreadth variable for each <i>Grid track</i> now contains the resolved value for its MaxTrackSizingFunction. 31.67 </p> 31.68 <p> 31.69 - In step 3, the second goal of this function is satisified as each (non-fraction-sized) <i>Grid track</i> 31.70 + In step 3, the second goal of this function is satisfied as each (non-fraction-sized) <i>Grid track</i> 31.71 attempts to grow from the UsedBreadth value to the MaxBreadth value, subject to RemainingSpace. 31.72 </p> 31.73 <p> 31.74 @@ -2032,7 +2032,7 @@ 31.75 The purpose of this function is to resolve the contribution that each <i>Grid item</i> makes to any min-content or max-content TrackSizingFunctions for the <i>Grid tracks</i> it covers. There are four permutations: min-content or max-content in either the MinTrackSizingFunction or MaxTrackSizingFunction. MinTrackSizingFunctions are resolved before MaxTrackSizingFunctions, and min-content contributions are resolved before max-content contributions. Note that when resolving min-content contributions they may grow tracks that have either min-content or max-content keywords, as seen in 3.a.i and 3.b.i below. 31.76 </p> 31.77 <p class="issue"> 31.78 - Currently this algorithm embodies several heuristics which regulate the growth of spanning <i>Grid items</i> to accomodate certain use cases. (E.g. the game example in Figures 2 and 3 above.) These heuristics should be a normative part of this specification to ensure interoperability. To the extent additional use cases can be identified that cannot be satisfied by following the current heuristics, the normative algorithm can be updated, or additional mechanisms can be introduced for fine-grained control of content-based TrackSizingFunction. 31.79 + Currently this algorithm embodies several heuristics which regulate the growth of spanning <i>Grid items</i> to accommodate certain use cases. (E.g. the game example in Figures 2 and 3 above.) These heuristics should be a normative part of this specification to ensure interoperability. To the extent additional use cases can be identified that cannot be satisfied by following the current heuristics, the normative algorithm can be updated, or additional mechanisms can be introduced for fine-grained control of content-based TrackSizingFunction. 31.80 </p> 31.81 <dl> 31.82 <dt> 31.83 @@ -2353,7 +2353,7 @@ 31.84 <li>Section 6.6: Specified that non-rectangular grid-template regions are not allowed, and that one column is created for each letter in a template string.</li> 31.85 <li>Section 6.6: Updated text describing grid-template and writing-mode sensitivity.</li> 31.86 <li>Section 10.2: Updated DistributeSpaceToTracks to us TracksForGrowth in step 4, rather than all Grid Tracks.</li> 31.87 - <li>Section 10.2: Fixed minor spelling error "Contstriant"</li> 31.88 + <li>Section 10.2: Fixed minor spelling error "Constraint"</li> 31.89 <li>Section 11: Added a definition of the preferred minimum width and the preferred width of the Grid element.</li> 31.90 </ul> 31.91
32.1 --- a/css3-page-template/Overview.html Mon Oct 22 00:33:44 2012 +0200 32.2 +++ b/css3-page-template/Overview.html Mon Oct 22 00:41:17 2012 +0200 32.3 @@ -1,15 +1,26 @@ 32.4 <!DOCTYPE html> 32.5 32.6 <html lang=en> 32.7 - <head profile="http://www.w3.org/2006/03/hcard"><meta 32.8 - content="text/html; charset=UTF-8" http-equiv=Content-Type> 32.9 + <head profile="http://www.w3.org/2006/03/hcard"> 32.10 + <meta content="text/html; charset=UTF-8" http-equiv=Content-Type> 32.11 + <title>CSS Pagination Templates Module Level 3</title> 32.12 + <!-- 32.13 + <link href="http://purl.org/dc/terms/" rel="schema.dcterms"> 32.14 + <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" rel="dcterms.rights"> 32.15 + --> 32.16 32.17 - <title>CSS Pagination Templates Module Level 3</title> 32.18 - <link href="../shared/style/default.css" rel=stylesheet type="text/css"> 32.19 - <!--link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED.css"--> 32.20 + <meta content="CSS Pagination Templates Module Level 3" name=dcterms.title> 32.21 + <meta content=text name=dcterms.type> 32.22 + <meta content=2012-10-19 name=dcterms.issued> 32.23 + <meta content="http://dev.w3.org/csswg/css3-page-template/ <!--" 32.24 + name=dcterms.creator> 32.25 + <meta content=W3C name=dcterms.publisher> 32.26 + <meta content="http://www.w3.org/TR/2012/ED-css3-page-template-20121019/" 32.27 + name=dcterms.identifier> 32.28 + <link href="../shared/style/default.css" rel=stylesheet type="text/css"><!--link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED.css"--> 32.29 + 32.30 <link href="http://www.w3.org/StyleSheets/TR/w3c-unofficial.css" 32.31 - rel=stylesheet type="text/css"> 32.32 - 32.33 + rel=stylesheet type="text/css"> 32.34 <style type="text/css"> 32.35 body { 32.36 counter-reset: issue; 32.37 @@ -17,7 +28,7 @@ 32.38 </style> 32.39 <link href="../shared/style/issues.css" rel=stylesheet type="text/css"> 32.40 <link href="../shared/style/alternate-spec-style.css" id=st rel=stylesheet 32.41 - title="alternate spec style" type="text/css"> 32.42 + title="alternate spec style" type="text/css"> 32.43 32.44 <body> 32.45 <div class=head> <!--begin-logo--> 32.46 @@ -26,24 +37,21 @@ 32.47 32.48 <h1>CSS Pagination Templates Module Level 3</h1> 32.49 32.50 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 8 May 2012</h2> 32.51 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 19 October 32.52 + 2012</h2> 32.53 32.54 <dl> 32.55 <dt>This version: 32.56 - <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-page-template-20120508/">http://www.w3.org/TR/2012/ED-css3-page-template-20120508/</a>--> 32.57 - 32.58 + <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-page-template-20121019/">http://www.w3.org/TR/2012/ED-css3-page-template-20121019/</a>--> 32.59 32.60 <dd><a 32.61 href="//dev.w3.org/csswg/css3-page-template/">http://dev.w3.org/csswg/css3-page-template/</a> 32.62 - 32.63 32.64 <dt>Latest version: 32.65 <!--<dd><a href="http://www.w3.org/TR/css3-page-template/">http://www.w3.org/TR/css3-page-template/</a>--> 32.66 - 32.67 32.68 <dd><a 32.69 href="//www.w3.org/TR/css3-page-template/">http://www.w3.org/TR/css3-page-template/</a> 32.70 - 32.71 32.72 <dt>Editor's draft: 32.73 32.74 @@ -54,7 +62,6 @@ 32.75 <dd><a href="http://www.w3.org/PreviousVersionURI"> 32.76 http://www.w3.org/PreviousVersionURI</a> 32.77 --> 32.78 - 32.79 32.80 <dt>Editors: 32.81 32.82 @@ -64,8 +71,8 @@ 32.83 <!--begin-copyright--> 32.84 <p class=copyright><a 32.85 href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 32.86 - rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr 32.87 - title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a 32.88 + rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr 32.89 + title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a 32.90 href="http://www.csail.mit.edu/"><abbr 32.91 title="Massachusetts Institute of Technology">MIT</abbr></a>, <a 32.92 href="http://www.ercim.eu/"><abbr 32.93 @@ -104,9 +111,8 @@ 32.94 www-style@w3.org</a> (see <a 32.95 href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for 32.96 discussion of this specification. When sending e-mail, please put the text 32.97 - “css3-page-template” in the subject, preferably like this: 32.98 - “[<!---->css3-page-template<!---->] <em>…summary of 32.99 - comment…</em>” 32.100 + “css3-page-template” in the subject, preferably like this: 32.101 + “[<!---->css3-page-template<!---->] <em>…summary of comment…</em>” 32.102 32.103 <p>This document was produced by the <a href="/Style/CSS/members">CSS 32.104 Working Group</a> (part of the <a href="/Style/">Style Activity</a>). 32.105 @@ -176,13 +182,12 @@ 32.106 32.107 <p>This module describes how to define pagination templates in CSS. In CSS 32.108 2.1 content displayed on-screen is assumed to be a single continuous 32.109 - canvas. Pagination templates provide a mechanism for a ‘<code 32.110 - class=property>paginated</code>’ experience that applies to 32.111 - on-screen presentation as well as printed media. Pagination templates 32.112 - define boxes in CSS where content is displayed as the user moves from page 32.113 - to page on screen or prints the document. When content is laid out using 32.114 - pagination templates, pages are generated as needed to accommodate all the 32.115 - content. 32.116 + canvas. Pagination templates provide a mechanism for a ‘<code 32.117 + class=property>paginated</code>’ experience that applies to on-screen 32.118 + presentation as well as printed media. Pagination templates define boxes 32.119 + in CSS where content is displayed as the user moves from page to page on 32.120 + screen or prints the document. When content is laid out using pagination 32.121 + templates, pages are generated as needed to accommodate all the content. 32.122 32.123 <div class="issue-marker wrapper"> 32.124 <div class=issue-marker> 32.125 @@ -194,14 +199,21 @@ 32.126 </div> 32.127 32.128 <div class=issue-marker> 32.129 - <div class=issue-details>The terms ‘<code 32.130 - class=property>template</code>’ and ‘<code 32.131 - class=property>page</code>’ are overloaded in CSS, but they are 32.132 - the words that most clearly describe the concept. Some alternates for 32.133 - the main @ rule: template, page-template, view-template, page-master, 32.134 + <div class=issue-details>The terms ‘<code 32.135 + class=property>template</code>’ and ‘<code 32.136 + class=property>page</code>’ are overloaded in CSS, but they are the 32.137 + words that most clearly describe the concept. Some alternates for the 32.138 + main @ rule: template, page-template, view-template, page-master, 32.139 master-template, master. Other suggestions are welcome, but only if they 32.140 are more helpful than onelook.com (which suggested "Captain Submarine").</div> 32.141 </div> 32.142 + 32.143 + <div class=issue-marker> 32.144 + <div class=issue-details>This specification may be the best place to 32.145 + define "continued here" or "continued on page x" generated content, 32.146 + since this spec defines ways to skip pages (that basic pagination may 32.147 + not).</div> 32.148 + </div> 32.149 </div> 32.150 32.151 <p>Pagination templates consist of anonymous boxes called slots created by 32.152 @@ -236,8 +248,8 @@ 32.153 <p>An @template rule defines and names a pagination template. Pagination 32.154 templates contain one or more slots to display content. These slots create 32.155 boxes for each page generated from a pagination template. An element can 32.156 - use pagination templates if its ‘<code 32.157 - class=property>overflow-style</code>’ property is set to any of the 32.158 + use pagination templates if its ‘<code 32.159 + class=property>overflow-style</code>’ property is set to any of the 32.160 paged-* values defined in css3-gcpm. If a document defines no pagination 32.161 templates, then there is an implicit pagination template with a single 32.162 slot containing the paginated element's contents. 32.163 @@ -245,9 +257,8 @@ 32.164 <div class=issue-marker> 32.165 <div class=issue-details>Instead of a dependency on GCPM, this spec could 32.166 define what happens with a paginated view, without specifying how the 32.167 - paginated view comes into existence. What happens when you apply 32.168 - ‘<code class=css>overflow-style:paged-x</code>’ to an iframe 32.169 - or region?</div> 32.170 + paginated view comes into existence. What happens when you apply ‘<code 32.171 + class=css>overflow-style:paged-x</code>’ to an iframe or region?</div> 32.172 </div> 32.173 32.174 <p>The box created from an @template rule defaults to the size of the 32.175 @@ -285,10 +296,10 @@ 32.176 instantiated. 32.177 32.178 <div class=issue-marker> 32.179 - <div class=issue-details>If there is more than one slot with no 32.180 - ‘<code class=property>content</code>’ or ‘<code 32.181 - class=property>flow-from</code>’ assignment, does the element's 32.182 - content use all of these slots like a region chain, or is only the last 32.183 + <div class=issue-details>If there is more than one slot with no ‘<code 32.184 + class=property>content</code>’ or ‘<code 32.185 + class=property>flow-from</code>’ assignment, does the element's content 32.186 + use all of these slots like a region chain, or is only the last 32.187 unassigned slot used for content?</div> 32.188 </div> 32.189 32.190 @@ -432,13 +443,13 @@ 32.191 32.192 <p>Multiple templates can be defined for a single document. An element that 32.193 uses pagination templates either selects a template from the entire 32.194 - document set or a subset defined by the ‘<code 32.195 - class=property>template-set</code>’ property. Each page view created 32.196 + document set or a subset defined by the ‘<code 32.197 + class=property>template-set</code>’ property. Each page view created 32.198 uses a single template. This template can be chosen from the applicable 32.199 - set using a selector, by matching content to display using the 32.200 - ‘<code class=property>required-flow</code>’ or ‘<code 32.201 - class=property>available-content</code>’ declarations, or just 32.202 - taking the last template found. 32.203 + set using a selector, by matching content to display using the ‘<code 32.204 + class=property>required-flow</code>’ or ‘<code 32.205 + class=property>available-content</code>’ declarations, or just taking 32.206 + the last template found. 32.207 32.208 <div class=issue-marker> 32.209 <div class=issue-details>The following section describes selecting 32.210 @@ -528,24 +539,22 @@ 32.211 <h3 id=selection-from-required-flows><span class=secno>3.2. 32.212 </span>Selecting Templates from Required Flows</h3> 32.213 32.214 - <p>The ‘<code class=property>required-flow</code>’ property can 32.215 - be used in a pagination template to list named flows that must still have 32.216 - content in order for the template to be used. If more than one template 32.217 - has a ‘<code class=property>required-flow</code>’ value that 32.218 - matches the remaining flow content, the last template that matches will be 32.219 - used. 32.220 + <p>The ‘<code class=property>required-flow</code>’ property can be used 32.221 + in a pagination template to list named flows that must still have content 32.222 + in order for the template to be used. If more than one template has a 32.223 + ‘<code class=property>required-flow</code>’ value that matches the 32.224 + remaining flow content, the last template that matches will be used. 32.225 32.226 <div class=example> 32.227 <p>"Continued on" layout. 32.228 32.229 <p>These pagination templates will display an initial page with the 32.230 - beginning of both the ‘<code 32.231 - class=property>lead-story</code>’ flow and a ‘<code 32.232 - class=property>related-article</code>’ flow. If the lead story has 32.233 - more content than will fit on that first page, the next page(s) will show 32.234 - only content from that lead story. When the content from the lead story 32.235 - is exhausted, then pages will follow with content from the related 32.236 - article. 32.237 + beginning of both the ‘<code class=property>lead-story</code>’ flow 32.238 + and a ‘<code class=property>related-article</code>’ flow. If the lead 32.239 + story has more content than will fit on that first page, the next page(s) 32.240 + will show only content from that lead story. When the content from the 32.241 + lead story is exhausted, then pages will follow with content from the 32.242 + related article. 32.243 32.244 <p> <img alt="side-by-side flows on a page" 32.245 src="images/side-by-side-1.png" width=120> <img 32.246 @@ -606,53 +615,49 @@ 32.247 the original order can be discovered in the DOM and used for template 32.248 selection. 32.249 32.250 - <p>Pagination templates have a ‘<code 32.251 - class=property>primary</code>’ content flow. The primary flow for a 32.252 - pagination template is usually the content of the paginated element. If no 32.253 - slot in the template displays the element contents, then the primary flow 32.254 - of the pagination template is the first named flow in its required-flow 32.255 - declaration. 32.256 + <p>Pagination templates have a ‘<code class=property>primary</code>’ 32.257 + content flow. The primary flow for a pagination template is usually the 32.258 + content of the paginated element. If no slot in the template displays the 32.259 + element contents, then the primary flow of the pagination template is the 32.260 + first named flow in its required-flow declaration. 32.261 32.262 <p>When selecting the pagination template for the next page, the primary 32.263 flow in the original markup can be scanned to determine whether any 32.264 out-of-flow content in other named flows was originally related to the 32.265 next page of primary flow. If this is the case, then those named flows 32.266 - have ‘<code class=property>available</code>’ content for the 32.267 - purpose of selecting an appropriate template that can display this 32.268 - content. 32.269 + have ‘<code class=property>available</code>’ content for the purpose 32.270 + of selecting an appropriate template that can display this content. 32.271 32.272 - <p>Pagination templates can have an ‘<code 32.273 - class=property>available-content</code>’ declaration listing the 32.274 - named flows that must have available content for the template to be 32.275 - selected. Templates with more ‘<code 32.276 - class=property>available-content</code>’ flow matches take 32.277 - precedence over fewer or no ‘<code 32.278 - class=property>available-content</code>’ flow matches. If a template 32.279 - with an ‘<code class=property>available-content</code>’ 32.280 - declaration is chosen, only the available content in those flows is 32.281 - displayed in the slots associated with those flows. 32.282 + <p>Pagination templates can have an ‘<code 32.283 + class=property>available-content</code>’ declaration listing the named 32.284 + flows that must have available content for the template to be selected. 32.285 + Templates with more ‘<code class=property>available-content</code>’ 32.286 + flow matches take precedence over fewer or no ‘<code 32.287 + class=property>available-content</code>’ flow matches. If a template 32.288 + with an ‘<code class=property>available-content</code>’ declaration is 32.289 + chosen, only the available content in those flows is displayed in the 32.290 + slots associated with those flows. 32.291 32.292 <div class=example> 32.293 <p>Clarification example (not meant to be a valid use case) 32.294 32.295 <p>Consider an article element that contains images scattered throughout. 32.296 - Assign the images to a flow named ‘<code 32.297 - class=property>images</code>’ and the rest of the article to a flow 32.298 - named ‘<code class=property>text</code>’. Then define two 32.299 - pagination templates - one that has slots only for the ‘<code 32.300 - class=property>text</code>’ flow, and another that has slots for 32.301 - both the ‘<code class=property>text</code>’ and ‘<code 32.302 - class=property>images</code>’ flows. Both templates require the 32.303 - ‘<code class=property>text</code>’ flow, but the second 32.304 - template also requires the ‘<code 32.305 - class=property>images</code>’ flow and has an ‘<code 32.306 - class=property>available-content</code>’ declaration listing the 32.307 - ‘<code class=property>images</code>’ flow. Each time a page 32.308 - is laid out, the original article element is scanned to see whether an 32.309 - image element is in the next page's worth of content (determined by some 32.310 + Assign the images to a flow named ‘<code 32.311 + class=property>images</code>’ and the rest of the article to a flow 32.312 + named ‘<code class=property>text</code>’. Then define two pagination 32.313 + templates - one that has slots only for the ‘<code 32.314 + class=property>text</code>’ flow, and another that has slots for both 32.315 + the ‘<code class=property>text</code>’ and ‘<code 32.316 + class=property>images</code>’ flows. Both templates require the 32.317 + ‘<code class=property>text</code>’ flow, but the second template also 32.318 + requires the ‘<code class=property>images</code>’ flow and has an 32.319 + ‘<code class=property>available-content</code>’ declaration listing 32.320 + the ‘<code class=property>images</code>’ flow. Each time a page is 32.321 + laid out, the original article element is scanned to see whether an image 32.322 + element is in the next page's worth of content (determined by some 32.323 DOM-tree-scanning heuristic – not layout). If so, then that content 32.324 - from the ‘<code class=property>images</code>’ flow is 32.325 - available for the purpose of selecting a template. 32.326 + from the ‘<code class=property>images</code>’ flow is available for 32.327 + the purpose of selecting a template. 32.328 </div> 32.329 32.330 <div class=example> 32.331 @@ -748,32 +753,32 @@ 32.332 32.333 <dt id=CSS3-REGIONS>[CSS3-REGIONS] 32.334 32.335 - <dd>Vincent Hardy; Alex Mogilevsky. <a 32.336 - href="http://www.w3.org/TR/2011/WD-css3-regions-20111129/"><cite>CSS 32.337 - Regions Module Level 3.</cite></a> 29 November 2011. W3C Working Draft. 32.338 + <dd>Vincent Hardy; Alex Mogilevsky; Alan Stearns. <a 32.339 + href="http://www.w3.org/TR/2012/WD-css3-regions-20120823/"><cite>CSS 32.340 + Regions Module Level 3.</cite></a> 23 August 2012. W3C Working Draft. 32.341 (Work in progress.) URL: <a 32.342 - href="http://www.w3.org/TR/2011/WD-css3-regions-20111129/">http://www.w3.org/TR/2011/WD-css3-regions-20111129/</a> 32.343 - </dd> 32.344 + href="http://www.w3.org/TR/2012/WD-css3-regions-20120823/">http://www.w3.org/TR/2012/WD-css3-regions-20120823/</a> 32.345 + </dd> 32.346 <!----> 32.347 32.348 <dt id=CSS3GCPM>[CSS3GCPM] 32.349 32.350 - <dd>Håkon Wium Lie. <a 32.351 + <dd>Håkon Wium Lie. <a 32.352 href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608"><cite>CSS 32.353 Generated Content for Paged Media Module.</cite></a> 8 June 2010. W3C 32.354 Working Draft. (Work in progress.) URL: <a 32.355 href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608">http://www.w3.org/TR/2010/WD-css3-gcpm-20100608</a> 32.356 - </dd> 32.357 + </dd> 32.358 <!----> 32.359 32.360 <dt id=CSS3GRID>[CSS3GRID] 32.361 32.362 <dd>Alex Mogilevsky; Markus Mielke. <a 32.363 href="http://www.w3.org/TR/2007/WD-css3-grid-20070905"><cite>CSS Grid 32.364 - Positioning Module Level 3.</cite></a> 5 September 2007. W3C Working 32.365 + Positioning Module Level 3.</cite></a> 5 September 2007. W3C Working 32.366 Draft. (Work in progress.) URL: <a 32.367 href="http://www.w3.org/TR/2007/WD-css3-grid-20070905">http://www.w3.org/TR/2007/WD-css3-grid-20070905</a> 32.368 - </dd> 32.369 + </dd> 32.370 <!----> 32.371 </dl> 32.372 <!--end-informative-->
33.1 --- a/css3-page-template/Overview.src.html Mon Oct 22 00:33:44 2012 +0200 33.2 +++ b/css3-page-template/Overview.src.html Mon Oct 22 00:41:17 2012 +0200 33.3 @@ -81,6 +81,7 @@ 33.4 <div class="issue-marker wrapper"> 33.5 <div class="issue-marker"><div class="issue-details">The draft as it stands requires pagination to present the repeated template layouts. Other methods of repeating template layouts to accommodate content might be specified, but the draft would need to be reviewed to remove all reliances on paged displays.</div></div> 33.6 <div class="issue-marker"><div class="issue-details">The terms 'template' and 'page' are overloaded in CSS, but they are the words that most clearly describe the concept. Some alternates for the main @ rule: template, page-template, view-template, page-master, master-template, master. Other suggestions are welcome, but only if they are more helpful than onelook.com (which suggested "Captain Submarine").</div></div> 33.7 + <div class="issue-marker"><div class="issue-details">This specification may be the best place to define "continued here" or "continued on page x" generated content, since this spec defines ways to skip pages (that basic pagination may not).</div></div> 33.8 </div> 33.9 33.10 <p>Pagination templates consist of anonymous boxes called slots created by CSS to contain content. Layouts that use pagination templates mainly determine the size of these slots from the template definition instead of the size of their content. When content does not fit into a template slot, additional pages are created with more slots to contain the overflow content.
34.1 --- a/css3-regions/Overview.html Mon Oct 22 00:33:44 2012 +0200 34.2 +++ b/css3-regions/Overview.html Mon Oct 22 00:41:17 2012 +0200 34.3 @@ -7,18 +7,18 @@ 34.4 <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 34.5 <title>CSS Regions Module Level 3</title> 34.6 34.7 - <link href="http://purl.org/dc/terms/" rel=schema.DC> 34.8 - <meta content="CSS Regions Module Level 3" name=DC.title> 34.9 - <meta content=text name=DC.type> 34.10 - <meta content=2012-10-04 name=DC.issued> 34.11 - <meta content="Vincent Hardy" name=DC.creator> 34.12 - <meta content="Alex Mogilevsky" name=DC.creator> 34.13 - <meta content="Alan Stearns" name=DC.creator> 34.14 - <meta content=W3C name=DC.publisher> 34.15 - <meta content="http://www.w3.org/TR/2012/ED-css3-regions-20121004/" 34.16 - name=DC.identifier> 34.17 + <link href="http://purl.org/dc/terms/" rel=schema.dcterms> 34.18 <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 34.19 - rel=DC.rights> 34.20 + rel=dcterms.rights> 34.21 + <meta content="CSS Regions Module Level 3" name=dcterms.title> 34.22 + <meta content=text name=dcterms.type> 34.23 + <meta content=2012-10-19 name=dcterms.issued> 34.24 + <meta content="Vincent Hardy" name=dcterms.creator> 34.25 + <meta content="Alex Mogilevsky" name=dcterms.creator> 34.26 + <meta content="Alan Stearns" name=dcterms.creator> 34.27 + <meta content=W3C name=dcterms.publisher> 34.28 + <meta content="http://www.w3.org/TR/2012/ED-css3-regions-20121019/" 34.29 + name=dcterms.identifier> 34.30 <link href="../shared/style/default.css" rel=stylesheet type="text/css"> 34.31 <script defer=defer 34.32 src="http://test.csswg.org/harness/annotate.js#CSS3-REGIONS_DEV" 34.33 @@ -50,13 +50,14 @@ 34.34 34.35 <h1 id=css-regions-module>CSS Regions Module Level 3</h1> 34.36 34.37 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 4 October 2012</h2> 34.38 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 19 October 34.39 + 2012</h2> 34.40 34.41 <dl> 34.42 <dt>This version: 34.43 34.44 <dd><a 34.45 - href="http://www.w3.org/TR/2012/ED-css3-regions-20121004/">http://www.w3.org/csswg/css3-regions</a> 34.46 + href="http://www.w3.org/TR/2012/ED-css3-regions-20121019/">http://www.w3.org/csswg/css3-regions</a> 34.47 34.48 <dt>Latest version: 34.49 34.50 @@ -208,6 +209,13 @@ 34.51 34.52 <li><a href="#the-flow-from-property"><span class=secno>3.2. </span>The 34.53 ‘<code class=property>flow-from</code>’ property</a> 34.54 + <ul class=toc> 34.55 + <li><a href="#circular-dependencies"><span class=secno>3.2.1. 34.56 + </span>Cycle Detection</a> 34.57 + 34.58 + <li><a href="#fragmenting-regions"><span class=secno>3.2.2. 34.59 + </span>Nested fragmentation contexts</a> 34.60 + </ul> 34.61 34.62 <li><a href="#region-flow-break"><span class=secno>3.3. </span>Region 34.63 flow break properties: ‘<code class=property>break-before</code>’, 34.64 @@ -638,14 +646,6 @@ 34.65 href="#flow-into"><code class=property>flow-into</code></a>’ property</h3> 34.66 34.67 <div class="issue-marker wrapper"> 34.68 - <div class=issue-marker data-bug_id=15811 data-bug_status=NEW> <a 34.69 - href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15811">Issue-15811</a> 34.70 - 34.71 - <div class=issue-details> 34.72 - <p class=short-desc>Creating a named flow from external resource 34.73 - </div> 34.74 - </div> 34.75 - 34.76 <div class=issue-marker data-bug_id=16527 data-bug_status=ASSIGNED> <a 34.77 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16527">Issue-16527</a> 34.78 34.79 @@ -719,9 +719,10 @@ 34.80 href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a> 34.81 34.82 <dd>The element is taken out of its parent's flow and placed into the flow 34.83 - with the name ‘<code class=css><ident></code>’. The element is 34.84 - said to have a <dfn id=specified-flow>specified flow</dfn>. The values 34.85 - ‘<code class=property>none</code>’, ‘<code 34.86 + with the name ‘<code class=css><a 34.87 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a></code>’. 34.88 + The element is said to have a <dfn id=specified-flow>specified 34.89 + flow</dfn>. The values ‘<code class=property>none</code>’, ‘<code 34.90 class=property>inherit</code>’, ‘<code 34.91 class=property>default</code>’, ‘<code class=property>auto</code>’ 34.92 and ‘<code class=property>initial</code>’ are invalid flow names. 34.93 @@ -829,6 +830,11 @@ 34.94 significant, then moving the parent that contains the whitespace to the 34.95 named flow is required.</div> 34.96 34.97 + <div class=note><span class=note-prefix>Note </span> 34.98 + <p>A future CSS Regions module level will define a mechanism for creating 34.99 + a named flow from an external resource. 34.100 + </div> 34.101 + 34.102 <h3 id=the-flow-from-property><span class=secno>3.2. </span>The ‘<a 34.103 href="#flow-from"><code class=property>flow-from</code></a>’ property</h3> 34.104 34.105 @@ -889,7 +895,8 @@ 34.106 <dd>The block container is not a <a href="#css-region" 34.107 title=region>region</a>. 34.108 34.109 - <dt><strong><ident></strong> 34.110 + <dt><strong><a 34.111 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a></strong> 34.112 34.113 <dd> If the ‘<code class=property>content</code>’ property computes to 34.114 something else than ‘<code class=property>normal</code>’ (or ‘<code 34.115 @@ -907,22 +914,11 @@ 34.116 href="http://www.w3.org/TR/CSS21/visuren.html#principal-box">principal 34.117 boxes</a> of the <a href="#css-region">regions</a> in the <a 34.118 href="#region-chain0">region chain</a>. <br> 34.119 - If there is no flow with name <ident>, then the block container 34.120 - does not format any content visually. <br> 34.121 - Likewise, if the block container is part of the flow with name 34.122 - <ident>, then the block container does not format any content 34.123 - visually. 34.124 + If there is no flow with name <a 34.125 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a>, 34.126 + then the block container does not format any content visually. 34.127 </dl> 34.128 34.129 - <div class=issue-marker data-bug_id=16819 data-bug_status=ASSIGNED> <a 34.130 - href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16819">Issue-16819</a> 34.131 - 34.132 - <div class=issue-details> 34.133 - <p class=short-desc>No display when combining flow-from and flow-into is 34.134 - bad 34.135 - </div> 34.136 - </div> 34.137 - 34.138 <p>A <span>CSS Region</span>‘<code class=css>s document children are not 34.139 visually formatted unless they are directed to a <a 34.140 href="#named-flow0">named flow</a> with an associated <a 34.141 @@ -930,8 +926,10 @@ 34.142 34.143 <div class=note><span class=note-prefix>Note </span> 34.144 <p>An block container becomes a <span>CSS Region</span> when its 34.145 - ’flow-from' property is set to a valid <ident> value, even if 34.146 - there is no content contributing to the referenced flow. For example: 34.147 + ’flow-from' property is set to a valid <a 34.148 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a> 34.149 + value, even if there is no content contributing to the referenced flow. 34.150 + For example: 34.151 34.152 <pre> 34.153 <style> 34.154 @@ -963,14 +961,6 @@ 34.155 </div> 34.156 34.157 <div class="issue-marker wrapper"> 34.158 - <div class=issue-marker data-bug_id=15189 data-bug_status=NEW> <a 34.159 - href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15189">Issue-15189</a> 34.160 - 34.161 - <div class=issue-details> 34.162 - <p class=short-desc>Should regions be non-breakable? 34.163 - </div> 34.164 - </div> 34.165 - 34.166 <div class=issue-marker data-bug_id=15824 data-bug_status=NEW> <a 34.167 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15824">Issue-15824</a> 34.168 34.169 @@ -1019,6 +1009,59 @@ 34.170 class=property>height</code>’ values are resolved for <span>CSS 34.171 Region</span> boxes. 34.172 34.173 + <h4 id=circular-dependencies><span class=secno>3.2.1. </span>Cycle 34.174 + Detection</h4> 34.175 + 34.176 + <p><a href="#named-flow0">Named flows</a> containing elements where the 34.177 + value of ‘<a href="#flow-from"><code 34.178 + class=property>flow-from</code></a>’ computes to an <a 34.179 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a> 34.180 + can produce nonsensical circular relationships, such as a <a 34.181 + href="#named-flow0">named flow</a> containing <span>CSS Regions</span> in 34.182 + its own <a href="#region-chain0">region chain</a>. These relationships can 34.183 + be easily and reliably detected and resolved, however, by keeping track of 34.184 + a dependency graph and using common cycle-detection algorithms. 34.185 + 34.186 + <p>The dependency graph consists of edges such that: 34.187 + 34.188 + <ul> 34.189 + <li>Every <a href="#named-flow0">named flow</a> depends on its elements 34.190 + where the value of ‘<a href="#flow-from"><code 34.191 + class=property>flow-from</code></a>’ computes to an <a 34.192 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a> 34.193 + . 34.194 + 34.195 + <li>Every element in a <a href="#named-flow0">named flow</a> where the 34.196 + value of ‘<a href="#flow-from"><code 34.197 + class=property>flow-from</code></a>’ computes to an <a 34.198 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a> 34.199 + depends on the <a href="#named-flow0">named flow</a> with the <a 34.200 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a> 34.201 + name. 34.202 + </ul> 34.203 + 34.204 + <p>If the graph contains a cycle, any elements where the value of ‘<a 34.205 + href="#flow-from"><code class=property>flow-from</code></a>’ computes to 34.206 + an <a 34.207 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a> 34.208 + participating in the cycle do not become <span>CSS Regions</span>. 34.209 + 34.210 + <h4 id=fragmenting-regions><span class=secno>3.2.2. </span>Nested 34.211 + fragmentation contexts</h4> 34.212 + 34.213 + <p>A <span>CSS Region</span> that contains a fragment of a <a 34.214 + href="#named-flow0">named flow</a> can itself be fragmented if it is 34.215 + nested within a fragmentation context <a href="#CSS3-BREAK" 34.216 + rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a>, such as when a 34.217 + layout using a region chain is printed. In these cases break opportunities 34.218 + in the named flow fragment contained by the <span>CSS Region</span> are 34.219 + determined using the standard <a 34.220 + href="http://www.w3.org/TR/css3-break/">fragmentation rules</a>. In other 34.221 + words, each region box and its associated fragment should break as if it 34.222 + were a simple div containing the fragment contents. This can be controlled 34.223 + by using an avoid break value on the <span>CSS Region</span>, if that is 34.224 + desired. 34.225 + 34.226 <h3 id=region-flow-break><span class=secno>3.3. </span>Region flow break 34.227 properties: ‘<a href="#break-before"><code 34.228 class=property>break-before</code></a>’, ‘<a href="#break-after"><code 34.229 @@ -1351,8 +1394,8 @@ 34.230 <h3 id=the-at-region-style-rule><span class=secno>3.5. </span>The @region 34.231 rule</h3> 34.232 34.233 - <p>An ‘<a href="#css-region"><code class=css>@region</code></a>’ rule 34.234 - contains style declarations specific to particular regions. 34.235 + <p>An ‘<code class=css>@region</code>’ rule contains style declarations 34.236 + specific to particular regions. 34.237 34.238 <pre> 34.239 @region <selector> { 34.240 @@ -1360,17 +1403,16 @@ 34.241 } 34.242 </pre> 34.243 34.244 - <p>The ‘<a href="#css-region"><code class=css>@region</code></a>’ rule 34.245 - consists of the keyword ‘<a href="#css-region"><code 34.246 - class=css>@region</code></a>’ followed by a <a 34.247 + <p>The ‘<code class=css>@region</code>’ rule consists of the keyword 34.248 + ‘<code class=css>@region</code>’ followed by a <a 34.249 href="http://www.w3.org/TR/css3-selectors/#selector-syntax">selector</a> 34.250 - and a block of style rules. The ‘<a href="#css-region"><code 34.251 - class=css>@region</code></a>’ rule and the selector constitute the 34.252 - region's ‘<code class=css>flow fragment</code>’ selector. The region's 34.253 - flow fragment selector specifies which range of elements in the flow are 34.254 - subject to the style rules in the following block: it applies to the range 34.255 - (see <a href="#DOM" rel=biblioentry>[DOM]<!--{{!DOM}}--></a>) from the 34.256 - region's flow that flows in the selected region(s). 34.257 + and a block of style rules. The ‘<code class=css>@region</code>’ rule 34.258 + and the selector constitute the region's ‘<code class=css>flow 34.259 + fragment</code>’ selector. The region's flow fragment selector specifies 34.260 + which range of elements in the flow are subject to the style rules in the 34.261 + following block: it applies to the range (see <a href="#DOM" 34.262 + rel=biblioentry>[DOM]<!--{{!DOM}}--></a>) from the region's flow that 34.263 + flows in the selected region(s). 34.264 34.265 <div class=issue-marker data-bug_id=15713 data-bug_status=NEW> <a 34.266 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15713">Issue-15713</a> 34.267 @@ -1387,17 +1429,6 @@ 34.268 34.269 <p>Only a limited list of properties can be set in a region style rule: 34.270 34.271 - <div class="issue-marker wrapper"> 34.272 - <div class=issue-marker data-bug_id=16921 data-bug_status=REOPENED> <a 34.273 - href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16921">Issue-16921</a> 34.274 - 34.275 - <div class=issue-details> 34.276 - <p class=short-desc>Should text-align be added to region styling 34.277 - properties 34.278 - </div> 34.279 - </div> 34.280 - </div> 34.281 - 34.282 <ol> 34.283 <li><a href="http://www.w3.org/TR/CSS2/fonts.html">font properties</a> 34.284 34.285 @@ -1429,6 +1460,9 @@ 34.286 href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code 34.287 class=property>line-height</code>’</a> 34.288 34.289 + <li><a href="http://www.w3.org/TR/css3-text/#justification">alignment and 34.290 + justification properties</a> 34.291 + 34.292 <li><a href="http://www.w3.org/TR/css3-background/#borders">border 34.293 properties</a> 34.294 34.295 @@ -1553,17 +1587,17 @@ 34.296 </div> 34.297 </div> 34.298 34.299 - <p>The specificity of the selectors in a ‘<a href="#css-region"><code 34.300 - class=css>@region</code></a>’ rule is calculated as <a 34.301 + <p>The specificity of the selectors in a ‘<code 34.302 + class=css>@region</code>’ rule is calculated as <a 34.303 href="http://www.w3.org/TR/css3-selectors/#specificity">defined</a> in the 34.304 CSS Selectors module (see <a href="#SELECT" 34.305 - rel=biblioentry>[SELECT]<!--{{SELECT}}--></a>). In other words, the ‘<a 34.306 - href="#css-region"><code class=css>@region</code></a>’ rule adds an 34.307 - extra condition to the selector's matching, but does not change the 34.308 - selector's specificity. This is the same behavior as selectors appearing 34.309 - in ‘<code class=css>@media</code>’ rules declaration blocks (see <a 34.310 - href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>), where the 34.311 - rule does not influence the selectors' specificity. 34.312 + rel=biblioentry>[SELECT]<!--{{SELECT}}--></a>). In other words, the 34.313 + ‘<code class=css>@region</code>’ rule adds an extra condition to the 34.314 + selector's matching, but does not change the selector's specificity. This 34.315 + is the same behavior as selectors appearing in ‘<code 34.316 + class=css>@media</code>’ rules declaration blocks (see <a href="#MEDIAQ" 34.317 + rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>), where the rule does not 34.318 + influence the selectors' specificity. 34.319 34.320 <p>Consequently, selectors that match a given element (as describe above), 34.321 participate in the <a 34.322 @@ -1658,15 +1692,6 @@ 34.323 34.324 <h2 id="pseudo_elements"><span class=secno>5. </span>Pseudo-elements</h2> 34.325 34.326 - <div class=issue-marker data-bug_id=15188 data-bug_status=NEW> <a 34.327 - href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15188">Issue-15188</a> 34.328 - 34.329 - <div class=issue-details> 34.330 - <p class=short-desc>add functionality for having textual description like 34.331 - "continued here" or "continued on page x" to regions. 34.332 - </div> 34.333 - </div> 34.334 - 34.335 <p>It can be useful to visually mark the content to highlight that a 34.336 content thread is flowing through the region chain. For example, a marker 34.337 such as <em>‘<code class=css>continued below</code>’</em> clearly 34.338 @@ -1930,8 +1955,8 @@ 34.339 class=idl>overset</code></a> attribute returns <code 34.340 class=idl>false</code>. 34.341 34.342 - <li>the <a href="#dom-named-flow-get-regions"><code 34.343 - class=idl>getRegions</code></a> method returns an empty sequence. 34.344 + <li>the <code class=idl>getRegions</code> method returns an empty 34.345 + sequence. 34.346 34.347 <li>the <a href="#dom-named-flow-first-empty-region-index"><code 34.348 class=idl>firstEmptyRegionIndex</code></a> attribute returns <code 34.349 @@ -1946,14 +1971,6 @@ 34.350 sequence. 34.351 </ul> 34.352 34.353 - <div class=issue-marker data-bug_id=16382 data-bug_status=ASSIGNED> <a 34.354 - href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16382">Issue-16382</a> 34.355 - 34.356 - <div class=issue-details> 34.357 - <p class=short-desc>Should we have a NamedFlow.getRegionsByFlowRanges? 34.358 - </div> 34.359 - </div> 34.360 - 34.361 <h3 id=the-region-interface><span class=secno>6.2. </span>The Region 34.362 interface</h3> 34.363 34.364 @@ -2097,9 +2114,9 @@ 34.365 CSSRegionStyleRule interface</h3> 34.366 34.367 <p>The <dfn id=dom-region-style-rule-interface> <code 34.368 - class=idl>CSSRegionStyleRule</code> interface</dfn> represents an ‘<a 34.369 - href="#css-region"><code class=css>@region</code></a>’ rule in a CSS 34.370 - style sheet. This rule type is added to the <a 34.371 + class=idl>CSSRegionStyleRule</code> interface</dfn> represents an ‘<code 34.372 + class=css>@region</code>’ rule in a CSS style sheet. This rule type is 34.373 + added to the <a 34.374 href="http://dev.w3.org/csswg/cssom/#the-cssrule-interface"><code>CSSRule</code></a> 34.375 <a href="#CSSOM" rel=biblioentry>[CSSOM]<!--{{!CSSOM}}--></a> interface. 34.376 34.377 @@ -2205,7 +2222,10 @@ 34.378 href="http://www.w3.org/TR/dom/#interface-eventtarget">EventTargets</a> 34.379 which dispatch <code class=idl>regionLayoutUpdate</code> events when there 34.380 is a possible layout change in their region chain. The event is 34.381 - asynchronous, and fires when <a 34.382 + asynchronous, and fires in the same step of the <a 34.383 + href="http://www.w3.org/TR/html5/webappapis.html#processing-model-2">event 34.384 + loop</a> <a href="#HTML5" rel=biblioentry>[HTML5]<!--{{!HTML5}}--></a> as 34.385 + when <a 34.386 href="http://www.w3.org/TR/2012/WD-dom-20120405/#mutation-observers">MutationObservers</a> 34.387 <a href="#DOM" rel=biblioentry>[DOM]<!--{{!DOM}}--></a> are invoked. 34.388 34.389 @@ -2783,6 +2803,12 @@ 34.390 28<sup>th</sup> 2012</a> version</h3> 34.391 34.392 <ul> 34.393 + <li>Added section on fragmenting the fragmenters 34.394 + 34.395 + <li>Added section on handling circular flow-from and flow-into situations 34.396 + 34.397 + <li>Added alignment and justification to region styling properties 34.398 + 34.399 <li>Added timing for regionLayoutUpdate event 34.400 34.401 <li>Clarified interaction between content and flow-from for 34.402 @@ -2872,9 +2898,8 @@ 34.403 <li>Added a name property to the <a 34.404 href="#dom-named-flow"><code>NamedFlow</code></a> interface. Added a <a 34.405 href="#dom-named-flow-collection"><code>NamedFlowCollection</code></a> 34.406 - interface and added a <a 34.407 - href="#document-getnamedflows"><code>getNamedFlows</code></a> method on 34.408 - the <code>Document</code> interface, as per <a 34.409 + interface and added a <code>getNamedFlows</code> method on the 34.410 + <code>Document</code> interface, as per <a 34.411 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15828">Bug 34.412 15828</a>. 34.413 34.414 @@ -3332,25 +3357,6 @@ 34.415 34.416 <h2 class=no-num id=references>References</h2> 34.417 34.418 - <div class="issue-marker wrapper"> 34.419 - <div class=issue-marker data-bug_id=16404 data-bug_status=ASSIGNED> <a 34.420 - href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16404">Issue-16404</a> 34.421 - 34.422 - <div class=issue-details> 34.423 - <p class=short-desc>Fix specification dependencies 34.424 - </div> 34.425 - </div> 34.426 - 34.427 - <div class=issue-marker data-bug_id=18767 data-bug_status=NEW> <a 34.428 - href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=18767">Issue-18767</a> 34.429 - 34.430 - <div class=issue-details> 34.431 - <p class=short-desc>Something appears to be wrong with the 34.432 - checkSpecificationIssues() call 34.433 - </div> 34.434 - </div> 34.435 - </div> 34.436 - 34.437 <h3 class=no-num id=normative-references>Normative references</h3> 34.438 <!--begin-normative--> 34.439 <!-- Sorted by label --> 34.440 @@ -3798,25 +3804,22 @@ 34.441 <!--end-properties--> 34.442 <!-- template markup for issues pulled from Bugzilla --> 34.443 <!-- template markup for issues pulled from Bugzilla --> 34.444 - 34.445 - <script id=issue-template type="text/template"> 34.446 + <!-- 34.447 + <script type="text/template" id="issue-template"> 34.448 + <div class="issue-marker" data-bug_id="{{bug_id}}" data-bug_status="{{bug_status}}"> 34.449 + <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id={{bug_id}}">Issue-{{bug_id}}</a> 34.450 + <div class="issue-details"> 34.451 + <p class="short-desc">{{short_desc}}</p> 34.452 + </div> 34.453 + </div> 34.454 + </script> 34.455 + 34.456 + <script type="text/javascript" src="../shared/scripts/BugzillaTrackerUtil.js"></script> 34.457 + <script type="text/javascript" src="../shared/scripts/BugzillaTracker.js"></script> 34.458 + <script type="text/javascript"> 34.459 + checkSpecificationIssues('CSS', 'Regions'); 34.460 </script> 34.461 - <div class=issue-marker data-bug_id="{{bug_id}}" 34.462 - data-bug_status="{{bug_status}}"> <a 34.463 - href="https://www.w3.org/Bugs/Public/show_bug.cgi?id={{bug_id}}">Issue-{{bug_id}}</a> 34.464 - 34.465 - <div class=issue-details> 34.466 - <p class=short-desc>{{short_desc}} 34.467 - </div> 34.468 - </div> 34.469 - 34.470 - <script src="../shared/scripts/BugzillaTrackerUtil.js" 34.471 - type="text/javascript"></script> 34.472 - <script src="../shared/scripts/BugzillaTracker.js" type="text/javascript"></script> 34.473 - <script type="text/javascript"> 34.474 - checkSpecificationIssues(‘</script> 34.475 - <p><code class=property>CSS</code>’, ‘<a href="#css-region"><code 34.476 - class=property>Regions</code></a>’); 34.477 +--> 34.478 </html> 34.479 <!-- Keep this comment at the end of the file 34.480 Local variables:
35.1 --- a/css3-regions/Overview.src.html Mon Oct 22 00:33:44 2012 +0200 35.2 +++ b/css3-regions/Overview.src.html Mon Oct 22 00:41:17 2012 +0200 35.3 @@ -418,14 +418,6 @@ 35.4 <h3 id="the-flow-into-property">The 'flow-into' property</h3> 35.5 35.6 <div class="issue-marker wrapper"> 35.7 - <div class="issue-marker" data-bug_id="15811" data-bug_status="NEW"> 35.8 - <a href= 35.9 - "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15811">Issue-15811</a> 35.10 - 35.11 - <div class="issue-details"> 35.12 - <p class="short-desc">Creating a named flow from external resource</p> 35.13 - </div> 35.14 - </div> 35.15 <div class="issue-marker" data-bug_id="16527" data-bug_status="ASSIGNED"> 35.16 <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16527">Issue-16527</a> 35.17 <div class="issue-details"> 35.18 @@ -502,7 +494,7 @@ 35.19 <dd>The element is taken out 35.20 of its parent's flow 35.21 and placed into the flow 35.22 - with the name '<ident>'. 35.23 + with the name '<a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a>'. 35.24 The element is said to have 35.25 a <dfn id="specified-flow">specified flow</dfn>. 35.26 The values 'none', 'inherit', 'default', 'auto' and 'initial' 35.27 @@ -635,6 +627,12 @@ 35.28 is required. 35.29 </div> 35.30 35.31 + <div class="note"><span class="note-prefix">Note </span> 35.32 + <p>A future CSS Regions module level 35.33 + will define a mechanism 35.34 + for creating a named flow 35.35 + from an external resource.</p> 35.36 + </div> 35.37 35.38 <h3 id="the-flow-from-property">The 'flow-from' property</h3> 35.39 35.40 @@ -701,7 +699,7 @@ 35.41 35.42 <dd>The block container is not a <span title="region">region</span>.</dd> 35.43 35.44 - <dt><strong><ident></strong></dt> 35.45 + <dt><strong><a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a></strong></dt> 35.46 35.47 <dd> 35.48 If the 'content' property computes 35.49 @@ -721,24 +719,13 @@ 35.50 of the <span>regions</span> 35.51 in the <span>region chain</span>. 35.52 <br/> 35.53 - If there is no flow with name <ident>, 35.54 + If there is no flow with name 35.55 + <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a>, 35.56 then the block container does not 35.57 format any content visually. 35.58 - <br/> 35.59 - Likewise, if the block container is part 35.60 - of the flow with name <ident>, 35.61 - then the block container does not 35.62 - format any content visually. 35.63 </dd> 35.64 </dl> 35.65 35.66 - <div class="issue-marker" data-bug_id="16819" data-bug_status="ASSIGNED"> 35.67 - <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16819">Issue-16819</a> 35.68 - <div class="issue-details"> 35.69 - <p class="short-desc">No display when combining flow-from and flow-into is bad</p> 35.70 - </div> 35.71 - </div> 35.72 - 35.73 <p>A <span>CSS Region</span>'s document children 35.74 are not visually formatted 35.75 unless they are directed 35.76 @@ -748,7 +735,7 @@ 35.77 <div class="note"><span class="note-prefix">Note </span> 35.78 <p>An block container becomes a <span>CSS Region</span> 35.79 when its 'flow-from' property is set 35.80 - to a valid <ident> value, 35.81 + to a valid <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a> value, 35.82 even if there is no content contributing 35.83 to the referenced flow. 35.84 For example:</p> 35.85 @@ -795,14 +782,6 @@ 35.86 </div> 35.87 35.88 <div class="issue-marker wrapper"> 35.89 - <div class="issue-marker" data-bug_id="15189" data-bug_status="NEW"> 35.90 - <a href= 35.91 - "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15189">Issue-15189</a> 35.92 - 35.93 - <div class="issue-details"> 35.94 - <p class="short-desc">Should regions be non-breakable?</p> 35.95 - </div> 35.96 - </div> 35.97 <div class="issue-marker" data-bug_id="15824" data-bug_status="NEW"> 35.98 35.99 <a href= 35.100 @@ -855,6 +834,62 @@ 35.101 'width' and 'height' values are resolved 35.102 for <span>CSS Region</span> boxes.</p> 35.103 35.104 + <h4 id="circular-dependencies">Cycle Detection</h4> 35.105 + 35.106 + <p><span>Named flows</span> containing elements 35.107 + where the value of 'flow-from' computes to an 35.108 + <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a> 35.109 + can produce nonsensical circular relationships, 35.110 + such as a <span>named flow</span> containing <span>CSS Regions</span> 35.111 + in its own <span>region chain</span>. 35.112 + These relationships can be easily 35.113 + and reliably detected and resolved, however, 35.114 + by keeping track of a dependency graph 35.115 + and using common cycle-detection algorithms.</p> 35.116 + 35.117 + <p>The dependency graph consists of edges such that:</p> 35.118 + 35.119 + <ul> 35.120 + <li>Every <span>named flow</span> depends on its elements 35.121 + where the value of 'flow-from' computes to an 35.122 + <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a> 35.123 + .</li> 35.124 + <li>Every element in a <span>named flow</span> 35.125 + where the value of 'flow-from' computes to an 35.126 + <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a> 35.127 + depends on the <span>named flow</span> with the 35.128 + <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a> 35.129 + name.</li> 35.130 + </ul> 35.131 + 35.132 + <p>If the graph contains a cycle, 35.133 + any elements where the value of 'flow-from' 35.134 + computes to an 35.135 + <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a> 35.136 + participating in the cycle 35.137 + do not become <span>CSS Regions</span>.</p> 35.138 + 35.139 + <h4 id="fragmenting-regions">Nested fragmentation contexts</h4> 35.140 + 35.141 + <p>A <span>CSS Region</span> that contains 35.142 + a fragment of a <span>named flow</span> 35.143 + can itself be fragmented if it is nested 35.144 + within a fragmentation context [[!CSS3-BREAK]], 35.145 + such as when a layout 35.146 + using a region chain is printed. 35.147 + In these cases break opportunities 35.148 + in the named flow fragment 35.149 + contained by the <span>CSS Region</span> 35.150 + are determined using the standard 35.151 + <a href="http://www.w3.org/TR/css3-break/">fragmentation rules</a>. 35.152 + In other words, 35.153 + each region box and its associated fragment 35.154 + should break as if it were a simple div 35.155 + containing the fragment contents. 35.156 + This can be controlled by using 35.157 + an avoid break value on the <span>CSS Region</span>, 35.158 + if that is desired.</p> 35.159 + 35.160 <h3 id= 35.161 "region-flow-break">Region 35.162 flow break properties: 'break-before', 'break-after', 'break-inside'</h3> 35.163 @@ -1241,15 +1276,6 @@ 35.164 35.165 35.166 <p>Only a limited list of properties can be set in a region style rule:</p> 35.167 - 35.168 - <div class="issue-marker wrapper"> 35.169 - <div class="issue-marker" data-bug_id="16921" data-bug_status="REOPENED"> 35.170 - <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16921">Issue-16921</a> 35.171 - <div class="issue-details"> 35.172 - <p class="short-desc">Should text-align be added to region styling properties</p> 35.173 - </div> 35.174 - </div> 35.175 - </div> 35.176 35.177 <ol> 35.178 <li><a href="http://www.w3.org/TR/CSS2/fonts.html">font properties</a></li> 35.179 @@ -1261,6 +1287,7 @@ 35.180 <li><a href="http://www.w3.org/TR/CSS2/text.html#propdef-text-decoration">'text-decoration'</a></li> 35.181 <li><a href="http://www.w3.org/TR/CSS2/text.html#propdef-text-transform">'text-transform'</a></li> 35.182 <li><a href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">'line-height'</a></li> 35.183 + <li><a href="http://www.w3.org/TR/css3-text/#justification">alignment and justification properties</a></li> 35.184 <li><a href="http://www.w3.org/TR/css3-background/#borders">border properties</a></li> 35.185 <li><a href="http://www.w3.org/TR/css3-background/#corners">rounded corner properties</a></li> 35.186 <li><a href="http://www.w3.org/TR/css3-background/#border-images">border images properties</a></li> 35.187 @@ -1483,15 +1510,6 @@ 35.188 [[!CSS3COL]].</p> 35.189 35.190 <h2 id="pseudo_elements">Pseudo-elements</h2> 35.191 - 35.192 - <div class="issue-marker" data-bug_id="15188" data-bug_status="NEW"> 35.193 - <a href= 35.194 - "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15188">Issue-15188</a> 35.195 - 35.196 - <div class="issue-details"> 35.197 - <p class="short-desc">add functionality for having textual description like "continued here" or "continued on page x" to regions.</p> 35.198 - </div> 35.199 - </div> 35.200 35.201 <p>It can be useful 35.202 to visually mark the content 35.203 @@ -1743,13 +1761,6 @@ 35.204 <li>the <code class="idl">getContent()</code> method returns an empty <code class="idl">NodeList</code> instance.</li> 35.205 <li>the <code class="idl">getRegionsByContent()</code> method retuns an empty sequence.</li> 35.206 </ul> 35.207 - 35.208 - <div class="issue-marker" data-bug_id="16382" data-bug_status="ASSIGNED"> 35.209 - <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16382">Issue-16382</a> 35.210 - <div class="issue-details"> 35.211 - <p class="short-desc">Should we have a NamedFlow.getRegionsByFlowRanges?</p> 35.212 - </div> 35.213 - </div> 35.214 35.215 <h3 id="the-region-interface">The Region interface</h3> 35.216 35.217 @@ -1991,9 +2002,11 @@ 35.218 when there is a possible layout change 35.219 in their region chain. 35.220 The event is asynchronous, 35.221 - and fires when 35.222 + and fires in the same step of the 35.223 + <a href="http://www.w3.org/TR/html5/webappapis.html#processing-model-2">event loop</a> 35.224 + [[!HTML5]] as when 35.225 <a href="http://www.w3.org/TR/2012/WD-dom-20120405/#mutation-observers">MutationObservers</a> 35.226 - [[!DOM]] are invoked.</p> 35.227 + [[!DOM]] are invoked.</p> 35.228 <p>If region chain nesting occurs 35.229 (the contents of a <a href="#dom-named-flow"><code class="idl">NamedFlow</code></a> 35.230 contains regions 35.231 @@ -2429,6 +2442,9 @@ 35.232 <h3 id="changes_from_Aug_28_2012">Changes from <a href="http://www.w3.org/TR/2012/WD-css3-regions-20120823/">August 28<sup>th</sup> 2012</a> version</h3> 35.233 35.234 <ul> 35.235 + <li>Added section on fragmenting the fragmenters</li> 35.236 + <li>Added section on handling circular flow-from and flow-into situations</li> 35.237 + <li>Added alignment and justification to region styling properties</li> 35.238 <li>Added timing for regionLayoutUpdate event</li> 35.239 <li>Clarified interaction between content and flow-from for pseudo-elements</li> 35.240 <li>Changed NamedFlowCollection getters to return undefined when there is no NamedFlow.</li> 35.241 @@ -2773,21 +2789,6 @@ 35.242 35.243 <h2 class="no-num" id="references">References</h2> 35.244 35.245 - <div class="issue-marker wrapper"> 35.246 - <div class="issue-marker" data-bug_id="16404" data-bug_status="ASSIGNED"> 35.247 - <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16404">Issue-16404</a> 35.248 - <div class="issue-details"> 35.249 - <p class="short-desc">Fix specification dependencies</p> 35.250 - </div> 35.251 - </div> 35.252 - <div class="issue-marker" data-bug_id="18767" data-bug_status="NEW"> 35.253 - <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=18767">Issue-18767</a> 35.254 - <div class="issue-details"> 35.255 - <p class="short-desc">Something appears to be wrong with the checkSpecificationIssues() call</p> 35.256 - </div> 35.257 - </div> 35.258 - </div> 35.259 - 35.260 <h3 class="no-num" id="normative-references">Normative references</h3> 35.261 <!--begin-normative--><!--end-normative--> 35.262 35.263 @@ -2801,6 +2802,7 @@ 35.264 <!-- properties --> 35.265 35.266 <!-- template markup for issues pulled from Bugzilla --> <!-- template markup for issues pulled from Bugzilla --> 35.267 +<!-- 35.268 <script type="text/template" id="issue-template"> 35.269 <div class="issue-marker" data-bug_id="{{bug_id}}" data-bug_status="{{bug_status}}"> 35.270 <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id={{bug_id}}">Issue-{{bug_id}}</a> 35.271 @@ -2815,7 +2817,8 @@ 35.272 <script type="text/javascript"> 35.273 checkSpecificationIssues('CSS', 'Regions'); 35.274 </script> 35.275 - 35.276 +--> 35.277 + 35.278 </body> 35.279 </html> 35.280 <!-- Keep this comment at the end of the file
36.1 --- a/css3-sizing/Overview.html Mon Oct 22 00:33:44 2012 +0200 36.2 +++ b/css3-sizing/Overview.html Mon Oct 22 00:41:17 2012 +0200 36.3 @@ -48,6 +48,11 @@ 36.4 <dd><a 36.5 href="http://dev.w3.org/csswg/css3-sizing/">http://dev.w3.org/csswg/css3-sizing/</a> 36.6 36.7 + <dt>Previous Versions: 36.8 + 36.9 + <dd><a 36.10 + href="http://www.w3.org/TR/2012/WD-css3-sizing-20120927/">http://www.w3.org/TR/2012/WD-css3-sizing-20120927/</a> 36.11 + 36.12 <dt>Issue Tracking: 36.13 36.14 <dd><a 36.15 @@ -284,7 +289,9 @@ 36.16 <dd> A size that can be determined without measuring content; that is, a 36.17 <var><length></var>, a size of the <i>initial containing block</i>, or 36.18 a <var><percentage></var> that is resolved against a <a 36.19 - href="#definite-size"><i>definite</i></a> size. 36.20 + href="#definite-size"><i>definite</i></a> size. Additionally, the size of 36.21 + the containing block of an absolutely positioned element is always <a 36.22 + href="#definite-size"><i>definite</i></a> with respect to that element. 36.23 36.24 <dt><dfn id=indefinite-size title="indefinite|indefinite size">indefinite 36.25 size</dfn> 36.26 @@ -303,6 +310,16 @@ 36.27 either a <dfn id=min-content-constraint>min-content constraint</dfn> or a 36.28 <dfn id=max-content-constraint>max-content constraint</dfn>. 36.29 36.30 + <dt><dfn id=fill-available-fit>fill-available fit</dfn> 36.31 + 36.32 + <dd> The <a href="#fill-available-fit"><i>fill-available fit</i></a> into 36.33 + a given size is that size, minus the element's computed margins (not 36.34 + collapsed, treating ‘<code class=css>auto</code>’ as zero), border, 36.35 + and padding in the given dimension. 36.36 + <p class=note> Note: This is the formula used to calculate widths of 36.37 + non-replaced blocks in normal flow in <a 36.38 + href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1§10.3.3</a>. 36.39 + 36.40 <dt><dfn id=fallback-size title="fallback|fallback size">fallback 36.41 size</dfn> 36.42 36.43 @@ -504,15 +521,15 @@ 36.44 appropriate to the writing mode. 36.45 36.46 <dt><dfn id=repudiate-floats>‘<code 36.47 - class=css>repudiate-floats</code>’</dfn> 36.48 + class=css>repudiate-floats</code>’</dfn> <span class=issue>Less stupid 36.49 + name?</span> 36.50 36.51 <dd> In the inline axis, use the larger of the min-content measure, and 36.52 the fill-available measure minus the size of any non-descendant floats in 36.53 the same formatting context. (This is similar to the behavior of a box 36.54 that establishes a formatting context next to a float.) In the block 36.55 axis, this is identical to ‘<code class=css>auto</code>’. 36.56 - <p class=issue> Does this value work? Is it needed? Also: less stupid 36.57 - name? 36.58 + <p class=issue> Does this value work? Is it needed? 36.59 </dl> 36.60 36.61 <p class=issue> Right now all of these except ‘<a 36.62 @@ -522,6 +539,16 @@ 36.63 <p class=issue> If the measure is ‘<code class=css>auto</code>’, we 36.64 could have min-content extent imply a max-content measure, and vice versa. 36.65 36.66 + <p class=note> Note that percentages resolved against the intrinsic sizes 36.67 + (‘<a href="#max-content"><code class=css>max-content</code></a>’, 36.68 + ‘<a href="#min-content"><code class=css>min-content</code></a>’, ‘<a 36.69 + href="#fit-content"><code class=css>fit-content</code></a>’, ‘<a 36.70 + href="#repudiate-floats"><code class=css>repudiate-floats</code></a>’) 36.71 + will compute to ‘<code class=css>auto</code>’, <a 36.72 + href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">as 36.73 + defined by CSS 2.1</a>. <a href="#CSS21" 36.74 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 36.75 + 36.76 <h3 id=the-contain-floats-value><span class=secno>3.2. </span> Containing 36.77 Floats</h3> 36.78 36.79 @@ -775,71 +802,71 @@ 36.80 <h3 id=multicol-intrinsic><span class=secno>4.5. </span> Intrinsic Sizes in 36.81 Multi-column Layout</h3> 36.82 36.83 - <p class=issue> Multi-column elements are different from most in that they 36.84 - grow sideways when their height is restricted. The ‘<a 36.85 - href="#max-content"><code class=css>max-content</code></a>’ value should 36.86 - be able to accommodate this somehow, in particular as this is how 36.87 - multi-column elements work in <a 36.88 - href="http://www.w3.org/TR/css3-writing-modes/#orthogonal-multicol">orthogonal 36.89 - flows</a>. See also <a 36.90 - href="http://lists.w3.org/Archives/Public/www-style/2011Apr/0316.html">this 36.91 - explanation</a> 36.92 - <!-- http://lists.w3.org/Archives/Public/www-style/2011May/0468.html --> 36.93 - <!-- 36.94 + <p> The <a href="#min-content-measure"><i>min-content measure</i></a> of a 36.95 + multi-column element with a computed ‘<code 36.96 + class=property>column-width</code>’ not ‘<code 36.97 + class=css>auto</code>’ is the smaller of its ‘<code 36.98 + class=property>column-width</code>’ and the largest <i>min-measure 36.99 + contribution</i> of its contents. 36.100 36.101 - <p class="issue"> 36.102 - This section is VERY experimental. Feedback is encouraged. Shipping implementations is not. 36.103 + <p> The <a href="#min-content-measure"><i>min-content measure</i></a> of a 36.104 + multi-column element with a computed ‘<code 36.105 + class=property>column-width</code>’ of ‘<code class=css>auto</code>’ 36.106 + is the largest <i>min-measure contribution</i> of its contents multiplied 36.107 + by its ‘<code class=property>column-count</code>’ (treating ‘<code 36.108 + class=css>auto</code>’ as ‘<code class=css>1</code>’). 36.109 36.110 - <p>For multi-column elements laid out with infinite available measure (see 36.111 - <a href="#orthogonal-multicol">Multi-column Layout in Orthogonal Flows</a>), 36.112 - the <i>min-content</i> extent is the extent that would result 36.113 - from taking every permissible pagination break as a column break, and the 36.114 - <i>max-content</i> extent is the extent that would result from taking 36.115 - only the forced breaks. For all other multi-column elements it is, like 36.116 - CSS2.1 block-level boxes, the extent that would be calculated for an 36.117 - ''auto'' extent per [[CSS3MULTICOL]]. 36.118 + <p> The <a href="#max-content-measure"><i>max-content measure</i></a> of a 36.119 + multi-column element with unrestrained column heights and a computed 36.120 + ‘<code class=property>column-count</code>’ not ‘<code 36.121 + class=css>auto</code>’ is its ‘<code 36.122 + class=property>column-count</code>’ multiplied by the larger of its 36.123 + ‘<code class=property>column-width</code>’ (treating ‘<code 36.124 + class=css>auto</code>’ as 0) and the largest <i>max-measure 36.125 + contribution</i> of its contents. 36.126 36.127 -<pre> 36.128 -NOTES FROM ROSSEN: 36.129 - min-content measure is min(column-width, min-content) 36.130 - max-content measure is 36.131 - 1. Pass w/ colspans displ: none; 36.132 - Get width 36.133 - 2. Pass with colspans only in width 36.134 - Get remaining height 36.135 - 3. Pass w/ spans again using remaining height 36.136 - Get width 36.137 - 4. Layout in width as final 36.138 - Will lay out perfectly without colspans; will have some slack but no 36.139 - overflow when colspans present. 36.140 -</pre> 36.141 + <p> The <a href="#max-content-measure"><i>max-content measure</i></a> of a 36.142 + multi-column element with unrestrained column heights and a computed 36.143 + ‘<code class=property>column-count</code>’ of ‘<code 36.144 + class=css>auto</code>’ is its ‘<code 36.145 + class=property>column-width</code>’ multiplied by the number of columns 36.146 + obtained by taking all allowed column breaks <a href="#CSS3-BREAK" 36.147 + rel=biblioentry>[CSS3-BREAK]<!--{{CSS3-BREAK}}--></a>. <!-- 36.148 + The above was decided based on dholbert's example in http://lists.w3.org/Archives/Public/www-style/2012Oct/0017.html . 36.149 + These definitions make multicols work well in flexbox, 36.150 + both in 'stretch' and non-'stretch' cases, 36.151 + without wasted space or needless overflow. 36.152 + --> 36.153 36.154 - <p> 36.155 - The <i>min-content measure</i> of a multi-column element is 36.156 - the smaller of its 'column-width' and the <i>min-measure contribution</i> 36.157 - of its contents. 36.158 + <p> The <a href="#max-content-measure"><i>max-content measure</i></a> of a 36.159 + multi-column element with restrained-height columns (i.e. a specified 36.160 + ‘<code class=property>extent</code>’ or ‘<code 36.161 + class=property>max-extent</code>’) is the <i>measure</i> that would 36.162 + exactly include all of its columns. It may be approximated by: 36.163 36.164 - <p> 36.165 - The <i>max-content measure</i> of a multi-column element 36.166 - with restrained-height columns (i.e. a specified <i>extent<i> or <i>max-extent</i>) 36.167 - is the <i>measure</i> that would exactly include all of its columns. 36.168 - It may be approximated by: 36.169 - <ul> 36.170 - <li>Laying out the element with column-spanning elements given 'display: none', 36.171 - and taking a measure that includes all the columns. 36.172 - <li>Laying out all of the column-spanning elements into that resulting measure, 36.173 - and taking the resulting extent. 36.174 - <li>Subtracting that resulting extent from the specified restraint, 36.175 - laying out the element without column-spanning elements again into this adjusted extent, 36.176 - and taking the measure of all its columns as its <i>max-content measure</i>. 36.177 - <p> 36.178 - or by some more accurate method. 36.179 + <ul> 36.180 + <li> Laying out the element with column-spanning elements given ‘<code 36.181 + class=css>display: none</code>’, and taking a measure that includes all 36.182 + the columns. 36.183 36.184 - <p class="note"> 36.185 - This approximation can result in some slack, but avoids overflow in the most common cases, 36.186 - where the balanced height of the columns above spanning elements are approximately equal. 36.187 + <li> Laying out all of the column-spanning elements into that resulting 36.188 + measure, and taking the resulting extent. 36.189 36.190 ---> 36.191 + <li> Subtracting that resulting extent from the specified restraint, 36.192 + laying out the element without column-spanning elements again into this 36.193 + adjusted extent, and taking the measure of all its columns as its <a 36.194 + href="#max-content-measure"><i>max-content measure</i></a>. 36.195 + </ul> 36.196 + 36.197 + <p> or by some more accurate method. 36.198 + 36.199 + <p class=note> This approximation can result in some slack, but avoids 36.200 + overflow in the most common cases, where the balanced height of the 36.201 + columns above spanning elements are approximately equal. 36.202 + 36.203 + <p class=note> In the common case of no column-spanning elements, this 36.204 + approximation collapses to simply doing a layout, and measuring the 36.205 + resulting columns. 36.206 36.207 <h2 id=extrinsic-sizing><span class=secno>5. </span> Extrinsic Size 36.208 Determination</h2> 36.209 @@ -848,30 +875,32 @@ 36.210 on the context of an element, without regard for its contents. 36.211 36.212 <p> The inner <a href="#fill-available-measure"><i>fill-available 36.213 - measure</i></a> of a box is the larger of… 36.214 + measure</i></a> of a box is… 36.215 36.216 <ul> 36.217 - <li> Its containing block's computed ‘<code 36.218 - class=property>min-measure</code>’ if that measure is <a 36.219 - href="#definite-size"><i>definite</i></a>, or zero otherwise. 36.220 + <li> If the box is the root or is absolutely-positioned, the measure of 36.221 + its containing block, else 36.222 36.223 - <li> The smaller of: 36.224 - <ul> 36.225 - <li> Its containing block's computed ‘<code 36.226 - class=property>max-measure</code>’ if that measure is <a 36.227 - href="#definite-size"><i>definite</i></a>, or infinity otherwise. 36.228 - 36.229 - <li> The containing block's computed measure if that is <a 36.230 - href="#definite-size"><i>definite</i></a>, or its inner <a 36.231 - href="#fill-available-measure"><i>fill-available measure</i></a> 36.232 - otherwise. 36.233 - </ul> 36.234 + <li> <code>max(<i>min-measure</i>|0, min(<i>max-measure</i>|infinity, 36.235 + <i>measure</i>|<a 36.236 + href="#fill-available"><i>fill-available</i></a>))</code> where the sizes 36.237 + are inner measures of the element establishing the box's containing 36.238 + block, and where the first value is used if it is <a 36.239 + href="#definite-size"><i>definite</i></a> and the second value otherwise. 36.240 </ul> 36.241 36.242 - <p> …less the box's inline-axis margins, borders, and padding. 36.243 + <p> …less the box's inline-axis margins (after any <a 36.244 + href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">margin 36.245 + collapsing</a>, and treating ‘<code class=css>auto</code>’ margins as 36.246 + zero), borders, and padding. 36.247 36.248 <p> The <a href="#fill-available-extent"><i>fill-available extent</i></a> 36.249 - of a box is defined analogously, but in the other dimension. <!-- 36.250 + of a box is defined analogously, but in the other dimension. 36.251 + 36.252 + <p class=issue> This definition might end up skipping further up the 36.253 + ancestor chain than we'd like in some cases. <a 36.254 + href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0204.html">Example.</a> 36.255 + Maybe it should stop at each formatting root, or something similar? <!-- 36.256 dddddddd 36.257 TTTTTTTTTTTTTTTTTTTTTTThhhhhhh EEEEEEEEEEEEEEEEEEEEEE d::::::d 36.258 T:::::::::::::::::::::Th:::::h E::::::::::::::::::::E d::::::d 36.259 @@ -1137,6 +1166,16 @@ 36.260 <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 36.261 <!----> 36.262 36.263 + <dt id=CSS3-BREAK>[CSS3-BREAK] 36.264 + 36.265 + <dd>Rossen Atanassov; Elika J. Etemad. <a 36.266 + href="http://www.w3.org/TR/2012/WD-css3-break-20120823/"><cite>CSS 36.267 + Fragmentation Module Level 3.</cite></a> 23 August 2012. W3C Working 36.268 + Draft. (Work in progress.) URL: <a 36.269 + href="http://www.w3.org/TR/2012/WD-css3-break-20120823/">http://www.w3.org/TR/2012/WD-css3-break-20120823/</a> 36.270 + </dd> 36.271 + <!----> 36.272 + 36.273 <dt id=CSS3COLOR>[CSS3COLOR] 36.274 36.275 <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a 36.276 @@ -1193,6 +1232,9 @@ 36.277 <li>fill-available extent, <a href="#fill-available-extent" 36.278 title="fill-available extent"><strong>2.</strong></a> 36.279 36.280 + <li>fill-available fit, <a href="#fill-available-fit" 36.281 + title="fill-available fit"><strong>2.</strong></a> 36.282 + 36.283 <li>fill-available measure, <a href="#fill-available-measure" 36.284 title="fill-available measure"><strong>2.</strong></a> 36.285
37.1 --- a/css3-sizing/Overview.src.html Mon Oct 22 00:33:44 2012 +0200 37.2 +++ b/css3-sizing/Overview.src.html Mon Oct 22 00:41:17 2012 +0200 37.3 @@ -27,6 +27,9 @@ 37.4 <dt>Editor's draft: 37.5 <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a> 37.6 37.7 + <dt>Previous Versions: 37.8 + <dd><a href="http://www.w3.org/TR/2012/WD-css3-sizing-20120927/">http://www.w3.org/TR/2012/WD-css3-sizing-20120927/</a> 37.9 + 37.10 <dt>Issue Tracking:</dt> 37.11 <dd><a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&component=Sizing&resolution=---">W3C Bugzilla</a> 37.12 37.13 @@ -118,6 +121,8 @@ 37.14 that is, a <var><length></var>, 37.15 a size of the <i>initial containing block</i>, 37.16 or a <var><percentage></var> that is resolved against a <i>definite</i> size. 37.17 + Additionally, the size of the containing block of an absolutely positioned element is always <i>definite</i> 37.18 + with respect to that element. 37.19 37.20 <dt><dfn title="indefinite|indefinite size">indefinite size</dfn> 37.21 <dd> 37.22 @@ -133,6 +138,16 @@ 37.23 <dfn>min-content constraint</dfn> or 37.24 a <dfn>max-content constraint</dfn>. 37.25 37.26 + <dt><dfn>fill-available fit</dfn> 37.27 + <dd> 37.28 + The <i>fill-available fit</i> into a given size 37.29 + is that size, 37.30 + minus the element's computed margins (not collapsed, treating ''auto'' as zero), 37.31 + border, and padding in the given dimension. 37.32 + 37.33 + <p class='note'> 37.34 + Note: This is the formula used to calculate widths of non-replaced blocks in normal flow in <a href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1§10.3.3</a>. 37.35 + 37.36 <dt><dfn title="fallback|fallback size">fallback size</dfn> 37.37 <dd> 37.38 Some sizing algorithms do not work well with an infinite size. 37.39 @@ -147,8 +162,8 @@ 37.40 (See <a href="http://dev.w3.org/csswg/css3-sizing/#extrinsic-sizing">Extrinsic Size Determination</a>.) 37.41 37.42 <p class='note'> 37.43 - Note: This is called the <i>available width</i> in <a href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a> 37.44 - and computed by the rules in <a href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1§10.3.3</a>. 37.45 + Note: This is called the <i>available width</i> in <a href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a> 37.46 + and computed by the rules in <a href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1§10.3.3</a>. 37.47 37.48 <dt><dfn>max-content measure</dfn> 37.49 <dd> 37.50 @@ -157,8 +172,8 @@ 37.51 (See <a href="http://dev.w3.org/csswg/css3-sizing/#intrinsic-sizing">Intrinsic Size Determination</a>.) 37.52 37.53 <p class='note'> 37.54 - Note: This is called the <i>preferred width</i> in <a href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a> 37.55 - and the <i>maximum cell width</i> in <a href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout">CSS2.1§17.5.2.2</a>. 37.56 + Note: This is called the <i>preferred width</i> in <a href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a> 37.57 + and the <i>maximum cell width</i> in <a href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout">CSS2.1§17.5.2.2</a>. 37.58 37.59 <dt><dfn>min-content measure</dfn> 37.60 <dd> 37.61 @@ -170,8 +185,8 @@ 37.62 (See <a href="http://dev.w3.org/csswg/css3-sizing/#intrinsic-sizing">Intrinsic Size Determination</a>.) 37.63 37.64 <p class='note'> 37.65 - Note: This is called the <i>preferred minimum width</i> in <a href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a> 37.66 - and the <i>minimum content width</i> in <a href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout">CSS2.1§17.5.2.2</a>. 37.67 + Note: This is called the <i>preferred minimum width</i> in <a href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a> 37.68 + and the <i>minimum content width</i> in <a href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout">CSS2.1§17.5.2.2</a>. 37.69 37.70 <dt><dfn>fit-content measure</dfn> 37.71 <dd> 37.72 @@ -180,8 +195,8 @@ 37.73 Otherwise, equal to the <i>max-content measure</i>. 37.74 37.75 <p class='note'> 37.76 - Note: This is called the <i>shrink-to-fit</i> width in <a href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a> 37.77 - and <a href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm">CSS Multi-column Layout § 3.4</a>. 37.78 + Note: This is called the <i>shrink-to-fit</i> width in <a href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a> 37.79 + and <a href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm">CSS Multi-column Layout § 3.4</a>. 37.80 37.81 <dt><dfn>fill-available extent</dfn> 37.82 <dd> 37.83 @@ -279,7 +294,7 @@ 37.84 Use the <i>fit-content measure</i> or <i>fit-content extent</i>, 37.85 as appropriate to the writing mode. 37.86 37.87 - <dt><dfn>''repudiate-floats''</dfn> 37.88 + <dt><dfn>''repudiate-floats''</dfn> <span class='issue'>Less stupid name?</span> 37.89 <dd> 37.90 In the inline axis, 37.91 use the larger of the min-content measure, 37.92 @@ -291,7 +306,6 @@ 37.93 <p class='issue'> 37.94 Does this value work? 37.95 Is it needed? 37.96 - Also: less stupid name? 37.97 </dl> 37.98 37.99 <p class="issue"> 37.100 @@ -303,6 +317,12 @@ 37.101 we could have min-content extent imply a max-content measure, 37.102 and vice versa. 37.103 37.104 + <p class='note'> 37.105 + Note that percentages resolved against the intrinsic sizes 37.106 + (''max-content'', ''min-content'', ''fit-content'', ''repudiate-floats'') 37.107 + will compute to ''auto'', 37.108 + <a href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">as defined by CSS 2.1</a>. [[!CSS21]] 37.109 + 37.110 <h3 id='the-contain-floats-value'> 37.111 Containing Floats</h3> 37.112 37.113 @@ -488,8 +508,8 @@ 37.114 The <i>min-content extent</i> and <i>max-content extent</i> of a <i>block container box</i> 37.115 is the content extent as defined 37.116 (for horizontal writing modes) 37.117 - in <a href="http://www.w3.org/TR/CSS21/visudet.html#normal-block">CSS2.1§10.6.3</a> 37.118 - and <a href="http://www.w3.org/TR/CSS21/tables.html#height-layout">CSS2.1§17.5.3</a> 37.119 + in <a href="http://www.w3.org/TR/CSS21/visudet.html#normal-block">CSS2.1§10.6.3</a> 37.120 + and <a href="http://www.w3.org/TR/CSS21/tables.html#height-layout">CSS2.1§17.5.3</a> 37.121 for elements with ''height: auto'', 37.122 and analogously for vertical writing modes. 37.123 37.124 @@ -510,70 +530,77 @@ 37.125 <h3 id="multicol-intrinsic"> 37.126 Intrinsic Sizes in Multi-column Layout</h3> 37.127 37.128 - <p class='issue'> 37.129 - Multi-column elements are different from most in that they grow sideways 37.130 - when their height is restricted. The ''max-content'' value should be able 37.131 - to accommodate this somehow, in particular as this is how multi-column 37.132 - elements work in <a href="http://www.w3.org/TR/css3-writing-modes/#orthogonal-multicol">orthogonal flows</a>. 37.133 - See also 37.134 - <a href="http://lists.w3.org/Archives/Public/www-style/2011Apr/0316.html">this explanation</a> 37.135 - <!-- http://lists.w3.org/Archives/Public/www-style/2011May/0468.html --> 37.136 - 37.137 -<!-- 37.138 - 37.139 - <p class="issue"> 37.140 - This section is VERY experimental. Feedback is encouraged. Shipping implementations is not. 37.141 - 37.142 - <p>For multi-column elements laid out with infinite available measure (see 37.143 - <a href="#orthogonal-multicol">Multi-column Layout in Orthogonal Flows</a>), 37.144 - the <i>min-content</i> extent is the extent that would result 37.145 - from taking every permissible pagination break as a column break, and the 37.146 - <i>max-content</i> extent is the extent that would result from taking 37.147 - only the forced breaks. For all other multi-column elements it is, like 37.148 - CSS2.1 block-level boxes, the extent that would be calculated for an 37.149 - ''auto'' extent per [[CSS3MULTICOL]]. 37.150 - 37.151 -<pre> 37.152 -NOTES FROM ROSSEN: 37.153 - min-content measure is min(column-width, min-content) 37.154 - max-content measure is 37.155 - 1. Pass w/ colspans displ: none; 37.156 - Get width 37.157 - 2. Pass with colspans only in width 37.158 - Get remaining height 37.159 - 3. Pass w/ spans again using remaining height 37.160 - Get width 37.161 - 4. Layout in width as final 37.162 - Will lay out perfectly without colspans; will have some slack but no 37.163 - overflow when colspans present. 37.164 -</pre> 37.165 + <p> 37.166 + The <i>min-content measure</i> of a multi-column element 37.167 + with a computed 'column-width' not ''auto'' 37.168 + is the smaller of 37.169 + its 'column-width' 37.170 + and the largest <i>min-measure contribution</i> of its contents. 37.171 37.172 <p> 37.173 - The <i>min-content measure</i> of a multi-column element is 37.174 - the smaller of its 'column-width' and the <i>min-measure contribution</i> 37.175 - of its contents. 37.176 + The <i>min-content measure</i> of a multi-column element 37.177 + with a computed 'column-width' of ''auto'' 37.178 + is the largest <i>min-measure contribution</i> of its contents 37.179 + multiplied by its 'column-count' 37.180 + (treating ''auto'' as ''1''). 37.181 37.182 <p> 37.183 The <i>max-content measure</i> of a multi-column element 37.184 - with restrained-height columns (i.e. a specified <i>extent<i> or <i>max-extent</i>) 37.185 + with unrestrained column heights 37.186 + and a computed 'column-count' not ''auto'' 37.187 + is its 'column-count' 37.188 + multiplied by the larger of 37.189 + its 'column-width' (treating ''auto'' as 0) 37.190 + and the largest <i>max-measure contribution</i> of its contents. 37.191 + 37.192 + <p> 37.193 + The <i>max-content measure</i> of a multi-column element 37.194 + with unrestrained column heights 37.195 + and a computed 'column-count' of ''auto'' 37.196 + is its 'column-width' 37.197 + multiplied by the number of columns obtained by taking all allowed column breaks [[CSS3-BREAK]]. 37.198 + 37.199 + <!-- 37.200 + The above was decided based on dholbert's example in http://lists.w3.org/Archives/Public/www-style/2012Oct/0017.html . 37.201 + These definitions make multicols work well in flexbox, 37.202 + both in 'stretch' and non-'stretch' cases, 37.203 + without wasted space or needless overflow. 37.204 + --> 37.205 + 37.206 + <p> 37.207 + The <i>max-content measure</i> of a multi-column element 37.208 + with restrained-height columns (i.e. a specified 'extent' or 'max-extent') 37.209 is the <i>measure</i> that would exactly include all of its columns. 37.210 It may be approximated by: 37.211 + 37.212 <ul> 37.213 - <li>Laying out the element with column-spanning elements given 'display: none', 37.214 + <li> 37.215 + Laying out the element with column-spanning elements given 'display: none', 37.216 and taking a measure that includes all the columns. 37.217 - <li>Laying out all of the column-spanning elements into that resulting measure, 37.218 + 37.219 + <li> 37.220 + Laying out all of the column-spanning elements into that resulting measure, 37.221 and taking the resulting extent. 37.222 - <li>Subtracting that resulting extent from the specified restraint, 37.223 + 37.224 + <li> 37.225 + Subtracting that resulting extent from the specified restraint, 37.226 laying out the element without column-spanning elements again into this adjusted extent, 37.227 and taking the measure of all its columns as its <i>max-content measure</i>. 37.228 + </ul> 37.229 + 37.230 <p> 37.231 or by some more accurate method. 37.232 37.233 - <p class="note"> 37.234 - This approximation can result in some slack, but avoids overflow in the most common cases, 37.235 + <p class='note'> 37.236 + This approximation can result in some slack, 37.237 + but avoids overflow in the most common cases, 37.238 where the balanced height of the columns above spanning elements are approximately equal. 37.239 37.240 ---> 37.241 + <p class='note'> 37.242 + In the common case of no column-spanning elements, 37.243 + this approximation collapses to simply doing a layout, 37.244 + and measuring the resulting columns. 37.245 + 37.246 37.247 <h2 id='extrinsic-sizing'> 37.248 Extrinsic Size Determination</h2> 37.249 @@ -583,34 +610,29 @@ 37.250 without regard for its contents. 37.251 37.252 <p> 37.253 - The inner <i>fill-available measure</i> of a box 37.254 - is the larger of… 37.255 - 37.256 + The inner <i>fill-available measure</i> of a box is… 37.257 <ul> 37.258 <li> 37.259 - Its containing block's computed 'min-measure' if that measure is <i>definite</i>, 37.260 - or zero otherwise. 37.261 - 37.262 + If the box is the root or is absolutely-positioned, the measure of its containing block, else 37.263 <li> 37.264 - The smaller of: 37.265 - 37.266 - <ul> 37.267 - <li> 37.268 - Its containing block's computed 'max-measure' if that measure is <i>definite</i>, 37.269 - or infinity otherwise. 37.270 - 37.271 - <li> 37.272 - The containing block's computed measure if that is <i>definite</i>, 37.273 - or its inner <i>fill-available measure</i> otherwise. 37.274 - </ul> 37.275 + <code>max(<i>min-measure</i>|0, min(<i>max-measure</i>|infinity, <i>measure</i>|<i>fill-available</i>))</code> 37.276 + where the sizes are inner measures of the element establishing the box's containing block, 37.277 + and where the first value is used if it is <i>definite</i> and the second value otherwise. 37.278 </ul> 37.279 - 37.280 - …less the box's inline-axis margins, borders, and padding. 37.281 + <p> 37.282 + …less the box's inline-axis margins 37.283 + (after any <a href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">margin collapsing</a>, and treating ''auto'' margins as zero), 37.284 + borders, and padding. 37.285 37.286 <p> 37.287 The <i>fill-available extent</i> of a box is defined analogously, 37.288 but in the other dimension. 37.289 37.290 + <p class='issue'> 37.291 + This definition might end up skipping further up the ancestor chain than we'd like in some cases. 37.292 + <a href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0204.html">Example.</a> 37.293 + Maybe it should stop at each formatting root, or something similar? 37.294 + 37.295 37.296 37.297 <!--
38.1 --- a/css3-syntax/Overview.html Mon Oct 22 00:33:44 2012 +0200 38.2 +++ b/css3-syntax/Overview.html Mon Oct 22 00:41:17 2012 +0200 38.3 @@ -11,10 +11,10 @@ 38.4 38.5 <meta content="CSS Syntax Module Level 3 (CSS3 Syntax)" name=dcterms.title> 38.6 <meta content=text name=dcterms.type> 38.7 - <meta content=2012-10-09 name=dcterms.issued> 38.8 + <meta content=2012-10-16 name=dcterms.issued> 38.9 <meta content="http://dev.w3.org/csswg/css3-syntax/" name=dcterms.creator> 38.10 <meta content=W3C name=dcterms.publisher> 38.11 - <meta content="http://www.w3.org/TR/2012/ED-css3-syntax-20121009/" 38.12 + <meta content="http://www.w3.org/TR/2012/ED-css3-syntax-20121016/" 38.13 name=dcterms.identifier> 38.14 <link href="#contents" rel=contents> 38.15 <link href="#index" rel=index> 38.16 @@ -47,7 +47,8 @@ 38.17 38.18 <h1>CSS Syntax Module Level 3</h1> 38.19 38.20 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 9 October 2012</h2> 38.21 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 16 October 38.22 + 2012</h2> 38.23 38.24 <dl> 38.25 <dt>This version: 38.26 @@ -223,11 +224,11 @@ 38.27 <li><a href="#at-keyword-rest-state"><span class=secno>3.4.11. </span> 38.28 At-keyword-rest state</a> 38.29 38.30 - <li><a href="#identifier-state"><span class=secno>3.4.12. </span> 38.31 - Identifier state</a> 38.32 - 38.33 - <li><a href="#identifier-rest-state"><span class=secno>3.4.13. </span> 38.34 - Identifier-rest state</a> 38.35 + <li><a href="#ident-state"><span class=secno>3.4.12. </span> Ident 38.36 + state</a> 38.37 + 38.38 + <li><a href="#ident-rest-state"><span class=secno>3.4.13. </span> 38.39 + Ident-rest state</a> 38.40 38.41 <li><a href="#transform-function-whitespace-state"><span 38.42 class=secno>3.4.14. </span> Transform-function-whitespace state</a> 38.43 @@ -479,7 +480,7 @@ 38.44 </div> 38.45 38.46 <p> Property names and <a href="#at-rules"><i>at-rule</i></a> names are 38.47 - always <b>identifiers</b>, which have to start with a letter or a hyphen 38.48 + always <b>idents</b>, which have to start with a letter or a hyphen 38.49 followed by a letter, and then can contain letters, numbers, hyphens, or 38.50 underscores. You can include any character at all, even ones that CSS uses 38.51 in its syntax, by escaping it with a backslash (\) or by using a 38.52 @@ -623,19 +624,18 @@ 38.53 state. 38.54 38.55 <p> The output of the tokenization step is a series of zero or more of the 38.56 - following tokens: identifier, function, at-keyword, hash, string, 38.57 - bad-string, url, bad-url, delim, number, percentage, dimension, 38.58 - unicode-range, whitespace, comment, cdo, cdc, colon, semicolon, [, ], (, 38.59 - ), {, }. 38.60 - 38.61 - <p> Identifier, function, at-keyword, hash, string, and url tokens have a 38.62 - value composed of zero or more characters. Delim tokens have a value 38.63 - composed of a single character. Number, percentage, and dimension tokens 38.64 - have a representation composed of 1 or more character, a numeric value, 38.65 - and a type flag set to either "integer" or "number". The type flag 38.66 - defaults to "integer" if not otherwise set. Dimension tokens additionally 38.67 - have a unit composed of one or more characters. Unicode-range tokens have 38.68 - a range of characters. 38.69 + following tokens: ident, function, at-keyword, hash, string, bad-string, 38.70 + url, bad-url, delim, number, percentage, dimension, unicode-range, 38.71 + whitespace, comment, cdo, cdc, colon, semicolon, [, ], (, ), {, }. 38.72 + 38.73 + <p> ident, function, at-keyword, hash, string, and url tokens have a value 38.74 + composed of zero or more characters. Delim tokens have a value composed of 38.75 + a single character. Number, percentage, and dimension tokens have a 38.76 + representation composed of 1 or more character, a numeric value, and a 38.77 + type flag set to either "integer" or "number". The type flag defaults to 38.78 + "integer" if not otherwise set. Dimension tokens additionally have a unit 38.79 + composed of one or more characters. Unicode-range tokens have a range of 38.80 + characters. 38.81 38.82 <p> The tokenizer state machine consists of the states defined in the 38.83 following subsections. 38.84 @@ -1426,8 +1426,8 @@ 38.85 38.86 <p> Otherwise, if the <a href="#next-input-character"><i>next input 38.87 character</i></a> is a <a href="#name-start-character"><i>name-start 38.88 - character</i></a>, switch to the <a 38.89 - href="#identifier-state0"><i>identifier state</i></a>. Reconsume the <a 38.90 + character</i></a>, switch to the <a href="#ident-state0"><i>ident 38.91 + state</i></a>. Reconsume the <a 38.92 href="#current-input-character"><i>current input character</i></a>. 38.93 38.94 <p> Otherwise, emit a delim token with its value set to U+002D 38.95 @@ -1482,7 +1482,7 @@ 38.96 character</i></a> is a <a href="#newline"><i>newline</i></a> or EOF, this 38.97 is a <i>parse error</i>. Emit a delim token with its value set to U+005C 38.98 REVERSE SOLIDUS (\). Remain in this state. 38.99 - <p> Otherwise, switch to the <a href="#identifier-state0"><i>identifier 38.100 + <p> Otherwise, switch to the <a href="#ident-state0"><i>ident 38.101 state</i></a>. Reconsume the <a 38.102 href="#current-input-character"><i>current input character</i></a>. 38.103 38.104 @@ -1492,7 +1492,7 @@ 38.105 38.106 <dt>U+007B LEFT CURLY BRACKET ({) 38.107 38.108 - <dd> Emit a [ token. Remain in this state. 38.109 + <dd> Emit a { token. Remain in this state. 38.110 38.111 <dt>U+007D RIGHT CURLY BRACKET (}) 38.112 38.113 @@ -1522,15 +1522,15 @@ 38.114 followed by U+0028 LEFT PARENTHESIS ((), consume them. Switch to the <a 38.115 href="#url-state0"><i>url state</i></a>. 38.116 38.117 - <p>Otherwise, switch to the <a href="#identifier-state0"><i>identifier 38.118 + <p>Otherwise, switch to the <a href="#ident-state0"><i>ident 38.119 state</i></a>. Reconsume the <a 38.120 href="#current-input-character"><i>current input character</i></a>. 38.121 38.122 <dt><a href="#name-start-character"><i>name-start character</i></a> 38.123 38.124 - <dd> Switch to the <a href="#identifier-state0"><i>identifier 38.125 - state</i></a>. Reconsume the <a 38.126 - href="#current-input-character"><i>current input character</i></a>. 38.127 + <dd> Switch to the <a href="#ident-state0"><i>ident state</i></a>. 38.128 + Reconsume the <a href="#current-input-character"><i>current input 38.129 + character</i></a>. 38.130 38.131 <dt>EOF 38.132 38.133 @@ -1801,8 +1801,8 @@ 38.134 href="#current-input-character"><i>current input character</i></a>. 38.135 </dl> 38.136 38.137 - <h4 id=identifier-state><span class=secno>3.4.12. </span> <dfn 38.138 - id=identifier-state0>Identifier state</dfn></h4> 38.139 + <h4 id=ident-state><span class=secno>3.4.12. </span> <dfn 38.140 + id=ident-state0>Ident state</dfn></h4> 38.141 38.142 <p> Consume the <a href="#next-input-character"><i>next input 38.143 character</i></a>. 38.144 @@ -1814,17 +1814,16 @@ 38.145 character</i></a> is a <a href="#name-start-character"><i>name-start 38.146 character</i></a>, create an identifer token with its value initially set 38.147 to U+002D HYPHEN-MINUS. Switch to the <a 38.148 - href="#identifier-rest-state0"><i>identifier-rest state</i></a>. 38.149 + href="#ident-rest-state0"><i>ident-rest state</i></a>. 38.150 <p> Otherwise, switch to the <a href="#data-state0"><i>data 38.151 state</i></a>. Reconsume the <a 38.152 href="#current-input-character"><i>current input character</i></a>. 38.153 38.154 <dt><a href="#name-start-character"><i>name-start character</i></a> 38.155 38.156 - <dd> Create an identifier token with its value set to the <a 38.157 + <dd> Create an ident token with its value set to the <a 38.158 href="#current-input-character"><i>current input character</i></a>. 38.159 - Switch to the <a href="#identifier-rest-state0"><i>identifier-rest 38.160 - state</i></a>. 38.161 + Switch to the <a href="#ident-rest-state0"><i>ident-rest state</i></a>. 38.162 38.163 <dt>U+005C REVERSE SOLIDUS (\) 38.164 38.165 @@ -1833,9 +1832,9 @@ 38.166 switch to the <a href="#data-state0"><i>data state</i></a>. Reconsume the 38.167 <a href="#current-input-character"><i>current input character</i></a>. 38.168 <p> Otherwise, <a href="#consume-an-escaped-character0"><i>consume an 38.169 - escaped character</i></a>. Create an identifier token with its value set 38.170 - to the returned character. Switch to the <a 38.171 - href="#identifier-rest-state0"><i>identifier-rest state</i></a>. 38.172 + escaped character</i></a>. Create an ident token with its value set to 38.173 + the returned character. Switch to the <a 38.174 + href="#ident-rest-state0"><i>ident-rest state</i></a>. 38.175 38.176 <dt>anything else 38.177 38.178 @@ -1844,8 +1843,8 @@ 38.179 character</i></a>. 38.180 </dl> 38.181 38.182 - <h4 id=identifier-rest-state><span class=secno>3.4.13. </span> <dfn 38.183 - id=identifier-rest-state0>Identifier-rest state</dfn></h4> 38.184 + <h4 id=ident-rest-state><span class=secno>3.4.13. </span> <dfn 38.185 + id=ident-rest-state0>Ident-rest state</dfn></h4> 38.186 38.187 <p> Consume the <a href="#next-input-character"><i>next input 38.188 character</i></a>. 38.189 @@ -1854,18 +1853,18 @@ 38.190 <dt><a href="#name-character"><i>name character</i></a> 38.191 38.192 <dd> Append the <a href="#current-input-character"><i>current input 38.193 - character</i></a> to the identifier token's value. Remain in this state. 38.194 + character</i></a> to the ident token's value. Remain in this state. 38.195 38.196 <dt>U+005C REVERSE SOLIDUS (\) 38.197 38.198 <dd> If the <a href="#next-input-character"><i>next input 38.199 character</i></a> is a <a href="#newline"><i>newline</i></a> or EOF, emit 38.200 - the identifier token. Switch to the <a href="#data-state0"><i>data 38.201 + the ident token. Switch to the <a href="#data-state0"><i>data 38.202 state</i></a>. Reconsume the <a 38.203 href="#current-input-character"><i>current input character</i></a>. 38.204 <p> Otherwise, <a href="#consume-an-escaped-character0"><i>consume an 38.205 - escaped character</i></a>. Append the returned character to the 38.206 - identifier token's value. Remain in this state. 38.207 + escaped character</i></a>. Append the returned character to the ident 38.208 + token's value. Remain in this state. 38.209 38.210 <dt>U+0028 LEFT PARENTHESIS (() 38.211 38.212 @@ -1878,14 +1877,14 @@ 38.213 whitespace</i></a> flag is set, switch to the <a 38.214 href="#transform-function-whitespace-state0"><i>transform-function-whitespace 38.215 state</i></a>. 38.216 - <p> Otherwise, emit the identifier token. Switch to the <a 38.217 + <p> Otherwise, emit the ident token. Switch to the <a 38.218 href="#data-state0"><i>data state</i></a>. Reconsume the <a 38.219 href="#current-input-character"><i>current input character</i></a>. 38.220 38.221 <dt>anything else 38.222 38.223 - <dd> Emit the identifier token. Switch to the <a 38.224 - href="#data-state0"><i>data state</i></a>. Reconsume the <a 38.225 + <dd> Emit the ident token. Switch to the <a href="#data-state0"><i>data 38.226 + state</i></a>. Reconsume the <a 38.227 href="#current-input-character"><i>current input character</i></a>. 38.228 </dl> 38.229 38.230 @@ -1909,8 +1908,8 @@ 38.231 38.232 <dt>anything else 38.233 38.234 - <dd> Emit the identifier token. Switch to the <a 38.235 - href="#data-state0"><i>data state</i></a>. Reconsume the <a 38.236 + <dd> Emit the ident token. Switch to the <a href="#data-state0"><i>data 38.237 + state</i></a>. Reconsume the <a 38.238 href="#current-input-character"><i>current input character</i></a>. 38.239 </dl> 38.240 38.241 @@ -2016,9 +2015,9 @@ 38.242 Reconsume the <a href="#current-input-character"><i>current input 38.243 character</i></a>. 38.244 38.245 - <dt>U+0025 PERCENT SIGN 38.246 - 38.247 - <dd> Emit a percent token with its value set to the number produced by 38.248 + <dt>U+0025 PERCENT SIGN (%) 38.249 + 38.250 + <dd> Emit a percentage token with its value set to the number produced by 38.251 interpreting the number token's representation as a base-10 number. 38.252 Switch to the <a href="#data-state0"><i>data state</i></a>. Reconsume the 38.253 <a href="#current-input-character"><i>current input character</i></a>. 38.254 @@ -2130,9 +2129,9 @@ 38.255 to the <a href="#data-state0"><i>data state</i></a>. Reconsume the <a 38.256 href="#current-input-character"><i>current input character</i></a>. 38.257 38.258 - <dt>U+0025 PERCENT SIGN 38.259 - 38.260 - <dd> Emit a percent token with its value set to the number produced by 38.261 + <dt>U+0025 PERCENT SIGN (%) 38.262 + 38.263 + <dd> Emit a percentage token with its value set to the number produced by 38.264 interpreting the number token's representation as a base-10 number. 38.265 Switch to the <a href="#data-state0"><i>data state</i></a>. Reconsume the 38.266 <a href="#current-input-character"><i>current input character</i></a>. 38.267 @@ -2723,9 +2722,9 @@ 38.268 38.269 <dt>preserved tokens 38.270 38.271 - <dd> The tokens that can appear in the tree are: identifier, hash, string, 38.272 - url, delim, number, percentage, dimension, unicode-range, whitespace, 38.273 - comment, cdo, cdc, colon, semicolon, at-keyword, ], ), and }. 38.274 + <dd> The tokens that can appear in the tree are: ident, hash, string, url, 38.275 + delim, number, percentage, dimension, unicode-range, whitespace, comment, 38.276 + cdo, cdc, colon, semicolon, at-keyword, ], ), and }. 38.277 <p class=note> This means that the following tokens emitted by the 38.278 tokenizer stage will <strong>not</strong> appear in the stylesheet 38.279 object: function, bad-string, bad-url, [, (, {. 38.280 @@ -2850,7 +2849,7 @@ 38.281 <dd> Create a style rule and push it onto the <a 38.282 href="#stack-of-open-rules"><i>stack of open rules</i></a>. Switch to the 38.283 <a href="#selector-mode0"><i>selector mode</i></a>. <a 38.284 - href="#reconsume-the-current-input-token"><i>reconsume the current input 38.285 + href="#reconsume-the-current-input-token"><i>Reconsume the current input 38.286 token</i></a>. 38.287 </dl> 38.288 38.289 @@ -2946,7 +2945,7 @@ 38.290 <dd> Create a style rule and push it onto the <a 38.291 href="#stack-of-open-rules"><i>stack of open rules</i></a>. Switch to the 38.292 <a href="#selector-mode0"><i>selector mode</i></a>. <a 38.293 - href="#reconsume-the-current-input-token"><i>reconsume the current input 38.294 + href="#reconsume-the-current-input-token"><i>Reconsume the current input 38.295 token</i></a>. 38.296 </dl> 38.297 38.298 @@ -3150,7 +3149,7 @@ 38.299 <p> Otherwise, this is a <i>parse error</i>. Unset the <a 38.300 href="#current-declaration"><i>current declaration</i></a>. Switch to 38.301 the <a href="#next-declaration-error-mode0"><i>next-declaration error 38.302 - mode</i></a>. <a href="#reconsume-the-current-input-token"><i>reconsume 38.303 + mode</i></a>. <a href="#reconsume-the-current-input-token"><i>Reconsume 38.304 the current input token</i></a>. 38.305 38.306 <dt>anything else 38.307 @@ -3158,7 +3157,7 @@ 38.308 <dd> This is a <i>parse error</i>. Unset the <a 38.309 href="#current-declaration"><i>current declaration</i></a>. Switch to the 38.310 <a href="#next-declaration-error-mode0"><i>next-declaration error 38.311 - mode</i></a>. <a href="#reconsume-the-current-input-token"><i>reconsume 38.312 + mode</i></a>. <a href="#reconsume-the-current-input-token"><i>Reconsume 38.313 the current input token</i></a>. 38.314 </dl> 38.315 38.316 @@ -3248,7 +3247,7 @@ 38.317 38.318 <dd> Do nothing. Switch to the <a 38.319 href="#declaration-block-mode0"><i>declaration-block mode</i></a>. <a 38.320 - href="#reconsume-the-current-input-token"><i>reconsume the current input 38.321 + href="#reconsume-the-current-input-token"><i>Reconsume the current input 38.322 token</i></a>. 38.323 38.324 <dt>EOF token 38.325 @@ -3341,8 +3340,8 @@ 38.326 <a href="#current-input-token"><i>current input token</i></a> is a 38.327 dimension token, let <var>value</var> be the token's representation 38.328 followed by the token's unit. If the <a 38.329 - href="#current-input-token"><i>current input token</i></a> is an 38.330 - identifier token, let <var>value</var> be the token's value. 38.331 + href="#current-input-token"><i>current input token</i></a> is an ident 38.332 + token, let <var>value</var> be the token's value. 38.333 38.334 <p> If <var>value</var> has a length of 3 or 6 and is composed solely of <a 38.335 href="#hex-digit"><i>hex digits</i></a>, create a hash token with its 38.336 @@ -3851,11 +3850,11 @@ 38.337 <li>hex digit, <a href="#hex-digit" 38.338 title="hex digit"><strong>3.4.3.</strong></a> 38.339 38.340 - <li>Identifier-rest state, <a href="#identifier-rest-state0" 38.341 - title="Identifier-rest state"><strong>3.4.13.</strong></a> 38.342 - 38.343 - <li>Identifier state, <a href="#identifier-state0" 38.344 - title="Identifier state"><strong>3.4.12.</strong></a> 38.345 + <li>Ident-rest state, <a href="#ident-rest-state0" 38.346 + title="Ident-rest state"><strong>3.4.13.</strong></a> 38.347 + 38.348 + <li>Ident state, <a href="#ident-state0" 38.349 + title="Ident state"><strong>3.4.12.</strong></a> 38.350 38.351 <li>letter, <a href="#letter" title=letter><strong>3.4.3.</strong></a> 38.352
39.1 --- a/css3-syntax/Overview.src.html Mon Oct 22 00:33:44 2012 +0200 39.2 +++ b/css3-syntax/Overview.src.html Mon Oct 22 00:41:17 2012 +0200 39.3 @@ -197,7 +197,7 @@ 39.4 </div> 39.5 39.6 <p> 39.7 - Property names and <i>at-rule</i> names are always <b>identifiers</b>, 39.8 + Property names and <i>at-rule</i> names are always <b>idents</b>, 39.9 which have to start with a letter or a hyphen followed by a letter, 39.10 and then can contain letters, numbers, hyphens, or underscores. 39.11 You can include any character at all, 39.12 @@ -341,7 +341,7 @@ 39.13 39.14 <p> 39.15 The output of the tokenization step is a series of zero or more of the following tokens: 39.16 - identifier, 39.17 + ident, 39.18 function, 39.19 at-keyword, 39.20 hash, 39.21 @@ -368,7 +368,7 @@ 39.22 }. 39.23 39.24 <p> 39.25 - Identifier, function, at-keyword, hash, string, and url tokens have a value composed of zero or more characters. 39.26 + ident, function, at-keyword, hash, string, and url tokens have a value composed of zero or more characters. 39.27 Delim tokens have a value composed of a single character. 39.28 Number, percentage, and dimension tokens have a representation composed of 1 or more character, a numeric value, and a type flag set to either "integer" or "number". The type flag defaults to "integer" if not otherwise set. 39.29 Dimension tokens additionally have a unit composed of one or more characters. 39.30 @@ -722,7 +722,7 @@ 39.31 Otherwise, 39.32 if the <i>next input character</i> is 39.33 a <i>name-start character</i>, 39.34 - switch to the <i>identifier state</i>. 39.35 + switch to the <i>ident state</i>. 39.36 Reconsume the <i>current input character</i>. 39.37 39.38 <p> 39.39 @@ -802,7 +802,7 @@ 39.40 Remain in this state. 39.41 39.42 <p> 39.43 - Otherwise, switch to the <i>identifier state</i>. 39.44 + Otherwise, switch to the <i>ident state</i>. 39.45 Reconsume the <i>current input character</i>. 39.46 39.47 <dt>U+005D RIGHT SQUARE BRACKET (]) 39.48 @@ -812,7 +812,7 @@ 39.49 39.50 <dt>U+007B LEFT CURLY BRACKET ({) 39.51 <dd> 39.52 - Emit a [ token. 39.53 + Emit a { token. 39.54 Remain in this state. 39.55 39.56 <dt>U+007D RIGHT CURLY BRACKET (}) 39.57 @@ -845,12 +845,12 @@ 39.58 Switch to the <i>url state</i>. 39.59 39.60 <p>Otherwise, 39.61 - switch to the <i>identifier state</i>. 39.62 + switch to the <i>ident state</i>. 39.63 Reconsume the <i>current input character</i>. 39.64 39.65 <dt><i>name-start character</i> 39.66 <dd> 39.67 - Switch to the <i>identifier state</i>. 39.68 + Switch to the <i>ident state</i>. 39.69 Reconsume the <i>current input character</i>. 39.70 39.71 <dt>EOF 39.72 @@ -1174,7 +1174,7 @@ 39.73 </dl> 39.74 39.75 <h4> 39.76 -<dfn>Identifier state</dfn></h4> 39.77 +<dfn>Ident state</dfn></h4> 39.78 39.79 <p> 39.80 Consume the <i>next input character</i>. 39.81 @@ -1186,7 +1186,7 @@ 39.82 a <i>name-start character</i>, 39.83 create an identifer token 39.84 with its value initially set to U+002D HYPHEN-MINUS. 39.85 - Switch to the <i>identifier-rest state</i>. 39.86 + Switch to the <i>ident-rest state</i>. 39.87 39.88 <p> 39.89 Otherwise, 39.90 @@ -1195,9 +1195,9 @@ 39.91 39.92 <dt><i>name-start character</i> 39.93 <dd> 39.94 - Create an identifier token 39.95 + Create an ident token 39.96 with its value set to the <i>current input character</i>. 39.97 - Switch to the <i>identifier-rest state</i>. 39.98 + Switch to the <i>ident-rest state</i>. 39.99 39.100 <dt>U+005C REVERSE SOLIDUS (\) 39.101 <dd> 39.102 @@ -1209,9 +1209,9 @@ 39.103 <p> 39.104 Otherwise, 39.105 <i>consume an escaped character</i>. 39.106 - Create an identifier token 39.107 + Create an ident token 39.108 with its value set to the returned character. 39.109 - Switch to the <i>identifier-rest state</i>. 39.110 + Switch to the <i>ident-rest state</i>. 39.111 39.112 <dt>anything else 39.113 <dd> 39.114 @@ -1220,7 +1220,7 @@ 39.115 </dl> 39.116 39.117 <h4> 39.118 -<dfn>Identifier-rest state</dfn></h4> 39.119 +<dfn>Ident-rest state</dfn></h4> 39.120 39.121 <p> 39.122 Consume the <i>next input character</i>. 39.123 @@ -1229,21 +1229,21 @@ 39.124 <dt><i>name character</i> 39.125 <dd> 39.126 Append the <i>current input character</i> 39.127 - to the identifier token's value. 39.128 + to the ident token's value. 39.129 Remain in this state. 39.130 39.131 <dt>U+005C REVERSE SOLIDUS (\) 39.132 <dd> 39.133 If the <i>next input character</i> is 39.134 a <i>newline</i> or EOF, 39.135 - emit the identifier token. 39.136 + emit the ident token. 39.137 Switch to the <i>data state</i>. 39.138 Reconsume the <i>current input character</i>. 39.139 39.140 <p> 39.141 Otherwise, 39.142 <i>consume an escaped character</i>. 39.143 - Append the returned character to the identifier token's value. 39.144 + Append the returned character to the ident token's value. 39.145 Remain in this state. 39.146 39.147 <dt>U+0028 LEFT PARENTHESIS (() 39.148 @@ -1259,13 +1259,13 @@ 39.149 39.150 <p> 39.151 Otherwise, 39.152 - emit the identifier token. 39.153 + emit the ident token. 39.154 Switch to the <i>data state</i>. 39.155 Reconsume the <i>current input character</i>. 39.156 39.157 <dt>anything else 39.158 <dd> 39.159 - Emit the identifier token. 39.160 + Emit the ident token. 39.161 Switch to the <i>data state</i>. 39.162 Reconsume the <i>current input character</i>. 39.163 </dl> 39.164 @@ -1289,7 +1289,7 @@ 39.165 39.166 <dt>anything else 39.167 <dd> 39.168 - Emit the identifier token. 39.169 + Emit the ident token. 39.170 Switch to the <i>data state</i>. 39.171 Reconsume the <i>current input character</i>. 39.172 </dl> 39.173 @@ -1414,9 +1414,9 @@ 39.174 Switch to the <i>data state</i>. 39.175 Reconsume the <i>current input character</i>. 39.176 39.177 - <dt>U+0025 PERCENT SIGN 39.178 + <dt>U+0025 PERCENT SIGN (%) 39.179 <dd> 39.180 - Emit a percent token 39.181 + Emit a percentage token 39.182 with its value set to the number 39.183 produced by interpreting the number token's representation 39.184 as a base-10 number. 39.185 @@ -1562,9 +1562,9 @@ 39.186 Switch to the <i>data state</i>. 39.187 Reconsume the <i>current input character</i>. 39.188 39.189 - <dt>U+0025 PERCENT SIGN 39.190 + <dt>U+0025 PERCENT SIGN (%) 39.191 <dd> 39.192 - Emit a percent token 39.193 + Emit a percentage token 39.194 with its value set to the number 39.195 produced by interpreting the number token's representation 39.196 as a base-10 number. 39.197 @@ -2247,7 +2247,7 @@ 39.198 <dt>preserved tokens 39.199 <dd> 39.200 The tokens that can appear in the tree are: 39.201 - identifier, 39.202 + ident, 39.203 hash, 39.204 string, 39.205 url, 39.206 @@ -2395,7 +2395,7 @@ 39.207 Create a style rule 39.208 and push it onto the <i>stack of open rules</i>. 39.209 Switch to the <i>selector mode</i>. 39.210 - <i>reconsume the current input token</i>. 39.211 + <i>Reconsume the current input token</i>. 39.212 </dl> 39.213 39.214 <h4> 39.215 @@ -2491,7 +2491,7 @@ 39.216 Create a style rule 39.217 and push it onto the <i>stack of open rules</i>. 39.218 Switch to the <i>selector mode</i>. 39.219 - <i>reconsume the current input token</i>. 39.220 + <i>Reconsume the current input token</i>. 39.221 39.222 </dl> 39.223 39.224 @@ -2692,14 +2692,14 @@ 39.225 Otherwise, this is a <i>parse error</i>. 39.226 Unset the <i>current declaration</i>. 39.227 Switch to the <i>next-declaration error mode</i>. 39.228 - <i>reconsume the current input token</i>. 39.229 + <i>Reconsume the current input token</i>. 39.230 39.231 <dt>anything else 39.232 <dd> 39.233 This is a <i>parse error</i>. 39.234 Unset the <i>current declaration</i>. 39.235 Switch to the <i>next-declaration error mode</i>. 39.236 - <i>reconsume the current input token</i>. 39.237 + <i>Reconsume the current input token</i>. 39.238 </dl> 39.239 39.240 39.241 @@ -2794,7 +2794,7 @@ 39.242 <dd> 39.243 Do nothing. 39.244 Switch to the <i>declaration-block mode</i>. 39.245 - <i>reconsume the current input token</i>. 39.246 + <i>Reconsume the current input token</i>. 39.247 39.248 <dt>EOF token 39.249 <dd> 39.250 @@ -2885,7 +2885,7 @@ 39.251 let <var>value</var> be the token's representation. 39.252 If the <i>current input token</i> is a dimension token, 39.253 let <var>value</var> be the token's representation followed by the token's unit. 39.254 - If the <i>current input token</i> is an identifier token, 39.255 + If the <i>current input token</i> is an ident token, 39.256 let <var>value</var> be the token's value. 39.257 39.258 <p>
40.1 --- a/css3-text-decor/Overview.html Mon Oct 22 00:33:44 2012 +0200 40.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 40.3 @@ -1,1780 +0,0 @@ 40.4 -<!DOCTYPE html> 40.5 - 40.6 -<html lang=en> 40.7 - <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ "> 40.8 - <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 40.9 - <title>CSS Text Decoration Module Level 3 (CSS3 Text Decoration)</title> 40.10 - 40.11 - <link href="http://purl.org/dc/terms/" rel=schema.DC> 40.12 - <meta content="CSS Text Decoration Module Level 3 (CSS3 Text Decoration)" 40.13 - name=DC.title> 40.14 - <meta content=text name=DC.type> 40.15 - <meta content=2012-09-23 name=DC.issued> 40.16 - <meta content="Elika J. Etemad" name=DC.creator> 40.17 - <meta content="Koji Ishii" name=DC.creator> 40.18 - <meta content=W3C name=DC.publisher> 40.19 - <meta content="http://www.w3.org/TR/2012/WD-css3-text-20120923/" 40.20 - name=DC.identifier> 40.21 - <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 40.22 - rel=DC.rights> 40.23 - <link href="#contents" rel=contents> 40.24 - <link href="#index" rel=index> 40.25 - <link href="../default.css" rel=stylesheet type="text/css"> 40.26 - <link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel=stylesheet 40.27 - type="text/css"> 40.28 - 40.29 - <body> 40.30 - <div class=head> <!--begin-logo--> 40.31 - <p><a href="http://www.w3.org/"><img alt=W3C height=48 40.32 - src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--> 40.33 - 40.34 - <h1>CSS Text Decoration Module Level 3</h1> 40.35 - 40.36 - <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 23 40.37 - September 2012</h2> 40.38 - 40.39 - <dl> 40.40 - <dt>This version:</dt> 40.41 - <!-- 40.42 - <dd><a href="http://dev.w3.org/csswg/css3-text/">$Date$ (CVS $Revision$)</a> 40.43 - --> 40.44 - 40.45 - <dd><a 40.46 - href="http://www.w3.org/TR/2012/WD-css3-text-20120923/">http://www.w3.org/TR/2012/WD-css3-text-20120923/</a> 40.47 - 40.48 - <dt>Latest version: 40.49 - 40.50 - <dd><a 40.51 - href="http://www.w3.org/TR/css3-text/">http://www.w3.org/TR/css3-text/</a> 40.52 - 40.53 - <dt>Latest editor's draft: 40.54 - 40.55 - <dd><a 40.56 - href="http://dev.w3.org/csswg/css3-text/">http://dev.w3.org/csswg/css3-text/</a> 40.57 - 40.58 - <dt>Previous version: 40.59 - 40.60 - <dd><a 40.61 - href="http://www.w3.org/TR/2012/WD-css3-text-20120119/">http://www.w3.org/TR/2012/WD-css3-text-20120119/</a> 40.62 - 40.63 - <dt>Issues List: 40.64 - 40.65 - <dd><a 40.66 - href="http://www.w3.org/Style/CSS/Tracker/products/10">http://www.w3.org/Style/CSS/Tracker/products/10</a> 40.67 - 40.68 - <dt>Discussion: 40.69 - 40.70 - <dd><a 40.71 - href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> 40.72 - with subject line “<kbd>[css3-text] <var>… message topic 40.73 - …</var></kbd>” 40.74 - 40.75 - <dt>Editors: 40.76 - 40.77 - <dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> 40.78 - (Mozilla) 40.79 - 40.80 - <dd><a href="mailto:koji.a.ishii@mail.rakuten.com">Koji Ishii</a> 40.81 - (Rakuten, Inc.) 40.82 - </dl> 40.83 - <!--begin-copyright--> 40.84 - <p class=copyright><a 40.85 - href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 40.86 - rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr 40.87 - title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a 40.88 - href="http://www.csail.mit.edu/"><abbr 40.89 - title="Massachusetts Institute of Technology">MIT</abbr></a>, <a 40.90 - href="http://www.ercim.eu/"><abbr 40.91 - title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, 40.92 - <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a 40.93 - href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, 40.94 - <a 40.95 - href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> 40.96 - and <a 40.97 - href="http://www.w3.org/Consortium/Legal/copyright-documents">document 40.98 - use</a> rules apply.</p> 40.99 - <!--end-copyright--> 40.100 - <hr title="Separator for header"> 40.101 - </div> 40.102 - 40.103 - <h2 class="no-num no-toc" id=abstract>Abstract</h2> 40.104 - 40.105 - <p>This module contains the features of CSS relating to text decoration, 40.106 - such as underlines, text shadows, and emphasis marks. <a 40.107 - href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing the 40.108 - rendering of structured documents (such as HTML and XML) on screen, on 40.109 - paper, in speech, etc. 40.110 - 40.111 - <h2 class="no-num no-toc" id=status>Status of this document</h2> 40.112 - 40.113 - <p><em>This section describes the status of this document at the time of 40.114 - its publication. Other documents may supersede this document. A list of 40.115 - current W3C publications and the latest revision of this technical report 40.116 - can be found in the <a href="http://www.w3.org/TR/">W3C technical reports 40.117 - index at http://www.w3.org/TR/.</a></em> 40.118 - 40.119 - <p>Publication as a Working Draft does not imply endorsement by the W3C 40.120 - Membership. This is a draft document and may be updated, replaced or 40.121 - obsoleted by other documents at any time. It is inappropriate to cite this 40.122 - document as other than work in progress. 40.123 - 40.124 - <p>This CSS module has been produced as a combined effort of the <a 40.125 - href="http://www.w3.org/International/Activity">W3C Internationalization 40.126 - Activity</a>, and the <a href="http://www.w3.org/Style/Activity">Style 40.127 - Activity</a> and is maintained by the <a 40.128 - href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>. It also 40.129 - includes contributions made by participants in the <a 40.130 - href="http://www.w3.org/Style/XSL/Group/">XSL Working Group</a> (<a 40.131 - href="http://cgi.w3.org/MemberAccess/AccessRequest">members only</a>). 40.132 - 40.133 - <p>This document was produced by a group operating under the <a 40.134 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 40.135 - 2004 W3C Patent Policy</a>. W3C maintains a <a 40.136 - href="http://www.w3.org/2004/01/pp-impl/32061/status" 40.137 - rel=disclosure>public list of any patent disclosures</a> made in 40.138 - connection with the deliverables of the group; that page also includes 40.139 - instructions for disclosing a patent. An individual who has actual 40.140 - knowledge of a patent which the individual believes contains <a 40.141 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential 40.142 - Claim(s)</a> must disclose the information in accordance with <a 40.143 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 40.144 - 6 of the W3C Patent Policy</a>. 40.145 - 40.146 - <p><strong>Feedback on this draft should be posted to the (<a 40.147 - href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public 40.148 - mailing list <a 40.149 - href="mailto:www-style@w3.org">www-style@w3.org</a></strong> (see <a 40.150 - href="http://www.w3.org/Mail/Request">instructions</a>) <strong>with 40.151 - <kbd>[css3-text-decor]</kbd> in the subject line.</strong> You are 40.152 - strongly encouraged to complain if you see something stupid in this draft. 40.153 - The editors will do their best to respond to all feedback. 40.154 - 40.155 - <p>The following features are at risk and may be cut from the spec during 40.156 - its CR period if there are no (correct) implementations: 40.157 - 40.158 - <p>The following features are at risk and may be cut from the spec during 40.159 - its CR period if there are no (correct) implementations: 40.160 - 40.161 - <ul> 40.162 - <li>the ‘<a href="#text-decoration-skip"><code 40.163 - class=property>text-decoration-skip</code></a>’ property / ‘<code 40.164 - class=css>ink</code>’ value 40.165 - </ul> 40.166 - 40.167 - <h2 class="no-num no-toc" id=contents> Table of Contents</h2> 40.168 - <!--begin-toc--> 40.169 - 40.170 - <ul class=toc> 40.171 - <li><a href="#intro"><span class=secno>1. </span> Introduction</a> 40.172 - <ul class=toc> 40.173 - <li><a href="#placement"><span class=secno>1.1. </span> Module 40.174 - Interactions</a> 40.175 - 40.176 - <li><a href="#values"><span class=secno>1.2. </span> Values</a> 40.177 - 40.178 - <li><a href="#terms"><span class=secno>1.3. </span>Terminology</a> 40.179 - </ul> 40.180 - 40.181 - <li><a href="#line-decoration"><span class=secno>2. </span> Line 40.182 - Decoration: Underline, Overline, and Strike-Through</a> 40.183 - <ul class=toc> 40.184 - <li><a href="#text-decoration-line-property"><span class=secno>2.1. 40.185 - </span> Text Decoration Lines: the ‘<code 40.186 - class=property>text-decoration-line</code>’ property</a> 40.187 - 40.188 - <li><a href="#text-decoration-color-property"><span class=secno>2.2. 40.189 - </span> Text Decoration Color: the ‘<code 40.190 - class=property>text-decoration-color</code>’ property</a> 40.191 - 40.192 - <li><a href="#text-decoration-style-property"><span class=secno>2.3. 40.193 - </span> Text Decoration Style: the ‘<code 40.194 - class=property>text-decoration-style</code>’ property</a> 40.195 - 40.196 - <li><a href="#text-decoration-property"><span class=secno>2.4. </span> 40.197 - Text Decoration Shorthand: the ‘<code 40.198 - class=property>text-decoration</code>’ property</a> 40.199 - 40.200 - <li><a href="#text-decoration-skip-property"><span class=secno>2.5. 40.201 - </span> Text Decoration Line Continuity: the ‘<code 40.202 - class=property>text-decoration-skip</code>’ property</a> 40.203 - <ul class=toc> 40.204 - <li><a href="#text-underline-position-property"><span 40.205 - class=secno>2.5.1. </span> Text Underline Position: the ‘<code 40.206 - class=property>text-underline-position</code>’ property</a> 40.207 - </ul> 40.208 - 40.209 - <li><a href="#emphasis-marks"><span class=secno>2.6. </span> Emphasis 40.210 - Marks</a> 40.211 - <ul class=toc> 40.212 - <li><a href="#text-emphasis-style-property"><span class=secno>2.6.1. 40.213 - </span> Emphasis Mark Style: the ‘<code 40.214 - class=property>text-emphasis-style</code>’ property</a> 40.215 - 40.216 - <li><a href="#text-emphasis-color-property"><span class=secno>2.6.2. 40.217 - </span> Emphasis Mark Color: the ‘<code 40.218 - class=property>text-emphasis-color</code>’ property</a> 40.219 - 40.220 - <li><a href="#text-emphasis-property"><span class=secno>2.6.3. </span> 40.221 - Emphasis Mark Shorthand: the ‘<code 40.222 - class=property>text-emphasis</code>’ property</a> 40.223 - 40.224 - <li><a href="#text-emphasis-position-property"><span 40.225 - class=secno>2.6.4. </span> Emphasis Mark Position: the ‘<code 40.226 - class=property>text-emphasis-position</code>’ property</a> 40.227 - </ul> 40.228 - 40.229 - <li><a href="#text-shadow-property"><span class=secno>2.7. </span> Text 40.230 - Shadows: the ‘<code class=property>text-shadow</code>’ property</a> 40.231 - </ul> 40.232 - 40.233 - <li><a href="#conformance"><span class=secno>3. </span> Conformance</a> 40.234 - <ul class=toc> 40.235 - <li><a href="#conventions"><span class=secno>3.1. </span> Document 40.236 - Conventions</a> 40.237 - 40.238 - <li><a href="#conformance-classes"><span class=secno>3.2. </span> 40.239 - Conformance Classes</a> 40.240 - 40.241 - <li><a href="#partial"><span class=secno>3.3. </span> Partial 40.242 - Implementations</a> 40.243 - 40.244 - <li><a href="#experimental"><span class=secno>3.4. </span> Experimental 40.245 - Implementations</a> 40.246 - 40.247 - <li><a href="#testing"><span class=secno>3.5. </span>Non-Experimental 40.248 - Implementations</a> 40.249 - 40.250 - <li><a href="#cr-exit-criteria"><span class=secno>3.6. </span> CR Exit 40.251 - Criteria</a> 40.252 - </ul> 40.253 - 40.254 - <li class=no-num><a href="#acknowledgements"> Appendix A: 40.255 - Acknowledgements</a> 40.256 - 40.257 - <li class=no-num><a href="#appendix-b-references">Appendix B: 40.258 - References</a> 40.259 - <ul class=toc> 40.260 - <li class=no-num><a href="#normative-ref">Normative references</a> 40.261 - 40.262 - <li class=no-num><a href="#informative-ref">Informative references</a> 40.263 - </ul> 40.264 - 40.265 - <li class=no-num><a href="#changes">Appendix C: Changes</a> 40.266 - </ul> 40.267 - <!--end-toc--> 40.268 - 40.269 - <h2 id=intro><span class=secno>1. </span> Introduction</h2> 40.270 - 40.271 - <p>[document here] 40.272 - 40.273 - <p class=issue>This draft describes features that are specific to certain 40.274 - scripts. There is an ongoing discussion about where these features belong: 40.275 - in existing CSS properties, in new CSS properties, or perhaps in other 40.276 - specifications. 40.277 - 40.278 - <h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3> 40.279 - 40.280 - <p>This module replaces and extends the text-level features defined in <a 40.281 - href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> chapter 16. 40.282 - 40.283 - <h3 id=values><span class=secno>1.2. </span> Values</h3> 40.284 - 40.285 - <p>This specification follows the <a 40.286 - href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property 40.287 - definition conventions</a> from <a href="#CSS21" 40.288 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in 40.289 - this specification are defined in CSS Level 2 Revision 1 <a 40.290 - href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS 40.291 - modules may expand the definitions of these value types: for example <a 40.292 - href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>, 40.293 - when combined with this module, expands the definition of the 40.294 - <color> value type as used in this specification. 40.295 - 40.296 - <p>In addition to the property-specific values listed in their definitions, 40.297 - all properties defined in this specification also accept the <a 40.298 - href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> 40.299 - keyword as their property value. For readability it has not been repeated 40.300 - explicitly. 40.301 - 40.302 - <p>The <dfn id=currentcolor>‘<code class=css>currentcolor</code>’</dfn> 40.303 - keyword here computes to itself and is resolved to the value of ‘<code 40.304 - class=property>color</code>’ after inheritance is performed. This is so 40.305 - that the ‘<a href="#text-emphasis-color"><code 40.306 - class=property>text-emphasis-color</code></a>’ by default matches the 40.307 - text ‘<code class=property>color</code>’. <span class=issue>CSS3 Color 40.308 - has not yet been errata'd to define it this way; currentcolor there is 40.309 - defined to compute to the value of ‘<code 40.310 - class=property>color</code>’, which gives it the wrong inheritance 40.311 - behavior.</span> 40.312 - 40.313 - <h3 id=terms><span class=secno>1.3. </span>Terminology</h3> 40.314 - 40.315 - <p>The terms <a 40.316 - href="http://www.w3.org/TR/css3-text/#grapheme-cluster"><dfn 40.317 - id=character>character</dfn></a>, <a 40.318 - href="http://www.w3.org/TR/css3-text/#letter"><dfn 40.319 - id=letter>letter</dfn></a>, and <a 40.320 - href="http://www.w3.org/TR/css3-text/#content-language"><dfn 40.321 - id=content-language>content language</dfn></a> as used in this 40.322 - specification are defined in <a href="#CSS3TEXT" 40.323 - rel=biblioentry>[CSS3TEXT]<!--{{!CSS3TEXT}}--></a>. Other terminology and 40.324 - concepts used in this specification are defined in <a href="#CSS21" 40.325 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> and <a 40.326 - href="#CSS3-WRITING-MODES" 40.327 - rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>. 40.328 - 40.329 - <h2 id=line-decoration><span class=secno>2. </span> Line Decoration: 40.330 - Underline, Overline, and Strike-Through</h2> 40.331 - 40.332 - <p>The following properties describe line decorations that are added to the 40.333 - content of an element. When specified on or propagated to an inline box, 40.334 - such decoration affects all the boxes generated by that element, and is 40.335 - further propagated to any in-flow block-level boxes that split the inline 40.336 - (see <a 40.337 - href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">CSS2.1 40.338 - section 9.2.1.1</a>) When specified on or propagated to a ruby box, the 40.339 - decorations are further propagated only to the ruby base. When specified 40.340 - on or propagated to a a block container that establishes an inline 40.341 - formatting context, the decorations are propagated to an anonymous inline 40.342 - element that wraps all the in-flow inline-level children of the block 40.343 - container. For all other elements, the decorations are propagated to any 40.344 - in-flow children. 40.345 - 40.346 - <p class=note>Note that text decorations are not propagated to any 40.347 - out-of-flow descendants, nor to the contents of atomic inline-level 40.348 - descendants such as inline blocks and inline tables. 40.349 - 40.350 - <p>By default underlines, overlines, and line-throughs are applied only to 40.351 - text (including white space, letter spacing, and word spacing): margins, 40.352 - borders, and padding are skipped. Elements containing no text, such as 40.353 - images, are likewise not decorated. The ‘<a 40.354 - href="#text-decoration-skip"><code 40.355 - class=property>text-decoration-skip</code></a>’ property can be used to 40.356 - modify this behavior, for example allowing inline replaced elements to be 40.357 - underlined or requiring that white space be skipped. 40.358 - 40.359 - <p>In determining the position and thickness of text decoration lines, user 40.360 - agents may consider the font sizes and dominant baselines of descendants, 40.361 - but for a given element's decoration must use the same position and 40.362 - thickness throughout each line box. The <a 40.363 - href="#text-decoration-color">color</a> and <a 40.364 - href="#text-decoration-style">line style</a> of decorations must remain 40.365 - the same on all decorations applied by a given element, even if descendant 40.366 - elements have different color or line style values. 40.367 - 40.368 - <div class=example> 40.369 - <p>The following figure shows the averaging for underline: 40.370 - 40.371 - <p><img 40.372 - alt="In the first rendering of the underlined text '1st a' with 'st' as a superscript, both the '1st' and the 'a' are rendered in a small font. In the second rendering, the 'a' is rendered in a larger font. In the third, both '1st' and 'a' are large." 40.373 - height=105 src=underline-averaging.gif width=326> 40.374 - 40.375 - <p>In the three fragments of underlined text, the underline is drawn 40.376 - consecutively lower and thicker as the ratio of large text to small text 40.377 - increases. 40.378 - </div> 40.379 - 40.380 - <p>Relatively positioning a descendant moves all text decorations affecting 40.381 - it along with the descendant's text; it does not affect calculation of the 40.382 - decoration's initial position on that line. The ‘<code 40.383 - class=property>visibility</code>’ property, filters, and other graphical 40.384 - transformations likewise affect text decorations as part of the text 40.385 - they're drawn on, even if the decorations were specified on an ancestor 40.386 - element. <span class=issue>Does this include ‘<a 40.387 - href="#text-shadow"><code class=property>text-shadow</code></a>’? What 40.388 - about text-fill etc.?</span> 40.389 - 40.390 - <div class=example> 40.391 - <p>In the following style sheet and document fragment: 40.392 - 40.393 - <pre><code class=css> 40.394 -<!-- --> blockquote { text-decoration: underline; color: blue; } 40.395 -<!-- --> em { display: block; } 40.396 -<!-- --> cite { color: fuchsia; } 40.397 -<!----></code></pre> 40.398 - 40.399 - <pre class=html><code> 40.400 -<!-- --> <blockquote> 40.401 -<!-- --> <p> 40.402 -<!-- --> <span> 40.403 -<!-- --> Help, help! 40.404 -<!-- --> <em> I am under a hat! </em> 40.405 -<!-- --> 40.406 -<!-- --> <cite> —GwieF </cite> 40.407 -<!-- --> </span> 40.408 -<!-- --> </p> 40.409 -<!-- --> </blockquote> 40.410 -<!----></code></pre> 40.411 - 40.412 - <p>...the underlining for the blockquote element is propagated to an 40.413 - anonymous inline element that surrounds the span element, causing the 40.414 - text "Help, help!" to be blue, with the blue underlining from the 40.415 - anonymous inline underneath it, the color being taken from the blockquote 40.416 - element. The <code><em>text</em></code> in the em block is 40.417 - also underlined, as it is in an in-flow block to which the underline is 40.418 - propagated. The final line of text is fuchsia, but the underline 40.419 - underneath it is still the blue underline from the anonymous inline 40.420 - element. 40.421 - 40.422 - <p><img alt="Sample rendering of the above underline example" 40.423 - src=underline-example.png> 40.424 - 40.425 - <p>This diagram shows the boxes involved in the example above. The rounded 40.426 - aqua line represents the anonymous inline element wrapping the inline 40.427 - contents of the paragraph element, the rounded blue line represents the 40.428 - span element, and the orange lines represent the blocks. 40.429 - </div> 40.430 - 40.431 - <h3 id=text-decoration-line-property><span class=secno>2.1. </span> Text 40.432 - Decoration Lines: the ‘<a href="#text-decoration-line"><code 40.433 - class=property>text-decoration-line</code></a>’ property</h3> 40.434 - 40.435 - <table class=propdef> 40.436 - <tbody> 40.437 - <tr> 40.438 - <th>Name: 40.439 - 40.440 - <td><dfn id=text-decoration-line>text-decoration-line</dfn> 40.441 - 40.442 - <tr> 40.443 - <th><a href="#values">Value</a>: 40.444 - 40.445 - <td>none | [ underline || overline || line-through ] 40.446 - 40.447 - <tr> 40.448 - <th>Initial: 40.449 - 40.450 - <td>none 40.451 - 40.452 - <tr> 40.453 - <th>Applies to: 40.454 - 40.455 - <td>all elements 40.456 - 40.457 - <tr> 40.458 - <th>Inherited: 40.459 - 40.460 - <td>no (but see prose) 40.461 - 40.462 - <tr> 40.463 - <th>Percentages: 40.464 - 40.465 - <td>N/A 40.466 - 40.467 - <tr> 40.468 - <th>Media: 40.469 - 40.470 - <td>visual 40.471 - 40.472 - <tr> 40.473 - <th>Computed value: 40.474 - 40.475 - <td>as specified 40.476 - </table> 40.477 - 40.478 - <p>Specifies what line decorations, if any, are added to the element. 40.479 - Values have the following meanings: 40.480 - 40.481 - <dl> 40.482 - <dt><dfn id=none title="text-decoration-line:none">‘<code 40.483 - class=css>none</code>’</dfn> 40.484 - 40.485 - <dd>Neither produces nor inhibits text decoration. 40.486 - 40.487 - <dt><dfn id=underline>‘<code class=css>underline</code>’</dfn> 40.488 - 40.489 - <dd>Each line of text is underlined. 40.490 - 40.491 - <dt><dfn id=overline>‘<code class=css>overline</code>’</dfn> 40.492 - 40.493 - <dd>Each line of text has a line above it (i.e. on the opposite side from 40.494 - an underline). 40.495 - 40.496 - <dt><dfn id=line-through>‘<code class=css>line-through</code>’</dfn> 40.497 - 40.498 - <dd>Each line of text has a line through the middle. 40.499 - </dl> 40.500 - 40.501 - <h3 id=text-decoration-color-property><span class=secno>2.2. </span> Text 40.502 - Decoration Color: the ‘<a href="#text-decoration-color"><code 40.503 - class=property>text-decoration-color</code></a>’ property</h3> 40.504 - 40.505 - <table class=propdef> 40.506 - <tbody> 40.507 - <tr> 40.508 - <th>Name: 40.509 - 40.510 - <td><dfn id=text-decoration-color>text-decoration-color</dfn> 40.511 - 40.512 - <tr> 40.513 - <th><a href="#values">Value</a>: 40.514 - 40.515 - <td><a href="http://www.w3.org/TR/css3-color/#color0"><span 40.516 - class=value-inst-color><color></span></a> 40.517 - 40.518 - <tr> 40.519 - <th>Initial: 40.520 - 40.521 - <td><a 40.522 - href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> 40.523 - 40.524 - <tr> 40.525 - <th>Applies to: 40.526 - 40.527 - <td>all elements 40.528 - 40.529 - <tr> 40.530 - <th>Inherited: 40.531 - 40.532 - <td>no 40.533 - 40.534 - <tr> 40.535 - <th>Percentages: 40.536 - 40.537 - <td>N/A 40.538 - 40.539 - <tr> 40.540 - <th>Media: 40.541 - 40.542 - <td>visual 40.543 - 40.544 - <tr> 40.545 - <th>Computed value: 40.546 - 40.547 - <td>the computed color 40.548 - </table> 40.549 - 40.550 - <p>This property specifies the color of text decoration (underlines 40.551 - overlines, and line-throughs) set on the element with ‘<a 40.552 - href="#text-decoration-line"><code 40.553 - class=property>text-decoration-line</code></a>’. 40.554 - 40.555 - <h3 id=text-decoration-style-property><span class=secno>2.3. </span> Text 40.556 - Decoration Style: the ‘<a href="#text-decoration-style"><code 40.557 - class=property>text-decoration-style</code></a>’ property</h3> 40.558 - 40.559 - <table class=propdef> 40.560 - <tbody> 40.561 - <tr> 40.562 - <th>Name: 40.563 - 40.564 - <td><dfn id=text-decoration-style>text-decoration-style</dfn> 40.565 - 40.566 - <tr> 40.567 - <th><a href="#values">Value</a>: 40.568 - 40.569 - <td>solid | double | dotted | dashed | wavy 40.570 - 40.571 - <tr> 40.572 - <th>Initial: 40.573 - 40.574 - <td>solid 40.575 - 40.576 - <tr> 40.577 - <th>Applies to: 40.578 - 40.579 - <td>all elements 40.580 - 40.581 - <tr> 40.582 - <th>Inherited: 40.583 - 40.584 - <td>no 40.585 - 40.586 - <tr> 40.587 - <th>Percentages: 40.588 - 40.589 - <td>N/A 40.590 - 40.591 - <tr> 40.592 - <th>Media: 40.593 - 40.594 - <td>visual 40.595 - 40.596 - <tr> 40.597 - <th>Computed value: 40.598 - 40.599 - <td>as specified 40.600 - </table> 40.601 - 40.602 - <p>This property specifies the style of the line(s) drawn for text 40.603 - decoration specified on the element. Values have the same meaning as for 40.604 - the <a 40.605 - href="http://www.w3.org/TR/css3-background/#the-border-style">border-style 40.606 - properties</a> <a href="#CSS3BG" 40.607 - rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. ‘<code 40.608 - class=css>wavy</code>’ indicates a wavy line. 40.609 - 40.610 - <h3 id=text-decoration-property><span class=secno>2.4. </span> Text 40.611 - Decoration Shorthand: the ‘<a href="#text-decoration"><code 40.612 - class=property>text-decoration</code></a>’ property</h3> 40.613 - 40.614 - <table class=propdef> 40.615 - <tbody> 40.616 - <tr> 40.617 - <th>Name: 40.618 - 40.619 - <td><dfn id=text-decoration>text-decoration</dfn> 40.620 - 40.621 - <tr> 40.622 - <th><a href="#values">Value</a>: 40.623 - 40.624 - <td><var><a 40.625 - href="#text-decoration-line"><text-decoration-line></a></var> || 40.626 - <var><a 40.627 - href="#text-decoration-style"><text-decoration-style></a></var> 40.628 - || <var><a 40.629 - href="#text-decoration-color"><text-decoration-color></a></var> 40.630 - || blink 40.631 - 40.632 - <tr> 40.633 - <th>Initial: 40.634 - 40.635 - <td>none 40.636 - 40.637 - <tr> 40.638 - <th>Applies to: 40.639 - 40.640 - <td>all elements 40.641 - 40.642 - <tr> 40.643 - <th>Inherited: 40.644 - 40.645 - <td>no 40.646 - 40.647 - <tr> 40.648 - <th>Percentages: 40.649 - 40.650 - <td>N/A 40.651 - 40.652 - <tr> 40.653 - <th>Media: 40.654 - 40.655 - <td>visual 40.656 - 40.657 - <tr> 40.658 - <th>Computed value: 40.659 - 40.660 - <td>as specified 40.661 - </table> 40.662 - 40.663 - <p>This property is a shorthand for setting ‘<a 40.664 - href="#text-decoration-line"><code 40.665 - class=property>text-decoration-line</code></a>’, ‘<a 40.666 - href="#text-decoration-color"><code 40.667 - class=property>text-decoration-color</code></a>’, and ‘<a 40.668 - href="#text-decoration-style"><code 40.669 - class=property>text-decoration-style</code></a>’ in one declaration. 40.670 - Omitted values are set to their initial values. A ‘<a 40.671 - href="#text-decoration"><code class=property>text-decoration</code></a>’ 40.672 - declaration that omits both the ‘<a href="#text-decoration-color"><code 40.673 - class=property>text-decoration-color</code></a>’ and ‘<a 40.674 - href="#text-decoration-style"><code 40.675 - class=property>text-decoration-style</code></a>’ values is 40.676 - backwards-compatible with CSS Levels 1 and 2. 40.677 - 40.678 - <p>If the ‘<code class=css>blink</code>’ keyword is specified the text 40.679 - blinks (alternates between visible and invisible). Conforming user agents 40.680 - may simply not blink the text. Note that not blinking the text is one 40.681 - technique to satisfy <a 40.682 - href="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">checkpoint 40.683 - 3.3 of WAI-UAAG</a>. 40.684 - 40.685 - <div class=example> 40.686 - <p>The following example underlines unvisited links with a solid blue 40.687 - underline in CSS1 and CSS2 UAs and a navy dotted underline in CSS3 UAs. 40.688 - 40.689 - <pre><code class=css> 40.690 -<!-- -->:link { 40.691 -<!-- --> color: blue; 40.692 -<!-- --> text-decoration: underline; 40.693 -<!-- --> text-decoration: navy dotted underline; /* <a 40.694 - href="http://www.w3.org/TR/CSS21/syndata.html#ignore">Ignored</a> in CSS1/CSS2 UAs */ 40.695 -<!-- -->}</code></pre> 40.696 - </div> 40.697 - 40.698 - <h3 id=text-decoration-skip-property><span class=secno>2.5. </span> Text 40.699 - Decoration Line Continuity: the ‘<a href="#text-decoration-skip"><code 40.700 - class=property>text-decoration-skip</code></a>’ property</h3> 40.701 - 40.702 - <table class=propdef> 40.703 - <tbody> 40.704 - <tr> 40.705 - <th>Name: 40.706 - 40.707 - <td><dfn id=text-decoration-skip>text-decoration-skip</dfn> 40.708 - 40.709 - <tr> 40.710 - <th><a href="#values">Value</a>: 40.711 - 40.712 - <td>none | [ objects || spaces || ink || edges ] 40.713 - 40.714 - <tr> 40.715 - <th>Initial: 40.716 - 40.717 - <td>objects 40.718 - 40.719 - <tr> 40.720 - <th>Applies to: 40.721 - 40.722 - <td>all elements 40.723 - 40.724 - <tr> 40.725 - <th>Inherited: 40.726 - 40.727 - <td>yes 40.728 - 40.729 - <tr> 40.730 - <th>Percentages: 40.731 - 40.732 - <td>N/A 40.733 - 40.734 - <tr> 40.735 - <th>Media: 40.736 - 40.737 - <td>visual 40.738 - 40.739 - <tr> 40.740 - <th>Computed value: 40.741 - 40.742 - <td>as specified 40.743 - </table> 40.744 - 40.745 - <p>This property specifies what parts of the element's content any text 40.746 - decoration affecting the element must skip over. It controls all text 40.747 - decoration lines drawn by the element and also any text decoration lines 40.748 - drawn by its ancestors. Values have the following meanings: 40.749 - 40.750 - <dl> 40.751 - <dt><dfn id=none0 title="text-decoration-skip:none">‘<code 40.752 - class=css>none</code>’</dfn> 40.753 - 40.754 - <dd>Skip nothing: text-decoration is drawn for all text content and for 40.755 - inline replaced elements. 40.756 - 40.757 - <dt><dfn id=objects title="text-decoration-skip:objects">‘<code 40.758 - class=css>objects</code>’</dfn> 40.759 - 40.760 - <dd>Skip this element if it is an atomic inline (such as an image or 40.761 - inline-block). 40.762 - 40.763 - <dt><dfn id=spaces title="text-decoration-skip:spaces">‘<code 40.764 - class=css>spaces</code>’</dfn> 40.765 - 40.766 - <dd>Skip white space: this includes regular spaces (U+0020) and tabs 40.767 - (U+0009), as well as nbsp (U+00A0), ideographic space (U+3000), all fixed 40.768 - width spaces (such as U+2000–U+200A, U+202F and U+205F), and any 40.769 - adjacent letter-spacing or word-spacing. 40.770 - 40.771 - <dt><dfn id=ink title="text-decoration-skip:ink">‘<code 40.772 - class=css>ink</code>’</dfn> 40.773 - 40.774 - <dd>Skip over where glyphs are drawn: interrupt the decoration line to let 40.775 - text show through where the text decoration would otherwise cross over a 40.776 - glyph. The UA may also skip a small distance to either side of the glyph 40.777 - outline. 40.778 - 40.779 - <dt><dfn id=edges title="text-decoration-skip:edges">‘<code 40.780 - class=css>edges</code>’</dfn> 40.781 - 40.782 - <dd>The UA should place the start and end of the line inwards from the 40.783 - content edge of the decorating element so that, e.g. two underlined 40.784 - elements side-by-side do not appear to have a single underline. (This is 40.785 - important in Chinese, where underlining is a form of punctuation.) 40.786 - </dl> 40.787 - 40.788 - <p class=issue>Do we need a value that <em>doesn't</em> skip margins and 40.789 - padding? 40.790 - 40.791 - <p class=note>Note that this property inherits and that descendant elements 40.792 - can have a different setting. 40.793 - 40.794 - <h4 id=text-underline-position-property><span class=secno>2.5.1. </span> 40.795 - Text Underline Position: the ‘<a href="#text-underline-position"><code 40.796 - class=property>text-underline-position</code></a>’ property</h4> 40.797 - 40.798 - <table class=propdef> 40.799 - <tbody> 40.800 - <tr> 40.801 - <th>Name: 40.802 - 40.803 - <td><dfn id=text-underline-position>text-underline-position</dfn> 40.804 - 40.805 - <tr> 40.806 - <th><a href="#values">Value</a>: 40.807 - 40.808 - <td>auto | alphabetic | [ below || [ left | right ] ] 40.809 - 40.810 - <tr> 40.811 - <th>Initial: 40.812 - 40.813 - <td>auto 40.814 - 40.815 - <tr> 40.816 - <th>Applies to: 40.817 - 40.818 - <td>all elements 40.819 - 40.820 - <tr> 40.821 - <th>Inherited: 40.822 - 40.823 - <td>yes 40.824 - 40.825 - <tr> 40.826 - <th>Percentages: 40.827 - 40.828 - <td>N/A 40.829 - 40.830 - <tr> 40.831 - <th>Media: 40.832 - 40.833 - <td>visual 40.834 - 40.835 - <tr> 40.836 - <th>Computed value: 40.837 - 40.838 - <td>as specified 40.839 - </table> 40.840 - 40.841 - <p>This property sets the position of an underline specified on the same 40.842 - element: it does not affect underlines specified by ancestor elements. 40.843 - Values have the following meanings: 40.844 - 40.845 - <dl> 40.846 - <dt><dfn id=auto>‘<code class=css>auto</code>’</dfn> 40.847 - 40.848 - <dd>The user agent may use any algorithm to determine the underline's 40.849 - position; however it must be placed at or below the alphabetic baseline. 40.850 - <p class=note>It is suggested that the underline position be ‘<a 40.851 - href="#alphabetic"><code class=css>alphabetic</code></a>’ unless it 40.852 - crosses either subscripted (or otherwise lowered) text, or it affects 40.853 - characters from Asian scripts such as Han or Tibetan, for which an 40.854 - alphabetic underline is too high: in such cases, aligning to the em box 40.855 - edge as described for ‘<code class=css>below left</code>’ is more 40.856 - appropriate. 40.857 - 40.858 - <dt><dfn id=alphabetic>‘<code class=css>alphabetic</code>’</dfn> 40.859 - 40.860 - <dd>The underline is positioned relative to the alphabetic baseline. In 40.861 - this case the underline is likely to cross some descenders. 40.862 - <div class=figure> 40.863 - <p><img 40.864 - alt="In a typical Latin font, the underline is positioned slightly below the alphabetic baseline, leaving a gap between the line and the bottom of most Latin letters, but crossing through descenders such as the stem of a 'p'." 40.865 - src=underline-position-alphabetic.png 40.866 - title="text-underline-position: alphabetic"> 40.867 - 40.868 - <p class=caption>‘<code class=css>text-underline-position: 40.869 - alphabetic</code>’ 40.870 - </div> 40.871 - 40.872 - <dt><dfn id=below>‘<code class=css>below</code>’</dfn> 40.873 - 40.874 - <dd>In horizontal writing modes, the underline is positioned relative to 40.875 - the under edge of the element's content box. In this case the underline 40.876 - usually does not cross the descenders. (This is sometimes called 40.877 - "accounting" underline.) If the underline affects descendants with a 40.878 - lower content edge, the user agent should shift the underline down 40.879 - further to the lowest underlined content box edge. The user agent may 40.880 - ignore elements with ‘<code class=css>vertical-align</code>’ values 40.881 - given as lengths, percentages, ‘<code class=css>top</code>’, or 40.882 - ‘<code class=css>bottom</code>’ when making this adjustment. (Note 40.883 - that images that are not affected by the underline per ‘<a 40.884 - href="#text-decoration-skip"><code 40.885 - class=property>text-decoration-skip</code></a>’ will not affect the 40.886 - position of the underline.) 40.887 - <div class=figure> 40.888 - <p><img 40.889 - alt="In a typical Latin font, the underline is far enough below the text that it does not cross the bottom of a 'g'." 40.890 - src=underline-position-below.png 40.891 - title="text-underline-position: below"> 40.892 - 40.893 - <p class=caption>‘<code class=css>text-underline-position: 40.894 - below</code>’ 40.895 - </div> 40.896 - 40.897 - <div class=example> 40.898 - <p>Because ‘<a href="#text-underline-position"><code 40.899 - class=property>text-underline-position</code></a>’ inherits, and is 40.900 - not reset by the ‘<a href="#text-decoration"><code 40.901 - class=property>text-decoration</code></a>’ shorthand, the following 40.902 - example switches the document to use ‘<a href="#below"><code 40.903 - class=css>below</code></a>’ underlining, which can be more 40.904 - appropriate for writing systems with long, complicated descenders. It 40.905 - is also often useful for mathematical or chemical texts that use many 40.906 - subscripts. 40.907 - 40.908 - <pre>:root { text-underline-position: below; }</pre> 40.909 - </div> 40.910 - 40.911 - <dt><dfn id=left>‘<code class=css>left</code>’</dfn> 40.912 - 40.913 - <dd>In vertical writing modes, the underline is aligned as for ‘<a 40.914 - href="#below"><code class=css>below</code></a>’, on the left edge of 40.915 - the text. 40.916 - 40.917 - <dt><dfn id=right>‘<code class=css>right</code>’</dfn> 40.918 - 40.919 - <dd>In vertical writing modes, the underline is aligned as for ‘<a 40.920 - href="#below"><code class=css>below</code></a>’, except it is aligned 40.921 - to the right edge of the text. If this causes the underline to be drawn 40.922 - on the "over" side of the text, then an overline also switches sides and 40.923 - is drawn on the "under" side. 40.924 - </dl> 40.925 - 40.926 - <p>If ‘<a href="#below"><code class=css>below</code></a>’ is specified 40.927 - alone, ‘<a href="#left"><code class=css>left</code></a>’ is also 40.928 - implied. If ‘<a href="#left"><code class=css>left</code></a>’ or ‘<a 40.929 - href="#right"><code class=css>right</code></a>’ is specified alone, 40.930 - ‘<a href="#below"><code class=css>below</code></a>’ is also implied. 40.931 - 40.932 - <p class=issue> Should ‘<code class=css>above</code>’/‘<a 40.933 - href="#below"><code class=css>below</code></a>’ be ‘<code 40.934 - class=css>over</code>’/‘<code class=css>under</code>’ to match text 40.935 - decoration names? 40.936 - 40.937 - <div class=figure id=fig-text-underline-position> 40.938 - <table> 40.939 - <tbody> 40.940 - <tr> 40.941 - <td> <img 40.942 - alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left' places the underline on the left side of the text." 40.943 - src=underline-position-left.png title="text-underline-position: left"> 40.944 - 40.945 - <td> <img 40.946 - alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right' places the underline on the right side of the text." 40.947 - src=underline-position-right.png 40.948 - title="text-underline-position: right"> 40.949 - 40.950 - <tr> 40.951 - <td>‘<a href="#left"><code class=css>left</code></a>’ 40.952 - 40.953 - <td>‘<a href="#right"><code class=css>right</code></a>’ 40.954 - </table> 40.955 - 40.956 - <p class=caption>In vertical writing modes, the ‘<a 40.957 - href="#text-underline-position"><code 40.958 - class=property>text-underline-position</code></a>’ values ‘<a 40.959 - href="#left"><code class=css>left</code></a>’ and ‘<a 40.960 - href="#right"><code class=css>right</code></a>’ allow placing the 40.961 - underline on either side of the text. (In horizontal writing modes, both 40.962 - values are treated as ‘<a href="#below"><code 40.963 - class=css>below</code></a>’.) 40.964 - </div> 40.965 - 40.966 - <div class=example> 40.967 - <p>The following example styles modern Chinese, Japanese, and Korean texts 40.968 - with the appropriate underline positions in both horizontal and vertical 40.969 - text: 40.970 - 40.971 - <pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: below right; } 40.972 -<!-- -->:root:lang(zh), [lang|=zh] { text-underline-position: below left; }</pre> 40.973 - </div> 40.974 - 40.975 - <div class=note> 40.976 - <p>In some cases (such as in OpenType) the font format can offer 40.977 - information about the appropriate position of an underline. Typically 40.978 - this information gives the position of an ‘<a href="#alphabetic"><code 40.979 - class=css>alphabetic</code></a>’ underline; in some cases (especially 40.980 - in CJK fonts), it gives the position of a ‘<code class=css>below 40.981 - left</code>’ underline. (In this case, the font's underline metrics 40.982 - typically touch the bottom edge of the em box). The UA is encouraged to 40.983 - use information (such as the underline thickness, or appropriate 40.984 - alphabetic alignment) from the font wherever appropriate. 40.985 - </div> 40.986 - 40.987 - <h3 id=emphasis-marks><span class=secno>2.6. </span> Emphasis Marks</h3> 40.988 - 40.989 - <p>East Asian documents traditionally use small symbols next to each glyph 40.990 - to emphasize a run of text. For example: 40.991 - 40.992 - <div class=figure> 40.993 - <p> <img alt="Example of emphasis in Japanese appearing above the text" 40.994 - class=example height=28 src=text-emphasis-ja.gif width=225> 40.995 - 40.996 - <p class=caption>Accent emphasis (shown in blue for clarity) applied to 40.997 - Japanese text 40.998 - </div> 40.999 - 40.1000 - <h4 id=text-emphasis-style-property><span class=secno>2.6.1. </span> 40.1001 - Emphasis Mark Style: the ‘<a href="#text-emphasis-style"><code 40.1002 - class=property>text-emphasis-style</code></a>’ property</h4> 40.1003 - 40.1004 - <table class=propdef> 40.1005 - <tbody> 40.1006 - <tr> 40.1007 - <th>Name: 40.1008 - 40.1009 - <td><dfn id=text-emphasis-style>text-emphasis-style</dfn> 40.1010 - 40.1011 - <tr> 40.1012 - <th><a href="#values">Value</a>: 40.1013 - 40.1014 - <td>none | [ [ filled | open ] || [ dot | circle | double-circle | 40.1015 - triangle | sesame ] ] | <a class=noxref 40.1016 - href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string"><span 40.1017 - class=value-inst-string><string></span></a> 40.1018 - 40.1019 - <tr> 40.1020 - <th>Initial: 40.1021 - 40.1022 - <td>none 40.1023 - 40.1024 - <tr> 40.1025 - <th>Applies to: 40.1026 - 40.1027 - <td>all elements 40.1028 - 40.1029 - <tr> 40.1030 - <th>Inherited: 40.1031 - 40.1032 - <td>yes 40.1033 - 40.1034 - <tr> 40.1035 - <th>Percentages: 40.1036 - 40.1037 - <td>N/A 40.1038 - 40.1039 - <tr> 40.1040 - <th>Media: 40.1041 - 40.1042 - <td>visual 40.1043 - 40.1044 - <tr> 40.1045 - <th>Computed value: 40.1046 - 40.1047 - <td>‘<code class=property>none</code>’, a pair of keywords 40.1048 - representing the shape and fill, or a string 40.1049 - </table> 40.1050 - 40.1051 - <p>This property applies emphasis marks to the element's text. Values have 40.1052 - the following meanings: 40.1053 - 40.1054 - <dl> 40.1055 - <dt><dfn id=none1 title="text-emphasis:none">‘<code 40.1056 - class=css>none</code>’</dfn> 40.1057 - 40.1058 - <dd>No emphasis marks. 40.1059 - 40.1060 - <dt><dfn id=filled title="text-emphasis:filled">‘<code 40.1061 - class=css>filled</code>’</dfn> 40.1062 - 40.1063 - <dd>The shape is filled with solid color. 40.1064 - 40.1065 - <dt><dfn id=open title="text-emphasis:open">‘<code 40.1066 - class=css>open</code>’</dfn> 40.1067 - 40.1068 - <dd>The shape is hollow. 40.1069 - 40.1070 - <dt><dfn id=dot title="text-emphasis:dot">‘<code 40.1071 - class=css>dot</code>’</dfn> 40.1072 - 40.1073 - <dd>Display small circles as marks. The filled dot is U+2022 ‘<code 40.1074 - class=css>•</code>’, and the open dot is U+25E6 ‘<code 40.1075 - class=css>◦</code>’. 40.1076 - 40.1077 - <dt><dfn id=circle title="text-emphasis:circle">‘<code 40.1078 - class=css>circle</code>’</dfn> 40.1079 - 40.1080 - <dd>Display large circles as marks. The filled circle is U+25CF ‘<code 40.1081 - class=css>●</code>’, and the open circle is U+25CB ‘<code 40.1082 - class=css>○</code>’. 40.1083 - 40.1084 - <dt><dfn id=double-circle title="text-emphasis:double-circle">‘<code 40.1085 - class=css>double-circle</code>’</dfn> 40.1086 - 40.1087 - <dd>Display double circles as marks. The filled double-circle is U+25C9 40.1088 - ‘<code class=css>◉</code>’, and the open double-circle is U+25CE 40.1089 - ‘<code class=css>◎</code>’. 40.1090 - 40.1091 - <dt><dfn id=triangle title="text-emphasis:triangle">‘<code 40.1092 - class=css>triangle</code>’</dfn> 40.1093 - 40.1094 - <dd>Display triangles as marks. The filled triangle is U+25B2 ‘<code 40.1095 - class=css>▲</code>’, and the open triangle is U+25B3 ‘<code 40.1096 - class=css>△</code>’. 40.1097 - 40.1098 - <dt><dfn id=sesame title="text-emphasis:sesame">‘<code 40.1099 - class=css>sesame</code>’</dfn> 40.1100 - 40.1101 - <dd>Display sesames as marks. The filled sesame is U+FE45 ‘<code 40.1102 - class=css>﹅</code>’, and the open sesame is U+FE46 ‘<code 40.1103 - class=css>﹆</code>’. 40.1104 - 40.1105 - <dt><dfn id=ltstringgt title="text-emphasis:sesame">‘<code 40.1106 - class=css><var><string></var></code>’</dfn> 40.1107 - 40.1108 - <dd>Display the given string as marks. Authors should not specify more 40.1109 - than one <a href="#character"><i>character</i></a> in <string>. The 40.1110 - UA may truncate or ignore strings consisting of more than one grapheme 40.1111 - cluster. 40.1112 - </dl> 40.1113 - 40.1114 - <p>If a shape keyword is specified but neither of ‘<code 40.1115 - class=css>filled</code>’ nor ‘<code class=css>open</code>’ is 40.1116 - specified, ‘<code class=css>filled</code>’ is assumed. If only 40.1117 - ‘<code class=css>filled</code>’ or ‘<code class=css>open</code>’ 40.1118 - is specified, the shape keyword computes to ‘<code 40.1119 - class=css>circle</code>’ in horizontal writing mode and ‘<code 40.1120 - class=css>sesame</code>’ in vertical writing mode. 40.1121 - 40.1122 - <p>The marks should be drawn using the element's font settings with its 40.1123 - size scaled down to 50%. However, not all fonts have all these glyphs, and 40.1124 - some fonts use inappropriate sizes for emphasis marks in these code 40.1125 - points. The UA may opt to use a font known to be good for emphasis marks, 40.1126 - or the marks may instead be synthesized by the UA. Marks must remain 40.1127 - upright in vertical writing modes: like CJK characters, they do not rotate 40.1128 - to match the writing mode. 40.1129 - 40.1130 - <p class=note> One example of good fonts for emphasis marks is Adobe's 40.1131 - opensource project, <a 40.1132 - href="http://sourceforge.net/adobe/kenten-generic/">Kenten Generic 40.1133 - OpenType Font</a>, which is specially designed for the emphasis marks. 40.1134 - 40.1135 - <p>The marks are drawn once for each <a 40.1136 - href="#character"><i>character</i></a>. However, emphasis marks are not 40.1137 - drawn for characters that are: 40.1138 - 40.1139 - <ul> 40.1140 - <li><a href="http://www.w3.org/TR/css3-text/#word-separator">Word 40.1141 - separators</a> or that belong to the Unicode separator classes (Z*). (But 40.1142 - note that emphasis marks <em>are</em> drawn for a space that combines 40.1143 - with any combining characters.) 40.1144 - 40.1145 - <li>Characters belonging to the Unicode classes for control codes and 40.1146 - unassigned characters (Cc, Cf, Cn). 40.1147 - </ul> 40.1148 - 40.1149 - <p>If emphasis marks are drawn for characters for which ruby is drawn in 40.1150 - the same position as the emphasis mark, the ruby should be stacked between 40.1151 - the emphasis marks and the base text. In this case, the position of the 40.1152 - emphasis marks for a given element should be determined as if all 40.1153 - characters have ruby boxes of the same height as the highest ruby box in 40.1154 - the element. If the UA is not capable of drawing ruby and emphasis marks 40.1155 - on the same side, the UA may hide ruby and draw only emphasis marks. 40.1156 - 40.1157 - <div class=figure> 40.1158 - <p><img 40.1159 - alt="Example of emphasis marks applied to 4 characters, and ruby to 2 of them" 40.1160 - height=50 src=text-emphasis-ruby.png width=134> 40.1161 - 40.1162 - <p class=caption>Emphasis marks applied to 4 characters, and ruby to 2 of 40.1163 - them 40.1164 - </div> 40.1165 - 40.1166 - <p class=note>A future level of CSS may define controls to specify what to 40.1167 - do when emphasis marks and ruby text coincide. 40.1168 - 40.1169 - <h4 id=text-emphasis-color-property><span class=secno>2.6.2. </span> 40.1170 - Emphasis Mark Color: the ‘<a href="#text-emphasis-color"><code 40.1171 - class=property>text-emphasis-color</code></a>’ property</h4> 40.1172 - 40.1173 - <table class=propdef> 40.1174 - <tbody> 40.1175 - <tr> 40.1176 - <th>Name: 40.1177 - 40.1178 - <td><dfn id=text-emphasis-color>text-emphasis-color</dfn> 40.1179 - 40.1180 - <tr> 40.1181 - <th><a href="#values">Value</a>: 40.1182 - 40.1183 - <td><color> 40.1184 - 40.1185 - <tr> 40.1186 - <th>Initial: 40.1187 - 40.1188 - <td><a 40.1189 - href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> 40.1190 - 40.1191 - <tr> 40.1192 - <th>Applies to: 40.1193 - 40.1194 - <td>all elements 40.1195 - 40.1196 - <tr> 40.1197 - <th>Inherited: 40.1198 - 40.1199 - <td>yes 40.1200 - 40.1201 - <tr> 40.1202 - <th>Percentages: 40.1203 - 40.1204 - <td>N/A 40.1205 - 40.1206 - <tr> 40.1207 - <th>Media: 40.1208 - 40.1209 - <td>visual 40.1210 - 40.1211 - <tr> 40.1212 - <th>Computed value: 40.1213 - 40.1214 - <td>as specified 40.1215 - </table> 40.1216 - 40.1217 - <p>This property specifies the foreground color of the emphasis marks. 40.1218 - 40.1219 - <p class=note> The correct behavior of this property depends on an 40.1220 - outstanding erratum on <a href="#CSS3COLOR" 40.1221 - rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a> that has the ‘<a 40.1222 - href="#currentcolor"><code class=css>currentColor</code></a>’ keyword 40.1223 - inherit as itself, and to take the value of the ‘<code 40.1224 - class=property>color</code>’ property as its <em>used</em> (not 40.1225 - computed) value. 40.1226 - 40.1227 - <h4 id=text-emphasis-property><span class=secno>2.6.3. </span> Emphasis 40.1228 - Mark Shorthand: the ‘<a href="#text-emphasis"><code 40.1229 - class=property>text-emphasis</code></a>’ property</h4> 40.1230 - 40.1231 - <table class=propdef> 40.1232 - <tbody> 40.1233 - <tr> 40.1234 - <th>Name: 40.1235 - 40.1236 - <td><dfn id=text-emphasis>text-emphasis</dfn> 40.1237 - 40.1238 - <tr> 40.1239 - <th><a href="#values">Value</a>: 40.1240 - 40.1241 - <td>‘<code class=css><<a 40.1242 - href="#text-emphasis-style">text-emphasis-style</a>></code>’ || 40.1243 - ‘<code class=css><<a 40.1244 - href="#text-emphasis-color">text-emphasis-color</a>></code>’ 40.1245 - 40.1246 - <tr> 40.1247 - <th>Initial: 40.1248 - 40.1249 - <td>see individual properties 40.1250 - 40.1251 - <tr> 40.1252 - <th>Applies to: 40.1253 - 40.1254 - <td>all elements 40.1255 - 40.1256 - <tr> 40.1257 - <th>Inherited: 40.1258 - 40.1259 - <td>yes 40.1260 - 40.1261 - <tr> 40.1262 - <th>Percentages: 40.1263 - 40.1264 - <td>N/A 40.1265 - 40.1266 - <tr> 40.1267 - <th>Media: 40.1268 - 40.1269 - <td>visual 40.1270 - 40.1271 - <tr> 40.1272 - <th>Computed value: 40.1273 - 40.1274 - <td>see individual properties 40.1275 - </table> 40.1276 - 40.1277 - <p>This property is a shorthand for setting ‘<a 40.1278 - href="#text-emphasis-style"><code 40.1279 - class=property>text-emphasis-style</code></a>’ and ‘<a 40.1280 - href="#text-emphasis-color"><code 40.1281 - class=property>text-emphasis-color</code></a>’ in one declaration. 40.1282 - Omitted values are set to their initial values. 40.1283 - 40.1284 - <p class=note>Note that ‘<a href="#text-emphasis-position"><code 40.1285 - class=property>text-emphasis-position</code></a>’ is not reset in this 40.1286 - shorthand. This is because typically the shape and color vary, but the 40.1287 - position is consistent for a particular language throughout the document. 40.1288 - Therefore the position should inherit independently. 40.1289 - 40.1290 - <h4 id=text-emphasis-position-property><span class=secno>2.6.4. </span> 40.1291 - Emphasis Mark Position: the ‘<a href="#text-emphasis-position"><code 40.1292 - class=property>text-emphasis-position</code></a>’ property</h4> 40.1293 - 40.1294 - <table class=propdef> 40.1295 - <tbody> 40.1296 - <tr> 40.1297 - <th>Name: 40.1298 - 40.1299 - <td><dfn id=text-emphasis-position>text-emphasis-position</dfn> 40.1300 - 40.1301 - <tr> 40.1302 - <th><a href="#values">Value</a>: 40.1303 - 40.1304 - <td>[ above | below ] && [ right | left ] 40.1305 - 40.1306 - <tr> 40.1307 - <th>Initial: 40.1308 - 40.1309 - <td>above right 40.1310 - 40.1311 - <tr> 40.1312 - <th>Applies to: 40.1313 - 40.1314 - <td>all elements 40.1315 - 40.1316 - <tr> 40.1317 - <th>Inherited: 40.1318 - 40.1319 - <td>yes 40.1320 - 40.1321 - <tr> 40.1322 - <th>Percentages: 40.1323 - 40.1324 - <td>N/A 40.1325 - 40.1326 - <tr> 40.1327 - <th>Media: 40.1328 - 40.1329 - <td>visual 40.1330 - 40.1331 - <tr> 40.1332 - <th>Computed value: 40.1333 - 40.1334 - <td>as specified 40.1335 - </table> 40.1336 - 40.1337 - <p>This property describes where emphasis marks are drawn at. The values 40.1338 - have following meanings: 40.1339 - 40.1340 - <dl> 40.1341 - <dt><dfn id=above title="text-emphasis:above">‘<code 40.1342 - class=css>above</code>’</dfn> 40.1343 - 40.1344 - <dd>Draw marks over the text in horizontal writing mode. 40.1345 - 40.1346 - <dt><dfn id=below0 title="text-emphasis:below">‘<code 40.1347 - class=css>below</code>’</dfn> 40.1348 - 40.1349 - <dd>Draw marks under the text in horizontal writing mode. 40.1350 - 40.1351 - <dt><dfn id=right0 title="text-emphasis:right">‘<code 40.1352 - class=css>right</code>’</dfn> 40.1353 - 40.1354 - <dd>Draw marks to the right of the text in vertical writing mode. 40.1355 - 40.1356 - <dt><dfn id=left0 title="text-emphasis:left">‘<code 40.1357 - class=css>left</code>’</dfn> 40.1358 - 40.1359 - <dd>Draw marks to the left of the text in vertical writing mode. 40.1360 - </dl> 40.1361 - 40.1362 - <p class=issue> Should ‘<code class=css>above</code>’/‘<a 40.1363 - href="#below"><code class=css>below</code></a>’ be ‘<code 40.1364 - class=css>over</code>’/‘<code class=css>under</code>’ to match text 40.1365 - decoration names? 40.1366 - 40.1367 - <p>Emphasis marks are drawn exactly as if each character was assigned the 40.1368 - mark as its ruby annotation text with the ruby position given by ‘<a 40.1369 - href="#text-emphasis-position"><code 40.1370 - class=property>text-emphasis-position</code></a>’ and the ruby alignment 40.1371 - as centered. 40.1372 - 40.1373 - <p>The effect of emphasis marks on the line height is the same as for ruby 40.1374 - text. 40.1375 - 40.1376 - <div class=note> 40.1377 - <p>Note, the preferred position of emphasis marks depends on the language. 40.1378 - In Japanese for example, the preferred position is ‘<code 40.1379 - class=css>above right</code>’. In Chinese, on the other hand, the 40.1380 - preferred position is ‘<code class=css>below right</code>’. The 40.1381 - informative table below summarizes the preferred emphasis mark positions 40.1382 - for Chinese and Japanese: 40.1383 - 40.1384 - <table class=data> 40.1385 - <caption>Preferred emphasis mark and ruby position</caption> 40.1386 - 40.1387 - <thead> 40.1388 - <tr> 40.1389 - <th rowspan=2 scope=col>Language 40.1390 - 40.1391 - <th colspan=2 scope=col>Preferred mark position 40.1392 - 40.1393 - <th colspan=2 rowspan=2 scope=col>Illustration 40.1394 - 40.1395 - <tr> 40.1396 - <th>Horizontal 40.1397 - 40.1398 - <th>Vertical 40.1399 - 40.1400 - <tbody> 40.1401 - <tr> 40.1402 - <td scope=row>Japanese 40.1403 - 40.1404 - <td>above 40.1405 - 40.1406 - <td>right 40.1407 - 40.1408 - <td> <img 40.1409 - alt="Emphasis marks appear above each emphasized character in horizontal Japanese text." 40.1410 - height=28 src=text-emphasis-ja.gif 40.1411 - title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text" 40.1412 - width=225> 40.1413 - 40.1414 - <td rowspan=2> <img 40.1415 - alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text." 40.1416 - height=89 src=text-emphasis-v.gif 40.1417 - title="Emphasis applied on the right of a fragment of Japanese text" 40.1418 - width=34> <!-- 40.1419 - <tr> 40.1420 - <td scope="row">Mongolian 40.1421 - <td><span class="issue">?</span> 40.1422 - <td>right 40.1423 - --> 40.1424 - 40.1425 - <tr> 40.1426 - <td scope=row>Chinese 40.1427 - 40.1428 - <td>below 40.1429 - 40.1430 - <td>right 40.1431 - 40.1432 - <td> <img 40.1433 - alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text." 40.1434 - height=28 src=text-emphasis-zh.gif 40.1435 - title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text" 40.1436 - width=133> 40.1437 - </table> 40.1438 - </div> 40.1439 - 40.1440 - <h3 id=text-shadow-property><span class=secno>2.7. </span> Text Shadows: 40.1441 - the ‘<a href="#text-shadow"><code 40.1442 - class=property>text-shadow</code></a>’ property</h3> 40.1443 - 40.1444 - <table class=propdef> 40.1445 - <tbody> 40.1446 - <tr> 40.1447 - <th>Name: 40.1448 - 40.1449 - <td><dfn id=text-shadow>text-shadow</dfn> 40.1450 - 40.1451 - <tr> 40.1452 - <th><a href="#values">Value</a>: 40.1453 - 40.1454 - <td>none | [ <length>{2,3} && <color>? ]# 40.1455 - 40.1456 - <tr> 40.1457 - <th>Initial: 40.1458 - 40.1459 - <td>none 40.1460 - 40.1461 - <tr> 40.1462 - <th>Applies to: 40.1463 - 40.1464 - <td>all elements 40.1465 - 40.1466 - <tr> 40.1467 - <th>Inherited: 40.1468 - 40.1469 - <td>yes 40.1470 - 40.1471 - <tr> 40.1472 - <th>Percentages: 40.1473 - 40.1474 - <td>N/A 40.1475 - 40.1476 - <tr> 40.1477 - <th>Media: 40.1478 - 40.1479 - <td>visual 40.1480 - 40.1481 - <tr> 40.1482 - <th>Computed value: 40.1483 - 40.1484 - <td>a color plus three absolute <length>s 40.1485 - </table> 40.1486 - 40.1487 - <p>This property accepts a comma-separated list of shadow effects to be 40.1488 - applied to the text of the element. Values are interpreted as for <a 40.1489 - href="http://www.w3.org/TR/css3-background/#the-box-shadow">‘<code 40.1490 - class=property>box-shadow</code>’</a> <a href="#CSS3BG" 40.1491 - rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. (But note that spread 40.1492 - values are not allowed.) The shadow is applied to all of the element's 40.1493 - text as well as any text decorations it specifies. 40.1494 - 40.1495 - <p>The shadow effects are applied front-to-back: the first shadow is on 40.1496 - top. The shadows may thus overlay each other, but they never overlay the 40.1497 - text itself. The shadow must be painted at a stack level between the 40.1498 - element's border and/or background, if present, and the elements text and 40.1499 - text decoration. UAs should avoid painting text shadows over text in 40.1500 - adjacent elements belonging to the same stack level and stacking context. 40.1501 - (This may mean that the exact stack level of the shadows depends on 40.1502 - whether the element has a border or background: the exact stacking 40.1503 - behavior of text shadows is thus UA-defined.) 40.1504 - 40.1505 - <p>Unlike ‘<code class=property>box-shadow</code>’, text shadows are 40.1506 - not clipped to the shadowed shape and may show through if the text is 40.1507 - partially-transparent. Like ‘<code class=property>box-shadow</code>’, 40.1508 - text shadows do not influence layout, and do not trigger scrolling or 40.1509 - increase the size of the scrollable area. 40.1510 - 40.1511 - <p class=note>The painting order of shadows defined here is the opposite of 40.1512 - that defined in the 1998 <a 40.1513 - href="http://www.w3.org/TR/1998/REC-CSS2-19980512">CSS2 40.1514 - Recommendation</a>. 40.1515 - 40.1516 - <p>The ‘<a href="#text-shadow"><code class=css>text-shadow</code></a>’ 40.1517 - property applies to both the <code>::first-line</code> and 40.1518 - <code>::first-letter</code> pseudo-elements. 40.1519 - 40.1520 - <h2 id=conformance><span class=secno>3. </span> Conformance</h2> 40.1521 - 40.1522 - <h3 id=conventions><span class=secno>3.1. </span> Document Conventions</h3> 40.1523 - 40.1524 - <p>Conformance requirements are expressed with a combination of descriptive 40.1525 - assertions and RFC 2119 terminology. The key words “MUST”, “MUST 40.1526 - NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, 40.1527 - “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the 40.1528 - normative parts of this document are to be interpreted as described in RFC 40.1529 - 2119. However, for readability, these words do not appear in all uppercase 40.1530 - letters in this specification. 40.1531 - 40.1532 - <p>All of the text of this specification is normative except sections 40.1533 - explicitly marked as non-normative, examples, and notes. <a 40.1534 - href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a> 40.1535 - 40.1536 - <p>Examples in this specification are introduced with the words “for 40.1537 - example” or are set apart from the normative text with 40.1538 - <code>class="example"</code>, like this: 40.1539 - 40.1540 - <div class=example> 40.1541 - <p>This is an example of an informative example. 40.1542 - </div> 40.1543 - 40.1544 - <p>Informative notes begin with the word “Note” and are set apart from 40.1545 - the normative text with <code>class="note"</code>, like this: 40.1546 - 40.1547 - <p class=note>Note, this is an informative note. 40.1548 - 40.1549 - <h3 id=conformance-classes><span class=secno>3.2. </span> Conformance 40.1550 - Classes</h3> 40.1551 - 40.1552 - <p>Conformance to CSS Text Level 3 is defined for three conformance 40.1553 - classes: 40.1554 - 40.1555 - <dl> 40.1556 - <dt><dfn id=style-sheet title="style sheet!!as conformance class">style 40.1557 - sheet</dfn> 40.1558 - 40.1559 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 40.1560 - style sheet</a>. 40.1561 - 40.1562 - <dt><dfn id=renderer>renderer</dfn> 40.1563 - 40.1564 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 40.1565 - that interprets the semantics of a style sheet and renders documents that 40.1566 - use them. 40.1567 - 40.1568 - <dt><dfn id=authoring-tool>authoring tool</dfn> 40.1569 - 40.1570 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 40.1571 - that writes a style sheet. 40.1572 - </dl> 40.1573 - 40.1574 - <p>A style sheet is conformant to CSS Text Level 3 if all of its 40.1575 - declarations that use properties defined in this module have values that 40.1576 - are valid according to the generic CSS grammar and the individual grammars 40.1577 - of each property as given in this module. 40.1578 - 40.1579 - <p>A renderer is conformant to CSS Text Level 3 if, in addition to 40.1580 - interpreting the style sheet as defined by the appropriate specifications, 40.1581 - it supports all the features defined by CSS Text Level 3 by parsing them 40.1582 - correctly and rendering the document accordingly. However, the inability 40.1583 - of a UA to correctly render a document due to limitations of the device 40.1584 - does not make the UA non-conformant. (For example, a UA is not required to 40.1585 - render color on a monochrome monitor.) 40.1586 - 40.1587 - <p>An authoring tool is conformant to CSS Text Level 3 if it writes style 40.1588 - sheets that are syntactically correct according to the generic CSS grammar 40.1589 - and the individual grammars of each feature in this module, and meet all 40.1590 - other conformance requirements of style sheets as described in this 40.1591 - module. 40.1592 - 40.1593 - <h3 id=partial><span class=secno>3.3. </span> Partial Implementations</h3> 40.1594 - 40.1595 - <p>So that authors can exploit the forward-compatible parsing rules to 40.1596 - assign fallback values, CSS renderers <strong>must</strong> treat as 40.1597 - invalid (and <a 40.1598 - href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as 40.1599 - appropriate</a>) any at-rules, properties, property values, keywords, and 40.1600 - other syntactic constructs for which they have no usable level of support. 40.1601 - In particular, user agents <strong>must not</strong> selectively ignore 40.1602 - unsupported component values and honor supported values in a single 40.1603 - multi-value property declaration: if any value is considered invalid (as 40.1604 - unsupported values must be), CSS requires that the entire declaration be 40.1605 - ignored. 40.1606 - 40.1607 - <h3 id=experimental><span class=secno>3.4. </span> Experimental 40.1608 - Implementations</h3> 40.1609 - 40.1610 - <p>To avoid clashes with future CSS features, the CSS2.1 specification 40.1611 - reserves a <a 40.1612 - href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 40.1613 - syntax</a> for proprietary and experimental extensions to CSS. 40.1614 - 40.1615 - <p>Prior to a specification reaching the Candidate Recommendation stage in 40.1616 - the W3C process, all implementations of a CSS feature are considered 40.1617 - experimental. The CSS Working Group recommends that implementations use a 40.1618 - vendor-prefixed syntax for such features, including those in W3C Working 40.1619 - Drafts. This avoids incompatibilities with future changes in the draft. 40.1620 - 40.1621 - <h3 id=testing><span class=secno>3.5. </span>Non-Experimental 40.1622 - Implementations</h3> 40.1623 - 40.1624 - <p>Once a specification reaches the Candidate Recommendation stage, 40.1625 - non-experimental implementations are possible, and implementors should 40.1626 - release an unprefixed implementation of any CR-level feature they can 40.1627 - demonstrate to be correctly implemented according to spec. 40.1628 - 40.1629 - <p>To establish and maintain the interoperability of CSS across 40.1630 - implementations, the CSS Working Group requests that non-experimental CSS 40.1631 - renderers submit an implementation report (and, if necessary, the 40.1632 - testcases used for that implementation report) to the W3C before releasing 40.1633 - an unprefixed implementation of any CSS features. Testcases submitted to 40.1634 - W3C are subject to review and correction by the CSS Working Group. 40.1635 - 40.1636 - <p>Further information on submitting testcases and implementation reports 40.1637 - can be found from on the CSS Working Group's website at <a 40.1638 - href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 40.1639 - Questions should be directed to the <a 40.1640 - href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> 40.1641 - mailing list. 40.1642 - 40.1643 - <h3 id=cr-exit-criteria><span class=secno>3.6. </span> CR Exit Criteria</h3> 40.1644 - 40.1645 - <p> For this specification to be advanced to Proposed Recommendation, there 40.1646 - must be at least two independent, interoperable implementations of each 40.1647 - feature. Each feature may be implemented by a different set of products, 40.1648 - there is no requirement that all features be implemented by a single 40.1649 - product. For the purposes of this criterion, we define the following 40.1650 - terms: 40.1651 - 40.1652 - <dl> 40.1653 - <dt>independent 40.1654 - 40.1655 - <dd>each implementation must be developed by a different party and cannot 40.1656 - share, reuse, or derive from code used by another qualifying 40.1657 - implementation. Sections of code that have no bearing on the 40.1658 - implementation of this specification are exempt from this requirement. 40.1659 - 40.1660 - <dt>interoperable 40.1661 - 40.1662 - <dd>passing the respective test case(s) in the official CSS test suite, 40.1663 - or, if the implementation is not a Web browser, an equivalent test. Every 40.1664 - relevant test in the test suite should have an equivalent test created if 40.1665 - such a user agent (UA) is to be used to claim interoperability. In 40.1666 - addition if such a UA is to be used to claim interoperability, then there 40.1667 - must one or more additional UAs which can also pass those equivalent 40.1668 - tests in the same way for the purpose of interoperability. The equivalent 40.1669 - tests must be made publicly available for the purposes of peer review. 40.1670 - 40.1671 - <dt>implementation 40.1672 - 40.1673 - <dd>a user agent which: 40.1674 - <ol class=inline> 40.1675 - <li>implements the specification. 40.1676 - 40.1677 - <li>is available to the general public. The implementation may be a 40.1678 - shipping product or other publicly available version (i.e., beta 40.1679 - version, preview release, or “nightly build”). Non-shipping product 40.1680 - releases must have implemented the feature(s) for a period of at least 40.1681 - one month in order to demonstrate stability. 40.1682 - 40.1683 - <li>is not experimental (i.e., a version specifically designed to pass 40.1684 - the test suite and is not intended for normal usage going forward). 40.1685 - </ol> 40.1686 - </dl> 40.1687 - 40.1688 - <p>The specification will remain Candidate Recommendation for at least six 40.1689 - months. 40.1690 - 40.1691 - <h2 class=no-num id=acknowledgements> Appendix A: Acknowledgements</h2> 40.1692 - 40.1693 - <p>This specification would not have been possible without the help from: 40.1694 - Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett, 40.1695 - Martin Dürst, Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye 40.1696 - Gittelman, Ian Hickson, Martin Heijdra, Richard Ishida, Masayasu Ishikawa, 40.1697 - Michael Jochimsen, Eric LeVine, Ambrose Li, Håkon Wium Lie, Chris Lilley, 40.1698 - Ken Lunde, Nat McCully, Shinyu Murakami, Paul Nelson, Chris Pratley, 40.1699 - Marcin Sawicki, Arnold Schrijver, Rahul Sonnad, Michel Suignard, Takao 40.1700 - Suzuki, Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi 40.1701 - Yabe and Steve Zilles. 40.1702 - 40.1703 - <h2 class=no-num id=appendix-b-references>Appendix B: References</h2> 40.1704 - 40.1705 - <h3 class=no-num id=normative-ref>Normative references</h3> 40.1706 - <!--begin-normative--> 40.1707 - <!-- Sorted by label --> 40.1708 - 40.1709 - <dl class=bibliography> 40.1710 - <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 40.1711 - <!----> 40.1712 - 40.1713 - <dt id=CSS21>[CSS21] 40.1714 - 40.1715 - <dd>Bert Bos; et al. <a 40.1716 - href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style 40.1717 - Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June 40.1718 - 2011. W3C Recommendation. URL: <a 40.1719 - href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> 40.1720 - </dd> 40.1721 - <!----> 40.1722 - 40.1723 - <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES] 40.1724 - 40.1725 - <dd>Elika J. Etemad; Koji Ishii. <a 40.1726 - href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/"><cite>CSS 40.1727 - Writing Modes Module Level 3.</cite></a> 1 May 2012. W3C Working Draft. 40.1728 - (Work in progress.) URL: <a 40.1729 - href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/</a> 40.1730 - </dd> 40.1731 - <!----> 40.1732 - 40.1733 - <dt id=CSS3BG>[CSS3BG] 40.1734 - 40.1735 - <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a 40.1736 - href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS 40.1737 - Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C 40.1738 - Candidate Recommendation. (Work in progress.) URL: <a 40.1739 - href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a> 40.1740 - </dd> 40.1741 - <!----> 40.1742 - 40.1743 - <dt id=CSS3TEXT>[CSS3TEXT] 40.1744 - 40.1745 - <dd>Elika J. Etemad; Koji Ishii. <a 40.1746 - href="http://www.w3.org/TR/2012/WD-css3-text-20120814/"><cite>CSS Text 40.1747 - Level 3.</cite></a> 14 August 2012. W3C Working Draft. (Work in 40.1748 - progress.) URL: <a 40.1749 - href="http://www.w3.org/TR/2012/WD-css3-text-20120814/">http://www.w3.org/TR/2012/WD-css3-text-20120814/</a> 40.1750 - </dd> 40.1751 - <!----> 40.1752 - 40.1753 - <dt id=RFC2119>[RFC2119] 40.1754 - 40.1755 - <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key 40.1756 - words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet 40.1757 - RFC 2119. URL: <a 40.1758 - href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a> 40.1759 - </dd> 40.1760 - <!----> 40.1761 - </dl> 40.1762 - <!--end-normative--> 40.1763 - 40.1764 - <h3 class=no-num id=informative-ref>Informative references</h3> 40.1765 - <!--begin-informative--> 40.1766 - <!-- Sorted by label --> 40.1767 - 40.1768 - <dl class=bibliography> 40.1769 - <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 40.1770 - <!----> 40.1771 - 40.1772 - <dt id=CSS3COLOR>[CSS3COLOR] 40.1773 - 40.1774 - <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a 40.1775 - href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color 40.1776 - Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a 40.1777 - href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a> 40.1778 - </dd> 40.1779 - <!----> 40.1780 - </dl> 40.1781 - <!--end-informative--> 40.1782 - 40.1783 - <h2 class=no-num id=changes>Appendix C: Changes</h2>
41.1 --- a/css3-text-decor/Overview.src.html Mon Oct 22 00:33:44 2012 +0200 41.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 41.3 @@ -1,1228 +0,0 @@ 41.4 -<!DOCTYPE html> 41.5 -<html lang="en"> 41.6 -<head> 41.7 - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 41.8 - <title>CSS Text Decoration Module Level 3 (CSS3 Text Decoration)</title> 41.9 - <link rel=contents href="#contents"> 41.10 - <link rel=index href="#index"> 41.11 - <link rel="stylesheet" type="text/css" href="../default.css"> 41.12 - <link rel="stylesheet" type="text/css" 41.13 - href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css"> 41.14 - 41.15 -</head> 41.16 - 41.17 -<div class="head"> 41.18 -<!--logo--> 41.19 - 41.20 -<h1>CSS Text Decoration Module Level 3</h1> 41.21 - 41.22 -<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2> 41.23 -<dl> 41.24 - <dt>This version:</dt> 41.25 - <!-- 41.26 - <dd><a href="http://dev.w3.org/csswg/css3-text/">$Date$ (CVS $Revision$)</a> 41.27 - --> 41.28 - <dd><a href="http://www.w3.org/TR/[YEAR]/WD-css3-text-[CDATE]/">http://www.w3.org/TR/[YEAR]/WD-css3-text-[CDATE]/</a></dd> 41.29 - 41.30 - <dt>Latest version:</dt> 41.31 - <dd><a href="http://www.w3.org/TR/css3-text/">http://www.w3.org/TR/css3-text/</a></dd> 41.32 - <dt>Latest editor's draft:</dt> 41.33 - <dd><a href="http://dev.w3.org/csswg/css3-text/">http://dev.w3.org/csswg/css3-text/</a></dd> 41.34 - <dt>Previous version:</dt> 41.35 - <dd><a 41.36 - href="http://www.w3.org/TR/2012/WD-css3-text-20120119/">http://www.w3.org/TR/2012/WD-css3-text-20120119/</a> 41.37 - 41.38 - <dt>Issues List:</dt> 41.39 - <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/10">http://www.w3.org/Style/CSS/Tracker/products/10</a> 41.40 - 41.41 - <dt>Discussion:</dt> 41.42 - <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line “<kbd>[[SHORTNAME]] <var>… message topic …</var></kbd>” 41.43 - 41.44 - <dt>Editors:</dt> 41.45 - <dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> (Mozilla)</dd> 41.46 - <dd><a href="mailto:koji.a.ishii@mail.rakuten.com">Koji Ishii</a> (Rakuten, Inc.)</dd> 41.47 -</dl> 41.48 - 41.49 -<!--copyright--> 41.50 - 41.51 -<hr title="Separator for header"> 41.52 -</div> 41.53 - 41.54 -<h2 class="no-num no-toc" id="abstract">Abstract</h2> 41.55 - 41.56 - <p>This module contains the features of CSS relating to 41.57 - text decoration, such as underlines, text shadows, and emphasis marks. 41.58 - <a href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing 41.59 - the rendering of structured documents (such as HTML and XML) on screen, on 41.60 - paper, in speech, etc. 41.61 - 41.62 -<h2 class="no-num no-toc" id="status">Status of this document</h2> 41.63 - 41.64 - 41.65 - <p><em>This section describes the status of this document at the time of 41.66 - its publication. Other documents may supersede this document. A list of 41.67 - current W3C publications and the latest revision of this technical report 41.68 - can be found in the <a href="http://www.w3.org/TR/">W3C technical reports 41.69 - index at http://www.w3.org/TR/.</a></em> 41.70 - 41.71 - <p>Publication as a Working Draft does not imply endorsement by the W3C 41.72 - Membership. This is a draft document and may be updated, replaced or 41.73 - obsoleted by other documents at any time. It is inappropriate to cite this 41.74 - document as other than work in progress. 41.75 - 41.76 - <p>This CSS module has been produced as a combined effort of the <a 41.77 - href="http://www.w3.org/International/Activity">W3C Internationalization Activity</a>, 41.78 - and the <a href="http://www.w3.org/Style/Activity">Style Activity</a> and is maintained 41.79 - by the <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>. It also 41.80 - includes contributions made by participants in the <a 41.81 - href="http://www.w3.org/Style/XSL/Group/">XSL Working Group</a> (<a 41.82 - href="http://cgi.w3.org/MemberAccess/AccessRequest">members 41.83 - only</a>). 41.84 - 41.85 - <p>This document was produced by a group operating under the <a 41.86 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 41.87 - 2004 W3C Patent Policy</a>. W3C maintains a <a 41.88 - href="http://www.w3.org/2004/01/pp-impl/32061/status" 41.89 - rel=disclosure>public list of any patent disclosures</a> made in 41.90 - connection with the deliverables of the group; that page also includes 41.91 - instructions for disclosing a patent. An individual who has actual 41.92 - knowledge of a patent which the individual believes contains <a 41.93 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential 41.94 - Claim(s)</a> must disclose the information in accordance with <a 41.95 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 41.96 - 6 of the W3C Patent Policy</a>.</p> 41.97 - 41.98 - <p><strong>Feedback on this draft should be posted to the 41.99 - (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) 41.100 - public mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a></strong> 41.101 - (see <a href="http://www.w3.org/Mail/Request">instructions</a>) <strong>with 41.102 - <kbd>[css3-text-decor]</kbd> in the subject line.</strong> 41.103 - You are strongly encouraged to complain if you see something stupid 41.104 - in this draft. The editors will do their best to respond to all feedback.</p> 41.105 - 41.106 - <p>The following features are at risk and may be cut from the spec during 41.107 - its CR period if there are no (correct) implementations:</p> 41.108 - 41.109 - <p>The following features are at risk and may be cut from the spec during 41.110 - its CR period if there are no (correct) implementations:</p> 41.111 - <ul> 41.112 - <li>the 'text-decoration-skip' property / ''ink'' value 41.113 - </ul> 41.114 - 41.115 -<h2 class="no-num no-toc" id="contents"> 41.116 -Table of Contents</h2> 41.117 - 41.118 -<!--toc--> 41.119 - 41.120 -<h2 id="intro"> 41.121 -Introduction</h2> 41.122 - 41.123 - <p>[document here]</p> 41.124 - 41.125 - <p class="issue">This draft describes features that are specific to certain scripts. 41.126 - There is an ongoing discussion about where these features belong: in 41.127 - existing CSS properties, in new CSS properties, or perhaps in other 41.128 - specifications. 41.129 - 41.130 - 41.131 -<h3 id="placement"> 41.132 -Module Interactions</h3> 41.133 - 41.134 - <p>This module replaces and extends the text-level 41.135 - features defined in [[!CSS21]] chapter 16. 41.136 - 41.137 -<h3 id="values"> 41.138 -Values</h3> 41.139 - 41.140 - <p>This specification follows the 41.141 - <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property 41.142 - definition conventions</a> from [[!CSS21]]. Value types not defined in 41.143 - this specification are defined in CSS Level 2 Revision 1 [[!CSS21]]. 41.144 - Other CSS modules may expand the definitions of these value types: for 41.145 - example [[CSS3COLOR]], when combined with this module, expands the 41.146 - definition of the <color> value type as used in this specification.</p> 41.147 - 41.148 - <p>In addition to the property-specific values listed in their definitions, 41.149 - all properties defined in this specification also accept the 41.150 - <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> 41.151 - keyword as their property value. For readability it has not been repeated 41.152 - explicitly. 41.153 - 41.154 - <p>The <dfn>''currentcolor''</dfn> keyword here computes to itself and is 41.155 - resolved to the value of 'color' after inheritance is performed. This is 41.156 - so that the 'text-emphasis-color' by default matches the text 'color'. 41.157 - <span class="issue">CSS3 Color has not yet been errata'd to define it this way; 41.158 - currentcolor there is defined to compute to the value of 'color', 41.159 - which gives it the wrong inheritance behavior.</span> 41.160 - 41.161 -<h3 id="terms">Terminology</h3> 41.162 - 41.163 - <p>The terms <a href="http://www.w3.org/TR/css3-text/#grapheme-cluster"><dfn>character</dfn></a>, 41.164 - <a href="http://www.w3.org/TR/css3-text/#letter"><dfn>letter</dfn></a>, and 41.165 - <a href="http://www.w3.org/TR/css3-text/#content-language"><dfn>content language</dfn></a> 41.166 - as used in this specification are defined in [[!CSS3TEXT]]. 41.167 - Other terminology and concepts used in this specification are defined 41.168 - in [[!CSS21]] and [[!CSS3-WRITING-MODES]]. 41.169 - 41.170 -<h2 id="line-decoration"> 41.171 -Line Decoration: Underline, Overline, and Strike-Through</h2> 41.172 - 41.173 - <p>The following properties describe line decorations that are added 41.174 - to the content of an element. When specified on or propagated to 41.175 - an inline box, such decoration affects all the boxes generated 41.176 - by that element, and is further propagated to any in-flow block-level 41.177 - boxes that split the inline 41.178 - (see <a href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">CSS2.1 section 9.2.1.1</a>) 41.179 - When specified on or propagated to a ruby box, the decorations are 41.180 - further propagated only to the ruby base. 41.181 - When specified on or propagated to a a block container that establishes 41.182 - an inline formatting context, the decorations are propagated to an 41.183 - anonymous inline element that wraps all the in-flow inline-level children 41.184 - of the block container. For all other elements, the decorations are 41.185 - propagated to any in-flow children. 41.186 - 41.187 - <p class="note">Note that text decorations are not propagated to any 41.188 - out-of-flow descendants, nor to the contents of atomic inline-level 41.189 - descendants such as inline blocks and inline tables. 41.190 - 41.191 - <p>By default underlines, overlines, and line-throughs are applied only 41.192 - to text (including white space, letter spacing, and word spacing): 41.193 - margins, borders, and padding are skipped. Elements containing 41.194 - no text, such as images, are likewise not decorated. 41.195 - The 'text-decoration-skip' 41.196 - property can be used to modify this behavior, for example allowing 41.197 - inline replaced elements to be underlined or requiring that white 41.198 - space be skipped. 41.199 - 41.200 - <p>In determining the position and thickness of text decoration lines, 41.201 - user agents may consider the font sizes and dominant baselines of 41.202 - descendants, but for a given element's decoration must use the same 41.203 - position and thickness throughout each line box. The 41.204 - <a href="#text-decoration-color">color</a> and 41.205 - <a href="#text-decoration-style">line style</a> of decorations must 41.206 - remain the same on all decorations applied by a given element, even 41.207 - if descendant elements have different color or line style values.</p> 41.208 - 41.209 - <div class="example"> 41.210 - <p>The following figure shows the averaging for underline: 41.211 - <p><img alt="In the first rendering of the underlined text '1st a' 41.212 - with 'st' as a superscript, both the '1st' and the 'a' 41.213 - are rendered in a small font. In the second rendering, 41.214 - the 'a' is rendered in a larger font. In the third, both 41.215 - '1st' and 'a' are large." 41.216 - height="105" src="underline-averaging.gif" width="326"> 41.217 - <p>In the three fragments of underlined text, the underline is drawn 41.218 - consecutively lower and thicker as the ratio of large text to small 41.219 - text increases.</p> 41.220 - </div> 41.221 - 41.222 - <p>Relatively positioning a descendant moves all text decorations 41.223 - affecting it along with the descendant's text; it does not affect 41.224 - calculation of the decoration's initial position on that line. 41.225 - The 'visibility' property, filters, and other graphical transformations 41.226 - likewise affect text decorations as part of the text they're drawn on, 41.227 - even if the decorations were specified on an ancestor element. 41.228 - <span class="issue">Does this include 'text-shadow'? What about text-fill etc.?</span> 41.229 - 41.230 - <div class="example"> 41.231 - <p>In the following style sheet and document fragment:</p> 41.232 - <pre><code class="css"> 41.233 -<!-- --> blockquote { text-decoration: underline; color: blue; } 41.234 -<!-- --> em { display: block; } 41.235 -<!-- --> cite { color: fuchsia; } 41.236 -<!----></code></pre> 41.237 - <pre class="html"><code> 41.238 -<!-- --> <blockquote> 41.239 -<!-- --> <p> 41.240 -<!-- --> <span> 41.241 -<!-- --> Help, help! 41.242 -<!-- --> <em> I am under a hat! </em> 41.243 -<!-- --> 41.244 -<!-- --> <cite> —GwieF </cite> 41.245 -<!-- --> </span> 41.246 -<!-- --> </p> 41.247 -<!-- --> </blockquote> 41.248 -<!----></code></pre> 41.249 - <p>...the underlining for the blockquote element is propagated to an 41.250 - anonymous inline element that surrounds the span element, causing 41.251 - the text "Help, help!" to be blue, with the blue underlining from 41.252 - the anonymous inline underneath it, the color being taken from the 41.253 - blockquote element. The <code><em>text</em></code> 41.254 - in the em block is also underlined, as it is in an in-flow block to 41.255 - which the underline is propagated. The final line of text is fuchsia, 41.256 - but the underline underneath it is still the blue underline from the 41.257 - anonymous inline element.</p> 41.258 - <p><img src="underline-example.png" alt="Sample rendering of the above underline example"></p> 41.259 - <p>This diagram shows the boxes involved in the example above. The 41.260 - rounded aqua line represents the anonymous inline element wrapping 41.261 - the inline contents of the paragraph element, the rounded blue line 41.262 - represents the span element, and the orange lines represent the 41.263 - blocks.</p> 41.264 - </div> 41.265 - 41.266 -<h3 id="text-decoration-line-property"> 41.267 -Text Decoration Lines: the 'text-decoration-line' property</h3> 41.268 - 41.269 - <table class="propdef"> 41.270 - <tr> 41.271 - <th>Name: 41.272 - <td><dfn>text-decoration-line</dfn> 41.273 - <tr> 41.274 - <th><a href="#values">Value</a>: 41.275 - <td>none | [ underline || overline || line-through ] 41.276 - 41.277 - <tr> 41.278 - <th>Initial: 41.279 - <td>none 41.280 - <tr> 41.281 - <th>Applies to: 41.282 - <td>all elements 41.283 - <tr> 41.284 - <th>Inherited: 41.285 - <td>no (but see prose) 41.286 - <tr> 41.287 - <th>Percentages: 41.288 - <td>N/A 41.289 - <tr> 41.290 - <th>Media: 41.291 - <td>visual 41.292 - <tr> 41.293 - <th>Computed value: 41.294 - <td>as specified 41.295 - </table> 41.296 - 41.297 - <p>Specifies what line decorations, if any, are added to the element. 41.298 - Values have the following meanings:</p> 41.299 - 41.300 - <dl> 41.301 - <dt><dfn title="text-decoration-line:none">''none''</dfn> 41.302 - <dd>Neither produces nor inhibits text decoration. 41.303 - <dt><dfn>''underline''</dfn> 41.304 - <dd>Each line of text is underlined. 41.305 - <dt><dfn>''overline''</dfn> 41.306 - <dd>Each line of text has a line above it (i.e. on the opposite 41.307 - side from an underline). 41.308 - <dt><dfn>''line-through''</dfn> 41.309 - <dd>Each line of text has a line through the middle. 41.310 - </dl> 41.311 - 41.312 -<h3 id="text-decoration-color-property"> 41.313 -Text Decoration Color: the 'text-decoration-color' property</h3> 41.314 - 41.315 - <table class="propdef"> 41.316 - <tr> 41.317 - <th>Name: 41.318 - <td><dfn>text-decoration-color</dfn> 41.319 - <tr> 41.320 - <th><a href="#values">Value</a>: 41.321 - <td><a href="http://www.w3.org/TR/css3-color/#color0"><span class="value-inst-color"><color></span></a> 41.322 - 41.323 - <tr> 41.324 - <th>Initial: 41.325 - <td><a href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> 41.326 - <tr> 41.327 - <th>Applies to: 41.328 - <td>all elements 41.329 - <tr> 41.330 - <th>Inherited: 41.331 - <td>no 41.332 - <tr> 41.333 - <th>Percentages: 41.334 - <td>N/A 41.335 - <tr> 41.336 - <th>Media: 41.337 - <td>visual 41.338 - <tr> 41.339 - <th>Computed value: 41.340 - <td>the computed color 41.341 - </table> 41.342 - 41.343 - <p>This property specifies the color of text decoration (underlines 41.344 - overlines, and line-throughs) set on the element with 41.345 - 'text-decoration-line'.</p> 41.346 - 41.347 -<h3 id="text-decoration-style-property"> 41.348 -Text Decoration Style: the 'text-decoration-style' property</h3> 41.349 - 41.350 - <table class="propdef"> 41.351 - <tr> 41.352 - <th>Name: 41.353 - <td><dfn>text-decoration-style</dfn> 41.354 - <tr> 41.355 - <th><a href="#values">Value</a>: 41.356 - <td>solid | double | dotted | dashed | wavy 41.357 - 41.358 - <tr> 41.359 - <th>Initial: 41.360 - <td>solid 41.361 - <tr> 41.362 - <th>Applies to: 41.363 - <td>all elements 41.364 - <tr> 41.365 - <th>Inherited: 41.366 - <td>no 41.367 - <tr> 41.368 - <th>Percentages: 41.369 - <td>N/A 41.370 - <tr> 41.371 - <th>Media: 41.372 - <td>visual 41.373 - <tr> 41.374 - <th>Computed value: 41.375 - <td>as specified 41.376 - </table> 41.377 - 41.378 - <p>This property specifies the style of the line(s) drawn for 41.379 - text decoration specified on the element. Values have the 41.380 - same meaning as for the 41.381 - <a href="http://www.w3.org/TR/css3-background/#the-border-style">border-style 41.382 - properties</a> [[!CSS3BG]]. ''wavy'' indicates a wavy line.</p> 41.383 - 41.384 -<h3 id="text-decoration-property"> 41.385 -Text Decoration Shorthand: the 'text-decoration' property</h3> 41.386 - 41.387 - <table class="propdef"> 41.388 - <tr> 41.389 - <th>Name: 41.390 - <td><dfn>text-decoration</dfn> 41.391 - <tr> 41.392 - <th><a href="#values">Value</a>: 41.393 - <td><var><a href="#text-decoration-line"><text-decoration-line></a></var> || 41.394 - <var><a href="#text-decoration-style"><text-decoration-style></a></var> || 41.395 - <var><a href="#text-decoration-color"><text-decoration-color></a></var> || blink 41.396 - 41.397 - <tr> 41.398 - <th>Initial: 41.399 - <td>none 41.400 - <tr> 41.401 - <th>Applies to: 41.402 - <td>all elements 41.403 - <tr> 41.404 - <th>Inherited: 41.405 - <td>no 41.406 - <tr> 41.407 - <th>Percentages: 41.408 - <td>N/A 41.409 - <tr> 41.410 - <th>Media: 41.411 - <td>visual 41.412 - <tr> 41.413 - <th>Computed value: 41.414 - <td>as specified 41.415 - </table> 41.416 - 41.417 - <p>This property is a shorthand for setting 'text-decoration-line', 41.418 - 'text-decoration-color', and 'text-decoration-style' in one declaration. 41.419 - Omitted values are set to their initial values. A 'text-decoration' 41.420 - declaration that omits both the 'text-decoration-color' 41.421 - and 'text-decoration-style' values is backwards-compatible 41.422 - with CSS Levels 1 and 2.</p> 41.423 - 41.424 - <p>If the ''blink'' keyword is specified the text blinks 41.425 - (alternates between visible and invisible). Conforming user agents 41.426 - may simply not blink the text. Note that not blinking the text is 41.427 - one technique to satisfy 41.428 - <a href="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">checkpoint 3.3 of WAI-UAAG</a>.</p> 41.429 - 41.430 - <div class="example"> 41.431 - <p>The following example underlines unvisited links with a solid blue 41.432 - underline in CSS1 and CSS2 UAs and a navy dotted underline in CSS3 UAs.</p> 41.433 - 41.434 - <pre><code class="css"> 41.435 -<!-- -->:link { 41.436 -<!-- --> color: blue; 41.437 -<!-- --> text-decoration: underline; 41.438 -<!-- --> text-decoration: navy dotted underline; /* <a href="http://www.w3.org/TR/CSS21/syndata.html#ignore">Ignored</a> in CSS1/CSS2 UAs */ 41.439 -<!-- -->}</code></pre> 41.440 - </div> 41.441 - 41.442 -<h3 id="text-decoration-skip-property"> 41.443 -Text Decoration Line Continuity: the 'text-decoration-skip' property</h3> 41.444 - 41.445 - <table class="propdef"> 41.446 - <tr> 41.447 - <th>Name: 41.448 - <td><dfn>text-decoration-skip</dfn> 41.449 - <tr> 41.450 - <th><a href="#values">Value</a>: 41.451 - <td>none | [ objects || spaces || ink || edges ] 41.452 - 41.453 - <tr> 41.454 - <th>Initial: 41.455 - <td>objects 41.456 - <tr> 41.457 - <th>Applies to: 41.458 - <td>all elements 41.459 - <tr> 41.460 - <th>Inherited: 41.461 - <td>yes 41.462 - <tr> 41.463 - <th>Percentages: 41.464 - <td>N/A 41.465 - <tr> 41.466 - <th>Media: 41.467 - <td>visual 41.468 - <tr> 41.469 - <th>Computed value: 41.470 - <td>as specified 41.471 - </table> 41.472 - 41.473 - <p>This property specifies what parts of the element's content 41.474 - any text decoration affecting the element must skip over. It 41.475 - controls all text decoration lines drawn by the element 41.476 - and also any text decoration lines drawn by its ancestors. 41.477 - Values have the following meanings:</p> 41.478 - 41.479 - <dl> 41.480 - <dt><dfn title="text-decoration-skip:none">''none''</dfn></dt> 41.481 - <dd>Skip nothing: text-decoration is drawn for all text content 41.482 - and for inline replaced elements.</dd> 41.483 - <dt><dfn title="text-decoration-skip:objects">''objects''</dfn></dt> 41.484 - <dd>Skip this element if it is an atomic inline (such as an 41.485 - image or inline-block).</dd> 41.486 - <dt><dfn title="text-decoration-skip:spaces">''spaces''</dfn></dt> 41.487 - <dd>Skip white space: this includes regular spaces (U+0020) and 41.488 - tabs (U+0009), as well as nbsp (U+00A0), ideographic space 41.489 - (U+3000), all fixed width spaces (such as U+2000–U+200A, 41.490 - U+202F and U+205F), and any adjacent letter-spacing or 41.491 - word-spacing.</dd> 41.492 - <dt><dfn title="text-decoration-skip:ink">''ink''</dfn></dt> 41.493 - <dd>Skip over where glyphs are drawn: interrupt the decoration 41.494 - line to let text show through where the text decoration would 41.495 - otherwise cross over a glyph. The UA may also skip a small 41.496 - distance to either side of the glyph outline.</dd> 41.497 - <dt><dfn title="text-decoration-skip:edges">''edges''</dfn></dt> 41.498 - <dd>The UA should place the start and end of the line inwards from 41.499 - the content edge of the decorating element so that, e.g. two 41.500 - underlined elements side-by-side do not appear to have a single 41.501 - underline. (This is important in Chinese, where underlining is a 41.502 - form of punctuation.)</dd> 41.503 - </dl> 41.504 - 41.505 - <p class="issue">Do we need a value that <em>doesn't</em> skip 41.506 - margins and padding?</p> 41.507 - 41.508 - <p class="note">Note that this property inherits and that descendant 41.509 - elements can have a different setting.</p> 41.510 - 41.511 -<h4 id="text-underline-position-property"> 41.512 -Text Underline Position: the 'text-underline-position' property</h4> 41.513 - 41.514 - <table class="propdef"> 41.515 - <tr> 41.516 - <th>Name: 41.517 - <td><dfn>text-underline-position</dfn> 41.518 - <tr> 41.519 - <th><a href="#values">Value</a>: 41.520 - <td>auto | alphabetic | [ below || [ left | right ] ] 41.521 - 41.522 - <tr> 41.523 - <th>Initial: 41.524 - <td>auto 41.525 - <tr> 41.526 - <th>Applies to: 41.527 - <td>all elements 41.528 - <tr> 41.529 - <th>Inherited: 41.530 - <td>yes 41.531 - <tr> 41.532 - <th>Percentages: 41.533 - <td>N/A 41.534 - <tr> 41.535 - <th>Media: 41.536 - <td>visual 41.537 - <tr> 41.538 - <th>Computed value: 41.539 - <td>as specified 41.540 - </table> 41.541 - 41.542 - <p>This property sets the position of an underline specified 41.543 - on the same element: it does not affect underlines specified by 41.544 - ancestor elements. Values have the following meanings:</p> 41.545 - 41.546 - <dl> 41.547 - <dt><dfn>''auto''</dfn></dt> 41.548 - <dd>The user agent may use any algorithm to determine the 41.549 - underline's position; however it must be placed at or below 41.550 - the alphabetic baseline. 41.551 - <p class="note">It is suggested that the underline position 41.552 - be ''alphabetic'' unless it crosses either subscripted (or 41.553 - otherwise lowered) text, or it affects characters from Asian 41.554 - scripts such as Han or Tibetan, for which an alphabetic 41.555 - underline is too high: in such cases, aligning to the em box 41.556 - edge as described for ''below left'' is more appropriate. 41.557 - <dt><dfn>''alphabetic''</dfn></dt> 41.558 - <dd>The underline is positioned relative to the alphabetic baseline. In 41.559 - this case the underline is likely to cross some descenders. 41.560 - <div class="figure"> 41.561 - <p><img title="text-underline-position: alphabetic" 41.562 - alt="In a typical Latin font, the underline is positioned slightly 41.563 - below the alphabetic baseline, leaving a gap between the line 41.564 - and the bottom of most Latin letters, but crossing through 41.565 - descenders such as the stem of a 'p'." 41.566 - src="underline-position-alphabetic.png" 41.567 - > 41.568 - <p class="caption">''text-underline-position: alphabetic''</p> 41.569 - </div> 41.570 - <dt><dfn>''below''</dfn></dt> 41.571 - <dd>In horizontal writing modes, the underline is positioned 41.572 - relative to the under edge of the element's content box. 41.573 - In this case the underline usually does not cross the descenders. 41.574 - (This is sometimes called "accounting" underline.) 41.575 - If the underline affects descendants with a lower content edge, 41.576 - the user agent should shift the underline down further to the 41.577 - lowest underlined content box edge. 41.578 - The user agent may ignore elements with ''vertical-align'' 41.579 - values given as lengths, percentages, ''top'', or ''bottom'' 41.580 - when making this adjustment. 41.581 - (Note that images that are not affected by the underline per 41.582 - 'text-decoration-skip' will not affect the position of the 41.583 - underline.) 41.584 - <div class="figure"> 41.585 - <p><img title="text-underline-position: below" 41.586 - alt="In a typical Latin font, the underline is far enough 41.587 - below the text that it does not cross the bottom of a 'g'." 41.588 - src="underline-position-below.png" 41.589 - > 41.590 - <p class="caption">''text-underline-position: below''</p> 41.591 - </div> 41.592 - <div class="example"> 41.593 - <p>Because 'text-underline-position' inherits, and is not reset 41.594 - by the 'text-decoration' shorthand, the following example 41.595 - switches the document to use ''below'' underlining, which can 41.596 - be more appropriate for writing systems with long, complicated 41.597 - descenders. It is also often useful for mathematical or chemical 41.598 - texts that use many subscripts. 41.599 - <pre>:root { text-underline-position: below; }</pre> 41.600 - </div> 41.601 - <dt><dfn>''left''</dfn></dt> 41.602 - <dd>In vertical writing modes, the underline is aligned as for 41.603 - ''below'', on the left edge of the text.</dd> 41.604 - <dt><dfn>''right''</dfn></dt> 41.605 - <dd>In vertical writing modes, the underline is aligned as for 41.606 - ''below'', except it is aligned to the right edge of the text. 41.607 - If this causes the underline to be drawn on the "over" side of 41.608 - the text, then an overline also switches sides and is drawn on 41.609 - the "under" side.</dd> 41.610 - </dl> 41.611 - 41.612 - <p>If ''below'' is specified alone, ''left'' is also implied. 41.613 - If ''left'' or ''right'' is specified alone, ''below'' is also 41.614 - implied. 41.615 - 41.616 - <p class="issue"> 41.617 - Should ''above''/''below'' be ''over''/''under'' to match text decoration names? 41.618 - 41.619 - <div class="figure" id="fig-text-underline-position"> 41.620 - <table> 41.621 - <tr> 41.622 - <td> 41.623 - <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left' 41.624 - places the underline on the left side of the text." 41.625 - title="text-underline-position: left" 41.626 - src="underline-position-left.png" 41.627 - > 41.628 - 41.629 - <td> 41.630 - <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right' 41.631 - places the underline on the right side of the text." 41.632 - title="text-underline-position: right" 41.633 - src="underline-position-right.png" 41.634 - > 41.635 - 41.636 - <tr> 41.637 - <td>''left'' 41.638 - <td>''right'' 41.639 - </table> 41.640 - <p class="caption">In vertical writing modes, the 'text-underline-position' 41.641 - values ''left'' and ''right'' allow placing the underline on either 41.642 - side of the text. (In horizontal writing modes, both values are 41.643 - treated as ''below''.)</p> 41.644 - </div> 41.645 - 41.646 - <div class="example"> 41.647 - <p>The following example styles modern Chinese, Japanese, and Korean 41.648 - texts with the appropriate underline positions in both horizontal 41.649 - and vertical text: 41.650 - <pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: below right; } 41.651 -<!-- -->:root:lang(zh), [lang|=zh] { text-underline-position: below left; }</pre> 41.652 - </div> 41.653 - 41.654 - <div class="note"> 41.655 - <p>In some cases (such as in OpenType) the font format can offer 41.656 - information about the appropriate position of an underline. 41.657 - Typically this information gives the position of an ''alphabetic'' 41.658 - underline; in some cases (especially in CJK fonts), it gives 41.659 - the position of a ''below left'' underline. (In this case, 41.660 - the font's underline metrics typically touch the bottom edge 41.661 - of the em box). 41.662 - The UA is encouraged to use information (such as the underline 41.663 - thickness, or appropriate alphabetic alignment) from the font 41.664 - wherever appropriate. 41.665 - </p> 41.666 - </div> 41.667 - 41.668 -<h3 id="emphasis-marks"> 41.669 -Emphasis Marks</h3> 41.670 - 41.671 - <p>East Asian documents traditionally use small symbols next to each glyph to emphasize 41.672 - a run of text. For example:</p> 41.673 - 41.674 - <div class="figure"> 41.675 - <p> 41.676 - <img alt="Example of emphasis in Japanese appearing above the text" 41.677 - class="example" src="text-emphasis-ja.gif" height="28" width="225"></p> 41.678 - <p class="caption">Accent emphasis (shown in blue for clarity) applied to Japanese text</p> 41.679 - </div> 41.680 - 41.681 -<h4 id="text-emphasis-style-property"> 41.682 -Emphasis Mark Style: the 'text-emphasis-style' property</h4> 41.683 - 41.684 - <table class="propdef"> 41.685 - <tr> 41.686 - <th>Name: 41.687 - <td><dfn>text-emphasis-style</dfn> 41.688 - <tr> 41.689 - <th><a href="#values">Value</a>: 41.690 - <td>none | 41.691 - [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | 41.692 - <a class="noxref" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string"><span class="value-inst-string"><string></span></a> 41.693 - 41.694 - <tr> 41.695 - <th>Initial: 41.696 - <td>none 41.697 - <tr> 41.698 - <th>Applies to: 41.699 - <td>all elements 41.700 - <tr> 41.701 - <th>Inherited: 41.702 - <td>yes 41.703 - <tr> 41.704 - <th>Percentages: 41.705 - <td>N/A 41.706 - <tr> 41.707 - <th>Media: 41.708 - <td>visual 41.709 - <tr> 41.710 - <th>Computed value: 41.711 - <td>'none', a pair of keywords representing the shape and fill, or 41.712 - a string 41.713 - </table> 41.714 - 41.715 - <p>This property applies emphasis marks to the element's text. 41.716 - Values have the following meanings:</p> 41.717 - 41.718 - <dl> 41.719 - <dt><dfn title="text-emphasis:none">''none''</dfn></dt> 41.720 - <dd>No emphasis marks.</dd> 41.721 - <dt><dfn title="text-emphasis:filled">''filled''</dfn></dt> 41.722 - <dd>The shape is filled with solid color.</dd> 41.723 - <dt><dfn title="text-emphasis:open">''open''</dfn></dt> 41.724 - <dd>The shape is hollow.</dd> 41.725 - <dt><dfn title="text-emphasis:dot">''dot''</dfn></dt> 41.726 - <dd>Display small circles as marks. 41.727 - The filled dot is U+2022 '•', and the open dot is U+25E6 '◦'.</dd> 41.728 - <dt><dfn title="text-emphasis:circle">''circle''</dfn></dt> 41.729 - <dd>Display large circles as marks. 41.730 - The filled circle is U+25CF '●', and the open circle is U+25CB '○'.</dd> 41.731 - <dt><dfn title="text-emphasis:double-circle">''double-circle''</dfn></dt> 41.732 - <dd>Display double circles as marks. 41.733 - The filled double-circle is U+25C9 '◉', and the open double-circle is U+25CE '◎'.</dd> 41.734 - <dt><dfn title="text-emphasis:triangle">''triangle''</dfn></dt> 41.735 - <dd>Display triangles as marks. 41.736 - The filled triangle is U+25B2 '▲', and the open triangle is U+25B3 '△'.</dd> 41.737 - <dt><dfn title="text-emphasis:sesame">''sesame''</dfn></dt> 41.738 - <dd>Display sesames as marks. 41.739 - The filled sesame is U+FE45 '﹅', and the open sesame is U+FE46 '﹆'.</dd> 41.740 - <dt><dfn title="text-emphasis:sesame">''<var><string></var>''</dfn></dt> 41.741 - <dd>Display the given string as marks. 41.742 - Authors should not specify more than one <i>character</i> in <string>. 41.743 - The UA may truncate or ignore strings consisting of more than one grapheme cluster.</dd> 41.744 - </dl> 41.745 - 41.746 - <p>If a shape keyword is specified but neither of ''filled'' nor ''open'' is 41.747 - specified, ''filled'' is assumed. If only ''filled'' or ''open'' is specified, 41.748 - the shape keyword computes to ''circle'' in horizontal writing mode and 41.749 - ''sesame'' in vertical writing mode.</p> 41.750 - 41.751 - <p>The marks should be drawn using the element's font settings with its 41.752 - size scaled down to 50%. However, not all fonts have all these glyphs, 41.753 - and some fonts use inappropriate sizes for emphasis marks in these 41.754 - code points. The UA may opt to use a font known to be good for 41.755 - emphasis marks, or the marks may instead be synthesized by the UA. 41.756 - Marks must remain upright in vertical writing modes: like CJK 41.757 - characters, they do not rotate to match the writing mode.</p> 41.758 - 41.759 - <p class="note"> 41.760 - One example of good fonts for emphasis marks is Adobe's opensource project, 41.761 - <a href="http://sourceforge.net/adobe/kenten-generic/">Kenten Generic OpenType Font</a>, 41.762 - which is specially designed for the emphasis marks. 41.763 - </p> 41.764 - 41.765 - <p>The marks are drawn once for each <i>character</i>. However, 41.766 - emphasis marks are not drawn for characters that are:</p> 41.767 - <ul> 41.768 - <li><a href="http://www.w3.org/TR/css3-text/#word-separator">Word separators</a> or that 41.769 - belong to the Unicode separator classes (Z*). 41.770 - (But note that emphasis marks <em>are</em> drawn for a space 41.771 - that combines with any combining characters.)</li> 41.772 - <li>Characters belonging to the Unicode classes for control codes 41.773 - and unassigned characters (Cc, Cf, Cn).</li> 41.774 - </ul> 41.775 - 41.776 - <p>If emphasis marks are drawn for characters 41.777 - for which ruby is drawn in the same position as the emphasis mark, 41.778 - the ruby should be stacked between the emphasis marks and the base text. 41.779 - In this case, the position of the emphasis marks for a given element 41.780 - should be determined as if all characters have ruby boxes 41.781 - of the same height as the highest ruby box in the element. 41.782 - If the UA is not capable of drawing ruby and emphasis marks on the same side, 41.783 - the UA may hide ruby and draw only emphasis marks.</p> 41.784 - <div class="figure"> 41.785 - <p><img 41.786 - alt="Example of emphasis marks applied to 4 characters, and ruby to 2 of them" 41.787 - src="text-emphasis-ruby.png" width="134" height="50"></p> 41.788 - <p class="caption">Emphasis marks applied to 4 characters, and ruby to 2 of them</p> 41.789 - </div> 41.790 - 41.791 - <p class="note">A future level of CSS may define controls to specify 41.792 - what to do when emphasis marks and ruby text coincide.</p> 41.793 - 41.794 -<h4 id="text-emphasis-color-property"> 41.795 -Emphasis Mark Color: the 'text-emphasis-color' property</h4> 41.796 - 41.797 - <table class="propdef"> 41.798 - <tr> 41.799 - <th>Name: 41.800 - <td><dfn>text-emphasis-color</dfn> 41.801 - <tr> 41.802 - <th><a href="#values">Value</a>: 41.803 - <td><color> 41.804 - <tr> 41.805 - <th>Initial: 41.806 - <td><a href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a> 41.807 - <tr> 41.808 - <th>Applies to: 41.809 - <td>all elements 41.810 - <tr> 41.811 - <th>Inherited: 41.812 - <td>yes 41.813 - <tr> 41.814 - <th>Percentages: 41.815 - <td>N/A 41.816 - <tr> 41.817 - <th>Media: 41.818 - <td>visual 41.819 - <tr> 41.820 - <th>Computed value: 41.821 - <td>as specified 41.822 - </table> 41.823 - 41.824 - <p>This property specifies the foreground color of the emphasis marks.</p> 41.825 - 41.826 - <p class="note"> 41.827 - The correct behavior of this property depends on an outstanding erratum on [[CSS3COLOR]] 41.828 - that has the ''currentColor'' keyword inherit as itself, 41.829 - and to take the value of the 'color' property as its <em>used</em> (not computed) value. 41.830 - 41.831 -<h4 id="text-emphasis-property"> 41.832 -Emphasis Mark Shorthand: the 'text-emphasis' property</h4> 41.833 - 41.834 - <table class="propdef"> 41.835 - <tr> 41.836 - <th>Name: 41.837 - <td><dfn>text-emphasis</dfn> 41.838 - <tr> 41.839 - <th><a href="#values">Value</a>: 41.840 - <td>'<<a href="#text-emphasis-style">text-emphasis-style</a>>' || '<<a href="#text-emphasis-color">text-emphasis-color</a>>' 41.841 - 41.842 - <tr> 41.843 - <th>Initial: 41.844 - <td>see individual properties 41.845 - <tr> 41.846 - <th>Applies to: 41.847 - <td>all elements 41.848 - <tr> 41.849 - <th>Inherited: 41.850 - <td>yes 41.851 - <tr> 41.852 - <th>Percentages: 41.853 - <td>N/A 41.854 - <tr> 41.855 - <th>Media: 41.856 - <td>visual 41.857 - <tr> 41.858 - <th>Computed value: 41.859 - <td>see individual properties 41.860 - </table> 41.861 - 41.862 - <p>This property is a shorthand for setting 41.863 - 'text-emphasis-style' and 'text-emphasis-color' 41.864 - in one declaration. 41.865 - Omitted values are set to their initial values.</p> 41.866 - 41.867 - <p class="note">Note that 'text-emphasis-position' is not reset in this 41.868 - shorthand. This is because typically the shape and color vary, but the 41.869 - position is consistent for a particular language throughout the document. 41.870 - Therefore the position should inherit independently.</p> 41.871 - 41.872 -<h4 id="text-emphasis-position-property"> 41.873 -Emphasis Mark Position: the 'text-emphasis-position' property</h4> 41.874 - 41.875 - <table class="propdef"> 41.876 - <tr> 41.877 - <th>Name: 41.878 - <td><dfn>text-emphasis-position</dfn> 41.879 - <tr> 41.880 - <th><a href="#values">Value</a>: 41.881 - <td>[ above | below ] && [ right | left ] 41.882 - 41.883 - <tr> 41.884 - <th>Initial: 41.885 - <td>above right 41.886 - <tr> 41.887 - <th>Applies to: 41.888 - <td>all elements 41.889 - <tr> 41.890 - <th>Inherited: 41.891 - <td>yes 41.892 - <tr> 41.893 - <th>Percentages: 41.894 - <td>N/A 41.895 - <tr> 41.896 - <th>Media: 41.897 - <td>visual 41.898 - <tr> 41.899 - <th>Computed value: 41.900 - <td>as specified 41.901 - </table> 41.902 - 41.903 - <p>This property describes where emphasis marks are drawn at. 41.904 - The values have following meanings:</p> 41.905 - 41.906 - <dl> 41.907 - <dt><dfn title="text-emphasis:above">''above''</dfn></dt> 41.908 - <dd>Draw marks over the text in horizontal writing mode.</dd> 41.909 - <dt><dfn title="text-emphasis:below">''below''</dfn></dt> 41.910 - <dd>Draw marks under the text in horizontal writing mode.</dd> 41.911 - <dt><dfn title="text-emphasis:right">''right''</dfn></dt> 41.912 - <dd>Draw marks to the right of the text in vertical writing mode.</dd> 41.913 - <dt><dfn title="text-emphasis:left">''left''</dfn></dt> 41.914 - <dd>Draw marks to the left of the text in vertical writing mode.</dd> 41.915 - </dl> 41.916 - 41.917 - <p class="issue"> 41.918 - Should ''above''/''below'' be ''over''/''under'' to match text decoration names? 41.919 - 41.920 - <p>Emphasis marks are drawn exactly as if each character was 41.921 - assigned the mark as its ruby annotation text with the ruby position 41.922 - given by 'text-emphasis-position' and the ruby alignment as centered. 41.923 - 41.924 - <p>The effect of emphasis marks on the line height is the same as for 41.925 - ruby text.</p> 41.926 - 41.927 - <div class="note"> 41.928 - <p>Note, the preferred position of emphasis marks depends on the 41.929 - language. In Japanese for example, the preferred position is 41.930 - ''above right''. In Chinese, on the other hand, the preferred 41.931 - position is ''below right''. 41.932 - The informative table below summarizes the preferred 41.933 - emphasis mark positions for Chinese and Japanese:</p> 41.934 - 41.935 - <table class="data"> 41.936 - <caption>Preferred emphasis mark and ruby position</caption> 41.937 - <thead> 41.938 - <tr> 41.939 - <th scope="col" rowspan=2>Language 41.940 - <th scope="col" colspan=2>Preferred mark position 41.941 - <th scope="col" colspan=2 rowspan=2>Illustration 41.942 - <tr> 41.943 - <th>Horizontal 41.944 - <th>Vertical 41.945 - </thead> 41.946 - <tbody> 41.947 - <tr> 41.948 - <td scope="row">Japanese 41.949 - <td>above 41.950 - <td>right 41.951 - <td> 41.952 - <img alt="Emphasis marks appear above each emphasized character in horizontal Japanese text." 41.953 - title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text" 41.954 - src="text-emphasis-ja.gif" height="28" width="225"> 41.955 - 41.956 - <td rowspan="2"> 41.957 - <img alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text." 41.958 - title="Emphasis applied on the right of a fragment of Japanese text" 41.959 - src="text-emphasis-v.gif" height="89" width="34"> 41.960 - 41.961 - <!-- 41.962 - <tr> 41.963 - <td scope="row">Mongolian 41.964 - <td><span class="issue">?</span> 41.965 - <td>right 41.966 - --> 41.967 - <tr> 41.968 - <td scope="row">Chinese 41.969 - <td>below 41.970 - <td>right 41.971 - <td> 41.972 - <img alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text." 41.973 - title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text" 41.974 - src="text-emphasis-zh.gif" height="28" width="133"> 41.975 - </tbody> 41.976 - </table> 41.977 - </div> 41.978 - 41.979 -<h3 id="text-shadow-property"> 41.980 -Text Shadows: the 'text-shadow' property</h3> 41.981 - 41.982 - <table class="propdef"> 41.983 - <tr> 41.984 - <th>Name: 41.985 - <td><dfn>text-shadow</dfn> 41.986 - <tr> 41.987 - <th><a href="#values">Value</a>: 41.988 - <td>none | [ <length>{2,3} && <color>? ]# 41.989 - <tr> 41.990 - <th>Initial: 41.991 - <td>none 41.992 - <tr> 41.993 - <th>Applies to: 41.994 - <td>all elements 41.995 - <tr> 41.996 - <th>Inherited: 41.997 - <td>yes 41.998 - <tr> 41.999 - <th>Percentages: 41.1000 - <td>N/A 41.1001 - <tr> 41.1002 - <th>Media: 41.1003 - <td>visual 41.1004 - <tr> 41.1005 - <th>Computed value: 41.1006 - <td>a color plus three absolute <length>s 41.1007 - </table> 41.1008 - 41.1009 - <p>This property accepts a comma-separated list of shadow effects to 41.1010 - be applied to the text of the element. Values are interpreted as for 41.1011 - <a href="http://www.w3.org/TR/css3-background/#the-box-shadow">'box-shadow'</a> 41.1012 - [[!CSS3BG]]. (But note that spread values are not allowed.) 41.1013 - The shadow is applied to all of the element's text as well as any 41.1014 - text decorations it specifies. 41.1015 - 41.1016 - <p>The shadow effects are applied front-to-back: the first shadow is on 41.1017 - top. The shadows may thus overlay each other, but they never overlay 41.1018 - the text itself. The shadow must be painted at a stack level between 41.1019 - the element's border and/or background, if present, and the elements 41.1020 - text and text decoration. UAs should avoid painting text shadows over 41.1021 - text in adjacent elements belonging to the same stack level and stacking 41.1022 - context. (This may mean that the exact stack level of the shadows depends 41.1023 - on whether the element has a border or background: the exact stacking 41.1024 - behavior of text shadows is thus UA-defined.)</p> 41.1025 - 41.1026 - <p>Unlike 'box-shadow', text shadows are not clipped to the shadowed 41.1027 - shape and may show through if the text is partially-transparent. 41.1028 - Like 'box-shadow', text shadows do not influence layout, and do not 41.1029 - trigger scrolling or increase the size of the scrollable area. 41.1030 - 41.1031 - <p class="note">The painting order of shadows defined here is the opposite 41.1032 - of that defined in the 1998 41.1033 - <a href="http://www.w3.org/TR/1998/REC-CSS2-19980512">CSS2 Recommendation</a>.</p> 41.1034 - 41.1035 - <p>The ''text-shadow'' property applies to both the 41.1036 - <code>::first-line</code> and <code>::first-letter</code> 41.1037 - pseudo-elements.</p> 41.1038 - 41.1039 -<h2 id="conformance"> 41.1040 -Conformance</h2> 41.1041 - 41.1042 -<h3 id="conventions"> 41.1043 -Document Conventions</h3> 41.1044 - 41.1045 - <p>Conformance requirements are expressed with a combination of 41.1046 - descriptive assertions and RFC 2119 terminology. The key words “MUST”, 41.1047 - “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, 41.1048 - “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this 41.1049 - document are to be interpreted as described in RFC 2119. 41.1050 - However, for readability, these words do not appear in all uppercase 41.1051 - letters in this specification. 41.1052 - 41.1053 - <p>All of the text of this specification is normative except sections 41.1054 - explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p> 41.1055 - 41.1056 - <p>Examples in this specification are introduced with the words “for example” 41.1057 - or are set apart from the normative text with <code>class="example"</code>, 41.1058 - like this: 41.1059 - 41.1060 - <div class="example"> 41.1061 - <p>This is an example of an informative example.</p> 41.1062 - </div> 41.1063 - 41.1064 - <p>Informative notes begin with the word “Note” and are set apart from the 41.1065 - normative text with <code>class="note"</code>, like this: 41.1066 - 41.1067 - <p class="note">Note, this is an informative note.</p> 41.1068 - 41.1069 -<h3 id="conformance-classes"> 41.1070 -Conformance Classes</h3> 41.1071 - 41.1072 - <p>Conformance to CSS Text Level 3 41.1073 - is defined for three conformance classes: 41.1074 - <dl> 41.1075 - <dt><dfn title="style sheet!!as conformance class">style sheet</dfn> 41.1076 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 41.1077 - style sheet</a>. 41.1078 - <dt><dfn>renderer</dfn></dt> 41.1079 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 41.1080 - that interprets the semantics of a style sheet and renders 41.1081 - documents that use them. 41.1082 - <dt><dfn id="authoring-tool">authoring tool</dfn></dt> 41.1083 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 41.1084 - that writes a style sheet. 41.1085 - </dl> 41.1086 - 41.1087 - <p>A style sheet is conformant to CSS Text Level 3 41.1088 - if all of its declarations that use properties defined in this module 41.1089 - have values that are valid according to the generic CSS grammar and the 41.1090 - individual grammars of each property as given in this module. 41.1091 - 41.1092 - <p>A renderer is conformant to CSS Text Level 3 41.1093 - if, in addition to interpreting the style sheet as defined by the 41.1094 - appropriate specifications, it supports all the features defined 41.1095 - by CSS Text Level 3 by parsing them correctly 41.1096 - and rendering the document accordingly. However, the inability of a 41.1097 - UA to correctly render a document due to limitations of the device 41.1098 - does not make the UA non-conformant. (For example, a UA is not 41.1099 - required to render color on a monochrome monitor.) 41.1100 - 41.1101 - <p>An authoring tool is conformant to CSS Text Level 3 41.1102 - if it writes style sheets that are syntactically correct according to the 41.1103 - generic CSS grammar and the individual grammars of each feature in 41.1104 - this module, and meet all other conformance requirements of style sheets 41.1105 - as described in this module. 41.1106 - 41.1107 -<h3 id="partial"> 41.1108 -Partial Implementations</h3> 41.1109 - 41.1110 - <p>So that authors can exploit the forward-compatible parsing rules to 41.1111 - assign fallback values, CSS renderers <strong>must</strong> 41.1112 - treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore 41.1113 - as appropriate</a>) any at-rules, properties, property values, keywords, 41.1114 - and other syntactic constructs for which they have no usable level of 41.1115 - support. In particular, user agents <strong>must not</strong> selectively 41.1116 - ignore unsupported component values and honor supported values in a single 41.1117 - multi-value property declaration: if any value is considered invalid 41.1118 - (as unsupported values must be), CSS requires that the entire declaration 41.1119 - be ignored.</p> 41.1120 - 41.1121 -<h3 id="experimental"> 41.1122 -Experimental Implementations</h3> 41.1123 - 41.1124 - <p>To avoid clashes with future CSS features, the CSS2.1 specification 41.1125 - reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 41.1126 - syntax</a> for proprietary and experimental extensions to CSS. 41.1127 - 41.1128 - <p>Prior to a specification reaching the Candidate Recommendation stage 41.1129 - in the W3C process, all implementations of a CSS feature are considered 41.1130 - experimental. The CSS Working Group recommends that implementations 41.1131 - use a vendor-prefixed syntax for such features, including those in 41.1132 - W3C Working Drafts. This avoids incompatibilities with future changes 41.1133 - in the draft. 41.1134 - </p> 41.1135 - 41.1136 -<h3 id="testing">Non-Experimental Implementations</h3> 41.1137 - 41.1138 - <p>Once a specification reaches the Candidate Recommendation stage, 41.1139 - non-experimental implementations are possible, and implementors should 41.1140 - release an unprefixed implementation of any CR-level feature they 41.1141 - can demonstrate to be correctly implemented according to spec. 41.1142 - 41.1143 - <p>To establish and maintain the interoperability of CSS across 41.1144 - implementations, the CSS Working Group requests that non-experimental 41.1145 - CSS renderers submit an implementation report (and, if necessary, the 41.1146 - testcases used for that implementation report) to the W3C before 41.1147 - releasing an unprefixed implementation of any CSS features. Testcases 41.1148 - submitted to W3C are subject to review and correction by the CSS 41.1149 - Working Group. 41.1150 - 41.1151 - <p>Further information on submitting testcases and implementation reports 41.1152 - can be found from on the CSS Working Group's website at 41.1153 - <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 41.1154 - Questions should be directed to the 41.1155 - <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> 41.1156 - mailing list. 41.1157 - 41.1158 -<h3 id="cr-exit-criteria"> 41.1159 -CR Exit Criteria</h3> 41.1160 - 41.1161 - <p> 41.1162 - For this specification to be advanced to Proposed Recommendation, 41.1163 - there must be at least two independent, interoperable implementations 41.1164 - of each feature. Each feature may be implemented by a different set of 41.1165 - products, there is no requirement that all features be implemented by 41.1166 - a single product. For the purposes of this criterion, we define the 41.1167 - following terms: 41.1168 - 41.1169 - <dl> 41.1170 - <dt>independent <dd>each implementation must be developed by a 41.1171 - different party and cannot share, reuse, or derive from code 41.1172 - used by another qualifying implementation. Sections of code that 41.1173 - have no bearing on the implementation of this specification are 41.1174 - exempt from this requirement. 41.1175 - 41.1176 - <dt>interoperable <dd>passing the respective test case(s) in the 41.1177 - official CSS test suite, or, if the implementation is not a Web 41.1178 - browser, an equivalent test. Every relevant test in the test 41.1179 - suite should have an equivalent test created if such a user 41.1180 - agent (UA) is to be used to claim interoperability. In addition 41.1181 - if such a UA is to be used to claim interoperability, then there 41.1182 - must one or more additional UAs which can also pass those 41.1183 - equivalent tests in the same way for the purpose of 41.1184 - interoperability. The equivalent tests must be made publicly 41.1185 - available for the purposes of peer review. 41.1186 - 41.1187 - <dt>implementation <dd>a user agent which: 41.1188 - 41.1189 - <ol class=inline> 41.1190 - <li>implements the specification. 41.1191 - 41.1192 - <li>is available to the general public. The implementation may 41.1193 - be a shipping product or other publicly available version 41.1194 - (i.e., beta version, preview release, or “nightly build”). 41.1195 - Non-shipping product releases must have implemented the 41.1196 - feature(s) for a period of at least one month in order to 41.1197 - demonstrate stability. 41.1198 - 41.1199 - <li>is not experimental (i.e., a version specifically designed 41.1200 - to pass the test suite and is not intended for normal usage 41.1201 - going forward). 41.1202 - </ol> 41.1203 - </dl> 41.1204 - 41.1205 - <p>The specification will remain Candidate Recommendation for at least 41.1206 - six months. 41.1207 - 41.1208 -<h2 class="no-num" id="acknowledgements"> 41.1209 - Appendix A: Acknowledgements</h2> 41.1210 - 41.1211 - <p>This specification would not have been possible without the help from: 41.1212 - Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett, 41.1213 - Martin Dürst, 41.1214 - Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye Gittelman, Ian 41.1215 - Hickson, Martin Heijdra, Richard Ishida, Masayasu Ishikawa, 41.1216 - Michael Jochimsen, Eric LeVine, Ambrose Li, Håkon Wium Lie, Chris Lilley, 41.1217 - Ken Lunde, Nat McCully, Shinyu Murakami, Paul Nelson, Chris Pratley, Marcin Sawicki, 41.1218 - Arnold Schrijver, Rahul Sonnad, Michel Suignard, Takao Suzuki, 41.1219 - Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi Yabe 41.1220 - and Steve Zilles.</p> 41.1221 - 41.1222 -<h2 class="no-num">Appendix B: References</h2> 41.1223 - 41.1224 -<h3 class="no-num" id="normative-ref">Normative references</h3> 41.1225 -<!--normative--> 41.1226 - 41.1227 -<h3 class="no-num" id="informative-ref">Informative references</h3> 41.1228 -<!--informative--> 41.1229 - 41.1230 -<h2 class="no-num" id="changes">Appendix C: 41.1231 -Changes</h2>
42.1 Binary file css3-text-decor/text-emphasis-ja.gif has changed
43.1 Binary file css3-text-decor/text-emphasis-ruby.png has changed
44.1 Binary file css3-text-decor/text-emphasis-v.gif has changed
45.1 Binary file css3-text-decor/text-emphasis-zh.gif has changed
46.1 Binary file css3-text-decor/underline-averaging.gif has changed
47.1 Binary file css3-text-decor/underline-example.png has changed
48.1 Binary file css3-text-decor/underline-position-alphabetic.png has changed
49.1 Binary file css3-text-decor/underline-position-below.png has changed
50.1 Binary file css3-text-decor/underline-position-left.png has changed
51.1 Binary file css3-text-decor/underline-position-right.png has changed
52.1 --- a/css3-text/Overview.html Mon Oct 22 00:33:44 2012 +0200 52.2 +++ b/css3-text/Overview.html Mon Oct 22 00:41:17 2012 +0200 52.3 @@ -1,21 +1,22 @@ 52.4 <!DOCTYPE html> 52.5 52.6 <html lang=en> 52.7 - <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ "> 52.8 + <head> 52.9 <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 52.10 <title>CSS Text Module Level 3 (CSS3 Text)</title> 52.11 - 52.12 - <link href="http://purl.org/dc/terms/" rel=schema.DC> 52.13 - <meta content="CSS Text Module Level 3 (CSS3 Text)" name=DC.title> 52.14 - <meta content=text name=DC.type> 52.15 - <meta content=2012-09-23 name=DC.issued> 52.16 - <meta content="Elika J. Etemad" name=DC.creator> 52.17 - <meta content="Koji Ishii" name=DC.creator> 52.18 - <meta content=W3C name=DC.publisher> 52.19 - <meta content="http://www.w3.org/TR/2012/WD-css3-text-20120923/" 52.20 - name=DC.identifier> 52.21 - <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 52.22 - rel=DC.rights> 52.23 + <!-- 52.24 + <link href="http://purl.org/dc/terms/" rel="schema.dcterms"> 52.25 + <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" rel="dcterms.rights"> 52.26 + --> 52.27 + 52.28 + <meta content="CSS Text Module Level 3 (CSS3 Text)" name=dcterms.title> 52.29 + <meta content=text name=dcterms.type> 52.30 + <meta content=2012-10-16 name=dcterms.issued> 52.31 + <meta content="Elika J. Etemad" name=dcterms.creator> 52.32 + <meta content="Koji Ishii" name=dcterms.creator> 52.33 + <meta content=W3C name=dcterms.publisher> 52.34 + <meta content="http://www.w3.org/TR/2012/WD-css3-text-20121016/" 52.35 + name=dcterms.identifier> 52.36 <link href="#contents" rel=contents> 52.37 <link href="#index" rel=index> 52.38 <link href="../default.css" rel=stylesheet type="text/css"> 52.39 @@ -46,8 +47,8 @@ 52.40 52.41 <h1>CSS Text Module Level 3</h1> 52.42 52.43 - <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 23 52.44 - September 2012</h2> 52.45 + <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 16 October 52.46 + 2012</h2> 52.47 52.48 <dl> 52.49 <dt>This version:</dt> 52.50 @@ -56,7 +57,7 @@ 52.51 --> 52.52 52.53 <dd><a 52.54 - href="http://www.w3.org/TR/2012/WD-css3-text-20120923/">http://www.w3.org/TR/2012/WD-css3-text-20120923/</a> 52.55 + href="http://www.w3.org/TR/2012/WD-css3-text-20121016/">http://www.w3.org/TR/2012/WD-css3-text-20121016/</a> 52.56 52.57 <dt>Latest version: 52.58 52.59 @@ -335,7 +336,7 @@ 52.60 CSS3 Text <abbr title="Working Draft">WD</abbr></a> 52.61 </ul> 52.62 52.63 - <li class=no-num><a href="#default-stylesheet">Appendix D: Default UA 52.64 + <li class=no-num><a href="#default-stylesheet"> Appendix D: Default UA 52.65 Stylesheet</a> 52.66 52.67 <li class=no-num><a href="#script-groups">Appendix E: Scripts and 52.68 @@ -596,10 +597,10 @@ 52.69 </div> 52.70 52.71 <p class=issue>CSS may introduce the ability to create custom mapping 52.72 - tables for less common text transforms, such as by an ‘<a 52.73 - href="#text-transform0"><code class=css>@text-transform</code></a>’ rule 52.74 - similar to ‘<code class=css>@counter-style</code>’ from <a 52.75 - href="#CSS3LIST" rel=biblioentry>[CSS3LIST]<!--{{CSS3LIST}}--></a>. <!-- 52.76 + tables for less common text transforms, such as by an ‘<code 52.77 + class=css>@text-transform</code>’ rule similar to ‘<code 52.78 + class=css>@counter-style</code>’ from <a href="#CSS3LIST" 52.79 + rel=biblioentry>[CSS3LIST]<!--{{CSS3LIST}}--></a>. <!-- 52.80 This mechanism may be used to replace ''full-size-kana''. This would 52.81 require authors needing this functionality to copy out the conversion 52.82 tables, however. 52.83 @@ -3133,7 +3134,8 @@ 52.84 class=css>allow-end</code>’ does not hang, because it fits without 52.85 hanging. However, if ‘<code class=css>force-end</code>’ is used, it 52.86 is forced to hang. The justification measures the line without the 52.87 - hanging punctuation. Therefore the line is expanded. 52.88 + hanging punctuation. Therefore when the line is expanded, the punctuation 52.89 + is pushed outside the line. 52.90 </div> 52.91 52.92 <h2 id=decoration><span class=secno>10. </span> <a 52.93 @@ -3539,35 +3541,15 @@ 52.94 <li> 52.95 </ul> 52.96 52.97 - <h2 class=no-num id=default-stylesheet>Appendix D: Default UA Stylesheet</h2> 52.98 + <h2 class=no-num id=default-stylesheet> Appendix D: Default UA Stylesheet</h2> 52.99 52.100 <p>This appendix is informative, and is to help UA developers to implement 52.101 default stylesheet, but UA developers are free to ignore or change. 52.102 52.103 <div class=example> 52.104 - <pre><code class=css> 52.105 + <pre> 52.106 <!-- -->/* make list items and option elements align together */ 52.107 -<!-- -->li, option { text-align: match-parent; } 52.108 -<!-- --> 52.109 -<!-- -->/* disable inheritance of text-emphasis marks to ruby text: 52.110 -<!-- --> emphasis marks should only apply to base text */ 52.111 -<!-- -->rt { text-emphasis: none; } 52.112 -<!-- --> 52.113 -<!-- -->:root:lang(zh), [lang|=zh] { 52.114 -<!-- -->/* default emphasis mark position is 'below right' for Chinese */ 52.115 -<!-- --> text-emphasis-position: below right; 52.116 -<!-- -->} 52.117 -<!-- --> 52.118 -<!-- -->:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { 52.119 -<!-- -->/* default underline position is 'below right' for Japanese and Korean */ 52.120 -<!-- --> text-underline-position: below right; 52.121 -<!-- -->} 52.122 -<!-- --> 52.123 -<!-- -->:root:lang(zh), [lang|=zh] { 52.124 -<!-- -->/* default underline position is 'below left' for Chinese */ 52.125 -<!-- --> text-underline-position: below left; 52.126 -<!-- -->} 52.127 -</code></pre> 52.128 +<!-- -->li, option { text-align: match-parent; }</pre> 52.129 </div> 52.130 52.131 <p class=issue>If you find any issues, recommendations to add, or
53.1 --- a/css3-text/Overview.src.html Mon Oct 22 00:33:44 2012 +0200 53.2 +++ b/css3-text/Overview.src.html Mon Oct 22 00:41:17 2012 +0200 53.3 @@ -2325,7 +2325,7 @@ 53.4 does not hang, because it fits without hanging. 53.5 However, if ''force-end'' is used, it is forced to hang. 53.6 The justification measures the line without the hanging punctuation. 53.7 - Therefore the line is expanded.</p> 53.8 + Therefore when the line is expanded, the punctuation is pushed outside the line.</p> 53.9 </div> 53.10 53.11 <h2 id="decoration"> 53.12 @@ -2555,35 +2555,16 @@ 53.13 <li> 53.14 </ul> 53.15 53.16 -<h2 class="no-num" id="default-stylesheet">Appendix D: Default UA Stylesheet</h2> 53.17 +<h2 class="no-num" id="default-stylesheet"> 53.18 +Appendix D: Default UA Stylesheet</h2> 53.19 53.20 <p>This appendix is informative, and is to help UA developers to implement 53.21 default stylesheet, but UA developers are free to ignore or change.</p> 53.22 53.23 <div class="example"> 53.24 - <pre><code class="css"> 53.25 + <pre> 53.26 <!-- -->/* make list items and option elements align together */ 53.27 -<!-- -->li, option { text-align: match-parent; } 53.28 -<!-- --> 53.29 -<!-- -->/* disable inheritance of text-emphasis marks to ruby text: 53.30 -<!-- --> emphasis marks should only apply to base text */ 53.31 -<!-- -->rt { text-emphasis: none; } 53.32 -<!-- --> 53.33 -<!-- -->:root:lang(zh), [lang|=zh] { 53.34 -<!-- -->/* default emphasis mark position is 'below right' for Chinese */ 53.35 -<!-- --> text-emphasis-position: below right; 53.36 -<!-- -->} 53.37 -<!-- --> 53.38 -<!-- -->:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { 53.39 -<!-- -->/* default underline position is 'below right' for Japanese and Korean */ 53.40 -<!-- --> text-underline-position: below right; 53.41 -<!-- -->} 53.42 -<!-- --> 53.43 -<!-- -->:root:lang(zh), [lang|=zh] { 53.44 -<!-- -->/* default underline position is 'below left' for Chinese */ 53.45 -<!-- --> text-underline-position: below left; 53.46 -<!-- -->} 53.47 -</code></pre> 53.48 +<!-- -->li, option { text-align: match-parent; }</pre> 53.49 </div> 53.50 <p class="issue">If you find any issues, recommendations to add, or corrections, 53.51 please send the information to <a href="mailto:www-style@w3.org">www-style@w3.org</a>
54.1 --- a/css3-transforms/ChangeLog Mon Oct 22 00:33:44 2012 +0200 54.2 +++ b/css3-transforms/ChangeLog Mon Oct 22 00:41:17 2012 +0200 54.3 @@ -1,3 +1,31 @@ 54.4 +2012-10-19 dschulze@adobe.com 54.5 + Fixed typo. 54.6 + 54.7 +2012-10-19 dschulze@adobe.com 54.8 + Computed value of 'background-attachment' and 'transform-style' is not affected under certain conditions. 54.9 + https://www.w3.org/Bugs/Public/show_bug.cgi?id=17521 54.10 + 54.11 +2012-10-19 dschulze@adobe.com 54.12 + Fixed typo. 54.13 + 54.14 +2012-10-19 dschulze@adobe.com 54.15 + Correction on transformable elements defintion. 54.16 + Remove all uses of 'In HTML namespace'. 54.17 + 54.18 +2012-10-19 dschulze@adobe.com 54.19 + Make sure that we have bug reports for every issue in the spec. 54.20 + 54.21 +2012-10-18 dschulze@adobe.com 54.22 + Remove 'mask' from the transformable elements. 54.23 + https://www.w3.org/Bugs/Public/show_bug.cgi?id=18484 54.24 + 54.25 +2012-10-18 dschulze@adobe.com 54.26 + Remove comments from spec and open bug reports instead. 54.27 + 54.28 +2012-10-18 dschulze@adobe.com 54.29 + Fix typo in pseudo code. 54.30 + https://www.w3.org/Bugs/Public/show_bug.cgi?id=18961 54.31 + 54.32 2012-08-29 dschulze@adobe.com 54.33 Added skew() again for compatibility with legacy content. 54.34
55.1 --- a/css3-transforms/Overview.html Mon Oct 22 00:33:44 2012 +0200 55.2 +++ b/css3-transforms/Overview.html Mon Oct 22 00:41:17 2012 +0200 55.3 @@ -7,16 +7,17 @@ 55.4 <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 55.5 <title>CSS Transforms</title> 55.6 55.7 - <link href="http://purl.org/dc/terms/" rel=schema.DC> 55.8 - <meta content="CSS Transforms" name=DC.title> 55.9 - <meta content=text name=DC.type> 55.10 - <meta content=2012-09-11 name=DC.issued> 55.11 - <meta content="http://dev.w3.org/csswg/css3-transforms/" name=DC.creator> 55.12 - <meta content=W3C name=DC.publisher> 55.13 - <meta content="http://www.w3.org/TR/2012/ED-css3-transforms-20120911/" 55.14 - name=DC.identifier> 55.15 + <link href="http://purl.org/dc/terms/" rel=schema.dcterms> 55.16 <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 55.17 - rel=DC.rights> 55.18 + rel=dcterms.rights> 55.19 + <meta content="CSS Transforms" name=dcterms.title> 55.20 + <meta content=text name=dcterms.type> 55.21 + <meta content=2012-10-19 name=dcterms.issued> 55.22 + <meta content="http://dev.w3.org/csswg/css3-transforms/" 55.23 + name=dcterms.creator> 55.24 + <meta content=W3C name=dcterms.publisher> 55.25 + <meta content="http://www.w3.org/TR/2012/ED-css3-transforms-20121019/" 55.26 + name=dcterms.identifier> 55.27 <link href="../default.css" rel=stylesheet type="text/css"> 55.28 <script defer=defer 55.29 src="http://test.csswg.org/harness/annotate.js#CSS3-TRANSFORMS_DEV" 55.30 @@ -49,15 +50,15 @@ 55.31 55.32 <h1>CSS Transforms</h1> 55.33 55.34 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 11 September 55.35 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 19 October 55.36 2012</h2> 55.37 55.38 <dl> 55.39 <dt>This version: 55.40 55.41 <dd> <a 55.42 - href="http://www.w3.org/TR/2012/ED-css3-transforms-20120911/">http://dev.w3.org/csswg/css3-transforms/</a> 55.43 - <!--http://www.w3.org/TR/2012/WD-css3-transforms-20120911/--> 55.44 + href="http://www.w3.org/TR/2012/ED-css3-transforms-20121019/">http://dev.w3.org/csswg/css3-transforms/</a> 55.45 + <!--http://www.w3.org/TR/2012/WD-css3-transforms-20121019/--> 55.46 55.47 <dt>Latest version: 55.48 55.49 @@ -428,8 +429,7 @@ 55.50 class=property><a 55.51 href="http://www.w3.org/TR/css3-background/#the-background-attachment">background-attachment</a></code></code>’ 55.52 property, which is specified in <a href="#CSS3BG" 55.53 - rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>.</p> 55.54 - <!-- Probably need more here. --> 55.55 + rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. 55.56 55.57 <h2 id=css-values><span class=secno>3. </span>CSS Values</h2> 55.58 55.59 @@ -465,23 +465,30 @@ 55.60 id=transformable-element>transformable element</dfn> 55.61 55.62 <dd> 55.63 - <p> A transformable element is an element in the HTML namespace which is 55.64 - either a <a 55.65 - href="http://www.w3.org/TR/CSS2/visuren.html#block-level">block-level</a> 55.66 - or <a href="http://www.w3.org/TR/CSS2/visuren.html#x13">atomic 55.67 - inline-level element</a>, or whose ‘<code 55.68 - class=property>display</code>’ property computes to ‘<code 55.69 - class=css>table-row</code>’, ‘<code 55.70 - class=css>table-row-group</code>’, ‘<code 55.71 - class=css>table-header-group</code>’, ‘<code 55.72 - class=css>table-footer-group</code>’, ‘<code 55.73 - class=css>table-cell</code>’, or ‘<code 55.74 - class=css>table-caption</code>’; or an element in the SVG namespace 55.75 - (see <a href="#SVG11" rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>) which 55.76 - has the attributes ‘<a href="#effects"><code 55.77 - class=property>transform</code></a>’, ‘<code 55.78 - class=property>patternTransform</code>’ or ‘<code 55.79 - class=property>gradientTransform</code>’. 55.80 + <p> A transformable element is an element in one of these categories: 55.81 + 55.82 + <ul> 55.83 + <li> an element whose layout is governed by the CSS box model which is 55.84 + either a <a 55.85 + href="http://www.w3.org/TR/CSS2/visuren.html#block-level">block-level</a> 55.86 + or <a href="http://www.w3.org/TR/CSS2/visuren.html#x13">atomic 55.87 + inline-level element</a>, or whose ‘<code 55.88 + class=property>display</code>’ property computes to ‘<code 55.89 + class=css>table-row</code>’, ‘<code 55.90 + class=css>table-row-group</code>’, ‘<code 55.91 + class=css>table-header-group</code>’, ‘<code 55.92 + class=css>table-footer-group</code>’, ‘<code 55.93 + class=css>table-cell</code>’, or ‘<code 55.94 + class=css>table-caption</code>’ <a href="#CSS21" 55.95 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 55.96 + 55.97 + <li> an element in the SVG namespace and not governed by the CSS box 55.98 + model which has the attributes ‘<a href="#effects"><code 55.99 + class=property>transform</code></a>’, ‘<code 55.100 + class=property>patternTransform</code>’ or ‘<code 55.101 + class=property>gradientTransform</code>’ <a href="#SVG11" 55.102 + rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a> 55.103 + </ul> 55.104 55.105 <dt id=TermLocalCoordinateSystem><dfn id=local-coordinate-system>local 55.106 coordinate system</dfn> 55.107 @@ -629,7 +636,8 @@ 55.108 55.109 <h2 id=transform-rendering><span class=secno>6. </span>The Transform 55.110 Rendering Model</h2> 55.111 - <!-- This section is normative --> 55.112 + 55.113 + <p><em>This section is normative.</em> 55.114 55.115 <p> Specifying a value other than ‘<code class=css>none</code>’ for the 55.116 ‘<a href="#effects"><code class=css>transform</code></a>’ property 55.117 @@ -743,26 +751,26 @@ 55.118 </div> 55.119 </div></pre> 55.120 </div> 55.121 - <!-- This "in the HTML namespace" is awkward. Is there a better way? --> 55.122 - 55.123 - <p> In the HTML namespace, the transform property does not affect the flow 55.124 - of the content surrounding the transformed element. However, the extent of 55.125 - the overflow area takes into account transformed elements. This behavior 55.126 - is similar to what happens when elements are offset via relative 55.127 - positioning. Therefore, if the value of the ‘<code 55.128 - class=property>overflow</code>’ property is ‘<code 55.129 + 55.130 + <p> For elements whose layout is governed by the CSS box model, the 55.131 + transform property does not affect the flow of the content surrounding the 55.132 + transformed element. However, the extent of the overflow area takes into 55.133 + account transformed elements. This behavior is similar to what happens 55.134 + when elements are offset via relative positioning. Therefore, if the value 55.135 + of the ‘<code class=property>overflow</code>’ property is ‘<code 55.136 class=css>scroll</code>’ or ‘<code class=css>auto</code>’, 55.137 scrollbars will appear as needed to see content that is transformed 55.138 outside the visible area. 55.139 55.140 - <p> In the HTML namespace, any value other than ‘<code 55.141 - class=css>none</code>’ for the transform results in the creation of both 55.142 - a stacking context and a containing block. The object acts as a containing 55.143 - block for fixed positioned descendants. 55.144 + <p> For elements whose layout is governed by the CSS box model, any value 55.145 + other than ‘<code class=css>none</code>’ for the transform results in 55.146 + the creation of both a stacking context and a containing block. The object 55.147 + acts as a containing block for fixed positioned descendants. 55.148 55.149 <p class=issue> Is this effect on position:fixed necessary? If so, need to 55.150 go into more detail here about why fixed positioned objects should do 55.151 - this, i.e., that it's much harder to implement otherwise. 55.152 + this, i.e., that it's much harder to implement otherwise. See <a 55.153 + href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16328">Bug 16328</a>. 55.154 55.155 <p> <a href="http://www.w3.org/TR/css3-background/#fixed0">Fixed 55.156 backgrounds</a> on the root element are affected by any transform 55.157 @@ -770,10 +778,9 @@ 55.158 transform (i.e. have a transform applied to them, or to any of their 55.159 ancestor elements), a value of ‘<code class=css>fixed</code>’ for the 55.160 ‘<code class=property>background-attachment</code>’ property is 55.161 - treated as if it had a value of ‘<code class=css>scroll</code>’. 55.162 - 55.163 - <p class=issue>Does this affect the computed style of 55.164 - background-attachment? 55.165 + treated as if it had a value of ‘<code class=css>scroll</code>’. The 55.166 + computed value of ‘<code class=property>background-attachment</code>’ 55.167 + is not affected. 55.168 55.169 <p class=note> If the root element is transformed, the transformation 55.170 applies to the entire canvas, including any background specified for the 55.171 @@ -789,8 +796,6 @@ 55.172 55.173 <h3 id=transform-3d-rendering><span class=secno>6.1. </span>3D Transform 55.174 Rendering</h3> 55.175 - <!-- Maybe define "tranform container" in the definitions, and use it everywhere 55.176 - in place of "containing block"? I'm not sure if "containing block" is exactly right. --> 55.177 55.178 <p> Normally, elements render as flat planes, and are rendered into the 55.179 same plane as their containing block. Often this is the plane shared by 55.180 @@ -810,7 +815,9 @@ 55.181 <div class=issue> 55.182 <p class=desc>This description does not exactly match what WebKit 55.183 implements. Perhaps it should be changed to match current 55.184 - implementations? 55.185 + implementations? See <a 55.186 + href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=19637">Bug 55.187 + 19637</a>. 55.188 </div> 55.189 55.190 <div class=example> 55.191 @@ -881,7 +888,7 @@ 55.192 55.193 <p id=perspective-matrix-computation> The <a 55.194 href="#TermPerspectiveMatrix"><i>perspective matrix</i></a> is computed as 55.195 - follows: <!-- Make this more mathy, with matrices? --> 55.196 + follows: 55.197 55.198 <ol> 55.199 <li>Start with the identity matrix. 55.200 @@ -960,7 +967,6 @@ 55.201 establishes the <a class=term href="#d-rendering-context">3D rendering 55.202 context</a> through each element that is a containing block for the given 55.203 element, as described below. 55.204 - <!-- More detail required, probably with matrices --> 55.205 55.206 <div class=example> 55.207 <pre> 55.208 @@ -1051,7 +1057,6 @@ 55.209 <li>apply to the accumulated matrix a translation equivalent to the 55.210 horizontal and vertical offset of the element relative to its 55.211 containing block as specified by the CSS visual formatting model. 55.212 - <!-- (tighten this!) --> 55.213 55.214 <li>multiply the accumulated matrix with the <a class=term 55.215 href="#transformation-matrix">transformation matrix</a>. 55.216 @@ -1264,9 +1269,8 @@ 55.217 sent very far away. The radial gradient is stretched over the whole box, 55.218 now enormous, so the part that's visible without scrolling should be the 55.219 color of the middle pixel: yellow. However, since the box is not actually 55.220 - infinite, the user can still scroll to the edges to see the blue parts.</p> 55.221 - <!-- TODO: Maybe we should specify that the whole thing is 55.222 - yellow here somehow? Doesn't seem worth it. --></div> 55.223 + infinite, the user can still scroll to the edges to see the blue parts. 55.224 + </div> 55.225 55.226 <div class=example> 55.227 <pre><style> 55.228 @@ -1530,13 +1534,11 @@ 55.229 ‘<code class=css>1</code>’. 55.230 55.231 <li>‘<code class=property>filter</code>’: any value other than 55.232 - ‘<code class=css>none</code>’.</li> 55.233 - <!-- Others? --> 55.234 + ‘<code class=css>none</code>’. 55.235 </ul> 55.236 55.237 - <div class=issue> 55.238 - <p class=desc>Should this affect the computed value of transform-style? 55.239 - </div> 55.240 + <p> The computed value of ‘<a href="#transform-style"><code 55.241 + class=property>transform-style</code></a>’ is not affected. 55.242 55.243 <p> The values of the ‘<a href="#effects"><code 55.244 class=property>transform</code></a>’ and ‘<a 55.245 @@ -1706,15 +1708,14 @@ 55.246 whether or not the "back" side of a transformed element is visible when 55.247 facing the viewer. With an identity transform, the front side of an 55.248 element faces the viewer. Applying a rotation about Y of 180 degrees (for 55.249 - instance) would cause the back side of the element to face the viewer.</p> 55.250 - <!-- This should not be in a normative section. --> 55.251 - 55.252 - <p> This property is useful when you place two elements back-to-back, as 55.253 - you would to create a playing card. Without this property, the front and 55.254 - back elements could switch places at times during an animation to flip the 55.255 - card. Another example is creating a box out of 6 elements, but where you 55.256 - want to see the inside faces of the box. This is useful when creating the 55.257 - backdrop for a 3 dimensional stage. 55.258 + instance) would cause the back side of the element to face the viewer. 55.259 + 55.260 + <p class=note> Note that this property is useful when you place two 55.261 + elements back-to-back, as you would to create a playing card. Without this 55.262 + property, the front and back elements could switch places at times during 55.263 + an animation to flip the card. Another example is creating a box out of 6 55.264 + elements, but where you want to see the inside faces of the box. This is 55.265 + useful when creating the backdrop for a 3 dimensional stage. 55.266 55.267 <table class=propdef> 55.268 <tbody> 55.269 @@ -2011,7 +2012,6 @@ 55.270 and ‘<a href="#backface-visibility"><code 55.271 class=property>backface-visibility</code></a>’ can not be used for the 55.272 elements: ‘<code class=property>clipPath</code>’, ‘<code 55.273 - class=property>mask</code>’, ‘<code 55.274 class=property>linearGradient</code>’, ‘<code 55.275 class=property>radialGradient</code>’ and ‘<code 55.276 class=property>pattern</code>’. If a transform list includes a 55.277 @@ -2036,8 +2036,7 @@ 55.278 55.279 <p> For the ‘<code class=property>pattern</code>’, ‘<code 55.280 class=property>linearGradient</code>’, ‘<code 55.281 - class=property>radialGradient</code>’, ‘<code 55.282 - class=property>mask</code>’ and ‘<code 55.283 + class=property>radialGradient</code>’ and ‘<code 55.284 class=property>clipPath</code>’ elements the ‘<a href="#effects"><code 55.285 class=property>transform</code></a>’, ‘<code 55.286 class=property>patternTransform</code>’, ‘<code 55.287 @@ -2052,7 +2051,8 @@ 55.288 viewport (the case for all other attributes on the mentioned attributes), 55.289 or should the be reletive the referencing objects bounding box (like it is 55.290 for all other transformable elements). The later choice seems to be more 55.291 - consistent within CSS Transforms. 55.292 + consistent within CSS Transforms. See <a 55.293 + href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=19638">Bug 19638</a>. 55.294 55.295 <p> In particualar the ‘<code class=property>patternUnit</code>’, 55.296 ‘<code class=property>gradientUnit</code>’ and ‘<code 55.297 @@ -2070,7 +2070,9 @@ 55.298 55.299 <div class=example> 55.300 <p class=issue> The result in the example below depends on the decision 55.301 - made on the previous issue. 55.302 + made on the previous issue. See <a 55.303 + href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=19638">Bug 55.304 + 19638</a>. 55.305 55.306 <p> The ‘<a href="#transform-origin"><code 55.307 class=property>transform-origin</code></a>’ property on the pattern in 55.308 @@ -2304,25 +2306,23 @@ 55.309 0)</code>’ (where <var>v</var> is a context dependent vector), ‘<code 55.310 class=css>rotateX(0)</code>’, ‘<code class=css>rotateY(0)</code>’, 55.311 ‘<code class=css>rotateZ(0)</code>’, ‘<code class=css>skew(0, 55.312 - 0)</code>’, skewX(0)‘<code class=css>, </code>’skewY(0)‘<code 55.313 - class=css>, </code>’matrix(0, 0, 0, 0, 0, 0)‘<code class=css>, 55.314 - </code>’matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0)‘<code 55.315 - class=css> and </code>’perspective(0)‘<code class=css>. </code> 55.316 + 0)</code>’, ‘<code class=css>skewX(0)</code>’, ‘<code 55.317 + class=css>skewY(0)</code>’, ‘<code class=css>matrix(0, 0, 0, 0, 0, 55.318 + 0)</code>’, ‘<code class=css>matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 55.319 + 0, 0, 0, 0, 0)</code>’ and ‘<code class=css>perspective(0)</code>’. 55.320 55.321 <p class=note> Animations to or from the neutral element of additions 55.322 - ’matrix'‘<code class=css>, </code>’‘<code 55.323 - class=css>matrix3d</code>’‘<code class=css> and </code>’‘<a 55.324 - href="#perspective"><code class=property>perspective</code></a>’‘<code 55.325 - class=css> fall back to discrete animations (See <a 55.326 - href="#matrix-interpolation">Interpolation of Matrices</a>). </code> 55.327 + ‘<code class=css>matrix</code>’, ‘<code class=css>matrix3d</code>’ 55.328 + and ‘<a href="#perspective"><code class=css>perspective</code></a>’ 55.329 + fall back to discrete animations (See <a 55.330 + href="#matrix-interpolation">Interpolation of Matrices</a>). 55.331 55.332 <div class=example> 55.333 <p> A <var>by</var> animation with a by value v<sub>b</sub> is equivalent 55.334 to the same animation with a values list with 2 values, the neutral 55.335 element for addition for the domain of the target attribute (denoted 0) 55.336 - and v<sub>b</sub>, and ’‘<code 55.337 - class=css>additive="sum"</code>’‘<code class=css>. <a href="#SMIL3" 55.338 - rel=biblioentry>[SMIL3]<!--{{SMIL3}}--></a> </code> 55.339 + and v<sub>b</sub>, and ‘<code class=css>additive="sum"</code>’. <a 55.340 + href="#SMIL3" rel=biblioentry>[SMIL3]<!--{{SMIL3}}--></a> 55.341 55.342 <pre> 55.343 <rect width="100" height="100"> 55.344 @@ -2331,18 +2331,16 @@ 55.345 </rect></pre> 55.346 55.347 <p> The neutral element for addition when performing a <var>by</var> 55.348 - animation with ’‘<code class=css>type="scale"</code>’‘<code 55.349 - class=css> is the value 0. Thus, performing the animation of the example 55.350 - above causes the rectangle to be invisible at time 0s (since the animated 55.351 - transform list value is </code>’‘<code 55.352 - class=css>scale(0)</code>’‘<code class=css>), and be scaled back to 55.353 - its original size at time 5s (since the animated transform list value is 55.354 - </code>’‘<code class=css>scale(1)</code>’‘<code class=css>). 55.355 - </code> 55.356 + animation with ‘<code class=css>type="scale"</code>’ is the value 0. 55.357 + Thus, performing the animation of the example above causes the rectangle 55.358 + to be invisible at time 0s (since the animated transform list value is 55.359 + ‘<code class=css>scale(0)</code>’), and be scaled back to its 55.360 + original size at time 5s (since the animated transform list value is 55.361 + ‘<code class=css>scale(1)</code>’). 55.362 </div> 55.363 55.364 - <h3 id=svg-attribute-name><span class=secno>14.3. </span> The SVG 55.365 - ’attributeName' attribute</h3> 55.366 + <h3 id=svg-attribute-name><span class=secno>14.3. </span> The SVG ‘<code 55.367 + class=property>attributeName</code>’ attribute</h3> 55.368 55.369 <p> <a href="http://www.w3.org/TR/SVG/animate.html">SVG 1.1 Animation</a> 55.370 defines the ‘<code class=css><a 55.371 @@ -3025,7 +3023,7 @@ 55.372 pdum3 = cross(row[1], row[2]) 55.373 if (dot(row[0], pdum3) < 0) 55.374 for (i = 0; i < 3; i++) 55.375 - scale[0] *= -1; 55.376 + scale[i] *= -1; 55.377 row[i][0] *= -1 55.378 row[i][1] *= -1 55.379 row[i][2] *= -1 55.380 @@ -3285,6 +3283,16 @@ 55.381 href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a> 55.382 </dd> 55.383 <!----> 55.384 + 55.385 + <dt id=SVG11>[SVG11] 55.386 + 55.387 + <dd>Erik Dahlström; et al. <a 55.388 + href="http://www.w3.org/TR/2011/REC-SVG11-20110816/"><cite>Scalable 55.389 + Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011. 55.390 + W3C Recommendation. URL: <a 55.391 + href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a> 55.392 + </dd> 55.393 + <!----> 55.394 </dl> 55.395 <!--end-normative--> 55.396 55.397 @@ -3305,16 +3313,6 @@ 55.398 href="http://www.w3.org/TR/2008/REC-SMIL3-20081201/">http://www.w3.org/TR/2008/REC-SMIL3-20081201/</a> 55.399 </dd> 55.400 <!----> 55.401 - 55.402 - <dt id=SVG11>[SVG11] 55.403 - 55.404 - <dd>Erik Dahlström; et al. <a 55.405 - href="http://www.w3.org/TR/2011/REC-SVG11-20110816/"><cite>Scalable 55.406 - Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011. 55.407 - W3C Recommendation. URL: <a 55.408 - href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a> 55.409 - </dd> 55.410 - <!----> 55.411 </dl> 55.412 <!--end-informative--> 55.413
56.1 --- a/css3-transforms/Transforms.src.html Mon Oct 22 00:33:44 2012 +0200 56.2 +++ b/css3-transforms/Transforms.src.html Mon Oct 22 00:41:17 2012 +0200 56.3 @@ -161,7 +161,6 @@ 56.4 '<code class="property"><a href="http://www.w3.org/TR/css3-background/#the-background-attachment">background-attachment</a></code>' property, 56.5 which is specified in [[!CSS3BG]]. 56.6 </p> 56.7 - <!-- Probably need more here. --> 56.8 56.9 <h2 id="css-values">CSS Values</h2> 56.10 56.11 @@ -190,22 +189,30 @@ 56.12 <dt id="TermTransformableElement"><dfn>transformable element</dfn></dt> 56.13 <dd> 56.14 <p> 56.15 - A transformable element is an element in the HTML namespace 56.16 - which is either a 56.17 - <a href="http://www.w3.org/TR/CSS2/visuren.html#block-level">block-level</a> 56.18 - or 56.19 - <a href="http://www.w3.org/TR/CSS2/visuren.html#x13">atomic inline-level element</a>, 56.20 - or whose 'display' property 56.21 - computes to ''table-row'', 56.22 - ''table-row-group'', 56.23 - ''table-header-group'', 56.24 - ''table-footer-group'', 56.25 - ''table-cell'', or 56.26 - ''table-caption''; or an element in the 56.27 - SVG namespace (see [[SVG11]]) which has the attributes 56.28 - 'transform', 'patternTransform' 56.29 - or 'gradientTransform'. 56.30 + A transformable element is an element in one of these 56.31 + categories: 56.32 </p> 56.33 + <ul> 56.34 + <li> 56.35 + an element whose 56.36 + layout is governed by the CSS box model which is either 56.37 + a 56.38 + <a href="http://www.w3.org/TR/CSS2/visuren.html#block-level">block-level</a> 56.39 + or 56.40 + <a href="http://www.w3.org/TR/CSS2/visuren.html#x13">atomic inline-level element</a>, 56.41 + or whose 'display' property 56.42 + computes to ''table-row'', 56.43 + ''table-row-group'', 56.44 + ''table-header-group'', 56.45 + ''table-footer-group'', 56.46 + ''table-cell'', or 56.47 + ''table-caption'' [[!CSS21]] 56.48 + </li> 56.49 + <li> 56.50 + an element in the SVG namespace and not governed by the CSS box model which has 56.51 + the attributes 'transform', 'patternTransform' or 'gradientTransform' [[!SVG11]] 56.52 + </li> 56.53 + </ul> 56.54 </dd> 56.55 56.56 <dt id="TermLocalCoordinateSystem"><dfn>local coordinate system</dfn></dt> 56.57 @@ -340,7 +347,7 @@ 56.58 <!-- ======================================================================================================= --> 56.59 56.60 <h2 id="transform-rendering">The Transform Rendering Model</h2> 56.61 - <!-- This section is normative --> 56.62 + <p><em>This section is normative.</em></p> 56.63 <p> 56.64 Specifying a value other than ''none'' for the ''transform'' property establishes a 56.65 new <span class="term">local coordinate system</span> at the element that it is 56.66 @@ -447,9 +454,9 @@ 56.67 </div></pre> 56.68 </div> 56.69 56.70 - <!-- This "in the HTML namespace" is awkward. Is there a better way? --> 56.71 <p> 56.72 - In the HTML namespace, the transform property does not affect the flow of the 56.73 + For elements whose layout is governed by the CSS box model, the transform property 56.74 + does not affect the flow of the 56.75 content surrounding the transformed element. However, the extent of the overflow 56.76 area takes into account transformed elements. This behavior is similar to what 56.77 happens when elements are offset via relative positioning. Therefore, if the value 56.78 @@ -457,22 +464,23 @@ 56.79 needed to see content that is transformed outside the visible area. 56.80 </p> 56.81 <p> 56.82 - In the HTML namespace, any value other than ''none'' for the transform results in 56.83 + For elements whose layout is governed by the CSS box model, any value other than 56.84 + ''none'' for the transform results in 56.85 the creation of both a stacking context and a containing block. The object acts as a 56.86 containing block for fixed positioned descendants. 56.87 </p> 56.88 <p class="issue"> 56.89 Is this effect on position:fixed necessary? If so, need to go into more detail here 56.90 about why fixed positioned objects should do this, i.e., that it's much harder to 56.91 - implement otherwise. 56.92 + implement otherwise. See <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16328">Bug 16328</a>. 56.93 </p> 56.94 <p> 56.95 <a href="http://www.w3.org/TR/css3-background/#fixed0">Fixed backgrounds</a> 56.96 on the root element are affected by any transform specified for that element. 56.97 For all other elements that are effected by a transform (i.e. have a transform 56.98 applied to them, or to any of their ancestor elements), a value of ''fixed'' for the 56.99 - 'background-attachment' property is treated as if it had a value of ''scroll''. 56.100 - <p class="issue">Does this affect the computed style of background-attachment?</p> 56.101 + 'background-attachment' property is treated as if it had a value of ''scroll''. The 56.102 + computed value of 'background-attachment' is not affected. 56.103 56.104 <p class="note"> 56.105 If the root element is transformed, the transformation applies 56.106 @@ -490,8 +498,6 @@ 56.107 56.108 <h3 id="transform-3d-rendering">3D Transform Rendering</h3> 56.109 56.110 - <!-- Maybe define "tranform container" in the definitions, and use it everywhere 56.111 - in place of "containing block"? I'm not sure if "containing block" is exactly right. --> 56.112 <p> 56.113 Normally, elements render as flat planes, and are rendered into the same plane 56.114 as their containing block. Often this is the plane shared by the rest of the page. 56.115 @@ -508,7 +514,8 @@ 56.116 </p> 56.117 <div class="issue"> 56.118 <p class="desc">This description does not exactly match what WebKit implements. Perhaps 56.119 - it should be changed to match current implementations?</p> 56.120 + it should be changed to match current implementations? See 56.121 + <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=19637">Bug 19637</a>.</p> 56.122 </div> 56.123 56.124 <div class="example"> 56.125 @@ -578,7 +585,6 @@ 56.126 56.127 <p id="perspective-matrix-computation"> 56.128 The <a href="#TermPerspectiveMatrix"><i>perspective matrix</i></a> is computed as follows: 56.129 - <!-- Make this more mathy, with matrices? --> 56.130 <ol> 56.131 <li>Start with the identity matrix.</li> 56.132 <li>Translate by the computed X and Y values of 'perspective-origin'</li> 56.133 @@ -638,7 +644,6 @@ 56.134 space is determined by accumulating the transformation matrices 56.135 up from the element that establishes the <span class="term">3D rendering context</span> 56.136 through each element that is a containing block for the given element, as described below. 56.137 - <!-- More detail required, probably with matrices --> 56.138 </p> 56.139 56.140 <div class="example"> 56.141 @@ -711,7 +716,7 @@ 56.142 on the element's containing block (if any). That containing block is not necessarily a member 56.143 of the 3D rendering context.</li> 56.144 <li>apply to the accumulated matrix a translation equivalent to the horizontal and vertical offset of the element relative to 56.145 - its containing block as specified by the CSS visual formatting model. <!-- (tighten this!) --></li> 56.146 + its containing block as specified by the CSS visual formatting model.</li> 56.147 <li>multiply the accumulated matrix with the <span class="term">transformation matrix</span>.</li> 56.148 </ol> 56.149 </li> 56.150 @@ -951,9 +956,6 @@ 56.151 not actually infinite, the user can still scroll to the edges 56.152 to see the blue parts. 56.153 </p> 56.154 - 56.155 - <!-- TODO: Maybe we should specify that the whole thing is 56.156 - yellow here somehow? Doesn't seem worth it. --> 56.157 </div> 56.158 56.159 <div class="example"> 56.160 @@ -1305,17 +1307,17 @@ 56.161 <p> 56.162 The following CSS property values require the user agent to create a flattened representation of 56.163 the descendant elements before they can be applied, and therefore override the behavior of 56.164 - ''transform-style: preserve-3d'': 56.165 - <ul> 56.166 - <li>'overflow': any value other than ''visible''.</li> 56.167 - <li>'opacity': any value other than ''1''.</li> 56.168 - <li>'filter': any value other than ''none''.</li> 56.169 - <!-- Others? --> 56.170 - </ul> 56.171 + ''transform-style: preserve-3d'':</p> 56.172 + <ul> 56.173 + <li>'overflow': any value other than ''visible''.</li> 56.174 + <li>'opacity': any value other than ''1''.</li> 56.175 + <li>'filter': any value other than ''none''.</li> 56.176 + </ul> 56.177 56.178 - <div class="issue"> 56.179 - <p class="desc">Should this affect the computed value of transform-style?</p> 56.180 - </div> 56.181 + <p> 56.182 + The computed value of 'transform-style' is not affected. 56.183 + </p> 56.184 + 56.185 <p> 56.186 The values of the 'transform' and 'transform-origin' properties are used to compute 56.187 the <span class="term">transformation matrix</span>, as described above. 56.188 @@ -1536,9 +1538,8 @@ 56.189 degrees (for instance) would cause the back side of the element to face 56.190 the viewer. 56.191 </p> 56.192 - <!-- This should not be in a normative section. --> 56.193 - <p> 56.194 - This property is useful when you place two elements back-to-back, as you 56.195 + <p class="note"> 56.196 + Note that this property is useful when you place two elements back-to-back, as you 56.197 would to create a playing card. Without this property, the front and 56.198 back elements could switch places at times during an animation to flip 56.199 the card. Another example is creating a box out of 6 elements, but where 56.200 @@ -1884,7 +1885,7 @@ 56.201 <p> 56.202 Three-dimensional transform functions and the properties 'perspective', 56.203 'perspective-origin', 'transform-style' and 'backface-visibility' can not be used 56.204 - for the elements: 'clipPath', 'mask', 'linearGradient', 'radialGradient' and 56.205 + for the elements: 'clipPath', 'linearGradient', 'radialGradient' and 56.206 'pattern'. If a transform list includes a three-dimensional transform function, the 56.207 complete transform list must be ignored. The values of every previously named 56.208 property must be ignored. <span class="term">Transformable elements</span> that are 56.209 @@ -1906,7 +1907,7 @@ 56.210 </h3> 56.211 56.212 <p> 56.213 - For the 'pattern', 'linearGradient', 'radialGradient', 'mask' and 'clipPath' 56.214 + For the 'pattern', 'linearGradient', 'radialGradient' and 'clipPath' 56.215 elements the 'transform', 'patternTransform', 'gradientTransform' presentation 56.216 attributes represents values in the current user coordinate system in place at the 56.217 time when these elements are referenced (i.e., the user coordinate system for the 56.218 @@ -1918,6 +1919,7 @@ 56.219 other attributes on the mentioned attributes), or should the be reletive the 56.220 referencing objects bounding box (like it is for all other transformable elements). 56.221 The later choice seems to be more consistent within CSS Transforms. 56.222 + See <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=19638">Bug 19638</a>. 56.223 </p> 56.224 56.225 <p> 56.226 @@ -1935,6 +1937,7 @@ 56.227 <div class="example"> 56.228 <p class="issue"> 56.229 The result in the example below depends on the decision made on the previous issue. 56.230 + See <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=19638">Bug 19638</a>. 56.231 </p> 56.232 56.233 <p> 56.234 @@ -2139,7 +2142,7 @@ 56.235 ''scaleX(0)'', ''scaleY(0)'', ''scaleZ(0)'', ''rotate(0)'', 56.236 ''rotate3d(v<sub>x</sub>, v<sub>y</sub>, v<sub>z</sub>, 0)'' (where <var>v</var> is 56.237 a context dependent vector), ''rotateX(0)'', ''rotateY(0)'', ''rotateZ(0)'', 56.238 - ''skew(0, 0)'', skewX(0)'', ''skewY(0)'', ''matrix(0, 0, 0, 0, 0, 0)'', ''matrix3d(0, 0, 0, 0, 0, 56.239 + ''skew(0, 0)'', ''skewX(0)'', ''skewY(0)'', ''matrix(0, 0, 0, 0, 0, 0)'', ''matrix3d(0, 0, 0, 0, 0, 56.240 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0)'' and ''perspective(0)''. 56.241 </p> 56.242 56.243 @@ -2896,7 +2899,7 @@ 56.244 pdum3 = cross(row[1], row[2]) 56.245 if (dot(row[0], pdum3) < 0) 56.246 for (i = 0; i < 3; i++) 56.247 - scale[0] *= -1; 56.248 + scale[i] *= -1; 56.249 row[i][0] *= -1 56.250 row[i][1] *= -1 56.251 row[i][2] *= -1
57.1 --- a/css3-values/Overview.html Mon Oct 22 00:33:44 2012 +0200 57.2 +++ b/css3-values/Overview.html Mon Oct 22 00:41:17 2012 +0200 57.3 @@ -2,10 +2,20 @@ 57.4 "http://www.w3.org/TR/html4/strict.dtd"> 57.5 57.6 <html lang=en> 57.7 - <head><meta content="text/html; charset=utf-8" http-equiv=Content-Type> 57.8 - 57.9 + <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ "> 57.10 + <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 57.11 <title>CSS Values and Units Module Level 3</title> 57.12 57.13 + <link href="http://purl.org/dc/terms/" rel=schema.dcterms> 57.14 + <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 57.15 + rel=dcterms.rights> 57.16 + <meta content="CSS Values and Units Module Level 3" name=dcterms.title> 57.17 + <meta content=text name=dcterms.type> 57.18 + <meta content=2012-10-16 name=dcterms.issued> 57.19 + <meta content="http://dev.w3.org/csswg/css3-values/" name=dcterms.creator> 57.20 + <meta content=W3C name=dcterms.publisher> 57.21 + <meta content="http://www.w3.org/TR/2012/ED-css3-values-20121016/" 57.22 + name=dcterms.identifier> 57.23 <style type="text/css"> 57.24 code, small { white-space: nowrap } 57.25 .say { color: gray; } 57.26 @@ -19,7 +29,7 @@ 57.27 </style> 57.28 <link href="../default.css" rel=stylesheet type="text/css"> 57.29 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet 57.30 - type="text/css"> 57.31 + type="text/css"> 57.32 57.33 <body> 57.34 <div class=head> <!--begin-logo--> 57.35 @@ -28,13 +38,14 @@ 57.36 57.37 <h1>CSS Values and Units Module Level 3</h1> 57.38 57.39 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 27 August 2012</h2> 57.40 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 16 October 57.41 + 2012</h2> 57.42 57.43 <dl> 57.44 <dt>This version: 57.45 57.46 <dd><a 57.47 - href="http://www.w3.org/TR/2012/ED-css3-values-20120827/">http://www.w3.org/TR/2012/ED-css3-values-20120827/</a> 57.48 + href="http://www.w3.org/TR/2012/ED-css3-values-20121016/">http://www.w3.org/TR/2012/ED-css3-values-20121016/</a> 57.49 57.50 <dt>Latest version: 57.51 57.52 @@ -45,7 +56,6 @@ 57.53 57.54 <dd><a 57.55 href="http://dev.w3.org/csswg/css3-values/">http://dev.w3.org/csswg/css3-values/</a> 57.56 - 57.57 57.58 <dt>Previous version: 57.59 57.60 @@ -56,7 +66,6 @@ 57.61 57.62 <dd><a 57.63 href="http://www.w3.org/Style/CSS/Tracker/products/33">http://www.w3.org/Style/CSS/Tracker/products/33</a> 57.64 - 57.65 57.66 <dt>Feedback: 57.67 57.68 @@ -230,7 +239,6 @@ 57.69 </span> Viewport-percentage lengths: the ‘<code 57.70 class=css>vw</code>’, ‘<code class=css>vh</code>’, ‘<code 57.71 class=css>vmin</code>’, ‘<code class=css>vmax</code>’ units</a> 57.72 - 57.73 </ul> 57.74 57.75 <li><a href="#absolute-lengths"><span class=secno>5.2. </span> Absolute 57.76 @@ -281,7 +289,6 @@ 57.77 Expressions: ‘<code class=css>calc()</code>’</a> 57.78 <ul class=toc> 57.79 <li><a href="#calc-syntax"><span class=secno>8.1.1. </span> Syntax</a> 57.80 - 57.81 57.82 <li><a href="#calc-type-checking"><span class=secno>8.1.2. </span> 57.83 Type Checking</a> 57.84 @@ -314,7 +321,6 @@ 57.85 <li class=no-num><a href="#conventions"> Document conventions</a> 57.86 57.87 <li class=no-num><a href="#conformance-classes"> Conformance classes</a> 57.88 - 57.89 57.90 <li class=no-num><a href="#partial"> Partial implementations</a> 57.91 57.92 @@ -351,7 +357,6 @@ 57.93 used) that can be used by many properties are described in this 57.94 specification, while more specific data types (e.g., 57.95 <var><spacing-limit></var>) are described in the corresponding modules. 57.96 - 57.97 57.98 <h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3> 57.99 57.100 @@ -611,11 +616,11 @@ 57.101 57.102 <div class=example> 57.103 <p>For example, here is the value definition for the ‘<code 57.104 - class=property>border-collapse</code>’ property:</p> 57.105 + class=property>border-collapse</code>’ property: 57.106 57.107 <pre>Value: collapse | separate</pre> 57.108 57.109 - <p>And here is an example of its use:</p> 57.110 + <p>And here is an example of its use: 57.111 57.112 <pre>table { border-collapse: separate }</pre> 57.113 </div> 57.114 @@ -669,7 +674,7 @@ 57.115 For instance, the following two selectors are exactly the same: 57.116 57.117 <div class=example> 57.118 - <p style="display:none">Example(s):</p> 57.119 + <p style="display:none">Example(s): 57.120 57.121 <pre> 57.122 <!-- -->a[title="a not s\ 57.123 @@ -720,8 +725,8 @@ 57.124 class=css>url(close%29parens)</code>’) as described in <a href="#URI" 57.125 rel=biblioentry>[URI]<!--{{URI}}--></a>. Alternatively a URL containing 57.126 such characters may be represented as a quoted <a 57.127 - href="#strings">string</a> within the ‘<a href="#url"><code 57.128 - class=css>url()</code></a>’ notation. 57.129 + href="#strings">string</a> within the ‘<code class=css>url()</code>’ 57.130 + notation. 57.131 57.132 <p>In order to create modular style sheets that are not dependent on the 57.133 absolute location of a resource, authors should use relative URIs. 57.134 @@ -741,7 +746,7 @@ 57.135 57.136 <pre>body { background: url("tile.png") }</pre> 57.137 57.138 - <p>is located in a style sheet designated by the URL:</p> 57.139 + <p>is located in a style sheet designated by the URL: 57.140 57.141 <pre>http://www.example.org/style/basic.css</pre> 57.142 57.143 @@ -768,7 +773,6 @@ 57.144 and the required rounding and clamping rules, 57.145 are given in <a href="#required-ranges">Appendix A</a>. 57.146 --> 57.147 - 57.148 57.149 <h3 id=integers><span class=secno>4.1. </span> Integers: the ‘<a 57.150 href="#integer-value"><code class=css><integer></code></a>’ type</h3> 57.151 @@ -940,7 +944,7 @@ 57.152 is used. 57.153 57.154 <div class=example> 57.155 - <p>The rule:</p> 57.156 + <p>The rule: 57.157 57.158 <pre>h1 { line-height: 1.2em }</pre> 57.159 57.160 @@ -952,7 +956,7 @@ 57.161 57.162 <p>means that the font size of <code>h1</code> elements will be 20% 57.163 greater than the computed font size inherited by <code>h1</code> 57.164 - elements.</p> 57.165 + elements. 57.166 </div> 57.167 57.168 <dt><dfn id=ex-unit title=ex>ex unit</dfn> 57.169 @@ -987,7 +991,7 @@ 57.170 <p>When specified on the ‘<code class=property>font-size</code>’ 57.171 property of the root element, the ‘<a href="#rem-unit"><code 57.172 class=css>rem</code></a>’ units refer to the property's <em>initial 57.173 - value</em>.</p> 57.174 + value</em>. 57.175 </dl> 57.176 57.177 <h4 id=viewport-relative-lengths><span class=secno>5.1.2. </span> 57.178 @@ -1147,7 +1151,6 @@ 57.179 57.180 <p class=caption>Showing that more device pixels (dots) are needed to 57.181 cover a 1px by 1px area on a high-resolution device than on a low-res one 57.182 - 57.183 </div> 57.184 57.185 <h2 id=other-units><span class=secno>6. </span> Other Units</h2> 57.186 @@ -1387,7 +1390,7 @@ 57.187 <div class=example> 57.188 <p>The following sets the ‘<code class=property>font-size</code>’ so 57.189 that exactly 40em fits within the viewport, ensuring that roughly the 57.190 - same amount of text always fills the screen no matter the screen size.</p> 57.191 + same amount of text always fills the screen no matter the screen size. 57.192 57.193 <pre> 57.194 :root { 57.195 @@ -1396,7 +1399,7 @@ 57.196 57.197 <p>If the rest of the design is specified using the ‘<a 57.198 href="#rem-unit"><code class=css>rem</code></a>’ unit, the entire 57.199 - layout will scale to match the viewport width.</p> 57.200 + layout will scale to match the viewport width. 57.201 </div> 57.202 57.203 <div class=example> 57.204 @@ -1436,7 +1439,7 @@ 57.205 calc : "calc(" S* sum S* ")"; 57.206 sum : product [ S+ [ "+" | "-" ] S+ product ]*; 57.207 product : unit [ S* [ "*" S* unit | "/" S* NUMBER ] ]*; 57.208 -attr : "attr(" S* wqname [ S+ type-keyword ]? S* [ "," [ unit | calc ] S* ]? ")"; 57.209 +attr : "attr(" S* qname [ S+ type-keyword ]? S* [ "," [ unit | calc ] S* ]? ")"; 57.210 unit : [ NUMBER | DIMENSION | PERCENTAGE | "(" S* sum S* ")" | calc | attr ];</pre> 57.211 57.212 <p class=note>Note that the grammar requires spaces around binary ‘<code 57.213 @@ -1561,7 +1564,6 @@ 57.214 This has notes on how we should handle things when calc() is extended to 57.215 handle unit mult/div. Related to this is <unit>mod<unit>, which can return 57.216 0 and thus introduce computed-time division-by-zero. --> 57.217 - 57.218 57.219 <p> Given the complexities of width and height calculations on table cells 57.220 and table elements, math expressions involving percentages for widths and 57.221 @@ -1596,7 +1598,6 @@ 57.222 <div class=example> 57.223 <p>The following example makes <code><em></code> elements italic in 57.224 general, but makes them normal if they're inside something that's italic: 57.225 - 57.226 57.227 <pre>em { font-style: toggle(italic, normal); }</pre> 57.228 </div> 57.229 @@ -1710,7 +1711,7 @@ 57.230 57.231 <p> where <attr-name> is a <a 57.232 href="http://dev.w3.org/csswg/css3-namespace/#css-qnames">CSS qualified 57.233 - name</a> (the wqname production in <a href="#CSS3NAMESPACE" 57.234 + name</a> (the qname production in <a href="#CSS3NAMESPACE" 57.235 rel=biblioentry>[CSS3NAMESPACE]<!--{{!CSS3NAMESPACE}}--></a>) that 57.236 represents an attribute name. (In the absence of namespacing, this will 57.237 just be a CSS identifier.) 57.238 @@ -1738,6 +1739,9 @@ 57.239 <li> the attr() expression's type is valid where the attr() expression is 57.240 placed, 57.241 57.242 + <li> if the attribute name is given with a namespace prefix, the prefix is 57.243 + defined 57.244 + 57.245 <li> the <var><fallback></var> is valid where the attr() expression is 57.246 placed, 57.247 57.248 @@ -1793,14 +1797,13 @@ 57.249 57.250 <dd> The attribute value will be parsed as the contents of a CSS <a 57.251 href="#string-value"><var><string></var></a>. It is interpreted as a 57.252 - quoted string within the ‘<a href="#url"><code 57.253 - class=css>url()</code></a>’ notation. The default is ‘<code 57.254 - class=css>about:invalid</code>’, which is a URI defined (<a 57.255 - href="#about-invalid">in Appendix A</a>) to point to a non-existent 57.256 - document with a generic error condition. Relative URLs must be made 57.257 - absolute according to the rules of the document language as applied to 57.258 - URLs originating from the element; they are not relative to the style 57.259 - sheet. 57.260 + quoted string within the ‘<code class=css>url()</code>’ notation. The 57.261 + default is ‘<code class=css>about:invalid</code>’, which is a URI 57.262 + defined (<a href="#about-invalid">in Appendix A</a>) to point to a 57.263 + non-existent document with a generic error condition. Relative URLs must 57.264 + be made absolute according to the rules of the document language as 57.265 + applied to URLs originating from the element; they are not relative to 57.266 + the style sheet. 57.267 57.268 <dt>‘<a href="#integer"><code class=css>integer</code></a>’ 57.269 57.270 @@ -1895,7 +1898,7 @@ 57.271 57.272 <div class=example> 57.273 <p>This example shows the use of attr() to visually illustrate data in an 57.274 - XML file:</p> 57.275 + XML file: 57.276 57.277 <pre> 57.278 <stock> 57.279 @@ -1936,7 +1939,7 @@ 57.280 <div class="illegal example"> 57.281 <p>All of the following examples are invalid and would cause a parse-time 57.282 error, and thus cause the relevant declaration—in this case all of 57.283 - them—to be ignored:</p> 57.284 + them—to be ignored: 57.285 57.286 <pre> 57.287 content: attr(title color); /* 'content' doesn't accept colors */ 57.288 @@ -2035,7 +2038,6 @@ 57.289 57.290 <p> The official record of this registration can be found at <a 57.291 href="http://www.iana.org/assignments/about-uri-tokens/about-uri-tokens.xml">http://www.iana.org/assignments/about-uri-tokens/about-uri-tokens.xml</a>. 57.292 - 57.293 57.294 <table class="data define"> 57.295 <tbody> 57.296 @@ -2093,7 +2095,7 @@ 57.297 <code>class="example"</code>, like this: 57.298 57.299 <div class=example> 57.300 - <p>This is an example of an informative example.</p> 57.301 + <p>This is an example of an informative example. 57.302 </div> 57.303 57.304 <p>Informative notes begin with the word “Note” and are set apart from 57.305 @@ -2243,34 +2245,17 @@ 57.306 <h2 class=no-num id=changes>Changes</h2> 57.307 57.308 <p>Changes since the <a 57.309 - href="http://www.w3.org/TR/2012/WD-css3-values-20120308/">8 March 2012 57.310 - Last Call Working Draft</a> include many clarifications as well as the 57.311 - following: 57.312 + href="http://www.w3.org/TR/2012/CR-css3-values-20120828/">28 August 57.313 + Candidate Recommendation</a> are: 57.314 57.315 <ul> 57.316 - <li>Renamed ‘<code class=css>cycle()</code>’ to ‘<a 57.317 - href="#toggle"><code class=css>toggle()</code></a>’. 57.318 - 57.319 - <li>‘<a href="#calc"><code class=css>calc()</code></a>’ can now accept 57.320 - and return <a href="#integer-value"><var><integer></var></a> types. 57.321 - 57.322 - <li>‘<a href="#calc"><code class=css>calc()</code></a>’ may now be 57.323 - nested (to simplify handling of macros and variables). 57.324 - 57.325 - <li>Tightened up the handling of fallback values in ‘<a 57.326 - href="#attr"><code class=css>attr()</code></a>’. 57.327 - 57.328 - <li>Clarified parsing rules used in ‘<a href="#attr"><code 57.329 - class=css>attr()</code></a>’. 57.330 - 57.331 - <li>Added ‘<a href="#vmax-unit"><code class=css>vmax</code></a>’ unit. 57.332 - 57.333 + <li>Corrected <code>wqname</code> in the ‘<a href="#attr"><code 57.334 + class=css>attr()</code></a>’ syntax to <code>qname</code> 57.335 + 57.336 + <li>Made undefined namespace prefixes in ‘<a href="#attr"><code 57.337 + class=css>attr()</code></a>’ invalidate the function. 57.338 </ul> 57.339 57.340 - <p>A <a 57.341 - href="http://dev.w3.org/csswg/css3-values/issues-lc-2012">disposition of 57.342 - last-call comments</a> is available. 57.343 - 57.344 <h2 class=no-num id=references>References</h2> 57.345 57.346 <h3 class=no-num id=normative-references>Normative references</h3> 57.347 @@ -2288,7 +2273,7 @@ 57.348 Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June 57.349 2011. W3C Recommendation. URL: <a 57.350 href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> 57.351 - </dd> 57.352 + </dd> 57.353 <!----> 57.354 57.355 <dt id=CSS3-IMAGES>[CSS3-IMAGES] 57.356 @@ -2298,7 +2283,7 @@ 57.357 Values and Replaced Content Module Level 3.</cite></a> 17 April 2012. W3C 57.358 Candidate Recommendation. (Work in progress.) URL: <a 57.359 href="http://www.w3.org/TR/2012/CR-css3-images-20120417/">http://www.w3.org/TR/2012/CR-css3-images-20120417/</a> 57.360 - </dd> 57.361 + </dd> 57.362 <!----> 57.363 57.364 <dt id=CSS3BG>[CSS3BG] 57.365 @@ -2308,7 +2293,7 @@ 57.366 Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C 57.367 Candidate Recommendation. (Work in progress.) URL: <a 57.368 href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a> 57.369 - </dd> 57.370 + </dd> 57.371 <!----> 57.372 57.373 <dt id=CSS3COLOR>[CSS3COLOR] 57.374 @@ -2317,7 +2302,7 @@ 57.375 href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color 57.376 Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a 57.377 href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a> 57.378 - </dd> 57.379 + </dd> 57.380 <!----> 57.381 57.382 <dt id=CSS3NAMESPACE>[CSS3NAMESPACE] 57.383 @@ -2327,7 +2312,7 @@ 57.384 Namespaces Module.</cite></a> 29 September 2011. W3C Recommendation. URL: 57.385 <a 57.386 href="http://www.w3.org/TR/2011/REC-css3-namespace-20110929/">http://www.w3.org/TR/2011/REC-css3-namespace-20110929/</a> 57.387 - </dd> 57.388 + </dd> 57.389 <!----> 57.390 57.391 <dt id=RFC2119>[RFC2119] 57.392 @@ -2336,7 +2321,7 @@ 57.393 words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet 57.394 RFC 2119. URL: <a 57.395 href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a> 57.396 - </dd> 57.397 + </dd> 57.398 <!----> 57.399 57.400 <dt id=URI>[URI] 57.401 @@ -2346,7 +2331,7 @@ 57.402 Identifiers (URI): generic syntax.</cite></a> January 2005. Internet RFC 57.403 3986. URL: <a 57.404 href="http://www.ietf.org/rfc/rfc3986.txt">http://www.ietf.org/rfc/rfc3986.txt</a> 57.405 - </dd> 57.406 + </dd> 57.407 <!----> 57.408 </dl> 57.409 <!--end-normative--> 57.410 @@ -2366,7 +2351,7 @@ 57.411 module: Cascading and inheritance.</cite></a> 15 December 2005. W3C 57.412 Working Draft. (Work in progress.) URL: <a 57.413 href="http://www.w3.org/TR/2005/WD-css3-cascade-20051215">http://www.w3.org/TR/2005/WD-css3-cascade-20051215</a> 57.414 - </dd> 57.415 + </dd> 57.416 <!----> 57.417 57.418 <dt id=MEDIAQ>[MEDIAQ] 57.419 @@ -2375,7 +2360,7 @@ 57.420 href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/"><cite>Media 57.421 Queries.</cite></a> 19 June 2012. W3C Recommendation. URL: <a 57.422 href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/">http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/</a> 57.423 - </dd> 57.424 + </dd> 57.425 <!----> 57.426 </dl> 57.427 <!--end-informative--> 57.428 @@ -2502,7 +2487,6 @@ 57.429 title="<time>"><strong>6.2.</strong></a> 57.430 57.431 <li>toggle(), <a href="#toggle" title="toggle()"><strong>8.2.</strong></a> 57.432 - 57.433 57.434 <li>turn, <a href="#turn" title=turn><strong>6.1.</strong></a> 57.435
58.1 --- a/css3-values/Overview.src.html Mon Oct 22 00:33:44 2012 +0200 58.2 +++ b/css3-values/Overview.src.html Mon Oct 22 00:41:17 2012 +0200 58.3 @@ -985,7 +985,7 @@ 58.4 calc : "calc(" S* sum S* ")"; 58.5 sum : product [ S+ [ "+" | "-" ] S+ product ]*; 58.6 product : unit [ S* [ "*" S* unit | "/" S* NUMBER ] ]*; 58.7 -attr : "attr(" S* wqname [ S+ type-keyword ]? S* [ "," [ unit | calc ] S* ]? ")"; 58.8 +attr : "attr(" S* qname [ S+ type-keyword ]? S* [ "," [ unit | calc ] S* ]? ")"; 58.9 unit : [ NUMBER | DIMENSION | PERCENTAGE | "(" S* sum S* ")" | calc | attr ];</pre> 58.10 58.11 <p class='note'>Note that the grammar requires spaces around binary ''+'' 58.12 @@ -1241,7 +1241,7 @@ 58.13 58.14 <p> 58.15 where <attr-name> is a <a href="http://dev.w3.org/csswg/css3-namespace/#css-qnames">CSS qualified name</a> 58.16 - (the wqname production in [[!CSS3NAMESPACE]]) 58.17 + (the qname production in [[!CSS3NAMESPACE]]) 58.18 that represents an attribute name. 58.19 (In the absence of namespacing, this will just be a CSS identifier.) 58.20 58.21 @@ -1269,6 +1269,9 @@ 58.22 the attr() expression's type is valid where the attr() expression is placed, 58.23 58.24 <li> 58.25 + if the attribute name is given with a namespace prefix, the prefix is defined 58.26 + 58.27 + <li> 58.28 the <var><fallback></var> is valid where the attr() expression is placed, 58.29 58.30 <li> 58.31 @@ -1735,19 +1738,12 @@ 58.32 58.33 <h2 class="no-num" id="changes">Changes</h2> 58.34 58.35 - <p>Changes since the <a href="http://www.w3.org/TR/2012/WD-css3-values-20120308/">8 March 2012 Last Call Working Draft</a> include 58.36 - many clarifications as well as the following: 58.37 + <p>Changes since the <a href="http://www.w3.org/TR/2012/CR-css3-values-20120828/">28 August Candidate Recommendation</a> are: 58.38 58.39 <ul> 58.40 - <li>Renamed ''cycle()'' to ''toggle()''. 58.41 - <li>''calc()'' can now accept and return <var><integer></var> types. 58.42 - <li>''calc()'' may now be nested (to simplify handling of macros and variables). 58.43 - <li>Tightened up the handling of fallback values in ''attr()''. 58.44 - <li>Clarified parsing rules used in ''attr()''. 58.45 - <li>Added ''vmax'' unit. 58.46 + <li>Corrected <code>wqname</code> in the ''attr()'' syntax to <code>qname</code> 58.47 + <li>Made undefined namespace prefixes in ''attr()'' invalidate the function. 58.48 </ul> 58.49 - 58.50 - <p>A <a href="http://dev.w3.org/csswg/css3-values/issues-lc-2012">disposition of last-call comments</a> is available. 58.51 58.52 <h2 class="no-num" id="references">References</h2> 58.53
59.1 --- a/css3-writing-modes/Overview.html Mon Oct 22 00:33:44 2012 +0200 59.2 +++ b/css3-writing-modes/Overview.html Mon Oct 22 00:41:17 2012 +0200 59.3 @@ -1,11 +1,22 @@ 59.4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 59.5 59.6 <html lang=en> 59.7 - <head><meta content="text/html; charset=utf-8" http-equiv=Content-Type> 59.8 - 59.9 + <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ "> 59.10 + <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 59.11 <title>CSS Writing Modes Module Level 3</title> 59.12 + 59.13 + <link href="http://purl.org/dc/terms/" rel=schema.dcterms> 59.14 + <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 59.15 + rel=dcterms.rights> 59.16 + <meta content="CSS Writing Modes Module Level 3" name=dcterms.title> 59.17 + <meta content=text name=dcterms.type> 59.18 + <meta content=2012-10-18 name=dcterms.issued> 59.19 + <meta content="Elika J. Etemad" name=dcterms.creator> 59.20 + <meta content="Koji Ishii" name=dcterms.creator> 59.21 + <meta content=W3C name=dcterms.publisher> 59.22 + <meta content="http://www.w3.org/TR/2012/ED-css3-writing-modes-20121018/" 59.23 + name=dcterms.identifier> 59.24 <link href="../default.css" rel=stylesheet type="text/css"> 59.25 - 59.26 <style type="text/css"> 59.27 object { vertical-align: middle; } 59.28 .sidebar { float: right; background: #eee; border: solid gray; margin: 1em; } 59.29 @@ -23,7 +34,7 @@ 59.30 } 59.31 </style> 59.32 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet 59.33 - type="text/css"> 59.34 + type="text/css"> 59.35 59.36 <body> 59.37 <div class=head> <!--begin-logo--> 59.38 @@ -32,7 +43,8 @@ 59.39 59.40 <h1>CSS Writing Modes Module Level 3</h1> 59.41 59.42 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 14 August 2012</h2> 59.43 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 18 October 59.44 + 2012</h2> 59.45 59.46 <dl> 59.47 <dt>This version: 59.48 @@ -40,9 +52,8 @@ 59.49 <dd><a 59.50 href="http://dev.w3.org/csswg/css3-writing-modes/">http://dev.w3.org/csswg/css3-writing-modes/</a> 59.51 <!-- 59.52 - <dd><a href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120814/">http://www.w3.org/TR/2012/ED-css3-writing-modes-20120814/</a> 59.53 + <dd><a href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121018/">http://www.w3.org/TR/2012/ED-css3-writing-modes-20121018/</a> 59.54 --> 59.55 - 59.56 59.57 <dt>Latest version: 59.58 59.59 @@ -63,7 +74,6 @@ 59.60 59.61 <dd><a 59.62 href="http://www.w3.org/Style/CSS/Tracker/products/30">http://www.w3.org/Style/CSS/Tracker/products/30</a> 59.63 - 59.64 59.65 <dt>Discussion: 59.66 59.67 @@ -241,7 +251,7 @@ 59.68 property</a> 59.69 <ul class=toc> 59.70 <li><a href="#vertical-orientations"><span class=secno>5.1.1. </span> 59.71 - Vertical Orientations</a> 59.72 + Mixed Vertical Orientations</a> 59.73 59.74 <li><a href="#vertical-font-features"><span class=secno>5.1.2. </span> 59.75 Vertical Typesetting and Font Features</a> 59.76 @@ -283,7 +293,7 @@ 59.77 Multi-column Layout in Orthogonal Flows</a> 59.78 59.79 <li><a href="#orthogonal-pagination"><span class=secno>7.3.3. </span> 59.80 - Paginating Orthogonal Flows</a> 59.81 + Fragmenting Orthogonal Flows</a> 59.82 </ul> 59.83 59.84 <li><a href="#logical-direction-layout"><span class=secno>7.4. </span> 59.85 @@ -353,18 +363,10 @@ 59.86 and Properties</a> 59.87 59.88 <li class=no-num><a href="#bidi-html"> Appendix B: Bidi Rules for HTML</a> 59.89 - 59.90 59.91 <li class=no-num><a href="#script-orientations">Appendix C: Vertical 59.92 Scripts in Unicode</a> 59.93 59.94 - <li class=no-num><a href="#intrinsic-sizing">Appendix D: Intrinsic 59.95 - Dimensions</a> 59.96 - <ul class=toc> 59.97 - <li class=no-num><a href="#multicol-intrinsic"> Intrinsic Sizes in 59.98 - Multi-column Layout</a> 59.99 - </ul> 59.100 - 59.101 <li class=no-num><a href="#references"> References</a> 59.102 <ul class=toc> 59.103 <li class=no-num><a href="#normative-references"> Normative 59.104 @@ -520,7 +522,7 @@ 59.105 alt="An example of bidirectional text is a Latin name in an Arabic sentence. The sentence overall is typeset right-to-left, but the letters in the Latin word in the middle are typeset left-to-right." 59.106 src="diagrams/bidi.png"> 59.107 59.108 - <p class=caption>Bidirectionality</p> 59.109 + <p class=caption>Bidirectionality 59.110 </div> 59.111 59.112 <p>The Unicode standard (<a 59.113 @@ -751,7 +753,6 @@ 59.114 59.115 <th colspan=3 scope=rowgroup><abbr 59.116 title="To surrounding contents, the element behaves as if its boundary were...">Outside</abbr> 59.117 - 59.118 59.119 <tr> 59.120 <th><abbr 59.121 @@ -766,7 +767,6 @@ 59.122 59.123 <th><abbr 59.124 title="the element's boundaries were strong characters of the element's 'direction'.">scoped</abbr> 59.125 - 59.126 59.127 <td>‘<a href="#embed"><code class=css>embed</code></a>’ 59.128 59.129 @@ -775,7 +775,6 @@ 59.130 <tr> 59.131 <th><abbr 59.132 title="all text consisted of strong characters of the element's 'direction'.">override</abbr> 59.133 - 59.134 59.135 <td>‘<a href="#bidi-override"><code 59.136 class=css>bidi-override</code></a>’ 59.137 @@ -978,7 +977,7 @@ 59.138 <div class=example> 59.139 <p>In this example, lowercase letters stand for inherently left-to-right 59.140 characters and uppercase letters represent inherently right-to-left 59.141 - characters. The text stream is shown in logical backing store order.</p> 59.142 + characters. The text stream is shown in logical backing store order. 59.143 59.144 <pre class=xml-example><code class=xml> 59.145 <HEBREW> 59.146 @@ -993,7 +992,7 @@ 59.147 </code></pre> 59.148 59.149 <p>Since this is arbitrary XML, the style sheet is responsible for setting 59.150 - the writing direction. This is the style sheet:</p> 59.151 + the writing direction. This is the style sheet: 59.152 59.153 <pre> 59.154 /* Rules for bidi */ 59.155 @@ -1011,17 +1010,17 @@ 59.156 first two PARs are read starting at the top right, the final three are 59.157 read starting at the top left. Please note that HEBREW and ENGLISH are 59.158 chosen as element names for explicitness only; in general, element names 59.159 - should convey structure without reference to language.</p> 59.160 + should convey structure without reference to language. 59.161 59.162 <p>The EMPH element is inline-level, and since its value for <a 59.163 class=propinst-unicode-bidi href="#unicode-bidi0">‘<code 59.164 class=property>unicode-bidi</code>’</a> is ‘<a href="#normal"><code 59.165 class=property>normal</code></a>’ (the initial value), it has no effect 59.166 on the ordering of the text. The HE-QUO element, on the other hand, 59.167 - creates an embedding.</p> 59.168 + creates an embedding. 59.169 59.170 <p>The formatting of this text might look like this if the line length is 59.171 - long:</p> 59.172 + long: 59.173 59.174 <pre class=ascii-art> 59.175 5WERBEH 4WERBEH english3 2WERBEH 1WERBEH 59.176 @@ -1036,9 +1035,9 @@ 59.177 </pre> 59.178 59.179 <p>Note that the HE-QUO embedding causes HEBREW18 to be to the right of 59.180 - english19.</p> 59.181 - 59.182 - <p>If lines have to be broken, it might be more like this:</p> 59.183 + english19. 59.184 + 59.185 + <p>If lines have to be broken, it might be more like this: 59.186 59.187 <pre class=ascii-art> 59.188 2WERBEH 1WERBEH 59.189 @@ -1064,7 +1063,7 @@ 59.190 not have worked. Note also that the first syllable from english19 might 59.191 have fit on the previous line, but hyphenation of left-to-right words in 59.192 a right-to-left context, and vice versa, is usually suppressed to avoid 59.193 - having to display a hyphen in the middle of a line.</p> 59.194 + having to display a hyphen in the middle of a line. 59.195 </div> 59.196 <!-- example --> 59.197 59.198 @@ -1136,10 +1135,10 @@ 59.199 <div class=figure> 59.200 <p><img 59.201 alt="A comparison of horizontal and vertical Japanese shows that although the lines rotate, the characters remain upright. Some glyphs, however change: a period mark shifts from the bottom left of its glyph box to the top right. Running headers, however, may remain laid out horizontally across the top of the page." 59.202 - src=vert-horiz-comparison.png></p> 59.203 + src=vert-horiz-comparison.png> 59.204 59.205 <p class=caption>Comparison of vertical and horizontal Japanese: iBunko 59.206 - application (iOS)</p> 59.207 + application (iOS) 59.208 </div> 59.209 59.210 <p class=note>For Chinese and Japanese lines are ordered either right to 59.211 @@ -1159,10 +1158,10 @@ 59.212 <div class=figure> 59.213 <p><img 59.214 alt="A dictionary definition for ヴィルス might write the English word 'virus' rotated 90° clockwise, but stack the letters of the initialisms 'RNA' and 'DNA' upright." 59.215 - src=vert-latin-layouts.png></p> 59.216 + src=vert-latin-layouts.png> 59.217 59.218 <p class=caption>Examples of Latin in vertical Japanese: Daijirin Viewer 59.219 - 1.4 (iOS)</p> 59.220 + 1.4 (iOS) 59.221 </div> 59.222 59.223 <p>In some special cases such as two-digit numbers in dates, text is fit 59.224 @@ -1171,9 +1170,9 @@ 59.225 <div class=figure id=fig-mac> 59.226 <p><img 59.227 alt="An excerpt from MacFan shows several possible vertical layouts for numbers: the two-digit month and day are written as horizontal-in-vertical blocks; the years are written with each character upright; except in the English phrase “for Mac 2011”, where the date is rotated to match the rotated Latin." 59.228 - src=vert-number-layouts.png></p> 59.229 - 59.230 - <p class=caption>Mac Fan, December 2010, p.49</p> 59.231 + src=vert-number-layouts.png> 59.232 + 59.233 + <p class=caption>Mac Fan, December 2010, p.49 59.234 </div> 59.235 59.236 <p>Layouts often involve a mixture of vertical and horizontal elements: 59.237 @@ -1181,9 +1180,9 @@ 59.238 <div class=figure> 59.239 <p><img 59.240 alt="Magazines often mix horizontal and vertical layout; for example, using one orientation for the main article text and a different one for sidebar or illustrative content." 59.241 - src=vert-horiz-combination.png></p> 59.242 - 59.243 - <p class=caption>Mixture of vertical and horizontal elements</p> 59.244 + src=vert-horiz-combination.png> 59.245 + 59.246 + <p class=caption>Mixture of vertical and horizontal elements 59.247 </div> 59.248 59.249 <p>Vertical text layouts also need to handle bidirectional text layout; 59.250 @@ -1320,29 +1319,29 @@ 59.251 59.252 <div class=example> 59.253 <p>In the following example, two block elements (1 and 3) separated by an 59.254 - image (2) are presented in various flow writing modes.</p> 59.255 + image (2) are presented in various flow writing modes. 59.256 59.257 <p>Here is a diagram of horizontal writing mode (<code>writing-mode: 59.258 - horizontal-tb</code>):</p> 59.259 + horizontal-tb</code>): 59.260 59.261 <p><img 59.262 alt="Diagram of horizontal layout: blocks 1, 2, and 3 are stacked top-to-bottom" 59.263 - height=300 src=horizontal.png width=219></p> 59.264 + height=300 src=horizontal.png width=219> 59.265 59.266 <p>Here is a diagram for the right-to-left vertical writing mode commonly 59.267 - used in East Asia (<code>writing-mode: vertical-rl</code>):</p> 59.268 + used in East Asia (<code>writing-mode: vertical-rl</code>): 59.269 59.270 <p><img 59.271 alt="Diagram of a right-to-left vertical layout: blocks 1, 2, and 3 are arranged side by side from right to left" 59.272 - height=191 src=vertical-rl.png width=297></p> 59.273 + height=191 src=vertical-rl.png width=297> 59.274 59.275 <p>And finally, here is a diagram for the left-to-right vertical writing 59.276 mode used for Manchu and Mongolian (<code>writing-mode: 59.277 - vertical-lr</code>):</p> 59.278 + vertical-lr</code>): 59.279 59.280 <p><img 59.281 alt="Diagram of left-to-right vertical layout: blocks 1, 2, and 3 are arranged side by side from left to right" 59.282 - height=191 src=vertical-lr.png width=300></p> 59.283 + height=191 src=vertical-lr.png width=300> 59.284 </div> 59.285 59.286 <div class=example> 59.287 @@ -1362,12 +1361,12 @@ 59.288 <!-- --> <option>français 59.289 <!-- --> <option>فارسی 59.290 <!-- --> <option>中文 59.291 -<!-- --> <option>日本语</select></label> 59.292 +<!-- --> <option>日本語</select></label> 59.293 <!-- --></form></pre> 59.294 59.295 <p><img 59.296 alt="Screenshot of vertical layout: the input element is laid lengthwise from top to bottom and its contents rendered in a vertical writing mode, matching the labels outside it. The drop-down selection control after it slides out to the side (towards the foot edge of the block) rather than downward as it would in horizontal writing modes." 59.297 - src=vertical-form.png></p> 59.298 + src=vertical-form.png> 59.299 </div> 59.300 59.301 <div class=example> 59.302 @@ -1387,7 +1386,7 @@ 59.303 alt="Diagram showing list markers of '1.', '2.', '3.' sitting upright atop sideways vertical Latin list item text." 59.304 class=example src=vertical-horizontal-list-markers.png> 59.305 59.306 - <p class=caption>Example of horizontal list markers in a vertical list</p> 59.307 + <p class=caption>Example of horizontal list markers in a vertical list 59.308 </div> 59.309 </div> 59.310 59.311 @@ -1445,10 +1444,11 @@ 59.312 <p>In SVG1.1, these values set the <dfn 59.313 id=inline-progression-direction>inline progression direction</dfn>, in 59.314 other words, the direction the current text position advances each time a 59.315 - glyph is added. This is a geometric process that happens <em>after</em> 59.316 - bidi reordering, and thus has no effect on the interpretation of the ‘<a 59.317 - href="#direction0"><code class=property>direction</code></a>’ property 59.318 - (which is independent of ‘<a href="#writing-mode1"><code 59.319 + glyph is added. This is a geometric process that happens <a 59.320 + href="#after"><em>after</em></a> bidi reordering, and thus has no effect 59.321 + on the interpretation of the ‘<a href="#direction0"><code 59.322 + class=property>direction</code></a>’ property (which is independent of 59.323 + ‘<a href="#writing-mode1"><code 59.324 class=property>writing-mode</code></a>’). (See <a 59.325 href="http://www.w3.org/TR/SVG/text.html#RelationshipWithBiDirectionality">Relationship 59.326 with bidirectionality</a>. <a href="#SVG11" 59.327 @@ -1488,9 +1488,9 @@ 59.328 <div class=figure> 59.329 <p><img 59.330 alt="Latin prefers the alphabetic baseline, on top of which most letters rest, though some have descenders that dangle below it. Indic scripts are sometimes typeset with a hanging baseline, since their glyph shapes appear to be hanging from a horizontal line. Han-based systems, whose glyphs are designed to fill a square, tend to align on their bottoms." 59.331 - src=script-preferred-baselines.gif></p> 59.332 - 59.333 - <p class=caption>Preferred baselines in various writing systems</p> 59.334 + src=script-preferred-baselines.gif> 59.335 + 59.336 + <p class=caption>Preferred baselines in various writing systems 59.337 </div> 59.338 59.339 <p>A well-constructed font contains a <dfn id=baseline-table>baseline 59.340 @@ -1499,13 +1499,13 @@ 59.341 with the font size.) 59.342 59.343 <div class=figure> 59.344 - <p><img alt="" src=baselines.gif></p> 59.345 + <p><img alt="" src=baselines.gif> 59.346 59.347 <p class=caption>In a well-designed mixed-script font, the glyphs are 59.348 positioned in the coordinate space to harmonize with one another when 59.349 typeset together. The baseline table is then constructed to match the 59.350 shape of the glyphs, each baseline positioned to match the glyphs from 59.351 - its preferred scripts.</p> 59.352 + its preferred scripts. 59.353 </div> 59.354 59.355 <p>The baseline table is a property of the font, and the positions of the 59.356 @@ -1872,7 +1872,6 @@ 59.357 href="#use-glyph-orientation"><code 59.358 class=css>use-glyph-orientation</code></a>’ behavior is the same as 59.359 for ‘<a href="#mixed-right"><code class=css>mixed-right</code></a>’. 59.360 - 59.361 59.362 <p class=note>This value is at-risk and may be dropped during CR. 59.363 </dl> 59.364 @@ -1908,7 +1907,7 @@ 59.365 <p class=caption>‘<a href="#text-orientation0"><code 59.366 class=property>text-orientation</code></a>’ values (‘<a 59.367 href="#writing-mode1"><code class=property>writing-mode</code></a>’ is 59.368 - ‘<a href="#vertical-rl"><code class=css>vertical-rl</code></a>’)</p> 59.369 + ‘<a href="#vertical-rl"><code class=css>vertical-rl</code></a>’) 59.370 </div> 59.371 59.372 <div class=example> 59.373 @@ -1933,82 +1932,90 @@ 59.374 alignment. Refer to <a href="#text-baselines">Text Baselines</a> for more 59.375 details. 59.376 59.377 - <h4 id=vertical-orientations><span class=secno>5.1.1. </span> Vertical 59.378 - Orientations</h4> 59.379 - 59.380 - <p><a href=vosimple.txt>This data file</a> defines two properties in UCD 59.381 - format <a href="#UAX44" rel=biblioentry>[UAX44]<!--{{!UAX44}}--></a>: 59.382 - 59.383 - <dl> 59.384 - <dt><dfn id=mvosimple>MVOsimple</dfn> 59.385 - 59.386 - <dd>This property defines character orientations for ‘<a 59.387 - href="#mixed-right"><code class=css>mixed-right</code></a>’. 59.388 - 59.389 - <dt><dfn id=svosimple>SVOsimple</dfn> 59.390 - 59.391 - <dd>This property defines character orientations for ‘<a 59.392 - href="#upright"><code class=css>upright</code></a>’. 59.393 - </dl> 59.394 - 59.395 - <p>The UA must render a <a href="#character"><i>character</i></a> upright 59.396 - if the value is ‘<code class=css>U</code>’, or sideways (90° 59.397 - clockwise from horizontal) if ‘<code class=css>R</code>’. 59.398 - 59.399 - <div class=note> ‘<a href="#mvosimple"><code 59.400 - class=property>MVOsimple</code></a>’ and ‘<a href="#svosimple"><code 59.401 - class=property>SVOsimple</code></a>’ derived properties are defined in 59.402 - terms of the corresponding Unicode porperty value, MVO and SVO 59.403 - respectively. If the orientation value is ‘<code class=css>R</code>’ 59.404 - then the simple value is ‘<code class=css>R</code>’. If the 59.405 - orientation value is ‘<code class=css>U</code>’, ‘<code 59.406 - class=css>T</code>’, ‘<code class=css>Tu</code>’, or ‘<code 59.407 - class=css>Tr</code>’ then the simple value is ‘<code 59.408 - class=css>U</code>’. The one exception is for scripts like Mongolian for 59.409 - which special handling is required for the stacked case due to the 59.410 - vertical-only nature of the underlying script. 59.411 - <p> Going forward, CSS Writing Modes will be tracking changes in <a 59.412 - href="#UTR50" rel=biblioentry>[UTR50]<!--{{UTR50}}--></a>, and thus 59.413 - converging with (rather than diverging from) Unicode. 59.414 - </div> 59.415 + <h4 id=vertical-orientations><span class=secno>5.1.1. </span> Mixed 59.416 + Vertical Orientations</h4> 59.417 + 59.418 + <p> <a href="#UTR50" rel=biblioentry>[UTR50]<!--{{!UTR50}}--></a> defines 59.419 + the "mixed vertical orientation" (MVO) property in UCD format <a 59.420 + href="#UAX44" rel=biblioentry>[UAX44]<!--{{!UAX44}}--></a>. When ‘<a 59.421 + href="#text-orientation0"><code 59.422 + class=property>text-orientation</code></a>’ is ‘<a 59.423 + href="#mixed-right"><code class=css>mixed-right</code></a>’, the UA must 59.424 + render a <a href="#character"><i>character</i></a> upright if the MVO 59.425 + value is ‘<code class=css>U</code>’, ‘<code class=css>T</code>’, 59.426 + ‘<code class=css>Tu</code>’, or ‘<code class=css>Tr</code>’, or 59.427 + else sideways (90° clockwise from horizontal) if ‘<code 59.428 + class=css>R</code>’. 59.429 + 59.430 + <p class=issue> As of the time of publication, Unicode has not yet 59.431 + officially updated its orientation data to account for the many errata 59.432 + that were accepted in June 2012. Therefore, the official UTR50 data 59.433 + (version 5) should not be used. (Instead, see <a 59.434 + href="http://www.unicode.org/reports/tr50/tr50-6.Orientation.txt">this 59.435 + draft of version 6</a>.) When Unicode publishes a proper update, this spec 59.436 + will update its references accordingly. 59.437 59.438 <h4 id=vertical-font-features><span class=secno>5.1.2. </span> Vertical 59.439 Typesetting and Font Features</h4> 59.440 59.441 - <p>When typesetting text in vertical writing modes: 59.442 - 59.443 - <ul> 59.444 - <li>Upright characters in ‘<a href="#mixed-right"><code 59.445 - class=css>mixed-right</code></a>’ and ‘<a href="#upright"><code 59.446 - class=css>upright</code></a>’ modes are typeset with vertical font 59.447 - metrics. The UA must synthesize vertical font metrics for fonts that lack 59.448 - them. (This specification does not define heuristics for synthesizing 59.449 - such metrics.) Additionally, font features (such as alternate glyphs) 59.450 - intended for use in vertical typesetting must be used. (E.g. the OpenType 59.451 - ‘<code class=css>vert</code>’ feature must be enabled.) Furthermore, 59.452 + <p>When typesetting text in ‘<a href="#mixed-right"><code 59.453 + class=css>mixed-right</code></a>’ and ‘<a href="#upright"><code 59.454 + class=css>upright</code></a>’ orientations: 59.455 + 59.456 + <dl> 59.457 + <dt>upright characters 59.458 + 59.459 + <dd> Are typeset with vertical font metrics. The UA must synthesize 59.460 + vertical font metrics for fonts that lack them. (This specification does 59.461 + not define heuristics for synthesizing such metrics.) Additionally, font 59.462 + features (such as alternate glyphs) intended for use in vertical 59.463 + typesetting must be used. (E.g. the OpenType ‘<code 59.464 + class=css>vert</code>’ feature must be enabled.) Furthermore, 59.465 characters from horizontal cursive scripts (such as Arabic) are shaped in 59.466 their isolated forms when typeset upright. 59.467 - 59.468 - <li>Sideways characters in ‘<a href="#mixed-right"><code 59.469 - class=css>mixed-right</code></a>’ and ‘<a href="#upright"><code 59.470 - class=css>upright</code></a>’ modes are typeset with horizontal 59.471 - metrics, and vertical typesetting features are not used. However, if the 59.472 - font has features meant to be enabled for sideways text that is typeset 59.473 - in vertical lines (e.g. to adjust brush stroke angles or alignment), 59.474 - those features are used. 59.475 - <p class=issue>Propose ‘<code class=property>svrt</code>’ as an 59.476 - OpenType substitution feature that is applied to rotated horizontal text 59.477 - in vertical text runs, to handle these cases. 59.478 - 59.479 - <li>All text in ‘<a href="#sideways"><code 59.480 - class=css>sideways</code></a>’, ‘<a href="#sideways-right"><code 59.481 - class=css>sideways-right</code></a>’, and ‘<a 59.482 - href="#sideways-left"><code class=css>sideways-left</code></a>’ modes 59.483 - is typeset using horizontal font metrics and the normal set of features 59.484 - used for horizontal text runs. Vertical metrics, vertical glyph 59.485 - variations, and any other features meant for text typeset in vertical 59.486 - lines are <em>not</em> used. 59.487 - </ul> 59.488 + <p class=note> Note that in OpenType systems, <a 59.489 + href="#character"><i>characters</i></a> from the Mongolian and Phags-pa 59.490 + scripts must actually be rendered <a 59.491 + href="#typeset-sideways">sideways</a>. This is because the "upright" 59.492 + orientation in the Unicode code charts (which assume vertical 59.493 + typesetting) and the "upright" orientation of the glyphs of these 59.494 + scripts in most OpenType fonts (which assume horizontal typesetting) 59.495 + don't match. 59.496 + 59.497 + <p class=note>Note that even when typeset "upright", some glyphs should 59.498 + appear rotated. For example, dashes and enclosing punctuation (such as 59.499 + 〈 LEFT ANGLE BRACKET U+3008) should be oriented relative to the inline 59.500 + axis. In OpenType, this is typically handled by glyph substitution, 59.501 + although not all fonts have alternate glyphs for all relevant 59.502 + codepoints. (East Asian fonts usually provide alternates for East Asian 59.503 + codepoints, but Western fonts typically lack any vertical typesetting 59.504 + features.) Unicode published draft data on which <a 59.505 + href="#character"><i>characters</i></a> should appear sideways as the 59.506 + SVO property in <a 59.507 + href="http://www.unicode.org/reports/tr50/tr50-6.Orientation.txt">this 59.508 + data file</a>; however, this property has been abandoned for future 59.509 + revisions of <a href="#UTR50" 59.510 + rel=biblioentry>[UTR50]<!--{{!UTR50}}--></a>. 59.511 + 59.512 + <dt id=typeset-sideways>sideways characters 59.513 + 59.514 + <dd> Are typeset with horizontal metrics, and vertical typesetting 59.515 + features are not used. However, if the font has features meant to be 59.516 + enabled for sideways text that is typeset in vertical lines (e.g. to 59.517 + adjust brush stroke angles or alignment), those features are used. 59.518 + <!--<p class="issue">Propose 'svrt' as an OpenType substitution feature 59.519 + that is applied to rotated horizontal text in vertical text runs, 59.520 + to handle these cases.--> 59.521 + </dl> 59.522 + 59.523 + <p> All text in ‘<a href="#sideways"><code 59.524 + class=css>sideways</code></a>’, ‘<a href="#sideways-right"><code 59.525 + class=css>sideways-right</code></a>’, and ‘<a 59.526 + href="#sideways-left"><code class=css>sideways-left</code></a>’ 59.527 + orientations is typeset using horizontal font metrics and the normal set 59.528 + of features used for horizontal text runs. Vertical metrics, vertical 59.529 + glyph variations, and any other features meant for text typeset in 59.530 + vertical lines are <em>not</em> used. 59.531 59.532 <p class=issue>This section needs additional work. Suggestions are welcome. 59.533 <!-- random notes 59.534 @@ -2028,7 +2035,6 @@ 59.535 get the right behavior in most cases. But as soon as you get to 13, you 59.536 have a problem. 59.537 --> 59.538 - 59.539 59.540 <h2 id=abstract-box><span class=secno>6. </span> Abstract Box Terminology</h2> 59.541 59.542 @@ -2104,13 +2110,13 @@ 59.543 <i>horizontal dimension</i> in horizontal writing modes, and the 59.544 <i>vertical dimension</i> in vertical writing modes. 59.545 59.546 - <dt><dfn id=inline-axis>inline-axis</dfn> 59.547 + <dt><dfn id=block-axis>block-axis</dfn> 59.548 59.549 <dd>The axis in the block dimension, i.e. the <i>vertical axis</i> in 59.550 horizontal writing modes and the <i>horizontal axis</i> in vertical 59.551 writing modes. 59.552 59.553 - <dt><dfn id=block-axis>block-axis</dfn> 59.554 + <dt><dfn id=inline-axis>inline-axis</dfn> 59.555 59.556 <dd>The axis in the inline dimension, i.e. the <i>horizontal axis</i> in 59.557 horizontal writing modes and the <i>vertical axis</i> in vertical writing 59.558 @@ -2151,7 +2157,7 @@ 59.559 follows: 59.560 59.561 <dl> 59.562 - <dt><dfn id=head>head</dfn> 59.563 + <dt><dfn id=head>head</dfn>/<dfn id=before>before</dfn> 59.564 59.565 <dd>Nominally the side that comes earlier in the block progression, as 59.566 determined by the ‘<a href="#writing-mode1"><code 59.567 @@ -2161,7 +2167,7 @@ 59.568 class=css>vertical-rl</code></a>’, and the left in ‘<a 59.569 href="#vertical-lr"><code class=css>vertical-lr</code></a>’. 59.570 59.571 - <dt><dfn id=foot>foot</dfn> 59.572 + <dt><dfn id=foot>foot</dfn>/<dfn id=after>after</dfn> 59.573 59.574 <dd>The side opposite <a href="#head"><i>head</i></a>. 59.575 59.576 @@ -2181,6 +2187,14 @@ 59.577 <dd>The side opposite <a href="#start"><i>start</i></a>. 59.578 </dl> 59.579 59.580 + <p class=issue> The naming of the block-axis logical directions is under 59.581 + discussion. The before/after set of names is used in XSL-FO, but is 59.582 + unfortunately somewhat confusing with DOM-relative directions (e.g. the 59.583 + ::before/::after pseudo-elements), and is not sufficiently distinct from 59.584 + start/end, which is used for the inline axis. Feedback is welcome, see <a 59.585 + href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0321.html">Koji's 59.586 + summary email</a>. 59.587 + 59.588 <p class=note>Note that while determining the <a 59.589 href="#head"><i>head</i></a> and <a href="#foot"><i>foot</i></a> sides of 59.590 a box depends only on the ‘<a href="#writing-mode1"><code 59.591 @@ -2193,7 +2207,7 @@ 59.592 class=property>text-orientation</code></a>’ properties. 59.593 59.594 <div class=example> 59.595 - <p>An English (LTR-TB) block:</p> 59.596 + <p>An English (LTR-TB) block: 59.597 59.598 <pre class=ascii-art> 59.599 <----- width / measure -----> 59.600 @@ -2213,7 +2227,7 @@ 59.601 </div> 59.602 59.603 <div class=example> 59.604 - <p>A vertical Japanese block (TTB-RL):</p> 59.605 + <p>A vertical Japanese block (TTB-RL): 59.606 59.607 <pre class=ascii-art> 59.608 <----- width / extent ------> 59.609 @@ -2300,14 +2314,14 @@ 59.610 <div class=figure> <a href="diagrams/line-orient-up.svg" 59.611 type="image/svg+xml"> <img alt="Line orientation compass" class=landscape 59.612 src="diagrams/line-orient-up.png"></a> 59.613 - <p class=caption>Line orientation compass</p> 59.614 + <p class=caption>Line orientation compass 59.615 </div> 59.616 59.617 <div class=figurepair> 59.618 <div class=figure> <a href="diagrams/line-orient-right.svg" 59.619 type="image/svg+xml"> <img alt="Typical orientation in vertical" 59.620 class=portrait src="diagrams/line-orient-right.png"></a> 59.621 - <p class=caption>Typical orientation in vertical</p> 59.622 + <p class=caption>Typical orientation in vertical 59.623 </div> 59.624 59.625 <div class=figure> <a href="diagrams/line-orient-left.svg" 59.626 @@ -2315,7 +2329,7 @@ 59.627 alt="Line orientation with ''text-orientation: sideways-left''" 59.628 class=portrait src="diagrams/line-orient-left.png"></a> 59.629 <p class=caption>Line orientation with ‘<code 59.630 - class=css>text-orientation: sideways-left</code>’</p> 59.631 + class=css>text-orientation: sideways-left</code>’ 59.632 </div> 59.633 </div> 59.634 59.635 @@ -2550,7 +2564,7 @@ 59.636 class=property>margin-left</code>’ property still affects the lefthand 59.637 margin, for example; however in a ‘<a href="#vertical-rl"><code 59.638 class=css>vertical-rl</code></a>’ writing mode it takes part in margin 59.639 - collapsing in place of ‘<code class=property>margin-bottom</code>’.</p> 59.640 + collapsing in place of ‘<code class=property>margin-bottom</code>’. 59.641 59.642 <li> 59.643 <p>Layout rules that depend on the ‘<a href="#direction0"><code 59.644 @@ -2583,7 +2597,7 @@ 59.645 class=example src="diagrams/vertical-table.png"></a> 59.646 59.647 <p class=caption>Table in ‘<a href="#vertical-rl"><code 59.648 - class=css>vertical-rl</code></a>’ RTL writing mode</p> 59.649 + class=css>vertical-rl</code></a>’ RTL writing mode 59.650 </div> 59.651 </div> 59.652 59.653 @@ -2678,102 +2692,143 @@ 59.654 and ‘<a href="#vertical-rl"><code class=css>vertical-rl</code></a>’). 59.655 </ul> 59.656 59.657 - <p>To handle the second case, CSS layout calculations are divided into two 59.658 - phases: sizing a box, and positioning the box within its flow. In the 59.659 - sizing phase—calculating the width and height of the box—the 59.660 - dimensions of the box and the containing block are mapped to the measure 59.661 - and extent and calculations performed accordingly using the writing mode 59.662 - of the element. In the positioning phase—calculating the positioning 59.663 - offsets, margins, borders, and padding—the dimensions of the box and its 59.664 - containing block are mapped to the measure and extent and calculations 59.665 - performed according to the writing mode of the containing block. 59.666 - 59.667 - <p>For example, if a vertical block is placed inside a horizontal block, 59.668 - then when calculating the physical height (which is the measure) of the 59.669 - child block the physical height of the parent block is used as the child's 59.670 - containing block measure, even though the physical height is the extent, 59.671 - not the measure, of the parent block. 59.672 - 59.673 - <p>Since auto margins are resolved consistent with the containing block's 59.674 - writing mode, a box establishing an orthogonal flow, can, once sized, be 59.675 - aligned or centered within its containing block just like other 59.676 - block-level elements by using auto margins. 59.677 - 59.678 - <p>It is common in CSS for a containing block to have a defined measure, 59.679 - but not a defined extent. This typically happens in CSS2.1 when a 59.680 + <p> When an element has a writing mode that is perpendicular to its 59.681 + containing block it is said to be in, or establish, an <dfn 59.682 + id=orthogonal-flow>orthogonal flow</dfn>. 59.683 + 59.684 + <p> To handle this case, CSS layout calculations are divided into two 59.685 + phases: sizing a box, and positioning the box within its flow. 59.686 + 59.687 + <ul> 59.688 + <li> In the sizing phase—calculating the width and height of the 59.689 + box—the dimensions of the box and the containing block are mapped to 59.690 + the measure and extent and calculations are performed accordingly using 59.691 + the writing mode of the <em>element</em>. 59.692 + 59.693 + <li> In the positioning phase—calculating the positioning offsets, 59.694 + margins, borders, and padding—the dimensions of the box and its 59.695 + containing block are mapped to the measure and extent and calculations 59.696 + are performed according to the writing mode of the <em>containing 59.697 + block</em>. 59.698 + </ul> 59.699 + 59.700 + <p>Since ‘<code class=css>auto</code>’ margins are resolved consistent 59.701 + with the containing block's writing mode, a box establishing an orthogonal 59.702 + flow can, once sized, be aligned or centered within its containing block 59.703 + just like other block-level elements by using auto margins. 59.704 + 59.705 + <div class=example> 59.706 + <p> For example, if a vertical block is placed inside a horizontal block, 59.707 + then when calculating the physical height (which is the measure) of the 59.708 + child block the physical height of the parent block is used as the 59.709 + child's containing block measure, even though the physical height is the 59.710 + extent, not the measure, of the parent block. 59.711 + 59.712 + <p> On the other hand, because the containing block is in a horizontal 59.713 + writing mode, the vertical margins on the child participate in 59.714 + margin-collapsing, even though they are in the inline-axis of the child, 59.715 + and horizontal auto margins will expand to fill the containing block, 59.716 + even though they are in the block-axis of the child. 59.717 + 59.718 + <p class=issue> Add a picture. 59.719 + </div> 59.720 + 59.721 + <p>It is common in CSS for a containing block to have a definite measure, 59.722 + but not a definite extent. This typically happens in CSS2.1 when a 59.723 containing block has an ‘<code class=css>auto</code>’ height, for 59.724 example: its width is given by the calculations in <a 59.725 href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">10.3.3</a>, but 59.726 - its extent depends on its contents. In such cases the <dfn 59.727 - id=available-measure>available measure</dfn> is defined as the measure of 59.728 - the containing block; but the <dfn id=available-extent>available 59.729 - extent</dfn>, which would otherwise be the extent of the containing block, 59.730 - is infinite. 59.731 - 59.732 - <p>Orthogonal flows allow the opposite to happen: for the <a 59.733 - href="#available-extent"><i>available extent</i></a> to be defined, but 59.734 - the <a href="#available-measure"><i>available measure</i></a> to be 59.735 + its extent depends on its contents. In such cases the <i>available 59.736 + measure</i> is defined as the measure of the containing block; but the 59.737 + <i>available extent</i>, which would otherwise be the extent of the 59.738 + containing block, is infinite. 59.739 + 59.740 + <p>Orthogonal flows allow the opposite to happen: for the <i>available 59.741 + extent</i> to be defined, but the <i>available measure</i> to be 59.742 indefinite. In such cases a percentage of the containing block measure 59.743 cannot be defined, and inline-axis computations cannot be resolved. In 59.744 these cases, the initial containing block's size is used as a 59.745 - <i>fallback</i> variable in place of the <a 59.746 - href="#available-measure"><i>available measure</i></a> for calculations 59.747 - that require a definite available measure. 59.748 + <i>fallback</i> variable in place of the <i>available measure</i> for 59.749 + calculations that require a definite <i>available measure</i>. 59.750 59.751 <h4 id=orthogonal-auto><span class=secno>7.3.1. </span> Auto-sizing in 59.752 Orthogonal Flows</h4> 59.753 59.754 - <p>If the computed measure of an element establishing an orthogonal flow is 59.755 - ‘<code class=css>auto</code>’, then the used measure is calculated as 59.756 - the <a href="#fit-content"><i>fit-content</i></a> (shrink-to-fit) size 59.757 - using a <a href="#fill-available"><i>fill-available</i></a> fit into the 59.758 - minimum of the <a href="#available-measure"><i>available measure</i></a> 59.759 - (when definite) and the <a href="#fallback-measure"><i>fallback available 59.760 - measure</i></a>. In other words, the calculation becomes <code>min(<a 59.761 - href="#max-content"><i>max-content</i></a>, max(<a 59.762 - href="#min-content"><i>min-content</i></a>, <a 59.763 - href="#fill-available"><i>fill-available</i></a>, <i>fill-<a 59.764 - href="#fallback-measure">fallback</a></i>))</code> (where <a 59.765 - href="#fill-available"><i>fill-available</i></a> is dropped when 59.766 - indefinite). 59.767 + <p> If the UA does not support CSS Multi-column Layout <a href="#CSS3COL" 59.768 + rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> and the element is a 59.769 + block container, when the computed measure of the element establishing an 59.770 + orthogonal flow is ‘<code class=css>auto</code>’, then the used inner 59.771 + measure is calculated as: 59.772 + 59.773 + <p> <code>min(<var>max-content</var>, max(<var>min-content</var>, 59.774 + min(<var>fill-available</var>, <var>fill-fallback</var>)))</code>, where: 59.775 + 59.776 + <dl> 59.777 + <dt><var>min-content</var> 59.778 + 59.779 + <dd>the <a 59.780 + href="http://www.w3.org/TR/css3-sizing/#min-content-measure">min-content 59.781 + measure</a> of the element 59.782 + 59.783 + <dt><var>max-content</var> 59.784 + 59.785 + <dd>the <a 59.786 + href="http://www.w3.org/TR/css3-sizing/#max-content-measure">max-content 59.787 + measure</a> of the element 59.788 + 59.789 + <dt><var>fill-available</var> 59.790 + 59.791 + <dd>the <a 59.792 + href="http://www.w3.org/TR/css3-sizing/#fill-available-fit">fill-available 59.793 + fit</a> into the element's containing block's size in the element's 59.794 + inline axis 59.795 + 59.796 + <dt><var>fill-fallback</var> 59.797 + 59.798 + <dd>the <a 59.799 + href="http://www.w3.org/TR/css3-sizing/#fill-available-fit">fill-available 59.800 + fit</a> into the initial containing block's size in the element's inline 59.801 + axis 59.802 + </dl> 59.803 + 59.804 + <p> See <a href="#CSS3-SIZING" 59.805 + rel=biblioentry>[CSS3-SIZING]<!--{{!CSS3-SIZING}}--></a> for further 59.806 + details. 59.807 59.808 <h4 id=orthogonal-multicol><span class=secno>7.3.2. </span> Multi-column 59.809 Layout in Orthogonal Flows</h4> 59.810 59.811 - <p>If the UA supports CSS Multi-column Layout <a href="#CSS3COL" 59.812 - rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a>, then for the case where 59.813 - the element's extent or available extent is defined but the element's 59.814 - measure is ‘<code class=css>auto</code>’: 59.815 + <p> If the UA supports CSS Multi-column Layout <a href="#CSS3COL" 59.816 + rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> and the element is a 59.817 + block container or multi-column element, for the case where the element's 59.818 + extent or available extent is <i>definite</i> but the element's measure is 59.819 + ‘<code class=css>auto</code>’: 59.820 59.821 <ol> 59.822 - <li>If ‘<code class=property>column-count</code>’ and ‘<code 59.823 + <li> If ‘<code class=property>column-count</code>’ and ‘<code 59.824 class=property>column-width</code>’ are both ‘<code 59.825 - class=css>auto</code>’, a used ‘<code 59.826 - class=property>column-width</code>’ is calculated for the element as 59.827 - the <a href="#fill-available-measure"><i>fill-available measure</i></a> 59.828 - using the minimum of the <a href="#available-measure"><i>available 59.829 - measure</i></a> (when definite) and the <a 59.830 - href="#fallback-measure"><i>fallback available measure</i></a> as the <a 59.831 - href="#available-measure"><i>available measure</i></a>. 59.832 - 59.833 - <li>If the columns' extent is not fixed, the <a 59.834 - href="#fill-available-extent"><i>fill-available extent</i></a> of the 59.835 - element is used. 59.836 - 59.837 - <li>The used column-count then follows from filling the resulting columns 59.838 - with the element's content. 59.839 + class=css>auto</code>’, calculate the used ‘<code 59.840 + class=property>column-width</code>’ as the inner measure for ‘<code 59.841 + class=css>auto</code>’-sized elements, as defined above. 59.842 + 59.843 + <li> If the columns' extent is <i>indefinite</i>, the <i>fill-available 59.844 + extent</i> of the element is used. 59.845 + 59.846 + <li> The used ‘<code class=property>column-count</code>’ then follows 59.847 + from filling the resulting columns with the element's content. 59.848 </ol> 59.849 59.850 - <p>The used measure of the resulting multi-column element is then 59.851 - calculated: if the content neither wraps nor paginates within the 59.852 - multi-column element, then the used measure is the <a 59.853 - href="#max-content-measure"><i>max-content measure</i></a> of the 59.854 - element's contents; else it is calculated from the used column width, 59.855 - column count, and column gap. 59.856 - 59.857 - <p>The used extent of the element is either the used column extent (if 59.858 - multiple columns were used) or the <a 59.859 - href="#max-content-extent"><i>max-content extent</i></a> of the content. 59.860 + <p> The used measure of the resulting multi-column element is then 59.861 + calculated: if the content neither line-wraps nor fragments within the 59.862 + multi-column element, then the used measure is the <i>max-content 59.863 + measure</i> of the element's contents; else it is calculated from the used 59.864 + ‘<code class=property>column-width</code>’, ‘<code 59.865 + class=property>column-count</code>’, and ‘<code 59.866 + class=property>column-gap</code>’. 59.867 + 59.868 + <p> The used extent of the element is either the used column extent (if 59.869 + multiple columns were used) or the <i>max-content extent</i> of the 59.870 + content. 59.871 59.872 <p class=note>This should behave the same as the auto-sizing algorithm 59.873 defined in the previous section, except overflowing content, instead of 59.874 @@ -2781,16 +2836,16 @@ 59.875 in the flow direction of the containing block, thus avoiding T-shaped 59.876 documents. 59.877 59.878 - <h4 id=orthogonal-pagination><span class=secno>7.3.3. </span> Paginating 59.879 + <h4 id=orthogonal-pagination><span class=secno>7.3.3. </span> Fragmenting 59.880 Orthogonal Flows</h4> 59.881 59.882 <p><em>This section is informative.</em> 59.883 59.884 - <p>With regards to pagination, the rules in CSS2.1 still hold in vertical 59.885 - writing modes and orthogonal flows: page break opportunities do not occur 59.886 - inside line boxes, only between them. UAs that support <a href="#CSS3COL" 59.887 - rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> may break in the 59.888 - (potentially zero-width) gap between columns, however. 59.889 + <p>With regards to fragmentation, the rules in CSS2.1 still hold in 59.890 + vertical writing modes and orthogonal flows: break opportunities do not 59.891 + occur inside line boxes, only between them. UAs that support <a 59.892 + href="#CSS3COL" rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> may break 59.893 + in the (potentially zero-width) gap between columns, however. 59.894 59.895 <p>Note that if content spills outside the pagination stream established by 59.896 the root element, the UA is not required to print such content. Authors 59.897 @@ -2901,7 +2956,6 @@ 59.898 the CSS Text Module defines this in more detail and provides additional 59.899 controls for controlling the position of underlines and overlines. <a 59.900 href="#CSS3TEXT" rel=biblioentry>[CSS3TEXT]<!--{{CSS3TEXT}}--></a></span> 59.901 - 59.902 </ul> 59.903 59.904 <h3 id=physical-only><span class=secno>7.6. </span> Purely Physical 59.905 @@ -3240,7 +3294,7 @@ 59.906 class=css>text-combine-horizontal</code></a>’ effect is often used to 59.907 display Latin-based strings such as components of a date or letters of an 59.908 initialism, always in a horizontal writing mode regardless of the writing 59.909 - mode of the line:</p> 59.910 + mode of the line: 59.911 59.912 <div class=figure> 59.913 <p><img 59.914 @@ -3248,16 +3302,16 @@ 59.915 class=example src=tate-chu-yoko.png> 59.916 59.917 <p class=caption>Example of horizontal-in-vertical <i 59.918 - lang=ja>tate-chu-yoko</i></p> 59.919 + lang=ja>tate-chu-yoko</i> 59.920 </div> 59.921 59.922 - <p>The figure is the result of the rules</p> 59.923 + <p>The figure is the result of the rules 59.924 59.925 <pre> 59.926 <!-- -->date { text-combine-horizontal: digits 2; } 59.927 </pre> 59.928 59.929 - <p>and the following markup:</p> 59.930 + <p>and the following markup: 59.931 59.932 <pre> 59.933 <!-- --><date>平成20年4月16日に</date> 59.934 @@ -3279,7 +3333,7 @@ 59.935 alt="Rendering of the above markup with 'text-combine-horizontal: digits': the first two digits of the number are rendered as tate-chu-yoko while the rest of the number is rendered sideways." 59.936 class=example src=bad-tate-chu-yoko.png> 59.937 59.938 - <p class=caption>Example of mis-applied <i lang=ja>tate-chu-yoko</i></p> 59.939 + <p class=caption>Example of mis-applied <i lang=ja>tate-chu-yoko</i> 59.940 </div> 59.941 </div> 59.942 59.943 @@ -3309,7 +3363,6 @@ 59.944 all Han-based scripts, so would have to appear in any usable ideographic 59.945 font; and its shape is very full in both dimensions, so it would be 59.946 unlikely to be shortened in a proportional font --> 59.947 - 59.948 59.949 <p>The automatic text combinations are determined before ‘<code 59.950 class=property>text-transform</code>’ is applied. Any CSS fullwidth 59.951 @@ -3425,7 +3478,6 @@ 59.952 59.953 <li>a three-character composition uses 1/3-em glyphs (if the font 59.954 supports this feature, else fall back to 1/2-em or proportional glyphs) 59.955 - 59.956 59.957 <li>etc. 59.958 </ul> 59.959 @@ -3467,8 +3519,9 @@ 59.960 59.961 <li>Added data tables for orientation of characters in Unicode. 59.962 59.963 - <li>Replaced <i>before</i> with <a href="#head"><i>head</i></a> and 59.964 - <i>after</i> with <a href="#foot"><i>foot</i></a>. 59.965 + <li>Replaced <a href="#before"><i>before</i></a> with <a 59.966 + href="#head"><i>head</i></a> and <a href="#after"><i>after</i></a> with 59.967 + <a href="#foot"><i>foot</i></a>. 59.968 </ul> 59.969 59.970 <h3 class=no-num id=changes-201109> Changes from the <a 59.971 @@ -3525,7 +3578,7 @@ 59.972 <code>class="example"</code>, like this: 59.973 59.974 <div class=example> 59.975 - <p>This is an example of an informative example.</p> 59.976 + <p>This is an example of an informative example. 59.977 </div> 59.978 59.979 <p>Informative notes begin with the word “Note” and are set apart from 59.980 @@ -3930,307 +3983,6 @@ 59.981 their vertical orientation. In horizontal text, they are typeset in a 90° 59.982 counter-clockwise rotation from this orientation. 59.983 59.984 - <h2 class=no-num id=intrinsic-sizing>Appendix D: Intrinsic Dimensions</h2> 59.985 - 59.986 - <p><em>This section is normative.</em> 59.987 - 59.988 - <p>CSS layout has several different concepts of automatic sizing that are 59.989 - used in various layout calculations. This section defines some more 59.990 - precise terminology to help connect the layout behaviors of this spec to 59.991 - the calculations used in other modules, and some new keywords for the 59.992 - width and height properties to allow authors to assign elements the 59.993 - dimensions resulting from these size calculations. 59.994 - 59.995 - <p>For the purposes of these definitions, a <dfn id=definite>definite</dfn> 59.996 - size is one that can be determined without measuring content, i.e. is a 59.997 - <var><length></var>, a size of the initial containing block, or a 59.998 - <var><percentage></var> that is resolved against a <a 59.999 - href="#definite"><i>definite</i></a> size. An <dfn 59.1000 - id=indefinite>indefinite</dfn> size is one that is not <a 59.1001 - href="#definite"><i>definite</i></a>. An <a 59.1002 - href="#indefinite"><i>indefinite</i></a> <i>available size</i> is 59.1003 - essentially infinite. 59.1004 - 59.1005 - <table class=propdef> 59.1006 - <tbody> 59.1007 - <tr> 59.1008 - <th>Properties: 59.1009 - 59.1010 - <td>‘<code class=property>width</code>’, ‘<code 59.1011 - class=property>min-width</code>’, ‘<code 59.1012 - class=property>max-width</code>’, ‘<code 59.1013 - class=property>height</code>’, ‘<code 59.1014 - class=property>min-height</code>’, ‘<code 59.1015 - class=property>max-height</code>’ 59.1016 - 59.1017 - <tr> 59.1018 - <th>New Values: 59.1019 - 59.1020 - <td>‘<a href="#min-content"><code class=css>min-content</code></a>’ 59.1021 - | ‘<a href="#max-content"><code class=css>max-content</code></a>’ | 59.1022 - ‘<a href="#fill-available"><code 59.1023 - class=css>fill-available</code></a>’ | ‘<a 59.1024 - href="#fit-content"><code class=css>fit-content</code></a>’ 59.1025 - 59.1026 - <tr> 59.1027 - <th>Initial: 59.1028 - 59.1029 - <td>as defined in <a href="#CSS21" 59.1030 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 59.1031 - 59.1032 - <tr> 59.1033 - <th>Applies to: 59.1034 - 59.1035 - <td>as defined in <a href="#CSS21" 59.1036 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 59.1037 - 59.1038 - <tr> 59.1039 - <th>Inherited: 59.1040 - 59.1041 - <td>as defined in <a href="#CSS21" 59.1042 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 59.1043 - 59.1044 - <tr> 59.1045 - <th>Percentages: 59.1046 - 59.1047 - <td>as defined in <a href="#CSS21" 59.1048 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 59.1049 - 59.1050 - <tr> 59.1051 - <th>Media: 59.1052 - 59.1053 - <td>as defined in <a href="#CSS21" 59.1054 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 59.1055 - 59.1056 - <tr> 59.1057 - <th>Computed value: 59.1058 - 59.1059 - <td>specified value if keyword specified, else as defined in <a 59.1060 - href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 59.1061 - </table> 59.1062 - 59.1063 - <p>There are four types of automatically-determined sizes in CSS (which are 59.1064 - represented in the width and height properties by the keywords defined 59.1065 - above): 59.1066 - <!-- XXX Make these anchors dated once CSS2.1 hits REC, since we might 59.1067 - decide to fix these gross editorial inconsistencies at some point in 59.1068 - the errata. --> 59.1069 - 59.1070 - 59.1071 - <dl> 59.1072 - <dt><dfn id=min-content>min-content</dfn> 59.1073 - 59.1074 - <dd>Called the <i>preferred minimum width</i> in <a 59.1075 - href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a> 59.1076 - and the <i>minimum content width</i> in <a 59.1077 - href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout">CSS2.1§17.5.2.2</a>, 59.1078 - the <dfn id=min-content-measure>min-content measure</dfn> is defined 59.1079 - roughly as the narrowest measure a box could take while fitting around 59.1080 - its contents if <em>all</em> line break opportunities within the box were 59.1081 - taken. 59.1082 - 59.1083 - <dt><dfn id=max-content>max-content</dfn> 59.1084 - 59.1085 - <dd>Called the <i>preferred width</i> in <a 59.1086 - href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a> 59.1087 - and the <i>maximum cell width</i> in <a 59.1088 - href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout">CSS2.1§17.5.2.2</a>, 59.1089 - the <dfn id=max-content-measure>max-content measure</dfn> is defined 59.1090 - roughly as the narrowest measure a box could take while fitting around 59.1091 - its contents if <em>none</em> of the optional line break opportunities 59.1092 - within the box were taken. 59.1093 - 59.1094 - <dt><dfn id=fill-available>fill-available</dfn> 59.1095 - 59.1096 - <dd>Called the <i>available width</i> in <a 59.1097 - href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a> 59.1098 - and computed by the rules in <a 59.1099 - href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1§10.3.3</a>, 59.1100 - the <dfn id=fill-available-measure>fill-available measure</dfn> is 59.1101 - calculated by subtracting out the element's margins, borders, and padding 59.1102 - from the <a href="#available-measure"><i>available measure</i></a> and 59.1103 - flooring the result at zero. If the available measure is infinite, then a 59.1104 - <dfn id=fallback-measure>fallback available measure</dfn> is used in 59.1105 - place of the <a href="#available-measure"><i>available measure</i></a> in 59.1106 - this calculation. Unless otherwise specified, this is the measure of the 59.1107 - initial containing block. The <dfn 59.1108 - id=fill-available-extent>fill-available extent</dfn> is similarly 59.1109 - calculated by using the corresponding values from the block dimension. 59.1110 - <p class=issue>There have been some suggestions on improving this 59.1111 - definition for extents, see <a 59.1112 - href="http://lists.w3.org/Archives/Public/www-style/2009Nov/0286.html">dbaron</a>‘<code 59.1113 - class=css>s message and <a 59.1114 - href="http://lists.w3.org/Archives/Public/www-style/2012Jun/0129.html">tab</a></code>’s 59.1115 - message. 59.1116 - 59.1117 - <dt><dfn id=fit-content>fit-content</dfn> 59.1118 - 59.1119 - <dd>Called the <i>shrink-to-fit</i> width in <a 59.1120 - href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a>, 59.1121 - and <a href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm">CSS 59.1122 - Multi-column Layout § 3.4</a>, the <dfn 59.1123 - id=fit-content-measure>fit-content measure</dfn> is defined as 59.1124 - <code>min(<a href="#max-content"><i>max-content</i></a>, max(<a 59.1125 - href="#min-content"><i>min-content</i></a>, <a 59.1126 - href="#fill-available"><i>fill-available</i></a>))</code> if the 59.1127 - available measure is finite, and as the <a 59.1128 - href="#max-content"><i>max-content</i></a> measure otherwise. The <dfn 59.1129 - id=fit-content-extent>fit-content extent</dfn> is calculated from the 59.1130 - same expression applied to the block dimension. 59.1131 - </dl> 59.1132 - 59.1133 - <p>For the layout models in CSS2.1, both the <dfn 59.1134 - id=min-content-extent>min-content extent</dfn> and <dfn 59.1135 - id=max-content-extent>max-content extent</dfn> of non-replaced elements 59.1136 - are defined as the content extent as defined (for horizontal writing 59.1137 - modes) in <a 59.1138 - href="http://www.w3.org/TR/CSS21/visudet.html#normal-block">CSS2.1§10.6.3</a> 59.1139 - and <a 59.1140 - href="http://www.w3.org/TR/CSS21/tables.html#height-layout">CSS2.1§17.5.3</a> 59.1141 - for elements with ‘<code class=css>height: auto</code>’. 59.1142 - 59.1143 - <p>For replaced elements, the <a href="#min-content"><i>min-content</i></a> 59.1144 - and <a href="#max-content"><i>max-content</i></a> sizes are equivalent and 59.1145 - correspond to the used size of the replaced element according to the 59.1146 - ‘<code class=css>auto</code>’ width and height calculations. 59.1147 - 59.1148 - <h3 class=no-num id=multicol-intrinsic> Intrinsic Sizes in Multi-column 59.1149 - Layout</h3> 59.1150 - 59.1151 - <p>The <a href="#min-content"><i>min-content</i></a> and <a 59.1152 - href="#max-content"><i>max-content</i></a> sizes of a multi-column element 59.1153 - are undefined per <a href="#CSS3COL" 59.1154 - rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a>. A future specification 59.1155 - may define them. <!-- Sketchbook area. See 59.1156 - http://lists.w3.org/Archives/Public/www-style/2011Apr/0316.html 59.1157 - http://lists.w3.org/Archives/Public/www-style/2011May/0468.html 59.1158 - 59.1159 -<h4 id="multicol-intrinsic-measures"> 59.1160 -Intrinsic Sizes for Multi-column Elements</h4> 59.1161 - 59.1162 - <p class="issue">This section is under discussion and may be removed</p> 59.1163 - 59.1164 - <dl> 59.1165 - <dt>min-content</dt> 59.1166 - <dd>The <i>min-content</i> measure of the multi-column element is 59.1167 - the <i>min-content</i> measure of the multi-column element's 59.1168 - contents. 59.1169 - <dt>max-content</dt> 59.1170 - </dl> 59.1171 - 59.1172 - <p>For multi-column elements laid out with infinite available measure (see 59.1173 - <a href="#orthogonal-multicol">Multi-column Layout in Orthogonal Flows</a>), 59.1174 - the <i>min-content</i> extent is the extent that would result 59.1175 - from taking every permissible pagination break as a column break, and the 59.1176 - <i>max-content</i> extent is the extent that would result from taking 59.1177 - only the forced breaks. For all other multi-column elements it is, like 59.1178 - CSS2.1 block-level boxes, the extent that would be calculated for an 59.1179 - ''auto'' extent per [[CSS3MULTICOL]]. 59.1180 - 59.1181 -NOTES FROM ROSSEN: 59.1182 - min-content measure is min(column-width, min-content) 59.1183 - max-content measure is 59.1184 - 1. Pass w/ colspans displ: none; 59.1185 - Get width 59.1186 - 2. Pass with colspans only in width 59.1187 - Get remaining height 59.1188 - 3. Pass w/ spans again using remaining height 59.1189 - Get width 59.1190 - 4. Layout in width as final 59.1191 - Will lay out perfectly without colspans; will have some slack but no 59.1192 - overflow when colspans present. 59.1193 - 59.1194 -<h4 id="multicol-intrinsic-columns"> 59.1195 -Intrinsic Sizes for Columns</h4> 59.1196 ---> 59.1197 - 59.1198 - 59.1199 - <table class=propdef> 59.1200 - <tbody> 59.1201 - <tr> 59.1202 - <th>Property: 59.1203 - 59.1204 - <td>‘<code class=property>column-width</code>’ 59.1205 - 59.1206 - <tr> 59.1207 - <th>New Values: 59.1208 - 59.1209 - <td>‘<a href="#min-content"><code class=css>min-content</code></a>’ 59.1210 - | ‘<a href="#max-content"><code class=css>max-content</code></a>’ | 59.1211 - ‘<a href="#fill-available"><code 59.1212 - class=css>fill-available</code></a>’ | ‘<a 59.1213 - href="#fit-content"><code class=css>fit-content</code></a>’ 59.1214 - 59.1215 - <tr> 59.1216 - <th>Initial: 59.1217 - 59.1218 - <td>as defined in <a href="#CSS3COL" 59.1219 - rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> 59.1220 - 59.1221 - <tr> 59.1222 - <th>Applies to: 59.1223 - 59.1224 - <td>as defined in <a href="#CSS3COL" 59.1225 - rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> 59.1226 - 59.1227 - <tr> 59.1228 - <th>Inherited: 59.1229 - 59.1230 - <td>as defined in <a href="#CSS3COL" 59.1231 - rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> 59.1232 - 59.1233 - <tr> 59.1234 - <th>Percentages: 59.1235 - 59.1236 - <td>as defined in <a href="#CSS3COL" 59.1237 - rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> 59.1238 - 59.1239 - <tr> 59.1240 - <th>Media: 59.1241 - 59.1242 - <td>as defined in <a href="#CSS3COL" 59.1243 - rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> 59.1244 - 59.1245 - <tr> 59.1246 - <th>Computed value: 59.1247 - 59.1248 - <td>specified value if keyword specified, else as defined in <a 59.1249 - href="#CSS3COL" rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> 59.1250 - </table> 59.1251 - 59.1252 - <p>When used as values for <a 59.1253 - href="http://www.w3.org/TR/css3-multicol/#cw">‘<code 59.1254 - class=property>column-width</code>’</a>, the new keywords specify the 59.1255 - optimal column width: 59.1256 - 59.1257 - <dl> 59.1258 - <dt>‘<a href="#min-content"><code class=css>min-content</code></a>’ 59.1259 - 59.1260 - <dd>Specifies the optimal column width as the <a 59.1261 - href="#min-content-measure"><i>min-content measure</i></a> of the 59.1262 - multi-column element's contents. 59.1263 - 59.1264 - <dt>‘<a href="#max-content"><code class=css>max-content</code></a>’ 59.1265 - 59.1266 - <dd>Specifies the optimal column width as the <a 59.1267 - href="#max-content-measure"><i>max-content measure</i></a> of the 59.1268 - multi-column element's contents. 59.1269 - 59.1270 - <dt>‘<a href="#fill-available"><code 59.1271 - class=css>fill-available</code></a>’ 59.1272 - 59.1273 - <dd>Specifies the optimal column width as the <a 59.1274 - href="#fill-available-measure"><i>fill-available measure</i></a> of the 59.1275 - multi-column element. 59.1276 - 59.1277 - <dt>‘<a href="#fit-content"><code class=css>fit-content</code></a>’ 59.1278 - 59.1279 - <dd>Specifies the optimal column width as <code>min(<a 59.1280 - href="#max-content"><i>max-content</i></a>, max(<a 59.1281 - href="#min-content"><i>min-content</i></a>, <a 59.1282 - href="#fill-available"><i>fill-available</i></a>))</code>. 59.1283 - </dl> 59.1284 - 59.1285 <h2 class=no-num id=references> References</h2> 59.1286 59.1287 <h3 class=no-num id=normative-references> Normative references</h3> 59.1288 @@ -4248,17 +4000,27 @@ 59.1289 Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June 59.1290 2011. W3C Recommendation. URL: <a 59.1291 href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> 59.1292 - </dd> 59.1293 + </dd> 59.1294 <!----> 59.1295 59.1296 + <dt id=CSS3-SIZING>[CSS3-SIZING] 59.1297 + 59.1298 + <dd>Tab Atkins; Elika J. Etemad. <a 59.1299 + href="http://www.w3.org/TR/2012/WD-css3-sizing-20120927"><cite>CSS 59.1300 + Intrinsic and Extrinsic Sizing Level 3.</cite></a> 27 September 2012. W3C 59.1301 + Working Draft. (Work in progress.) URL: <a 59.1302 + href="http://www.w3.org/TR/2012/WD-css3-sizing-20120927">http://www.w3.org/TR/2012/WD-css3-sizing-20120927</a> 59.1303 + </dd> 59.1304 + <!----> 59.1305 + 59.1306 <dt id=CSS3BG>[CSS3BG] 59.1307 59.1308 <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a 59.1309 - href="http://www.w3.org/TR/2012/CR-css3-background-20120417/"><cite>CSS 59.1310 - Backgrounds and Borders Module Level 3.</cite></a> 17 April 2012. W3C 59.1311 + href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS 59.1312 + Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C 59.1313 Candidate Recommendation. (Work in progress.) URL: <a 59.1314 - href="http://www.w3.org/TR/2012/CR-css3-background-20120417/">http://www.w3.org/TR/2012/CR-css3-background-20120417/</a> 59.1315 - </dd> 59.1316 + href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a> 59.1317 + </dd> 59.1318 <!----> 59.1319 59.1320 <dt id=CSS3COL>[CSS3COL] 59.1321 @@ -4268,7 +4030,7 @@ 59.1322 Multi-column Layout Module.</cite></a> 12 April 2011. W3C Candidate 59.1323 Recommendation. (Work in progress.) URL: <a 59.1324 href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412">http://www.w3.org/TR/2011/CR-css3-multicol-20110412</a> 59.1325 - </dd> 59.1326 + </dd> 59.1327 <!----> 59.1328 59.1329 <dt id=RFC2119>[RFC2119] 59.1330 @@ -4277,7 +4039,7 @@ 59.1331 words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet 59.1332 RFC 2119. URL: <a 59.1333 href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a> 59.1334 - </dd> 59.1335 + </dd> 59.1336 <!----> 59.1337 59.1338 <dt id=SVG11>[SVG11] 59.1339 @@ -4287,7 +4049,7 @@ 59.1340 Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011. 59.1341 W3C Recommendation. URL: <a 59.1342 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a> 59.1343 - </dd> 59.1344 + </dd> 59.1345 <!----> 59.1346 59.1347 <dt id=UAX11>[UAX11] 59.1348 @@ -4296,7 +4058,7 @@ 59.1349 href="http://www.unicode.org/reports/tr11/"><cite>East Asian 59.1350 Width.</cite></a> 17 January 2012. Unicode Standard Annex #11. URL: <a 59.1351 href="http://www.unicode.org/reports/tr11/">http://www.unicode.org/reports/tr11/</a> 59.1352 - </dd> 59.1353 + </dd> 59.1354 <!----> 59.1355 59.1356 <dt id=UAX24>[UAX24] 59.1357 @@ -4305,7 +4067,7 @@ 59.1358 href="http://www.unicode.org/reports/tr24/"><cite>Unicode Script 59.1359 Property.</cite></a> 13 January 2012. Unicode Standard Annex #24. URL: <a 59.1360 href="http://www.unicode.org/reports/tr24/">http://www.unicode.org/reports/tr24/</a> 59.1361 - </dd> 59.1362 + </dd> 59.1363 <!----> 59.1364 59.1365 <dt id=UAX29>[UAX29] 59.1366 @@ -4315,7 +4077,7 @@ 59.1367 Segmentation.</cite></a> 24 January 2012. Unicode Standard Annex #29. 59.1368 URL: <a 59.1369 href="http://www.unicode.org/reports/tr29/">http://www.unicode.org/reports/tr29/</a> 59.1370 - </dd> 59.1371 + </dd> 59.1372 <!----> 59.1373 59.1374 <dt id=UAX44>[UAX44] 59.1375 @@ -4324,7 +4086,7 @@ 59.1376 href="http://www.unicode.org/reports/tr44/"><cite>Unicode Character 59.1377 Database.</cite></a> 23 January 2012. Unicode Standard Annex #44. URL: <a 59.1378 href="http://www.unicode.org/reports/tr44/">http://www.unicode.org/reports/tr44/</a> 59.1379 - </dd> 59.1380 + </dd> 59.1381 <!----> 59.1382 59.1383 <dt id=UAX9>[UAX9] 59.1384 @@ -4333,7 +4095,7 @@ 59.1385 href="http://www.unicode.org/reports/tr9/"><cite>Unicode Bidirectional 59.1386 Algorithm.</cite></a> 16 January 2012. Unicode Standard Annex #9. URL: <a 59.1387 href="http://www.unicode.org/reports/tr9/">http://www.unicode.org/reports/tr9/</a> 59.1388 - </dd> 59.1389 + </dd> 59.1390 <!----> 59.1391 59.1392 <dt id=UNICODE>[UNICODE] 59.1393 @@ -4344,7 +4106,17 @@ 59.1394 Version 4.0 (Boston, MA, Addison-Wesley, ISBN 0-321-18578-1), as updated 59.1395 from time to time by the publication of new versions URL: <a 59.1396 href="http://www.unicode.org/standard/versions/enumeratedversions.html">http://www.unicode.org/standard/versions/enumeratedversions.html</a> 59.1397 - </dd> 59.1398 + </dd> 59.1399 + <!----> 59.1400 + 59.1401 + <dt id=UTR50>[UTR50] 59.1402 + 59.1403 + <dd>Eric Muller. <a 59.1404 + href="http://www.unicode.org/reports/tr50/tr50-5.html"><cite>Unicode 59.1405 + Properties for Vertical Text Layout.</cite></a> 17 May 2012. Proposed 59.1406 + Draft Unicode Technical Report #50. URL: <a 59.1407 + href="http://www.unicode.org/reports/tr50/tr50-5.html">http://www.unicode.org/reports/tr50/tr50-5.html</a> 59.1408 + </dd> 59.1409 <!----> 59.1410 </dl> 59.1411 <!--end-normative--> 59.1412 @@ -4364,17 +4136,17 @@ 59.1413 Sheets, level 2 (CSS2) Specification.</cite></a> 11 April 2008. W3C 59.1414 Recommendation. URL: <a 59.1415 href="http://www.w3.org/TR/2008/REC-CSS2-20080411">http://www.w3.org/TR/2008/REC-CSS2-20080411</a> 59.1416 - </dd> 59.1417 + </dd> 59.1418 <!----> 59.1419 59.1420 <dt id=CSS3-FONTS>[CSS3-FONTS] 59.1421 59.1422 <dd>John Daggett. <a 59.1423 - href="http://www.w3.org/TR/2011/WD-css3-fonts-20111004/"><cite>CSS Fonts 59.1424 - Module Level 3.</cite></a> 4 October 2011. W3C Working Draft. (Work in 59.1425 + href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/"><cite>CSS Fonts 59.1426 + Module Level 3.</cite></a> 23 August 2012. W3C Working Draft. (Work in 59.1427 progress.) URL: <a 59.1428 - href="http://www.w3.org/TR/2011/WD-css3-fonts-20111004/">http://www.w3.org/TR/2011/WD-css3-fonts-20111004/</a> 59.1429 - </dd> 59.1430 + href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/">http://www.w3.org/TR/2012/WD-css3-fonts-20120823/</a> 59.1431 + </dd> 59.1432 <!----> 59.1433 59.1434 <dt id=CSS3COLOR>[CSS3COLOR] 59.1435 @@ -4383,7 +4155,7 @@ 59.1436 href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color 59.1437 Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a 59.1438 href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a> 59.1439 - </dd> 59.1440 + </dd> 59.1441 <!----> 59.1442 59.1443 <dt id=CSS3LIST>[CSS3LIST] 59.1444 @@ -4393,7 +4165,7 @@ 59.1445 and Counters Module Level 3.</cite></a> 24 May 2011. W3C Working Draft. 59.1446 (Work in progress.) URL: <a 59.1447 href="http://www.w3.org/TR/2011/WD-css3-lists-20110524">http://www.w3.org/TR/2011/WD-css3-lists-20110524</a> 59.1448 - </dd> 59.1449 + </dd> 59.1450 <!----> 59.1451 59.1452 <dt id=CSS3PAGE>[CSS3PAGE] 59.1453 @@ -4403,17 +4175,17 @@ 59.1454 Paged Media.</cite></a> 10 October 2006. W3C Working Draft. (Work in 59.1455 progress.) URL: <a 59.1456 href="http://www.w3.org/TR/2006/WD-css3-page-20061010">http://www.w3.org/TR/2006/WD-css3-page-20061010</a> 59.1457 - </dd> 59.1458 + </dd> 59.1459 <!----> 59.1460 59.1461 <dt id=CSS3TEXT>[CSS3TEXT] 59.1462 59.1463 <dd>Elika J. Etemad; Koji Ishii. <a 59.1464 - href="http://www.w3.org/TR/2012/WD-css3-text-20120119/"><cite>CSS Text 59.1465 - Level 3.</cite></a> 19 January 2012. W3C Working Draft. (Work in 59.1466 + href="http://www.w3.org/TR/2012/WD-css3-text-20120814/"><cite>CSS Text 59.1467 + Level 3.</cite></a> 14 August 2012. W3C Working Draft. (Work in 59.1468 progress.) URL: <a 59.1469 - href="http://www.w3.org/TR/2012/WD-css3-text-20120119/">http://www.w3.org/TR/2012/WD-css3-text-20120119/</a> 59.1470 - </dd> 59.1471 + href="http://www.w3.org/TR/2012/WD-css3-text-20120814/">http://www.w3.org/TR/2012/WD-css3-text-20120814/</a> 59.1472 + </dd> 59.1473 <!----> 59.1474 59.1475 <dt id=HTML401>[HTML401] 59.1476 @@ -4422,7 +4194,7 @@ 59.1477 href="http://www.w3.org/TR/1999/REC-html401-19991224"><cite>HTML 4.01 59.1478 Specification.</cite></a> 24 December 1999. W3C Recommendation. URL: <a 59.1479 href="http://www.w3.org/TR/1999/REC-html401-19991224">http://www.w3.org/TR/1999/REC-html401-19991224</a> 59.1480 - </dd> 59.1481 + </dd> 59.1482 <!----> 59.1483 59.1484 <dt id=HTML5>[HTML5] 59.1485 @@ -4431,7 +4203,7 @@ 59.1486 href="http://www.w3.org/TR/2011/WD-html5-20110525/"><cite>HTML5.</cite></a> 59.1487 25 May 2011. W3C Working Draft. (Work in progress.) URL: <a 59.1488 href="http://www.w3.org/TR/2011/WD-html5-20110525/">http://www.w3.org/TR/2011/WD-html5-20110525/</a> 59.1489 - </dd> 59.1490 + </dd> 59.1491 <!----> 59.1492 59.1493 <dt id=UTN22>[UTN22] 59.1494 @@ -4441,16 +4213,6 @@ 59.1495 #22. URL: <a 59.1496 href="http://unicode.org/notes/tn22/">http://unicode.org/notes/tn22/</a></dd> 59.1497 <!----> 59.1498 - 59.1499 - <dt id=UTR50>[UTR50] 59.1500 - 59.1501 - <dd>Eric Muller. <a 59.1502 - href="http://www.unicode.org/reports/tr50/tr50-5.html"><cite>Unicode 59.1503 - Properties for Vertical Text Layout.</cite></a> 17 May 2012. Proposed 59.1504 - Draft Unicode Technical Report #50. URL: <a 59.1505 - href="http://www.unicode.org/reports/tr50/tr50-5.html">http://www.unicode.org/reports/tr50/tr50-5.html</a> 59.1506 - </dd> 59.1507 - <!----> 59.1508 </dl> 59.1509 <!--end-informative--> 59.1510 59.1511 @@ -4495,36 +4257,6 @@ 59.1512 59.1513 <td> 59.1514 59.1515 - <td>as defined in [CSS21] 59.1516 - 59.1517 - <td>as defined in [CSS21] 59.1518 - 59.1519 - <td>as defined in [CSS21] 59.1520 - 59.1521 - <td>as defined in [CSS21] 59.1522 - 59.1523 - <td>as defined in [CSS21] 59.1524 - 59.1525 - <tr> 59.1526 - <th><span class=property></span> 59.1527 - 59.1528 - <td> 59.1529 - 59.1530 - <td>as defined in [CSS3COL] 59.1531 - 59.1532 - <td>as defined in [CSS3COL] 59.1533 - 59.1534 - <td>as defined in [CSS3COL] 59.1535 - 59.1536 - <td>as defined in [CSS3COL] 59.1537 - 59.1538 - <td>as defined in [CSS3COL] 59.1539 - 59.1540 - <tr> 59.1541 - <th><span class=property></span> 59.1542 - 59.1543 - <td> 59.1544 - 59.1545 <td>head 59.1546 59.1547 <td>same as CSS2.1
60.1 --- a/css3-writing-modes/Overview.src.html Mon Oct 22 00:33:44 2012 +0200 60.2 +++ b/css3-writing-modes/Overview.src.html Mon Oct 22 00:41:17 2012 +0200 60.3 @@ -887,7 +887,7 @@ 60.4 <!-- --> <option>français 60.5 <!-- --> <option>فارسی 60.6 <!-- --> <option>中文 60.7 -<!-- --> <option>日本语</select></label> 60.8 +<!-- --> <option>日本語</select></label> 60.9 <!-- --></form></pre> 60.10 60.11 <p><img alt="Screenshot of vertical layout: the input element is 60.12 @@ -1349,41 +1349,32 @@ 60.13 <p class="note">Changing the value of this property may affect inline-level alignment. 60.14 Refer to <a href="#text-baselines">Text Baselines</a> for more details.</p> 60.15 60.16 -<h4 id=vertical-orientations> 60.17 -Vertical Orientations</h4> 60.18 - 60.19 - <p><a href="vosimple.txt">This data file</a> 60.20 - defines two properties in UCD format [[!UAX44]]:</p> 60.21 +<h4 id='vertical-orientations'> 60.22 +Mixed Vertical Orientations</h4> 60.23 + 60.24 + <p> 60.25 + [[!UTR50]] defines the "mixed vertical orientation" (MVO) property in UCD format [[!UAX44]]. 60.26 + When 'text-orientation' is ''mixed-right'', 60.27 + the UA must render a <i>character</i> upright if the MVO value is ''U'', ''T'', ''Tu'', or ''Tr'', 60.28 + or else sideways (90° clockwise from horizontal) if ''R''. 60.29 + 60.30 + <p class='issue'> 60.31 + As of the time of publication, 60.32 + Unicode has not yet officially updated its orientation data to account for the many errata that were accepted in June 2012. 60.33 + Therefore, the official UTR50 data (version 5) should not be used. 60.34 + (Instead, see <a href="http://www.unicode.org/reports/tr50/tr50-6.Orientation.txt">this draft of version 6</a>.) 60.35 + When Unicode publishes a proper update, 60.36 + this spec will update its references accordingly. 60.37 + 60.38 +<h4 id='vertical-font-features'> 60.39 +Vertical Typesetting and Font Features</h4> 60.40 + 60.41 + <p>When typesetting text in ''mixed-right'' and ''upright'' orientations: 60.42 + 60.43 <dl> 60.44 - <dt><dfn>MVOsimple</dfn></dt> 60.45 - <dd>This property defines character orientations for ''mixed-right''.</dd> 60.46 - <dt><dfn>SVOsimple</dfn></dt> 60.47 - <dd>This property defines character orientations for ''upright''.</dd> 60.48 - </dl> 60.49 - <p>The UA must render a <i>character</i> upright if the value is ''U'', 60.50 - or sideways (90° clockwise from horizontal) if ''R''.</p> 60.51 - <div class="note"> 60.52 - 'MVOsimple' and 'SVOsimple' derived properties are defined in terms of 60.53 - the corresponding Unicode porperty value, MVO and SVO respectively. 60.54 - If the orientation value is ''R'' then the simple value is ''R''. 60.55 - If the orientation value is ''U'', ''T'', ''Tu'', or ''Tr'' then 60.56 - the simple value is ''U''. 60.57 - The one exception is for scripts like Mongolian for which special handling 60.58 - is required for the stacked case due to the vertical-only nature of the underlying 60.59 - script. 60.60 - <p> 60.61 - Going forward, CSS Writing Modes will be tracking changes in [[UTR50]], 60.62 - and thus converging with (rather than diverging from) Unicode. 60.63 - </div> 60.64 - 60.65 -<h4 id=vertical-font-features> 60.66 -Vertical Typesetting and Font Features</h4> 60.67 - 60.68 - <p>When typesetting text in vertical writing modes: 60.69 - 60.70 - <ul> 60.71 - <li>Upright characters in ''mixed-right'' and ''upright'' modes are 60.72 - typeset with vertical font metrics. 60.73 + <dt>upright characters 60.74 + <dd> 60.75 + Are typeset with vertical font metrics. 60.76 The UA must synthesize vertical font metrics for fonts that lack them. 60.77 (This specification does not define heuristics for synthesizing such metrics.) 60.78 Additionally, font features (such as alternate glyphs) intended 60.79 @@ -1391,22 +1382,45 @@ 60.80 (E.g. the OpenType ''vert'' feature must be enabled.) 60.81 Furthermore, characters from horizontal cursive scripts (such as Arabic) 60.82 are shaped in their isolated forms when typeset upright. 60.83 - <li>Sideways characters in ''mixed-right'' and ''upright'' modes are 60.84 - typeset with horizontal metrics, 60.85 + <p class="note"> 60.86 + Note that in OpenType systems, 60.87 + <i>characters</i> from the Mongolian and Phags-pa scripts 60.88 + must actually be rendered <a href="#typeset-sideways">sideways</a>. 60.89 + This is because the "upright" orientation in the Unicode code charts (which assume vertical typesetting) 60.90 + and the "upright" orientation of the glyphs of these scripts in most OpenType fonts (which assume horizontal typesetting) 60.91 + don't match. 60.92 + <p class="note">Note that even when typeset "upright", 60.93 + some glyphs should appear rotated. 60.94 + For example, dashes and enclosing punctuation 60.95 + (such as 〈 LEFT ANGLE BRACKET U+3008) 60.96 + should be oriented relative to the inline axis. 60.97 + In OpenType, this is typically handled by glyph substitution, 60.98 + although not all fonts have alternate glyphs for all relevant codepoints. 60.99 + (East Asian fonts usually provide alternates for East Asian codepoints, 60.100 + but Western fonts typically lack any vertical typesetting features.) 60.101 + Unicode published draft data on which <i>characters</i> should appear sideways 60.102 + as the SVO property in <a href="http://www.unicode.org/reports/tr50/tr50-6.Orientation.txt">this data file</a>; 60.103 + however, this property has been abandoned for future revisions of [[!UTR50]]. 60.104 + 60.105 + <dt id='typeset-sideways'>sideways characters 60.106 + <dd> 60.107 + Are typeset with horizontal metrics, 60.108 and vertical typesetting features are not used. 60.109 However, if the font has features meant to be enabled 60.110 for sideways text that is typeset in vertical lines 60.111 (e.g. to adjust brush stroke angles or alignment), 60.112 those features are used. 60.113 - <p class="issue">Propose 'svrt' as an OpenType substitution feature 60.114 + <!--<p class="issue">Propose 'svrt' as an OpenType substitution feature 60.115 that is applied to rotated horizontal text in vertical text runs, 60.116 - to handle these cases. 60.117 - <li>All text in ''sideways'', ''sideways-right'', and ''sideways-left'' modes is 60.118 - typeset using horizontal font metrics and the normal set of features 60.119 - used for horizontal text runs. 60.120 - Vertical metrics, vertical glyph variations, and any other features meant 60.121 - for text typeset in vertical lines are <em>not</em> used. 60.122 - </ul> 60.123 + to handle these cases.--> 60.124 + </dl> 60.125 + 60.126 + <p> 60.127 + All text in ''sideways'', ''sideways-right'', and ''sideways-left'' orientations is 60.128 + typeset using horizontal font metrics and the normal set of features 60.129 + used for horizontal text runs. 60.130 + Vertical metrics, vertical glyph variations, and any other features meant 60.131 + for text typeset in vertical lines are <em>not</em> used. 60.132 60.133 <p class=issue>This section needs additional work. Suggestions are welcome. 60.134 60.135 @@ -1485,11 +1499,11 @@ 60.136 <dd>The dimension parallel to the flow of text within a line, i.e. 60.137 the <i>horizontal dimension</i> in horizontal writing modes, and 60.138 the <i>vertical dimension</i> in vertical writing modes.</dd> 60.139 - <dt><dfn>inline-axis</dfn></dt> 60.140 + <dt><dfn>block-axis</dfn></dt> 60.141 <dd>The axis in the block dimension, i.e. the <i>vertical 60.142 axis</i> in horizontal writing modes and the <i>horizontal 60.143 axis</i> in vertical writing modes.</dd> 60.144 - <dt><dfn>block-axis</dfn></dt> 60.145 + <dt><dfn>inline-axis</dfn></dt> 60.146 <dd>The axis in the inline dimension, i.e. the <i>horizontal 60.147 axis</i> in horizontal writing modes and the <i>vertical axis</i> 60.148 in vertical writing modes.</dd> 60.149 @@ -1519,12 +1533,12 @@ 60.150 defined as follows: 60.151 60.152 <dl> 60.153 - <dt><dfn>head</dfn> 60.154 + <dt><dfn>head</dfn>/<dfn>before</dfn> 60.155 <dd>Nominally the side that comes earlier in the block progression, 60.156 as determined by the 'writing-mode' property: the physical top 60.157 in ''horizontal-tb'' mode, the right in ''vertical-rl'', and the 60.158 left in ''vertical-lr''. 60.159 - <dt><dfn>foot</dfn> 60.160 + <dt><dfn>foot</dfn>/<dfn>after</dfn> 60.161 <dd>The side opposite <i>head</i>. 60.162 <dt><dfn>start</dfn> 60.163 <dd>Nominally the side from which text of its inline base direction 60.164 @@ -1535,6 +1549,16 @@ 60.165 <dd>The side opposite <i>start</i>. 60.166 </dl> 60.167 60.168 + <p class='issue'> 60.169 + The naming of the block-axis logical directions is under discussion. 60.170 + The before/after set of names is used in XSL-FO, 60.171 + but is unfortunately somewhat confusing with DOM-relative directions 60.172 + (e.g. the ::before/::after pseudo-elements), 60.173 + and is not sufficiently distinct from start/end, 60.174 + which is used for the inline axis. 60.175 + Feedback is welcome, 60.176 + see <a href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0321.html">Koji's summary email</a>. 60.177 + 60.178 <p class="note">Note that while determining the <i>head</i> and 60.179 <i>foot</i> sides of a box depends only on the 'writing-mode' property, 60.180 determining the <i>start</i> and <i>end</i> sides of a box depends not 60.181 @@ -1901,6 +1925,7 @@ 60.182 60.183 <p>When an element has a different 'writing-mode' from its 60.184 containing block two cases are possible: 60.185 + 60.186 <ul> 60.187 <li>The two writing modes are parallel to each other. (For example, 60.188 ''vertical-rl'' and ''vertical-lr'').</li> 60.189 @@ -1908,38 +1933,62 @@ 60.190 example, ''horizontal-tb'' and ''vertical-rl'').</li> 60.191 </ul> 60.192 60.193 - <p>To handle the second case, CSS layout calculations are divided into 60.194 + <p> 60.195 + When an element has a writing mode that is perpendicular to its containing block 60.196 + it is said to be in, or establish, an <dfn>orthogonal flow</dfn>. 60.197 + 60.198 + <p> 60.199 + To handle this case, CSS layout calculations are divided into 60.200 two phases: sizing a box, and positioning the box within its flow. 60.201 - In the sizing phase—calculating the width and height of the 60.202 - box—the dimensions of the box and the containing block 60.203 - are mapped to the measure and extent and calculations performed 60.204 - accordingly using the writing mode of the element. 60.205 - In the positioning phase—calculating the positioning offsets, 60.206 - margins, borders, and padding—the dimensions of the box and 60.207 - its containing block are mapped to the measure and extent and 60.208 - calculations performed according to the writing mode of the 60.209 - containing block. 60.210 - 60.211 - <p>For example, if a vertical block is placed inside a horizontal 60.212 - block, then when calculating the physical height (which is the 60.213 - measure) of the child block the physical height of the parent 60.214 - block is used as the child's containing block measure, even 60.215 - though the physical height is the extent, not the measure, of 60.216 - the parent block.</p> 60.217 - 60.218 - <p>Since auto margins are resolved consistent with the containing 60.219 - block's writing mode, a box establishing an orthogonal flow, can, 60.220 + 60.221 + <ul> 60.222 + <li> 60.223 + In the sizing phase—calculating the width and height of the 60.224 + box—the dimensions of the box and the containing block 60.225 + are mapped to the measure and extent and calculations are performed 60.226 + accordingly using the writing mode of the <em>element</em>. 60.227 + <li> 60.228 + In the positioning phase—calculating the positioning offsets, 60.229 + margins, borders, and padding—the dimensions of the box and 60.230 + its containing block are mapped to the measure and extent and 60.231 + calculations are performed according to the writing mode of the 60.232 + <em>containing block</em>. 60.233 + </ul> 60.234 + 60.235 + <p>Since ''auto'' margins are resolved consistent with the containing 60.236 + block's writing mode, a box establishing an orthogonal flow can, 60.237 once sized, be aligned or centered within its containing block just 60.238 like other block-level elements by using auto margins. 60.239 60.240 - <p>It is common in CSS for a containing block to have a defined 60.241 - measure, but not a defined extent. This typically happens in 60.242 + <div class='example'> 60.243 + <p> 60.244 + For example, if a vertical block is placed inside a horizontal 60.245 + block, then when calculating the physical height (which is the 60.246 + measure) of the child block the physical height of the parent 60.247 + block is used as the child's containing block measure, even 60.248 + though the physical height is the extent, not the measure, of 60.249 + the parent block. 60.250 + 60.251 + <p> 60.252 + On the other hand, 60.253 + because the containing block is in a horizontal writing mode, 60.254 + the vertical margins on the child participate in margin-collapsing, 60.255 + even though they are in the inline-axis of the child, 60.256 + and horizontal auto margins will expand to fill the containing block, 60.257 + even though they are in the block-axis of the child. 60.258 + 60.259 + <p class='issue'> 60.260 + Add a picture. 60.261 + </div> 60.262 + 60.263 + <p>It is common in CSS for a containing block to have a definite 60.264 + measure, but not a definite extent. This typically happens in 60.265 CSS2.1 when a containing block has an ''auto'' height, for 60.266 example: its width is given by the calculations in 60.267 <a href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">10.3.3</a>, 60.268 but its extent depends on its contents. In such cases the 60.269 - <dfn>available measure</dfn> is defined as the measure of the 60.270 - containing block; but the <dfn>available extent</dfn>, which 60.271 + <i>available measure</i> is defined as the measure of the 60.272 + containing block; but the <i>available extent</i>, which 60.273 would otherwise be the extent of the containing block, is 60.274 infinite. 60.275 60.276 @@ -1950,50 +1999,69 @@ 60.277 computations cannot be resolved. In these cases, the initial 60.278 containing block's size is used as a <i>fallback</i> variable 60.279 in place of the <i>available measure</i> for calculations that 60.280 - require a definite available measure. 60.281 + require a definite <i>available measure</i>. 60.282 60.283 <h4 id="orthogonal-auto"> 60.284 Auto-sizing in Orthogonal Flows</h4> 60.285 60.286 - <p>If the computed measure of an element establishing an orthogonal 60.287 - flow is ''auto'', then the used measure is calculated as the 60.288 - <i>fit-content</i> (shrink-to-fit) size using 60.289 - a <i>fill-available</i> fit into the minimum of the 60.290 - <i>available measure</i> (when definite) and the <i>fallback available measure</i>. 60.291 - In other words, the calculation becomes 60.292 - <code>min(<a href="#max-content"><i>max-content</i></a>, 60.293 - max(<a href="#min-content"><i>min-content</i></a>, <a href="#fill-available"><i>fill-available</i></a>, <i>fill-<a href="#fallback-measure">fallback</a></i>))</code> 60.294 - (where <i>fill-available</i> is dropped when indefinite). 60.295 + <p> 60.296 + If the UA does not support CSS Multi-column Layout [[!CSS3COL]] 60.297 + and the element is a block container, 60.298 + when the computed measure of the element establishing an orthogonal flow is ''auto'', 60.299 + then the used inner measure is calculated as: 60.300 + 60.301 + <p> 60.302 + <code>min(<var>max-content</var>, max(<var>min-content</var>, min(<var>fill-available</var>, <var>fill-fallback</var>)))</code>, 60.303 + where: 60.304 + 60.305 + <dl> 60.306 + <dt><var>min-content</var> 60.307 + <dd>the <a href="http://www.w3.org/TR/css3-sizing/#min-content-measure">min-content measure</a> of the element 60.308 + 60.309 + <dt><var>max-content</var> 60.310 + <dd>the <a href="http://www.w3.org/TR/css3-sizing/#max-content-measure">max-content measure</a> of the element 60.311 + 60.312 + <dt><var>fill-available</var> 60.313 + <dd>the <a href="http://www.w3.org/TR/css3-sizing/#fill-available-fit">fill-available fit</a> into the element's containing block's size in the element's inline axis 60.314 + 60.315 + <dt><var>fill-fallback</var> 60.316 + <dd>the <a href="http://www.w3.org/TR/css3-sizing/#fill-available-fit">fill-available fit</a> into the initial containing block's size in the element's inline axis 60.317 + </dl> 60.318 + 60.319 + <p> 60.320 + See [[!CSS3-SIZING]] for further details. 60.321 60.322 <h4 id="orthogonal-multicol"> 60.323 Multi-column Layout in Orthogonal Flows</h4> 60.324 60.325 - <p>If the UA supports CSS Multi-column Layout [[!CSS3COL]], then 60.326 + <p> 60.327 + If the UA supports CSS Multi-column Layout [[!CSS3COL]] 60.328 + and the element is a block container or multi-column element, 60.329 for the case where the element's extent or available extent is 60.330 - defined but the element's measure is ''auto'': 60.331 + <i>definite</i> but the element's measure is ''auto'': 60.332 60.333 <ol> 60.334 - <li>If 'column-count' and 'column-width' are both ''auto'', a 60.335 - used 'column-width' is calculated for the element as the 60.336 - <i>fill-available measure</i> using the minimum of the 60.337 - <i>available measure</i> (when definite) and the 60.338 - <i>fallback available measure</i> as the <i>available measure</i>. 60.339 - <li>If the columns' extent is not fixed, the <i>fill-available 60.340 - extent</i> of the element is used. 60.341 - <li>The used column-count then follows from filling the resulting 60.342 - columns with the element's content. 60.343 + <li> 60.344 + If 'column-count' and 'column-width' are both ''auto'', 60.345 + calculate the used 'column-width' as 60.346 + the inner measure for ''auto''-sized elements, as defined above. 60.347 + <li> 60.348 + If the columns' extent is <i>indefinite</i>, 60.349 + the <i>fill-available extent</i> of the element is used. 60.350 + <li> 60.351 + The used 'column-count' then follows from filling the resulting columns with the element's content. 60.352 </ol> 60.353 60.354 - <p>The used measure of the resulting multi-column element is then 60.355 - calculated: 60.356 - if the content neither wraps nor paginates within the multi-column 60.357 - element, then the used measure is the <i>max-content measure</i> 60.358 - of the element's contents; 60.359 - else it is calculated from the used column width, column count, 60.360 - and column gap. 60.361 - <p>The used extent of the element is either the used column extent 60.362 - (if multiple columns were used) or the <i>max-content extent</i> 60.363 - of the content. 60.364 + <p> 60.365 + The used measure of the resulting multi-column element is then calculated: 60.366 + if the content neither line-wraps nor fragments within the multi-column element, 60.367 + then the used measure is the <i>max-content measure</i> of the element's contents; 60.368 + else it is calculated from the used 'column-width', 'column-count', and 'column-gap'. 60.369 + 60.370 + <p> 60.371 + The used extent of the element is either the used column extent 60.372 + (if multiple columns were used) 60.373 + or the <i>max-content extent</i> of the content. 60.374 60.375 <p class="note">This should behave the same as the auto-sizing algorithm 60.376 defined in the previous section, except overflowing content, instead of 60.377 @@ -2002,12 +2070,12 @@ 60.378 T-shaped documents.</p> 60.379 60.380 <h4 id="orthogonal-pagination"> 60.381 -Paginating Orthogonal Flows</h4> 60.382 +Fragmenting Orthogonal Flows</h4> 60.383 60.384 <p><em>This section is informative.</em></p> 60.385 60.386 - <p>With regards to pagination, the rules in CSS2.1 still hold in 60.387 - vertical writing modes and orthogonal flows: page break opportunities 60.388 + <p>With regards to fragmentation, the rules in CSS2.1 still hold in 60.389 + vertical writing modes and orthogonal flows: break opportunities 60.390 do not occur inside line boxes, only between them. 60.391 UAs that support [[!CSS3COL]] may break in the (potentially zero-width) 60.392 gap between columns, however. 60.393 @@ -2794,7 +2862,7 @@ 60.394 <p>Unicode defines properties for characters, but for 'text-orientation', 60.395 it is necessary to determine the properties of a grapheme cluster. 60.396 For the purposes of CSS Writing Modes, the properties of a grapheme 60.397 - cluster are given by its base character—except in two cases: 60.398 + cluster are given by its base character—except in two cases: 60.399 <ul> 60.400 <li>Grapheme clusters formed with an Enclosing Mark (Me) of the Common 60.401 script are considered to be Other Symbols (So) in the Common script. 60.402 @@ -2876,232 +2944,6 @@ 60.403 In horizontal text, they are typeset in a 90° counter-clockwise 60.404 rotation from this orientation. 60.405 60.406 -<h2 id="intrinsic-sizing" class="no-num">Appendix D: 60.407 -Intrinsic Dimensions</h2> 60.408 - 60.409 - <p><em>This section is normative.</em></p> 60.410 - 60.411 - <p>CSS layout has several different concepts of automatic sizing that 60.412 - are used in various layout calculations. This section defines some 60.413 - more precise terminology to help connect the layout behaviors of this 60.414 - spec to the calculations used in other modules, and some new keywords 60.415 - for the width and height properties to allow authors to assign elements 60.416 - the dimensions resulting from these size calculations. 60.417 - 60.418 - <p>For the purposes of these definitions, 60.419 - a <dfn>definite</dfn> size is one that can be determined without measuring content, 60.420 - i.e. is a <var><length></var>, a size of the initial containing block, 60.421 - or a <var><percentage></var> that is resolved against a <i>definite</i> size. 60.422 - An <dfn>indefinite</dfn> size is one that is not <i>definite</i>. 60.423 - An <i>indefinite</i> <i>available size</i> is essentially infinite. 60.424 - 60.425 - <table class="propdef"> 60.426 - <tbody> 60.427 - <tr> 60.428 - <th>Properties:</th> 60.429 - <td>'width', 'min-width', 'max-width', 'height', 'min-height', 'max-height'</td> 60.430 - </tr> 60.431 - <tr> 60.432 - <th>New Values:</th> 60.433 - <td>''min-content'' | ''max-content'' | ''fill-available'' | ''fit-content''</td> 60.434 - </tr> 60.435 - <tr> 60.436 - <th>Initial:</th> 60.437 - <td>as defined in [[!CSS21]]</td> 60.438 - </tr> 60.439 - <tr> 60.440 - <th>Applies to:</th> 60.441 - <td>as defined in [[!CSS21]]</td> 60.442 - </tr> 60.443 - <tr> 60.444 - <th>Inherited:</th> 60.445 - <td>as defined in [[!CSS21]]</td> 60.446 - </tr> 60.447 - <tr> 60.448 - <th>Percentages:</th> 60.449 - <td>as defined in [[!CSS21]]</td> 60.450 - </tr> 60.451 - <tr> 60.452 - <th>Media:</th> 60.453 - <td>as defined in [[!CSS21]]</td> 60.454 - </tr> 60.455 - <tr> 60.456 - <th>Computed value:</th> 60.457 - <td>specified value if keyword specified, else as defined in [[!CSS21]]</td> 60.458 - </tr> 60.459 - </tbody> 60.460 - </table> 60.461 - 60.462 - <p>There are four types of automatically-determined sizes in CSS (which 60.463 - are represented in the width and height properties by the keywords 60.464 - defined above): 60.465 - 60.466 - <!-- XXX Make these anchors dated once CSS2.1 hits REC, since we might 60.467 - decide to fix these gross editorial inconsistencies at some point in 60.468 - the errata. --> 60.469 - 60.470 - <dl> 60.471 - <dt><dfn>min-content</dfn></dt> 60.472 - <dd>Called the <i>preferred minimum width</i> in 60.473 - <a href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a> 60.474 - and the <i>minimum content width</i> in 60.475 - <a href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout">CSS2.1§17.5.2.2</a>, 60.476 - the <dfn>min-content measure</dfn> is defined roughly as the narrowest 60.477 - measure a box could take while fitting around its contents if <em>all</em> 60.478 - line break opportunities within the box were taken. 60.479 - <dt><dfn>max-content</dfn></dt> 60.480 - <dd>Called the <i>preferred width</i> in 60.481 - <a href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a> 60.482 - and the <i>maximum cell width</i> in 60.483 - <a href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout">CSS2.1§17.5.2.2</a>, 60.484 - the <dfn>max-content measure</dfn> is defined roughly as the narrowest 60.485 - measure a box could take while fitting around its contents if <em>none</em> 60.486 - of the optional line break opportunities within the box were taken. 60.487 - <dt><dfn>fill-available</dfn></dt> 60.488 - <dd>Called the <i>available width</i> in 60.489 - <a href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a> 60.490 - and computed by the rules in 60.491 - <a href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1§10.3.3</a>, 60.492 - the <dfn>fill-available measure</dfn> is calculated by subtracting out 60.493 - the element's margins, borders, and padding from the <i>available measure</i> 60.494 - and flooring the result at zero. 60.495 - If the available measure is infinite, then a <dfn id=fallback-measure>fallback available measure</dfn> 60.496 - is used in place of the <i>available measure</i> in this calculation. 60.497 - Unless otherwise specified, this is the measure of the initial 60.498 - containing block. 60.499 - The <dfn>fill-available extent</dfn> is similarly calculated by 60.500 - using the corresponding values from the block dimension. 60.501 - <p class=issue>There have been some suggestions on improving this definition 60.502 - for extents, see <a href="http://lists.w3.org/Archives/Public/www-style/2009Nov/0286.html">dbaron</a>'s message 60.503 - and <a href="http://lists.w3.org/Archives/Public/www-style/2012Jun/0129.html">tab</a>'s message. 60.504 - <dt><dfn>fit-content</dfn></dt> 60.505 - <dd>Called the <i>shrink-to-fit</i> width in 60.506 - <a href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a>, 60.507 - and 60.508 - <a href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm">CSS Multi-column Layout § 3.4</a>, 60.509 - the <dfn>fit-content measure</dfn> is defined as 60.510 - <code>min(<i>max-content</i>, max(<i>min-content</i>, <i>fill-available</i>))</code> 60.511 - if the available measure is finite, and as the <i>max-content</i> 60.512 - measure otherwise. The <dfn>fit-content extent</dfn> is calculated 60.513 - from the same expression applied to the block dimension. 60.514 - </dl> 60.515 - 60.516 - <p>For the layout models in CSS2.1, both the <dfn>min-content extent</dfn> 60.517 - and <dfn>max-content extent</dfn> of non-replaced elements are defined 60.518 - as the content extent as defined (for horizontal writing modes) in 60.519 - <a href="http://www.w3.org/TR/CSS21/visudet.html#normal-block">CSS2.1§10.6.3</a> 60.520 - and <a href="http://www.w3.org/TR/CSS21/tables.html#height-layout">CSS2.1§17.5.3</a> 60.521 - for elements with ''height: auto''. 60.522 - 60.523 - <p>For replaced elements, the <i>min-content</i> and <i>max-content</i> 60.524 - sizes are equivalent and correspond to the used size of the replaced element 60.525 - according to the ''auto'' width and height calculations. 60.526 - 60.527 -<h3 id="multicol-intrinsic" class="no-num"> 60.528 -Intrinsic Sizes in Multi-column Layout</h3> 60.529 - 60.530 - <p>The <i>min-content</i> and <i>max-content</i> sizes of a multi-column 60.531 - element are undefined per [[!CSS3COL]]. A future specification may 60.532 - define them. 60.533 - 60.534 -<!-- Sketchbook area. See 60.535 - http://lists.w3.org/Archives/Public/www-style/2011Apr/0316.html 60.536 - http://lists.w3.org/Archives/Public/www-style/2011May/0468.html 60.537 - 60.538 -<h4 id="multicol-intrinsic-measures"> 60.539 -Intrinsic Sizes for Multi-column Elements</h4> 60.540 - 60.541 - <p class="issue">This section is under discussion and may be removed</p> 60.542 - 60.543 - <dl> 60.544 - <dt>min-content</dt> 60.545 - <dd>The <i>min-content</i> measure of the multi-column element is 60.546 - the <i>min-content</i> measure of the multi-column element's 60.547 - contents. 60.548 - <dt>max-content</dt> 60.549 - </dl> 60.550 - 60.551 - <p>For multi-column elements laid out with infinite available measure (see 60.552 - <a href="#orthogonal-multicol">Multi-column Layout in Orthogonal Flows</a>), 60.553 - the <i>min-content</i> extent is the extent that would result 60.554 - from taking every permissible pagination break as a column break, and the 60.555 - <i>max-content</i> extent is the extent that would result from taking 60.556 - only the forced breaks. For all other multi-column elements it is, like 60.557 - CSS2.1 block-level boxes, the extent that would be calculated for an 60.558 - ''auto'' extent per [[CSS3MULTICOL]]. 60.559 - 60.560 -NOTES FROM ROSSEN: 60.561 - min-content measure is min(column-width, min-content) 60.562 - max-content measure is 60.563 - 1. Pass w/ colspans displ: none; 60.564 - Get width 60.565 - 2. Pass with colspans only in width 60.566 - Get remaining height 60.567 - 3. Pass w/ spans again using remaining height 60.568 - Get width 60.569 - 4. Layout in width as final 60.570 - Will lay out perfectly without colspans; will have some slack but no 60.571 - overflow when colspans present. 60.572 - 60.573 -<h4 id="multicol-intrinsic-columns"> 60.574 -Intrinsic Sizes for Columns</h4> 60.575 ---> 60.576 - 60.577 - <table class="propdef"> 60.578 - <tbody> 60.579 - <tr> 60.580 - <th>Property:</th> 60.581 - <td>'column-width'</td> 60.582 - </tr> 60.583 - <tr> 60.584 - <th>New Values:</th> 60.585 - <td>''min-content'' | ''max-content'' | ''fill-available'' | ''fit-content''</td> 60.586 - </tr> 60.587 - <tr> 60.588 - <th>Initial:</th> 60.589 - <td>as defined in [[!CSS3COL]]</td> 60.590 - </tr> 60.591 - <tr> 60.592 - <th>Applies to:</th> 60.593 - <td>as defined in [[!CSS3COL]]</td> 60.594 - </tr> 60.595 - <tr> 60.596 - <th>Inherited:</th> 60.597 - <td>as defined in [[!CSS3COL]]</td> 60.598 - </tr> 60.599 - <tr> 60.600 - <th>Percentages:</th> 60.601 - <td>as defined in [[!CSS3COL]]</td> 60.602 - </tr> 60.603 - <tr> 60.604 - <th>Media:</th> 60.605 - <td>as defined in [[!CSS3COL]]</td> 60.606 - </tr> 60.607 - <tr> 60.608 - <th>Computed value:</th> 60.609 - <td>specified value if keyword specified, else as defined in [[!CSS3COL]]</td> 60.610 - </tr> 60.611 - </tbody> 60.612 - </table> 60.613 - 60.614 - <p>When used as values for <a href="http://www.w3.org/TR/css3-multicol/#cw">'column-width'</a>, 60.615 - the new keywords specify the optimal column width: 60.616 - 60.617 - <dl> 60.618 - <dt>''min-content'' 60.619 - <dd>Specifies the optimal column width as the <i>min-content measure</i> 60.620 - of the multi-column element's contents. 60.621 - <dt>''max-content'' 60.622 - <dd>Specifies the optimal column width as the <i>max-content measure</i> 60.623 - of the multi-column element's contents. 60.624 - <dt>''fill-available'' 60.625 - <dd>Specifies the optimal column width as the <i>fill-available measure</i> 60.626 - of the multi-column element. 60.627 - <dt>''fit-content'' 60.628 - <dd>Specifies the optimal column width as 60.629 - <code>min(<i>max-content</i>, max(<i>min-content</i>, <i>fill-available</i>))</code>. 60.630 - </dl> 60.631 - 60.632 <h2 class="no-num"> 60.633 References</h2> 60.634
61.1 --- a/css4-background/Overview.html Mon Oct 22 00:33:44 2012 +0200 61.2 +++ b/css4-background/Overview.html Mon Oct 22 00:41:17 2012 +0200 61.3 @@ -2,10 +2,23 @@ 61.4 "http://www.w3.org/TR/html4/strict.dtd"> 61.5 61.6 <html lang=en> 61.7 - <head> 61.8 + <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ "> 61.9 <title>CSS Backgrounds and Borders Module Level 4</title> 61.10 + 61.11 + <link href="http://purl.org/dc/terms/" rel=schema.dcterms> 61.12 + <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 61.13 + rel=dcterms.rights> 61.14 + <meta content="CSS Backgrounds and Borders Module Level 4" 61.15 + name=dcterms.title> 61.16 + <meta content=text name=dcterms.type> 61.17 + <meta content=2012-10-12 name=dcterms.issued> 61.18 + <meta content="Bert Bos" name=dcterms.creator> 61.19 + <meta content="Elika J. Etemad" name=dcterms.creator> 61.20 + <meta content="Brad Kemper" name=dcterms.creator> 61.21 + <meta content=W3C name=dcterms.publisher> 61.22 + <meta content="http://www.w3.org/TR/2012/ED-css3-background-20121012/" 61.23 + name=dcterms.identifier> 61.24 <link href="../default.css" rel=stylesheet type="text/css"> 61.25 - 61.26 <style type="text/css"> 61.27 .prod { font-family: inherit; font-size: inherit } 61.28 pre.prod { white-space: pre-wrap; margin: 1em 0 1em 2em } 61.29 @@ -13,7 +26,7 @@ 61.30 #box-shadow-samples td { background: white; color: black; } 61.31 </style> 61.32 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet 61.33 - type="text/css"> 61.34 + type="text/css"> 61.35 61.36 <body> 61.37 <div class=head> <!--begin-logo--> 61.38 @@ -22,27 +35,25 @@ 61.39 61.40 <h1>CSS Backgrounds and Borders Module Level 4</h1> 61.41 61.42 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 22 June 2012</h2> 61.43 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 12 October 61.44 + 2012</h2> 61.45 61.46 <dl> 61.47 <dt>This version: 61.48 61.49 - <dd><!-- <a href="http://www.w3.org/TR/2012/CR-css3-background-20120622">http://www.w3.org/TR/2012/ED-css3-background-20120622/</a> --> 61.50 + <dd><!-- <a href="http://www.w3.org/TR/2012/CR-css3-background-20121012">http://www.w3.org/TR/2012/ED-css3-background-20121012/</a> --> 61.51 <a 61.52 href="http://dev.w3.org/csswg/css3-background">http://dev.w3.org/csswg/css3-background</a> 61.53 - 61.54 61.55 <dt>Latest version: 61.56 61.57 <dd><a 61.58 href="http://www.w3.org/TR/css3-background">http://www.w3.org/TR/css3-background/</a> 61.59 - 61.60 61.61 <dt>Previous versions: 61.62 61.63 <dd><a 61.64 href="http://www.w3.org/TR/2010/WD-css3-background-20100612/">http://www.w3.org/TR/2010/WD-css3-background-20100612/</a> 61.65 - 61.66 61.67 <dt id=editors-list>Editors: 61.68 61.69 @@ -92,7 +103,13 @@ 61.70 class=property>background-repeat</code></a>’. 61.71 61.72 <h2 class="no-num no-toc" id=status> Status of this document</h2> 61.73 - <!--begin-status--> 61.74 + 61.75 + <p style="color: red; background: yellow; border: solid thick red;"> 61.76 + <strong>This draft is not actively-maintained at the moment. Comments are 61.77 + welcome, but please refer to <a 61.78 + href="http://www.w3.org/TR/css3-background/">CSS3 Backgrounds and 61.79 + Borders</a> if you are implementing something.</strong> 61.80 + <!--begin-status--> 61.81 61.82 <p>This is a public copy of the editors' draft. It is provided for 61.83 discussion only and may change at any moment. Its publication here does 61.84 @@ -124,19 +141,6 @@ 61.85 href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the 61.86 W3C Patent Policy</a>.</p> 61.87 <!--end-status--> 61.88 - <!-- 61.89 - <p>The following features are at-risk and may be dropped at the 61.90 - end of the CR period if there has not been enough interest from 61.91 - implementers: [...] 61.92 - --> 61.93 - 61.94 - <p>The CSS WG maintains an <a 61.95 - href="http://www.w3.org/Style/CSS/Tracker/products/11">issues list</a> for 61.96 - this module. A <a href="http://www.w3.org/Style/CSS/Test/">test suite</a> 61.97 - and implementation report for CSS Backgrounds and Borders Level 4 will be 61.98 - developed during the Candidate Recommendation phase, which will last a 61.99 - minimum of three months<!--, i.e., at least until 15 May 2011-->. See the 61.100 - section <a href="#exit">“CR exit criteria”</a> for more details. 61.101 61.102 <h2 class="no-num no-toc" id=contents>Table of contents</h2> 61.103 <!--begin-toc--> 61.104 @@ -263,7 +267,6 @@ 61.105 <ul class=toc> 61.106 <li><a href="#the-border-clip-properties"><span class=secno>8.1. 61.107 </span>The ‘<code class=property>border-clip</code>’ properties</a> 61.108 - 61.109 </ul> 61.110 61.111 <li><a href="#acknowledgments"><span class=secno>9. 61.112 @@ -310,7 +313,6 @@ 61.113 area and with the background of the content, padding and border areas. 61.114 Additionally the box may be given a "drop-shadow" effect with the ‘<a 61.115 href="#box-shadow"><code class=property>box-shadow</code></a>’ property. 61.116 - 61.117 61.118 <p>If an element is broken into multiple boxes, ‘<a 61.119 href="#box-decoration-break"><code 61.120 @@ -525,7 +527,6 @@ 61.121 images”</a> for how ‘<a href="#background-image"><code 61.122 class=property>background-image</code></a>’ interacts with other 61.123 comma-separated background properties to form each background image layer. 61.124 - 61.125 61.126 <p>When setting a background image, authors should also specify a ‘<a 61.127 href="#background-color"><code class=css>background-color</code></a>’ 61.128 @@ -554,7 +555,7 @@ 61.129 for image display. 61.130 61.131 <div class=example> 61.132 - <p>Some examples specifying background images:</p> 61.133 + <p>Some examples specifying background images: 61.134 61.135 <pre> 61.136 <!-- -->body { background-image: url("marble.svg") } 61.137 @@ -720,7 +721,6 @@ 61.138 src=bg-repeat><!--<SPAN class="dlink"> <A 61.139 name="img-bg-repeat" href="images/longdesc/bg-repeat-desc.html" 61.140 title="Long description for background pattern">[D]</A></SPAN>--> 61.141 - 61.142 61.143 <p class=caption>The effect of ‘<a href="#repeat-y"><code 61.144 class=css>repeat-y</code></a>’: One copy of the background image is 61.145 @@ -750,7 +750,6 @@ 61.146 images”</a> for how ‘<a href="#background-repeat"><code 61.147 class=property>background-repeat</code></a>’ interacts with other 61.148 comma-separated background properties to form each background image layer. 61.149 - 61.150 61.151 <h3 id=the-background-attachment><span class=secno>3.5. </span> The ‘<a 61.152 href="#background-attachment"><code 61.153 @@ -891,7 +890,6 @@ 61.154 images”</a> for how ‘<a href="#background-attachment"><code 61.155 class=property>background-attachment</code></a>’ interacts with other 61.156 comma-separated background properties to form each background image layer. 61.157 - 61.158 61.159 <h3 id=the-background-position><span class=secno>3.6. </span> The ‘<a 61.160 href="#background-position"><code 61.161 @@ -988,7 +986,7 @@ 61.162 61.163 <div class=example> 61.164 <p>The following declarations give the stated (horizontal, vertical) 61.165 - offsets from the top left corner:</p> 61.166 + offsets from the top left corner: 61.167 61.168 <pre> 61.169 <!-- -->background-position: left 10px top 15px; /* 10px, 15px */ 61.170 @@ -1082,7 +1080,7 @@ 61.171 class=property>background</code></a>’ shorthand declarations use 61.172 keywords to set ‘<a href="#background-position"><code 61.173 class=property>background-position</code></a>’ to the stated percentage 61.174 - values.</p> 61.175 + values. 61.176 61.177 <pre> 61.178 <!-- -->body { background: url("banner.jpeg") right top } /* 100% 0% */ 61.179 @@ -1116,7 +1114,6 @@ 61.180 images”</a> for how ‘<a href="#background-position"><code 61.181 class=property>background-position</code></a>’ interacts with other 61.182 comma-separated background properties to form each background image layer. 61.183 - 61.184 61.185 <h3 id=the-background-clip><span class=secno>3.7. </span> The ‘<a 61.186 href="#background-clip"><code class=property>background-clip</code></a>’ 61.187 @@ -1210,7 +1207,6 @@ 61.188 images”</a> for how ‘<a href="#background-clip"><code 61.189 class=css>background-clip</code></a>’ interacts with other 61.190 comma-separated background properties to form each background image layer. 61.191 - 61.192 61.193 <h3 id=the-background-origin><span class=secno>3.8. </span> The ‘<a 61.194 href="#background-origin"><code 61.195 @@ -1309,7 +1305,6 @@ 61.196 images”</a> for how ‘<a href="#background-origin"><code 61.197 class=css>background-origin</code></a>’ interacts with other 61.198 comma-separated background properties to form each background image layer. 61.199 - 61.200 61.201 <h3 id=the-background-size><span class=secno>3.9. </span> The ‘<a 61.202 href="#background-size"><code class=property>background-size</code></a>’ 61.203 @@ -1522,7 +1517,6 @@ 61.204 times in the background height. The width is the approximately the width 61.205 that correspond to a 4em height at the original aspect ratio: scaled 61.206 slightly so that it fits a whole number of times in the background width. 61.207 - 61.208 61.209 <pre> 61.210 <!-- -->div { 61.211 @@ -1539,7 +1533,6 @@ 61.212 images”</a> for how ‘<a href="#background-size"><code 61.213 class=property>background-size</code></a>’ interacts with other 61.214 comma-separated background properties to form each background image layer. 61.215 - 61.216 61.217 <h3 id=the-background><span class=secno>3.10. </span> The ‘<a 61.218 href="#background"><code class=property>background</code></a>’ shorthand 61.219 @@ -1972,7 +1965,6 @@ 61.220 <th>Value: 61.221 61.222 <td><a href="#ltborder-stylegt"><var><border-style></var></a>{1,4} 61.223 - 61.224 61.225 <tr> 61.226 <th>Initial: 61.227 @@ -2161,7 +2153,6 @@ 61.228 <th>Value: 61.229 61.230 <td><a href="#ltborder-widthgt"><var><border-width></var></a>{1,4} 61.231 - 61.232 61.233 <tr> 61.234 <th>Initial: 61.235 @@ -2459,7 +2450,6 @@ 61.236 61.237 <td>[ <var><length></var> | <var><percentage></var> ]{1,4} [ 61.238 / [ <var><length></var> | <var><percentage></var> ]{1,4} ]? 61.239 - 61.240 61.241 <tr> 61.242 <th>Initial: 61.243 @@ -2573,7 +2563,6 @@ 61.244 <p class=caption>The effect of a rounded corner when the two borders it 61.245 connects are of unequal thickness (left) and the effect of a rounded 61.246 corner on borders that are thicker than the radius of the corner (right). 61.247 - 61.248 </div> 61.249 61.250 <h3 id=corner-clipping><span class=secno>5.3. </span> Corner Clipping</h3> 61.251 @@ -2766,7 +2755,7 @@ 61.252 <tr> 61.253 <th>Initial: 61.254 61.255 - <td>round 61.256 + <td>curve 61.257 61.258 <tr> 61.259 <th>Applies to: 61.260 @@ -2936,7 +2925,7 @@ 61.261 <p>This shows a more complicated example, demonstrating how the border 61.262 image corresponds to the fallback border-style but can also extend beyond 61.263 the border area. The border image is a wavy green border with an extended 61.264 - corner effect:</p> 61.265 + corner effect: 61.266 61.267 <div class=figure> 61.268 <p><img 61.269 @@ -2947,11 +2936,11 @@ 61.270 class=property>border-image-source</code></a>’ image, with the four 61.271 ‘<a href="#border-image-slice"><code 61.272 class=property>border-image-slice</code></a>’ cuts at 124px dividing 61.273 - the image into nine parts.</p> 61.274 + the image into nine parts. 61.275 </div> 61.276 61.277 <p>The rest of the border properties then interact to lay out the tiles as 61.278 - follows:</p> 61.279 + follows: 61.280 61.281 <div class=figure> 61.282 <p><img 61.283 @@ -2960,7 +2949,7 @@ 61.284 61.285 <p class=caption>Diagram of all border-image properties and how they 61.286 interact, and showing the rendering with and without the border-image in 61.287 - effect.</p> 61.288 + effect. 61.289 </div> 61.290 61.291 <p>Here, even though the border-width is 12px, the ‘<a 61.292 @@ -2976,7 +2965,7 @@ 61.293 <p>Notice that the ‘<a href="#border"><code 61.294 class=property>border</code></a>’ shorthand resets ‘<a 61.295 href="#border-image"><code class=property>border-image</code></a>’. 61.296 - This makes it easy to turn off or reset all border effects:</p> 61.297 + This makes it easy to turn off or reset all border effects: 61.298 61.299 <pre> 61.300 <!-- -->.notebox { 61.301 @@ -3207,7 +3196,6 @@ 61.302 <th>Computed value: 61.303 61.304 <td>all <var><length></var>s made absolute, otherwise as specified 61.305 - 61.306 </table> 61.307 61.308 <p>The border image is drawn inside an area called the <a 61.309 @@ -3313,7 +3301,6 @@ 61.310 <th>Computed value: 61.311 61.312 <td>all <var><length></var>s made absolute, otherwise as specified 61.313 - 61.314 </table> 61.315 61.316 <p>The values specify the amount by which the <dfn 61.317 @@ -3454,7 +3441,7 @@ 61.318 width is not scaled. The height of the middle image is scaled by the 61.319 same factor as the left image unless that factor is zero or infinity, 61.320 in which case the scaling factor of the right image is substituted, 61.321 - and failing that, the height is not scaled.</p> 61.322 + and failing that, the height is not scaled. 61.323 </ul> 61.324 61.325 <li>Scale to ‘<a href="#border-image-repeat"><code 61.326 @@ -3675,7 +3662,7 @@ 61.327 (including any justification, bidi reordering, page breaks, etc.), all 61.328 the element's boxes are taken and put one after the other in visual 61.329 order. The background is applied to the bounding box of this composite 61.330 - box and then the boxes are put back, with their share of the background.</p> 61.331 + box and then the boxes are put back, with their share of the background. 61.332 61.333 <p>For boxes broken across lines, first boxes on the same line are 61.334 connected in visual order. Then boxes on subsequent lines are ordered 61.335 @@ -3685,7 +3672,7 @@ 61.336 the first box is the leftmost box on the first line and boxes from 61.337 subsequent lines are put to the right of it. In a right-to-left 61.338 containing block, the first box is the rightmost on the first line and 61.339 - subsequent boxes are put to the left of it.</p> 61.340 + subsequent boxes are put to the left of it. 61.341 61.342 <p>For boxes broken across columns, the columns are treated as one 61.343 continuous element, as if the column boxes were glued together in the 61.344 @@ -3859,11 +3846,11 @@ 61.345 61.346 <div class=example> 61.347 <p>The example below demonstrates the effects of spread and blur on the 61.348 - shadow:</p> 61.349 + shadow: 61.350 61.351 <p class=figure> <img 61.352 alt="An example of spread and blur on a box with two round corners and two square ones" 61.353 - src=spread-blur.png></p> 61.354 + src=spread-blur.png> 61.355 </div> 61.356 61.357 <p>The shadow effects are applied front-to-back: the first shadow is on top 61.358 @@ -3884,7 +3871,7 @@ 61.359 61.360 <div class=example> 61.361 <p>Below are some examples of an orange box with a blue border being given 61.362 - a drop shadow.</p> 61.363 + a drop shadow. 61.364 61.365 <table class=data id=box-shadow-samples> 61.366 <tbody> 61.367 @@ -4008,7 +3995,6 @@ 61.368 <th>Value: 61.369 61.370 <td>normal | [ <length> | <percentage> | <fraction> ]+ 61.371 - 61.372 61.373 <tr> 61.374 <th>Initial: 61.375 @@ -4078,10 +4064,10 @@ 61.376 61.377 <div 61.378 style="position: relative; width: 250px; height: 150px; background: white;"> 61.379 - 61.380 + 61.381 <div 61.382 style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px"> 61.383 - 61.384 + 61.385 <div 61.386 style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 170px"></div> 61.387 61.388 @@ -4100,10 +4086,10 @@ 61.389 61.390 <div 61.391 style="position: relative; width: 250px; height: 150px; background: white;"> 61.392 - 61.393 + 61.394 <div 61.395 style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px"> 61.396 - 61.397 + 61.398 <div 61.399 style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 170px"></div> 61.400 61.401 @@ -4125,10 +4111,10 @@ 61.402 61.403 <div 61.404 style="position: relative; width: 250px; height: 150px; background: white;"> 61.405 - 61.406 + 61.407 <div 61.408 style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px"> 61.409 - 61.410 + 61.411 <div 61.412 style="position: absolute; background: white; left: -5px; top: -5px; height: 10px; width: 15px"></div> 61.413 61.414 @@ -4154,10 +4140,10 @@ 61.415 61.416 <div 61.417 style="position: relative; width: 250px; height: 150px; background: white;"> 61.418 - 61.419 + 61.420 <div 61.421 style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px"> 61.422 - 61.423 + 61.424 <div 61.425 style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 170px"></div> 61.426 61.427 @@ -4177,10 +4163,10 @@ 61.428 61.429 <div 61.430 style="position: relative; width: 250px; height: 150px; background: white;"> 61.431 - 61.432 + 61.433 <div 61.434 style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px"> 61.435 - 61.436 + 61.437 <div 61.438 style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 200px"></div> 61.439 61.440 @@ -4198,10 +4184,10 @@ 61.441 61.442 <div 61.443 style="position: relative; width: 250px; height: 150px; background: white;"> 61.444 - 61.445 + 61.446 <div 61.447 style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px"> 61.448 - 61.449 + 61.450 <div 61.451 style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 200px"></div> 61.452 61.453 @@ -4245,7 +4231,7 @@ 61.454 61.455 <div 61.456 style="position: relative; width: 100px; background: white; padding: 20px"> 61.457 - 61.458 + 61.459 <div style="border: 2px solid black; height: 40px"></div> 61.460 61.461 <div 61.462 @@ -4283,7 +4269,7 @@ 61.463 61.464 <div 61.465 style="position: relative; width: 105px; background: white; padding: 20px"> 61.466 - 61.467 + 61.468 <div style="border: 2px solid black; height: 40px"></div> 61.469 61.470 <div 61.471 @@ -4323,7 +4309,7 @@ 61.472 61.473 <div 61.474 style="position: relative; width: 192px; background: white; padding: 40px"> 61.475 - 61.476 + 61.477 <div style="border: 4px solid black; height: 40px"></div> 61.478 61.479 <div 61.480 @@ -4360,7 +4346,7 @@ 61.481 61.482 <div 61.483 style="position: relative; width: 192px; background: white; padding: 40px"> 61.484 - 61.485 + 61.486 <div style="border: 4px solid black; height: 40px"></div> 61.487 61.488 <div 61.489 @@ -4396,7 +4382,7 @@ 61.490 61.491 <div 61.492 style="position: relative; width: 190px; background: white; padding: 40px"> 61.493 - 61.494 + 61.495 <div style="border: 4px solid black; border-top: none; height: 40px"></div> 61.496 61.497 <div 61.498 @@ -4443,7 +4429,7 @@ 61.499 61.500 <div 61.501 style="position: relative; width: 440px; background: white; padding: 40px"> 61.502 - 61.503 + 61.504 <div style="border: 4px solid black; border-top: none; height: 40px"></div> 61.505 61.506 <div 61.507 @@ -4516,7 +4502,7 @@ 61.508 Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June 61.509 2011. W3C Recommendation. URL: <a 61.510 href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> 61.511 - </dd> 61.512 + </dd> 61.513 <!----> 61.514 61.515 <dt id=HTML401>[HTML401] 61.516 @@ -4525,7 +4511,7 @@ 61.517 href="http://www.w3.org/TR/1999/REC-html401-19991224"><cite>HTML 4.01 61.518 Specification.</cite></a> 24 December 1999. W3C Recommendation. URL: <a 61.519 href="http://www.w3.org/TR/1999/REC-html401-19991224">http://www.w3.org/TR/1999/REC-html401-19991224</a> 61.520 - </dd> 61.521 + </dd> 61.522 <!----> 61.523 61.524 <dt id=XHTML11>[XHTML11] 61.525 @@ -4534,7 +4520,7 @@ 61.526 href="http://www.w3.org/TR/2001/REC-xhtml11-20010531"><cite>XHTML™ 1.1 61.527 - Module-based XHTML.</cite></a> 31 May 2001. W3C Recommendation. URL: <a 61.528 href="http://www.w3.org/TR/2001/REC-xhtml11-20010531">http://www.w3.org/TR/2001/REC-xhtml11-20010531</a> 61.529 - </dd> 61.530 + </dd> 61.531 <!----> 61.532 </dl> 61.533 <!--end-normative--> 61.534 @@ -4554,7 +4540,7 @@ 61.535 Sheets (CSS1) Level 1 Specification.</cite></a> 11 April 2008. W3C 61.536 Recommendation. URL: <a 61.537 href="http://www.w3.org/TR/2008/REC-CSS1-20080411">http://www.w3.org/TR/2008/REC-CSS1-20080411</a> 61.538 - </dd> 61.539 + </dd> 61.540 <!----> 61.541 61.542 <dt id=CSS3GRID>[CSS3GRID] 61.543 @@ -4564,7 +4550,7 @@ 61.544 Positioning Module Level 3.</cite></a> 5 September 2007. W3C Working 61.545 Draft. (Work in progress.) URL: <a 61.546 href="http://www.w3.org/TR/2007/WD-css3-grid-20070905">http://www.w3.org/TR/2007/WD-css3-grid-20070905</a> 61.547 - </dd> 61.548 + </dd> 61.549 <!----> 61.550 61.551 <dt id=WCAG20>[WCAG20] 61.552 @@ -4574,7 +4560,7 @@ 61.553 Accessibility Guidelines (WCAG) 2.0.</cite></a> 11 December 2008. W3C 61.554 Recommendation. URL: <a 61.555 href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/">http://www.w3.org/TR/2008/REC-WCAG20-20081211/</a> 61.556 - </dd> 61.557 + </dd> 61.558 <!----> 61.559 </dl> 61.560 <!--end-informative--> 61.561 @@ -4601,21 +4587,6 @@ 61.562 61.563 <tbody> 61.564 <tr> 61.565 - <th><a class=property href="#background">background</a> 61.566 - 61.567 - <td>[ <bg-layer> , ]* <final-bg-layer> 61.568 - 61.569 - <td>see individual properties 61.570 - 61.571 - <td>all elements 61.572 - 61.573 - <td>no 61.574 - 61.575 - <td>see individual properties 61.576 - 61.577 - <td>visual 61.578 - 61.579 - <tr> 61.580 <th><a class=property 61.581 href="#background-attachment">background-attachment</a> 61.582 61.583 @@ -4739,17 +4710,17 @@ 61.584 <td>visual 61.585 61.586 <tr> 61.587 - <th><a class=property href="#border">border</a> 61.588 - 61.589 - <td><border-width> || <border-style> || <color> 61.590 - 61.591 - <td>See individual properties 61.592 + <th><a class=property href="#background">background</a> 61.593 + 61.594 + <td>[ <bg-layer> , ]* <final-bg-layer> 61.595 + 61.596 + <td>see individual properties 61.597 61.598 <td>all elements 61.599 61.600 <td>no 61.601 61.602 - <td>N/A 61.603 + <td>see individual properties 61.604 61.605 <td>visual 61.606 61.607 @@ -4793,7 +4764,7 @@ 61.608 61.609 <td>curve | bevel | scoop | notch 61.610 61.611 - <td>round 61.612 + <td>curve 61.613 61.614 <td>all elements, except table element when ‘border-collapse’ is 61.615 ‘collapse’ 61.616 @@ -4805,6 +4776,73 @@ 61.617 <td>visual 61.618 61.619 <tr> 61.620 + <th><a class=property 61.621 + href="#border-image-outset">border-image-outset</a> 61.622 + 61.623 + <td>[ <length> | <number> ]{1,4} 61.624 + 61.625 + <td>0 61.626 + 61.627 + <td>All elements, except internal table elements when 61.628 + ‘border-collapse’ is ‘collapse’ 61.629 + 61.630 + <td>no 61.631 + 61.632 + <td>N/A 61.633 + 61.634 + <td>visual 61.635 + 61.636 + <tr> 61.637 + <th><a class=property 61.638 + href="#border-image-repeat">border-image-repeat</a> 61.639 + 61.640 + <td>[ stretch | repeat | round | space ]{1,2} 61.641 + 61.642 + <td>stretch 61.643 + 61.644 + <td>All elements, except internal table elements when 61.645 + ‘border-collapse’ is ‘collapse’ 61.646 + 61.647 + <td>no 61.648 + 61.649 + <td>N/A 61.650 + 61.651 + <td>visual 61.652 + 61.653 + <tr> 61.654 + <th><a class=property href="#border-image-slice">border-image-slice</a> 61.655 + 61.656 + <td>[<number> | <percentage>]{1,4} && fill? 61.657 + 61.658 + <td>100% 61.659 + 61.660 + <td>All elements, except internal table elements when 61.661 + ‘border-collapse’ is ‘collapse’ 61.662 + 61.663 + <td>no 61.664 + 61.665 + <td>refer to size of the border image 61.666 + 61.667 + <td>visual 61.668 + 61.669 + <tr> 61.670 + <th><a class=property 61.671 + href="#border-image-source">border-image-source</a> 61.672 + 61.673 + <td>none | <image> 61.674 + 61.675 + <td>none 61.676 + 61.677 + <td>All elements, except internal table elements when 61.678 + ‘border-collapse’ is ‘collapse’ 61.679 + 61.680 + <td>no 61.681 + 61.682 + <td>N/A 61.683 + 61.684 + <td>visual 61.685 + 61.686 + <tr> 61.687 <th><a class=property href="#border-image">border-image</a> 61.688 61.689 <td><‘border-image-source’> || 61.690 @@ -4823,73 +4861,6 @@ 61.691 <td>visual 61.692 61.693 <tr> 61.694 - <th><a class=property 61.695 - href="#border-image-outset">border-image-outset</a> 61.696 - 61.697 - <td>[ <length> | <number> ]{1,4} 61.698 - 61.699 - <td>0 61.700 - 61.701 - <td>All elements, except internal table elements when 61.702 - ‘border-collapse’ is ‘collapse’ 61.703 - 61.704 - <td>no 61.705 - 61.706 - <td>N/A 61.707 - 61.708 - <td>visual 61.709 - 61.710 - <tr> 61.711 - <th><a class=property 61.712 - href="#border-image-repeat">border-image-repeat</a> 61.713 - 61.714 - <td>[ stretch | repeat | round | space ]{1,2} 61.715 - 61.716 - <td>stretch 61.717 - 61.718 - <td>All elements, except internal table elements when 61.719 - ‘border-collapse’ is ‘collapse’ 61.720 - 61.721 - <td>no 61.722 - 61.723 - <td>N/A 61.724 - 61.725 - <td>visual 61.726 - 61.727 - <tr> 61.728 - <th><a class=property href="#border-image-slice">border-image-slice</a> 61.729 - 61.730 - <td>[<number> | <percentage>]{1,4} && fill? 61.731 - 61.732 - <td>100% 61.733 - 61.734 - <td>All elements, except internal table elements when 61.735 - ‘border-collapse’ is ‘collapse’ 61.736 - 61.737 - <td>no 61.738 - 61.739 - <td>refer to size of the border image 61.740 - 61.741 - <td>visual 61.742 - 61.743 - <tr> 61.744 - <th><a class=property 61.745 - href="#border-image-source">border-image-source</a> 61.746 - 61.747 - <td>none | <image> 61.748 - 61.749 - <td>none 61.750 - 61.751 - <td>All elements, except internal table elements when 61.752 - ‘border-collapse’ is ‘collapse’ 61.753 - 61.754 - <td>no 61.755 - 61.756 - <td>N/A 61.757 - 61.758 - <td>visual 61.759 - 61.760 - <tr> 61.761 <th><a class=property href="#border-image-width">border-image-width</a> 61.762 61.763 <td>[ <length> | <percentage> | <number> | auto ]{1,4} 61.764 @@ -4923,6 +4894,21 @@ 61.765 <td>visual 61.766 61.767 <tr> 61.768 + <th><a class=property href="#border">border</a> 61.769 + 61.770 + <td><border-width> || <border-style> || <color> 61.771 + 61.772 + <td>See individual properties 61.773 + 61.774 + <td>all elements 61.775 + 61.776 + <td>no 61.777 + 61.778 + <td>N/A 61.779 + 61.780 + <td>visual 61.781 + 61.782 + <tr> 61.783 <th><a class=property href="#border-style">border-style</a> 61.784 61.785 <td><border-style>{1,4} 61.786 @@ -4938,24 +4924,6 @@ 61.787 <td>visual 61.788 61.789 <tr> 61.790 - <th><a class=property href="#border-top">border-top</a>, <a 61.791 - class=property href="#border-right">border-right</a>, <a class=property 61.792 - href="#border-bottom">border-bottom</a>, <a class=property 61.793 - href="#border-left">border-left</a> 61.794 - 61.795 - <td><border-width> || <border-style> || <color> 61.796 - 61.797 - <td>See individual properties 61.798 - 61.799 - <td>all elements 61.800 - 61.801 - <td>no 61.802 - 61.803 - <td>N/A 61.804 - 61.805 - <td>visual 61.806 - 61.807 - <tr> 61.808 <th><a class=property href="#border-top-color">border-top-color </a>, <a 61.809 class=property href="#border-right-color">border-right-color</a>, <a 61.810 class=property href="#border-bottom-color">border-bottom-color</a>, <a 61.811 @@ -4997,6 +4965,24 @@ 61.812 <td>visual 61.813 61.814 <tr> 61.815 + <th><a class=property href="#border-top">border-top</a>, <a 61.816 + class=property href="#border-right">border-right</a>, <a class=property 61.817 + href="#border-bottom">border-bottom</a>, <a class=property 61.818 + href="#border-left">border-left</a> 61.819 + 61.820 + <td><border-width> || <border-style> || <color> 61.821 + 61.822 + <td>See individual properties 61.823 + 61.824 + <td>all elements 61.825 + 61.826 + <td>no 61.827 + 61.828 + <td>N/A 61.829 + 61.830 + <td>visual 61.831 + 61.832 + <tr> 61.833 <th><a class=property href="#border-top-style">border-top-style</a>, <a 61.834 class=property href="#border-right-style">border-right-style</a>, <a 61.835 class=property href="#border-bottom-style">border-bottom-style</a>, <a 61.836 @@ -5190,13 +5176,11 @@ 61.837 class=property>background-clip</code></a>’ value, <a 61.838 href="#border-box" 61.839 title="''border-box'', 'background-clip' value"><strong>3.7.</strong></a> 61.840 - 61.841 61.842 <li>‘<a href="#background-origin"><code 61.843 class=property>background-origin</code></a>’ value, <a 61.844 href="#border-box0" 61.845 title="''border-box'', 'background-origin' value"><strong>3.8.</strong></a> 61.846 - 61.847 </ul> 61.848 61.849 <li>border-clip, <a href="#border-clip" 61.850 @@ -5306,7 +5290,6 @@ 61.851 class=property>background-position</code></a>’ value, <a 61.852 href="#bottom" 61.853 title="''bottom'', 'background-position' value"><strong>3.6.</strong></a> 61.854 - 61.855 </ul> 61.856 61.857 <li><a href="#ltboxgt"><var><box></var></a>, <a href="#ltboxgt" 61.858 @@ -5324,7 +5307,6 @@ 61.859 class=property>background-position</code></a>’ value, <a 61.860 href="#center" 61.861 title="''center'', 'background-position' value"><strong>3.6.</strong></a> 61.862 - 61.863 </ul> 61.864 61.865 <li>‘<a href="#clone"><code class=css>clone</code></a>’, <a 61.866 @@ -5341,13 +5323,12 @@ 61.867 61.868 <li>‘<a href="#content-box0"><code class=css>content-box</code></a>’, 61.869 <a href="#content-box0" title="''content-box''"><strong>3.8.</strong></a> 61.870 - 61.871 + 61.872 <ul> 61.873 <li>‘<a href="#background-clip"><code 61.874 class=property>background-clip</code></a>’ value, <a 61.875 href="#content-box" 61.876 title="''content-box'', 'background-clip' value"><strong>3.7.</strong></a> 61.877 - 61.878 </ul> 61.879 61.880 <li>‘<a href="#cover"><code class=css>cover</code></a>’, <a 61.881 @@ -5393,7 +5374,6 @@ 61.882 <li>‘<a href="#background-position"><code 61.883 class=property>background-position</code></a>’ value, <a href="#left" 61.884 title="''left'', 'background-position' value"><strong>3.6.</strong></a> 61.885 - 61.886 </ul> 61.887 61.888 <li>‘<a href="#local0"><code class=css>local</code></a>’, <a 61.889 @@ -5410,7 +5390,6 @@ 61.890 class=property>border-image-source</code></a>’ value, <a 61.891 href="#none1" 61.892 title="''none'', 'border-image-source' value"><strong>6.1.</strong></a> 61.893 - 61.894 61.895 <li>‘<a href="#border-style"><code 61.896 class=property>border-style</code></a>’ value, <a href="#none0" 61.897 @@ -5423,7 +5402,6 @@ 61.898 class=property>background-repeat</code></a>’ value, <a 61.899 href="#no-repeat" 61.900 title="''no-repeat'', 'background-repeat' value"><strong>3.4.</strong></a> 61.901 - 61.902 </ul> 61.903 61.904 <li>‘<a href="#notch"><code class=css>notch</code></a>’, <a 61.905 @@ -5438,13 +5416,11 @@ 61.906 class=property>background-clip</code></a>’ value, <a 61.907 href="#padding-box" 61.908 title="''padding-box'', 'background-clip' value"><strong>3.7.</strong></a> 61.909 - 61.910 61.911 <li>‘<a href="#background-origin"><code 61.912 class=property>background-origin</code></a>’ value, <a 61.913 href="#padding-box0" 61.914 title="''padding-box'', 'background-origin' value"><strong>3.8.</strong></a> 61.915 - 61.916 </ul> 61.917 61.918 <li><a href="#ltpositiongt"><var><position></var></a>, <a 61.919 @@ -5455,13 +5431,11 @@ 61.920 <li>‘<a href="#background-repeat"><code 61.921 class=property>background-repeat</code></a>’ value, <a href="#repeat" 61.922 title="''repeat'', 'background-repeat' value"><strong>3.4.</strong></a> 61.923 - 61.924 61.925 <li>‘<a href="#border-image-repeat"><code 61.926 class=property>border-image-repeat</code></a>’ value, <a 61.927 href="#repeat0" 61.928 title="''repeat'', 'border-image-repeat' value"><strong>6.5.</strong></a> 61.929 - 61.930 </ul> 61.931 61.932 <li><a href="#ltrepeat-stylegt"><var><repeat-style></var></a>, <a 61.933 @@ -5483,7 +5457,6 @@ 61.934 class=property>background-position</code></a>’ value, <a 61.935 href="#right" 61.936 title="''right'', 'background-position' value"><strong>3.6.</strong></a> 61.937 - 61.938 </ul> 61.939 61.940 <li>‘<code class=css>round</code>’ 61.941 @@ -5496,7 +5469,6 @@ 61.942 class=property>border-image-repeat</code></a>’ value, <a 61.943 href="#round0" 61.944 title="''round'', 'border-image-repeat' value"><strong>6.5.</strong></a> 61.945 - 61.946 </ul> 61.947 61.948 <li>‘<a href="#scoop"><code class=css>scoop</code></a>’, <a 61.949 @@ -5525,7 +5497,6 @@ 61.950 class=property>border-image-repeat</code></a>’ value, <a 61.951 href="#space0" 61.952 title="''space'', 'border-image-repeat' value"><strong>6.5.</strong></a> 61.953 - 61.954 </ul> 61.955 61.956 <li>‘<a href="#stretch"><code class=css>stretch</code></a>’, <a
62.1 --- a/css4-background/Overview.src.html Mon Oct 22 00:33:44 2012 +0200 62.2 +++ b/css4-background/Overview.src.html Mon Oct 22 00:41:17 2012 +0200 62.3 @@ -60,19 +60,13 @@ 62.4 62.5 <h2 class="no-num no-toc" id="status"> 62.6 Status of this document</h2> 62.7 + 62.8 +<p style="color: red; background: yellow; border: solid thick red;"> 62.9 +<strong>This draft is not actively-maintained at the moment. 62.10 +Comments are welcome, but please refer to 62.11 +<a href="http://www.w3.org/TR/css3-background/">CSS3 Backgrounds and Borders</a> 62.12 +if you are implementing something.</strong> 62.13 <!--status--> 62.14 - <!-- 62.15 - <p>The following features are at-risk and may be dropped at the 62.16 - end of the CR period if there has not been enough interest from 62.17 - implementers: [...] 62.18 - --> 62.19 - 62.20 - <p>The CSS WG maintains an <a href="http://www.w3.org/Style/CSS/Tracker/products/11">issues 62.21 - list</a> for this module. A <a href="http://www.w3.org/Style/CSS/Test/">test 62.22 - suite</a> and implementation report for CSS Backgrounds and Borders Level 4 62.23 - will be developed during the Candidate Recommendation phase, which will last 62.24 - a minimum of three months<!--, i.e., at least until 15 May 2011-->. See the 62.25 - section <a href="#exit">“CR exit criteria”</a> for more details. 62.26 62.27 <h2 class="no-num no-toc" id="contents">Table of contents</h2> 62.28 <!--toc--> 62.29 @@ -2022,7 +2016,7 @@ 62.30 <td>curve | bevel | scoop | notch 62.31 <tr> 62.32 <th>Initial: 62.33 - <td>round 62.34 + <td>curve 62.35 <tr> 62.36 <th>Applies to: 62.37 <td>all elements, except table element when 'border-collapse' is
63.1 --- a/css4-images/Overview.html Mon Oct 22 00:33:44 2012 +0200 63.2 +++ b/css4-images/Overview.html Mon Oct 22 00:41:17 2012 +0200 63.3 @@ -6,17 +6,17 @@ 63.4 <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 63.5 <title>CSS Image Values and Replaced Content Module Level 4</title> 63.6 63.7 - <link href="http://purl.org/dc/terms/" rel=schema.DC> 63.8 + <link href="http://purl.org/dc/terms/" rel=schema.dcterms> 63.9 + <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 63.10 + rel=dcterms.rights> 63.11 <meta content="CSS Image Values and Replaced Content Module Level 4" 63.12 - name=DC.title> 63.13 - <meta content=text name=DC.type> 63.14 - <meta content=2012-09-21 name=DC.issued> 63.15 - <meta content="http://dev.w3.org/csswg/css4-images/" name=DC.creator> 63.16 - <meta content=W3C name=DC.publisher> 63.17 - <meta content="http://www.w3.org/TR/2012/ED-css4-images-20120921/" 63.18 - name=DC.identifier> 63.19 - <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 63.20 - rel=DC.rights> 63.21 + name=dcterms.title> 63.22 + <meta content=text name=dcterms.type> 63.23 + <meta content=2012-10-18 name=dcterms.issued> 63.24 + <meta content="http://dev.w3.org/csswg/css4-images/" name=dcterms.creator> 63.25 + <meta content=W3C name=dcterms.publisher> 63.26 + <meta content="http://www.w3.org/TR/2012/ED-css4-images-20121018/" 63.27 + name=dcterms.identifier> 63.28 <link href="../default.css" rel=stylesheet type="text/css"> 63.29 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet 63.30 type="text/css"> 63.31 @@ -28,7 +28,7 @@ 63.32 63.33 <h1>CSS Image Values and Replaced Content Module Level 4</h1> 63.34 63.35 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 21 September 63.36 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 18 October 63.37 2012</h2> 63.38 63.39 <dl> 63.40 @@ -36,7 +36,7 @@ 63.41 63.42 <dd><a 63.43 href="http://dev.w3.org/csswg/css4-images/">http://dev.w3.org/csswg/css4-images/</a> 63.44 - <!-- <dd><a href="http://www.w3.org/TR/2012/ED-css4-images-20120921/">http://www.w3.org/TR/2012/WD-css4-images-20120921/</a>--> 63.45 + <!-- <dd><a href="http://www.w3.org/TR/2012/ED-css4-images-20121018/">http://www.w3.org/TR/2012/WD-css4-images-20121018/</a>--> 63.46 63.47 <dt>Latest Version: 63.48 63.49 @@ -290,24 +290,27 @@ 63.50 <li><a href="#serialization"><span class=secno>8. </span> 63.51 Serialization</a> 63.52 63.53 - <li><a href="#conformance"><span class=secno>9. </span> Conformance</a> 63.54 + <li><a href="#changes"><span class=secno>9. </span> Changes since Images 63.55 + 3</a> 63.56 + 63.57 + <li><a href="#conformance"><span class=secno>10. </span> Conformance</a> 63.58 <ul class=toc> 63.59 - <li><a href="#conventions"><span class=secno>9.1. </span> Document 63.60 + <li><a href="#conventions"><span class=secno>10.1. </span> Document 63.61 Conventions</a> 63.62 63.63 - <li><a href="#conformance-classes"><span class=secno>9.2. </span> 63.64 + <li><a href="#conformance-classes"><span class=secno>10.2. </span> 63.65 Conformance Classes</a> 63.66 63.67 - <li><a href="#partial"><span class=secno>9.3. </span> Partial 63.68 + <li><a href="#partial"><span class=secno>10.3. </span> Partial 63.69 Implementations</a> 63.70 63.71 - <li><a href="#experimental"><span class=secno>9.4. </span> Experimental 63.72 + <li><a href="#experimental"><span class=secno>10.4. </span> Experimental 63.73 Implementations</a> 63.74 63.75 - <li><a href="#testing"><span class=secno>9.5. </span>Non-Experimental 63.76 + <li><a href="#testing"><span class=secno>10.5. </span>Non-Experimental 63.77 Implementations</a> 63.78 63.79 - <li><a href="#cr-exit-criteria"><span class=secno>9.6. </span> CR Exit 63.80 + <li><a href="#cr-exit-criteria"><span class=secno>10.6. </span> CR Exit 63.81 Criteria</a> 63.82 </ul> 63.83 63.84 @@ -392,13 +395,9 @@ 63.85 63.86 <li>Logical keywords for specifying linear gradient direction. 63.87 63.88 - <li>Conical gradients 63.89 - 63.90 <li>More interpolation modes for gradients: <a 63.91 href="http://lists.w3.org/Archives/Public/www-style/2012Jan/0635.html">http://lists.w3.org/Archives/Public/www-style/2012Jan/0635.html</a> 63.92 63.93 - <li>How to transition/animate gradients 63.94 - 63.95 <li>Ability to reference an SVG paint server via url (maybe as 63.96 element(<string>)?) 63.97 </ol> 63.98 @@ -1454,8 +1453,7 @@ 63.99 href="#side-or-corner"><var><side-or-corner></var></a> ] ,]? 63.100 <!-- 63.101 --> <a 63.102 - href="#color-stop-type"><var><color-stop></var></a>[, <a 63.103 - href="#color-stop-type"><var><color-stop></var></a>]+ 63.104 + href="#ltcolor-stop-list"><var><color-stop-list></var></a> 63.105 <!-- 63.106 -->) 63.107 <!-- 63.108 @@ -1469,7 +1467,7 @@ 63.109 and determines how color-stops are positioned. It may be omitted; if so, 63.110 it defaults to ‘<code class=css>to bottom</code>’. 63.111 63.112 - <p> The <a href="#gradient-line"><i title="gradient line">gradient 63.113 + <p> The <a href="#gradient-line0"><i title="gradient line">gradient 63.114 line's</i></a> direction may be specified in two ways: 63.115 63.116 <dl> 63.117 @@ -1485,14 +1483,14 @@ 63.118 <p> If the argument is ‘<code class=css>to top</code>’, ‘<code 63.119 class=css>to right</code>’, ‘<code class=css>to bottom</code>’, or 63.120 ‘<code class=css>to left</code>’, the angle of the <a 63.121 - href="#gradient-line"><i>gradient line</i></a> is ‘<code 63.122 + href="#gradient-line0"><i>gradient line</i></a> is ‘<code 63.123 class=css>0deg</code>’, ‘<code class=css>90deg</code>’, ‘<code 63.124 class=css>180deg</code>’, or ‘<code class=css>270deg</code>’, 63.125 respectively. 63.126 63.127 <p> If the argument instead specifies a corner of the box such as 63.128 ‘<code class=css>to top left</code>’, the <a 63.129 - href="#gradient-line"><i>gradient line</i></a> must be angled such that 63.130 + href="#gradient-line0"><i>gradient line</i></a> must be angled such that 63.131 it points into the same quadrant as the specified corner, and is 63.132 perpendicular to a line intersecting the two neighboring corners of the 63.133 <a href="#gradient-box"><i>gradient box</i></a>. <span class=note>This 63.134 @@ -1502,9 +1500,9 @@ 63.135 63.136 <p> Starting from the center of the <a href="#gradient-box"><i>gradient 63.137 box</i></a>, extend a line at the specified angle in both directions. The 63.138 - ending point is the point on the <a href="#gradient-line"><i>gradient 63.139 + ending point is the point on the <a href="#gradient-line0"><i>gradient 63.140 line</i></a> where a line drawn perpendicular to the <a 63.141 - href="#gradient-line"><i>gradient line</i></a> would intersect the corner 63.142 + href="#gradient-line0"><i>gradient line</i></a> would intersect the corner 63.143 of the <a href="#gradient-box"><i>gradient box</i></a> in the specified 63.144 direction. The starting point is determined identically, but in the 63.145 opposite direction. 63.146 @@ -1519,9 +1517,9 @@ 63.147 src="images/gradient-diagram.png" 63.148 style="float: right; margin-left: 1em;"> 63.149 <p> This example illustrates visually how to calculate the <a 63.150 - href="#gradient-line"><i>gradient line</i></a> from the rules above. 63.151 + href="#gradient-line0"><i>gradient line</i></a> from the rules above. 63.152 This shows the starting and ending point of the <a 63.153 - href="#gradient-line"><i>gradient line</i></a>, long with the actual 63.154 + href="#gradient-line0"><i>gradient line</i></a>, long with the actual 63.155 gradient, produced by an element with ‘<code class=css>background: 63.156 linear-gradient(45deg, white, black);</code>’. 63.157 63.158 @@ -1534,9 +1532,9 @@ 63.159 </div> 63.160 63.161 <p> The gradient's color stops are typically placed between the starting 63.162 - point and ending point on the <a href="#gradient-line"><i>gradient 63.163 + point and ending point on the <a href="#gradient-line0"><i>gradient 63.164 line</i></a>, but this isn't required - the <a 63.165 - href="#gradient-line"><i>gradient line</i></a> extends infinitely in both 63.166 + href="#gradient-line0"><i>gradient line</i></a> extends infinitely in both 63.167 directions. The starting point and ending point are merely arbitrary 63.168 location markers - the starting point defines where 0%, 0px, etc are 63.169 located when specifying color-stops, and the ending point defines where 63.170 @@ -1545,8 +1543,8 @@ 63.171 63.172 <p> The color of the gradient at any point is determined by finding the 63.173 unique line passing through that point that is perpendicular to the <a 63.174 - href="#gradient-line"><i>gradient line</i></a>. The point's color is the 63.175 - color of the <a href="#gradient-line"><i>gradient line</i></a> at the 63.176 + href="#gradient-line0"><i>gradient line</i></a>. The point's color is the 63.177 + color of the <a href="#gradient-line0"><i>gradient line</i></a> at the 63.178 point where this line intersects it. 63.179 <!-- ====================================================================== --> 63.180 63.181 @@ -1577,7 +1575,7 @@ 63.182 <div class=example> 63.183 <p> This demonstrates the use of an angle in the gradient. Note that, 63.184 though the angle is not exactly the same as the angle between the 63.185 - corners, the <a href="#gradient-line"><i>gradient line</i></a> is still 63.186 + corners, the <a href="#gradient-line0"><i>gradient line</i></a> is still 63.187 sized so as to make the gradient yellow exactly at the upper-left corner, 63.188 and blue exactly at the lower-right corner. 63.189 63.190 @@ -1669,8 +1667,7 @@ 63.191 --> ]? 63.192 <!-- 63.193 --> <a 63.194 - href="#color-stop-type"><var><color-stop></var></a> [ , <a 63.195 - href="#color-stop-type"><var><color-stop></var></a> ]+ 63.196 + href="#ltcolor-stop-list"><var><color-stop-list></var></a> 63.197 <!-- 63.198 -->)</pre> 63.199 63.200 @@ -1832,9 +1829,7 @@ 63.201 <!-- 63.202 --> ]? 63.203 <!-- 63.204 - --> <a 63.205 - href="#color-stop-type"><var><color-stop></var></a> [ , <a 63.206 - href="#color-stop-type"><var><color-stop></var></a> ]+ 63.207 + --> <var><color-stop></var> [ , <var><color-stop></var> ]+ 63.208 <!-- 63.209 -->) 63.210 <!-- 63.211 @@ -1844,19 +1839,19 @@ 63.212 <h4 class=no-toc id=radial-color-stops><span class=secno>4.2.2. </span> 63.213 Placing Color Stops</h4> 63.214 63.215 - <p> Color-stops are placed on a <dfn id=gradient-ray>gradient ray</dfn>, 63.216 - similar to the <a href="#gradient-line"><i>gradient line</i></a> of linear 63.217 - gradients. The <a href="#gradient-ray"><i>gradient ray</i></a> is anchored 63.218 - at the center of the gradient and extends toward the right. The 0% 63.219 - location is at the start of the <a href="#gradient-ray"><i>gradient 63.220 - ray</i></a>, and the 100% location is on the point where the <a 63.221 - href="#gradient-ray"><i>gradient ray</i></a> intersects the <a 63.222 + <p> Color-stops are placed on a <a href="#gradient-line0"><i>gradient 63.223 + line</i></a>, similar to the <a href="#gradient-line0"><i>gradient 63.224 + line</i></a> of linear gradients. The <a 63.225 + href="#gradient-line0"><i>gradient line's</i></a> <i>start point</i> is at 63.226 + the center of the gradient, and it extends toward the right, with the <a 63.227 + href="#ending-point"><i>ending point</i></a> on the point where the <a 63.228 + href="#gradient-line0"><i>gradient line</i></a> intersects the <a 63.229 href="#ending-shape"><i>ending shape</i></a>. A color-stop can be placed 63.230 - at a negative location; though the negative region of the <a 63.231 - href="#gradient-ray"><i>gradient ray</i></a> is never directly consulted 63.232 - for rendering, color stops placed there can affect the color of 63.233 - non-negative locations on the <a href="#gradient-ray"><i>gradient 63.234 - ray</i></a> through interpolation or repetition (see <a 63.235 + at a location before 0%; though the negative region of the <a 63.236 + href="#gradient-line0"><i>gradient line</i></a> is never directly 63.237 + consulted for rendering, color stops placed there can affect the color of 63.238 + non-negative locations on the <a href="#gradient-line0"><i>gradient 63.239 + line</i></a> through interpolation or repetition (see <a 63.240 href="#repeating-gradients">repeating gradients</a>). For example, 63.241 ‘<code class=css>radial-gradient(red -50px, yellow 100px)</code>’ 63.242 produces an elliptical gradient that starts with a reddish-orange color in 63.243 @@ -1867,8 +1862,8 @@ 63.244 <p> The color of the gradient at any point is determined by first finding 63.245 the unique ellipse passing through that point with the same center, 63.246 orientation, and ratio between major and minor axises as the ending-shape. 63.247 - The point's color is then the color of the <a 63.248 - href="#gradient-ray"><i>gradient ray</i></a> at the location where this 63.249 + The point's color is then the color of the positive section of the <a 63.250 + href="#gradient-line0"><i>gradient line</i></a> at the location where this 63.251 ellipse intersects it. 63.252 63.253 <h4 class=no-toc id=degenerate-radials><span class=secno>4.2.3. </span> 63.254 @@ -2026,8 +2021,7 @@ 63.255 href="#position"><var><position></var></a> , ]? 63.256 <!-- 63.257 --> <a 63.258 - href="#angular-color-stop-type"><var><angular-color-stop></var></a> [ , <a 63.259 - href="#angular-color-stop-type"><var><angular-color-stop></var></a> ]+ 63.260 + href="#ltangular-color-stop-list"><var><angular-color-stop-list></var></a> 63.261 <!-- 63.262 -->)</pre> 63.263 63.264 @@ -2036,17 +2030,13 @@ 63.265 object area and the gradient box as the positioning area. If this argument 63.266 is omitted, it defaults to ‘<code class=css>at center</code>’. 63.267 63.268 - <p> The <a 63.269 - href="#angular-color-stop-type"><code><angular-color-stop></code></a> 63.270 - is defined in the section on color-stops. 63.271 - 63.272 <p class=issue> Anything else that might be useful? Defining the shape of 63.273 the gradient as elliptical, perhaps? 63.274 63.275 <h4 class=no-toc id=conic-color-stops><span class=secno>4.3.2. </span> 63.276 Placing Color Stops</h4> 63.277 63.278 - <p> Color stops are placed on a <a href="#gradient-line"><i>gradient 63.279 + <p> Color stops are placed on a <a href="#gradient-line0"><i>gradient 63.280 line</i></a> that curves around the center in a circle, with both the 0% 63.281 and 100% locations at 0deg. Just like linear gradients, 0deg points to the 63.282 top of the page, and increasing angles correspond to clockwise movement 63.283 @@ -2070,7 +2060,7 @@ 63.284 <p> The color of the gradient at any point is determined by first finding 63.285 the unique ray anchored at the center of the gradient that passes through 63.286 the given point. The point's color is then the color of the <a 63.287 - href="#gradient-line"><i>gradient line</i></a> at the location where this 63.288 + href="#gradient-line0"><i>gradient line</i></a> at the location where this 63.289 ray intersects it. 63.290 63.291 <h4 class=no-toc id=conic-gradient-examples><span class=secno>4.3.3. 63.292 @@ -2245,76 +2235,172 @@ 63.293 <h3 id=color-stop-syntax><span class=secno>4.5. </span> Gradient 63.294 Color-Stops</h3> 63.295 63.296 - <pre class=prod><dfn 63.297 - id=color-stop-type><color-stop></dfn> = <var><color></var> [ <var><percentage></var> | <a 63.298 - href="#radial-size-circle"><var><length></var></a> ]{0,2}</pre> 63.299 - 63.300 - <pre class=prod><dfn 63.301 - id=angular-color-stop-type><angular-color-stop></dfn> = <var><color></var> [ <var><percentage></var> | <var><angle></var> ]{0,2}</pre> 63.302 - 63.303 - <p class=issue> Should we allow the color/percentage to be swapped? CSS is 63.304 - usually permissive about the order of things as long as it doesn't 63.305 - introduce ambiguity. The counter-argument is that people <em>might</em> be 63.306 - confused by an expression like "50% black", which sounds like a gray 63.307 - color. 63.308 - 63.309 - <p> Color-stops are points placed along the <a 63.310 - href="#gradient-line"><i>gradient line</i></a> defined by the gradient 63.311 - function in which the color-stop is used. Color-stops must be specified in 63.312 - order. Percentages refer to the length of the gradient line, with 0% being 63.313 - at the starting point and 100% being at the ending point. Lengths are 63.314 - measured from the starting point in the direction of the ending point. 63.315 - Angles are measured with 0deg pointing up, and positive angles 63.316 - corresponding to clockwise rotations. Color-stops are usually placed 63.317 - between the starting point and ending point, but that's not required; the 63.318 - gradient line extends infinitely in both directions, and a color-stop can 63.319 - be placed at any position on the line. 63.320 - 63.321 - <p> A color-stop with two locations is exactly equivalent to specifying two 63.322 - color-stops with the same color, one at each location, including how it 63.323 - reacts to the clean-up steps below. <span class=note>Specifying two 63.324 - locations makes it easier to create solid-color "stripes" in a gradient, 63.325 - without having to repeat the color twice.</span> 63.326 - 63.327 - <p class=issue> Make sure this is handled well in the serialization rules. 63.328 - 63.329 - <p> At each color-stop, the line is the color of the color-stop. Between 63.330 - two color-stops, the line's color is linearly interpolated between the 63.331 - colors of the two color-stops, with the interpolation taking place in 63.332 - premultiplied RGBA space. Before the first color-stop, the line is the 63.333 - color of the first color-stop. After the last color-stop, the line is the 63.334 - color of the last color-stop. 63.335 + <pre class=prod> 63.336 +<!-- 63.337 + --><dfn 63.338 + id=ltcolor-stop-list><color-stop-list></dfn> = 63.339 +<!-- 63.340 + --> <a 63.341 + href="#ltcap-linear-color-stop"><var><cap-linear-color-stop></var></a> , [ <a 63.342 + href="#ltlinear-color-stop"><var><linear-color-stop></var></a># , ]? <a 63.343 + href="#ltcap-linear-color-stop"><var><cap-linear-color-stop></var></a> 63.344 +<!-- 63.345 + --><dfn 63.346 + id=ltcap-linear-color-stop><cap-linear-color-stop></dfn> = <var><color></var> && <a 63.347 + href="#ltcolor-stop-length"><var><color-stop-length></var></a>? 63.348 +<!-- 63.349 + --><dfn 63.350 + id=ltlinear-color-stop><linear-color-stop></dfn> = <var><color></var> || <a 63.351 + href="#ltcolor-stop-length"><var><color-stop-length></var></a> 63.352 +<!-- 63.353 + --><dfn 63.354 + id=ltcolor-stop-length><color-stop-length></dfn> = [ <var 63.355 + title=""><length></var> | <var><percentage></var> ]{1,2} 63.356 +<!-- 63.357 + --> 63.358 +<!-- 63.359 + --><dfn 63.360 + id=ltangular-color-stop-list><angular-color-stop-list></dfn> = 63.361 +<!-- 63.362 + --> <a 63.363 + href="#ltcap-angular-color-stop"><var><cap-angular-color-stop></var></a> , [ <a 63.364 + href="#ltangular-color-stop"><var><angular-color-stop></var></a># , ]? <a 63.365 + href="#ltcap-angular-color-stop"><var><cap-angular-color-stop></var></a> 63.366 +<!-- 63.367 + --><dfn 63.368 + id=ltcap-angular-color-stop><cap-angular-color-stop></dfn> = <var><color></var> && <a 63.369 + href="#ltcolor-stop-angle"><var><color-stop-angle></var></a>? 63.370 +<!-- 63.371 + --><dfn 63.372 + id=ltangular-color-stop><angular-color-stop></dfn> = <var><color></var> || <a 63.373 + href="#ltcolor-stop-angle"><var><color-stop-angle></var></a> 63.374 +<!-- 63.375 + --><dfn 63.376 + id=ltcolor-stop-angle><color-stop-angle></dfn> = [ <var><angle></var> | <var><percentage></var> ]{1,2}</pre> 63.377 + 63.378 + <p class=issue> This is past the complexity point where it can be easily 63.379 + understood with just prose. Add a diagram illustrating the possibilities, 63.380 + preferably for all three kinds of gradients (to show off the three shapes 63.381 + of gradient lines). 63.382 + 63.383 + <p> The colors in gradients are specified using <a 63.384 + href="#color-stop"><i>color stops</i></a>. A <dfn id=color-stop>color 63.385 + stop</dfn> is a combination of a color and one or two positions. 63.386 + (Depending on the type of gradient, that position can be a length, angle, 63.387 + or percentage.) While every color stop conceptually has both of these, 63.388 + either of them can be omitted when writing a stylesheet. (The missing 63.389 + parts are automatically filled in by the user agent.) 63.390 + 63.391 + <p> Color stops are organized into a <dfn id=color-stop-list>color stop 63.392 + list</dfn>, which is a list of two or more <a href="#color-stop"><i>color 63.393 + stops</i></a>. The first and last <a href="#color-stop"><i>color 63.394 + stops</i></a> in the list must have a color (though their position can be 63.395 + omitted). 63.396 + 63.397 + <p> <a href="#color-stop"><i>Color stops</i></a> are placed on a <dfn 63.398 + id=gradient-line0>gradient line</dfn>, which defines the colors at every 63.399 + point of a gradient. The gradient function defines the shape and length of 63.400 + the <a href="#gradient-line0"><i>gradient line</i></a>, along with its 63.401 + <dfn id=starting-point>starting point</dfn> and <dfn 63.402 + id=ending-point>ending point</dfn>. 63.403 + 63.404 + <p> <a href="#color-stop"><i>Color stops</i></a> must be specified in 63.405 + order. Percentages refer to the length of the <a 63.406 + href="#gradient-line0"><i>gradient line</i></a> between the <a 63.407 + href="#starting-point"><i>starting point</i></a> and <a 63.408 + href="#ending-point"><i>ending point</i></a>, with 0% being at the 63.409 + starting point and 100% being at the ending point. Lengths are measured 63.410 + from the <a href="#starting-point"><i>starting point</i></a> in the 63.411 + direction of the <a href="#ending-point"><i>ending point</i></a> along the 63.412 + <a href="#gradient-line0"><i>gradient line</i></a>. Angles are measured 63.413 + with 0deg pointing up, and positive angles corresponding to clockwise 63.414 + rotations from there. 63.415 + 63.416 + <p> <a href="#color-stop"><i>Color stops</i></a> are usually placed between 63.417 + the <a href="#starting-point"><i>starting point</i></a> and <a 63.418 + href="#ending-point"><i>ending point</i></a>, but that's not required; the 63.419 + gradient line extends infinitely in both directions, and a <a 63.420 + href="#color-stop"><i>color stop</i></a> can be placed at any position on 63.421 + the <a href="#gradient-line0"><i>gradient line</i></a>. 63.422 + 63.423 + <p> A <a href="#color-stop"><i>color stop</i></a> with two locations is 63.424 + mostly equivalent to specifying two <a href="#color-stop"><i>color 63.425 + stops</i></a> with the same color, one for each position. However, if the 63.426 + color is omitted, it's treated slightly differently by step 4 in the 63.427 + clean-up algorithm below. <span class=note>Specifying two locations makes 63.428 + it easier to create solid-color "stripes" in a gradient, without having to 63.429 + repeat the color twice.</span> 63.430 + 63.431 + <p> The position of a <a href="#color-stop"><i>color stop</i></a> can be 63.432 + omitted. This causes the <a href="#color-stop"><i>color stop</i></a> to 63.433 + position itself automatically between the two surrounding stops. If 63.434 + multiple stops in a row lack a position, they space themselves out 63.435 + equally. 63.436 + 63.437 + <p> Similarly, the color of a <a href="#color-stop"><i>color stop</i></a> 63.438 + can be omitted. The causes the <em>color</em> to be automatically computed 63.439 + to halfway between the two surrounding stops, so that the "midpoint" of a 63.440 + transition can be easily adjusted. If multiple stops in a row lack a 63.441 + color, they space themselves out equally in "color space", giving more 63.442 + control over the smoothness of the transition. 63.443 63.444 <p> The following steps must be applied <em>in order</em> to process the 63.445 - list of color-stops. After applying these rules, all color-stops will have 63.446 - a definite position and they will be in ascending order: 63.447 + list of <a href="#color-stop"><i>color stops</i></a>. After applying these 63.448 + rules, all <a href="#color-stop"><i>color stops</i></a> will have a 63.449 + definite position and color and they will be in ascending order: 63.450 63.451 <ol> 63.452 - <li> If the first color-stop does not have a position, set its position to 63.453 - 0%. If the last color-stop does not have a position, set its position to 63.454 - 100%. 63.455 - 63.456 - <li> If a color-stop has a position that is less than the specified 63.457 - position of any color-stop before it in the list, set its position to be 63.458 - equal to the largest specified position of any color-stop before it. 63.459 - 63.460 - <li> If any color-stop still does not have a position, then, for each run 63.461 - of adjacent color-stops without positions, set their positions so that 63.462 - they are evenly spaced between the preceding and following color-stops 63.463 - with positions. 63.464 + <li> If the first <a href="#color-stop"><i>color stop</i></a> does not 63.465 + have a position, set its position to 0%. If the last <a 63.466 + href="#color-stop"><i>color stop</i></a> does not have a position, set 63.467 + its position to 100%. 63.468 + 63.469 + <li> If a <a href="#color-stop"><i>color stop</i></a> has a position that 63.470 + is less than the specified position of any <a href="#color-stop"><i>color 63.471 + stop</i></a> before it in the list, set its position to be equal to the 63.472 + largest specified position of any <a href="#color-stop"><i>color 63.473 + stop</i></a> before it. 63.474 + 63.475 + <li> If any <a href="#color-stop"><i>color stop</i></a> still does not 63.476 + have a position, then, for each run of adjacent <a 63.477 + href="#color-stop"><i>color stops</i></a> without positions, set their 63.478 + positions so that they are evenly spaced between the preceding and 63.479 + following <a href="#color-stop"><i>color stops</i></a> with positions. 63.480 + 63.481 + <li> If any <a href="#color-stop"><i>color stop</i></a> does not have a 63.482 + color, then, for each run of adjacent <a href="#color-stop"><i>color 63.483 + stops</i></a> without colors, set their colors to be evenly spaced linear 63.484 + interpolations in premultiplied sRGBA space between the preceding and 63.485 + following <a href="#color-stop"><i>color stops</i></a> with colors. Note 63.486 + that a <a href="#color-stop"><i>color stop</i></a> with two positions is 63.487 + still counted as a single <a href="#color-stop"><i>color stop</i></a> by 63.488 + this step, so both positions will be assigned the same color. 63.489 </ol> 63.490 63.491 <p class=issue> This requires us to wait until <em>after</em> layout to do 63.492 fix-up, because implied-position stops (set by step 3) may depend on stops 63.493 that need layout information to place, and which may be corrected by step 63.494 - 2. Swapping steps 2 and 3 would let us interpolate color-stops purely at 63.495 - computed-value time, which is a nice plus, at the cost of changing 63.496 - behavior from level 3 for some edge cases that triggered fixup. 63.497 - 63.498 - <p> If multiple color-stops have the same position, they produce an 63.499 - infinitesimal transition from the one specified first in the rule to the 63.500 - one specified last. In effect, the color suddenly changes at that position 63.501 - rather than smoothly transitioning. 63.502 + 2. Swapping steps 2 and 3 would let us interpolate <a 63.503 + href="#color-stop"><i>color stops</i></a> purely at computed-value time, 63.504 + which is a nice plus, at the cost of changing behavior from level 3 for 63.505 + some edge cases that triggered fixup. Make sure this is handled well in 63.506 + the serialization rules. 63.507 + 63.508 + <p> At each <a href="#color-stop"><i>color stop</i></a> position, the line 63.509 + is the color of the <a href="#color-stop"><i>color stop</i></a>. Between 63.510 + two <a href="#color-stop"><i>color stops</i></a>, the line's color is 63.511 + linearly interpolated between the colors of the two <a 63.512 + href="#color-stop"><i>color stops</i></a>, with the interpolation taking 63.513 + place in premultiplied RGBA space. Before the first <a 63.514 + href="#color-stop"><i>color stop</i></a>, the line is the color of the 63.515 + first <a href="#color-stop"><i>color stop</i></a>. After the last <a 63.516 + href="#color-stop"><i>color stop</i></a>, the line is the color of the 63.517 + last <a href="#color-stop"><i>color stop</i></a>. 63.518 + 63.519 + <p> If multiple <a href="#color-stop"><i>color stops</i></a> have the same 63.520 + position, they produce an infinitesimal transition from the one specified 63.521 + first in the rule to the one specified last. In effect, the color suddenly 63.522 + changes at that position rather than smoothly transitioning. 63.523 63.524 <div class=example> 63.525 <p> Below are several pairs of gradients. The latter of each pair is a 63.526 @@ -2376,7 +2462,15 @@ 63.527 <!-- 63.528 --> =23=> 63.529 <!-- 63.530 - --> linear-gradient(red 80px, white 80px, black 90px, blue 100px)</pre> 63.531 + --> linear-gradient(red 80px, white 80px, black 90px, blue 100px) 63.532 +<!-- 63.533 + --> 63.534 +<!-- 63.535 + -->8. linear-gradient(red, 25%, white) 63.536 +<!-- 63.537 + --> =14=> 63.538 +<!-- 63.539 + --> linear-gradient(red 0%, rgb(100%,50%,50%) 25%, white 100%)</pre> 63.540 </div> 63.541 63.542 <div class=example> 63.543 @@ -2404,14 +2498,15 @@ 63.544 </div> 63.545 63.546 <p class=note> Note: It is recommended that authors not mix different types 63.547 - of units, such as px, em, or %, in a single rule, as this can cause a 63.548 - color-stop to unintentionally try to move before an earlier one. For 63.549 - example, the rule ‘<code class=css>background-image: 63.550 - linear-gradient(yellow 100px, blue 50%)</code>’ wouldn't require any 63.551 - fix-up as long as the background area is at least 200px tall. If it was 63.552 - 150px tall, however, the blue color-stop's position would be equivalent to 63.553 - "75px", which precedes the yellow color-stop, and would be corrected to a 63.554 - position of 100px. 63.555 + of units, such as px, em, or %, in a single rule, as this can cause a <a 63.556 + href="#color-stop"><i>color stop</i></a> to unintentionally try to move 63.557 + before an earlier one. For example, the rule ‘<code 63.558 + class=css>background-image: linear-gradient(yellow 100px, blue 63.559 + 50%)</code>’ wouldn't require any fix-up as long as the background area 63.560 + is at least 200px tall. If it was 150px tall, however, the blue <a 63.561 + href="#color-stop"><i>color stop's</i></a> position would be equivalent to 63.562 + "75px", which precedes the yellow <a href="#color-stop"><i>color 63.563 + stop</i></a>, and would be corrected to a position of 100px. 63.564 63.565 <p class=note> Note: The definition and implications of "premultiplied" 63.566 color spaces are given elsewhere in the technical literature, but a quick 63.567 @@ -3092,7 +3187,7 @@ 63.568 <tr> 63.569 <th><a href="#values">Value:</a> 63.570 63.571 - <td>[from-image || <var><resolution></var>] && snap? 63.572 + <td>[from-image || <var><resolution></var>] && snap? 63.573 63.574 <tr> 63.575 <th>Initial: 63.576 @@ -3566,16 +3661,13 @@ 63.577 class=css>radial-gradient()</code>’ or a ‘<code 63.578 class=css>repeating-linear-gradient()</code>’.) 63.579 63.580 - <li> Both the starting and ending gradient must have the same number of <a 63.581 - href="#color-stop-type"><var><color-stop></var></a>s. For this 63.582 - purpose, a repeating gradient is considered to have infinite <a 63.583 - href="#color-stop-type"><var><color-stop></var></a>s, and thus all 63.584 - repeating gradients have the same number of <a 63.585 - href="#color-stop-type"><var><color-stop></var></a>s. (Note that one 63.586 - may pad a gradient with additional <a 63.587 - href="#color-stop-type"><var><color-stop></var></a>s placed atop each 63.588 - other, if necessary to make two gradients have the same number of <a 63.589 - href="#color-stop-type"><var><color-stop></var></a>s.) 63.590 + <li> Both the starting and ending gradient must have the same number of 63.591 + <var><color-stop></var>s. For this purpose, a repeating gradient is 63.592 + considered to have infinite <var><color-stop></var>s, and thus all 63.593 + repeating gradients have the same number of <var><color-stop></var>s. 63.594 + (Note that one may pad a gradient with additional 63.595 + <var><color-stop></var>s placed atop each other, if necessary to make 63.596 + two gradients have the same number of <var><color-stop></var>s.) 63.597 </ol> 63.598 63.599 <p> If the two gradients satisfy both of those constraints, they must be 63.600 @@ -3709,9 +3801,46 @@ 63.601 TTTTTTTTTTT hhhhhhh hhhhhhh eeeeeeeeeeeeee EEEEEEEEEEEEEEEEEEEEEE nnnnnn nnnnnn ddddddddd ddddd 63.602 --> 63.603 63.604 - <h2 id=conformance><span class=secno>9. </span> Conformance</h2> 63.605 - 63.606 - <h3 id=conventions><span class=secno>9.1. </span> Document Conventions</h3> 63.607 + <h2 id=changes><span class=secno>9. </span> Changes since Images 3</h2> 63.608 + 63.609 + <ul> 63.610 + <li>added ‘<code class=property>x</code>’ unit (or rather, put in an 63.611 + issue about adding it as a general alias for dppx) 63.612 + 63.613 + <li>restored the ltr/rtl keywords in image(), but in a different place 63.614 + 63.615 + <li>added image-set() 63.616 + 63.617 + <li>re-added element() 63.618 + 63.619 + <li>re-added cross-fade() 63.620 + <ul> 63.621 + <li>changed the syntax a bit to allow interesting things 63.622 + </ul> 63.623 + 63.624 + <li>added issue for focus-moving to radial-gradient() 63.625 + 63.626 + <li>added conic-gradient() 63.627 + 63.628 + <li>added two-position syntax for color-stops 63.629 + 63.630 + <li>allowed the color to be omitted from color-stops 63.631 + 63.632 + <li>loosened the syntax for color-stops to allow color/length in either 63.633 + order 63.634 + 63.635 + <li>added image-orientation:from-image 63.636 + 63.637 + <li>re-added image-rendering 63.638 + 63.639 + <li>added interpolation section 63.640 + 63.641 + <li>added serialization section 63.642 + </ul> 63.643 + 63.644 + <h2 id=conformance><span class=secno>10. </span> Conformance</h2> 63.645 + 63.646 + <h3 id=conventions><span class=secno>10.1. </span> Document Conventions</h3> 63.647 63.648 <p>Conformance requirements are expressed with a combination of descriptive 63.649 assertions and RFC 2119 terminology. The key words “MUST”, “MUST 63.650 @@ -3738,7 +3867,7 @@ 63.651 63.652 <p class=note>Note, this is an informative note. 63.653 63.654 - <h3 id=conformance-classes><span class=secno>9.2. </span> Conformance 63.655 + <h3 id=conformance-classes><span class=secno>10.2. </span> Conformance 63.656 Classes</h3> 63.657 63.658 <p>Conformance to CSS Image Values and Replaced Content Module Level 4 is 63.659 @@ -3783,7 +3912,7 @@ 63.660 feature in this module, and meet all other conformance requirements of 63.661 style sheets as described in this module. 63.662 63.663 - <h3 id=partial><span class=secno>9.3. </span> Partial Implementations</h3> 63.664 + <h3 id=partial><span class=secno>10.3. </span> Partial Implementations</h3> 63.665 63.666 <p>So that authors can exploit the forward-compatible parsing rules to 63.667 assign fallback values, CSS renderers <strong>must</strong> treat as 63.668 @@ -3797,7 +3926,7 @@ 63.669 unsupported values must be), CSS requires that the entire declaration be 63.670 ignored. 63.671 63.672 - <h3 id=experimental><span class=secno>9.4. </span> Experimental 63.673 + <h3 id=experimental><span class=secno>10.4. </span> Experimental 63.674 Implementations</h3> 63.675 63.676 <p>To avoid clashes with future CSS features, the CSS2.1 specification 63.677 @@ -3811,7 +3940,7 @@ 63.678 vendor-prefixed syntax for such features, including those in W3C Working 63.679 Drafts. This avoids incompatibilities with future changes in the draft. 63.680 63.681 - <h3 id=testing><span class=secno>9.5. </span>Non-Experimental 63.682 + <h3 id=testing><span class=secno>10.5. </span>Non-Experimental 63.683 Implementations</h3> 63.684 63.685 <p>Once a specification reaches the Candidate Recommendation stage, 63.686 @@ -3833,7 +3962,7 @@ 63.687 href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> 63.688 mailing list. 63.689 63.690 - <h3 id=cr-exit-criteria><span class=secno>9.6. </span> CR Exit Criteria</h3> 63.691 + <h3 id=cr-exit-criteria><span class=secno>10.6. </span> CR Exit Criteria</h3> 63.692 63.693 <p>For this specification to be advanced to Proposed Recommendation, there 63.694 must be at least two independent, interoperable implementations of each 63.695 @@ -4094,15 +4223,24 @@ 63.696 <!--begin-index--> 63.697 63.698 <ul class=indexlist> 63.699 - <li><angular-color-stop>, <a href="#angular-color-stop-type" 63.700 + <li><angular-color-stop>, <a href="#ltangular-color-stop" 63.701 title="<angular-color-stop>"><strong>4.5.</strong></a> 63.702 63.703 + <li><angular-color-stop-list>, <a href="#ltangular-color-stop-list" 63.704 + title="<angular-color-stop-list>"><strong>4.5.</strong></a> 63.705 + 63.706 <li>authoring tool, <a href="#authoring-tool" 63.707 - title="authoring tool"><strong>9.2.</strong></a> 63.708 + title="authoring tool"><strong>10.2.</strong></a> 63.709 63.710 <li>auto, <a href="#image-rendering-auto" 63.711 title=auto><strong>6.3.</strong></a> 63.712 63.713 + <li><cap-angular-color-stop>, <a href="#ltcap-angular-color-stop" 63.714 + title="<cap-angular-color-stop>"><strong>4.5.</strong></a> 63.715 + 63.716 + <li><cap-linear-color-stop>, <a href="#ltcap-linear-color-stop" 63.717 + title="<cap-linear-color-stop>"><strong>4.5.</strong></a> 63.718 + 63.719 <li>‘<a href="#radial-closest-corner"><code 63.720 class=css>closest-corner</code></a>’, <a href="#radial-closest-corner" 63.721 title="''closest-corner''"><strong>4.2.1.</strong></a> 63.722 @@ -4111,8 +4249,20 @@ 63.723 class=css>closest-side</code></a>’, <a href="#radial-closest-side" 63.724 title="''closest-side''"><strong>4.2.1.</strong></a> 63.725 63.726 - <li><color-stop>, <a href="#color-stop-type" 63.727 - title="<color-stop>"><strong>4.5.</strong></a> 63.728 + <li>color stop, <a href="#color-stop" 63.729 + title="color stop"><strong>4.5.</strong></a> 63.730 + 63.731 + <li><color-stop-angle>, <a href="#ltcolor-stop-angle" 63.732 + title="<color-stop-angle>"><strong>4.5.</strong></a> 63.733 + 63.734 + <li><color-stop-length>, <a href="#ltcolor-stop-length" 63.735 + title="<color-stop-length>"><strong>4.5.</strong></a> 63.736 + 63.737 + <li><color-stop-list>, <a href="#ltcolor-stop-list" 63.738 + title="<color-stop-list>"><strong>4.5.</strong></a> 63.739 + 63.740 + <li>color stop list, <a href="#color-stop-list" 63.741 + title="color stop list"><strong>4.5.</strong></a> 63.742 63.743 <li>concrete object size, <a href="#concrete-object-size" 63.744 title="concrete object size"><strong>5.1.</strong></a> 63.745 @@ -4147,6 +4297,9 @@ 63.746 <li>element-not-rendered, <a href="#element-not-rendered" 63.747 title=element-not-rendered><strong>3.4.</strong></a> 63.748 63.749 + <li>ending point, <a href="#ending-point" 63.750 + title="ending point"><strong>4.5.</strong></a> 63.751 + 63.752 <li>ending shape, <a href="#ending-shape" 63.753 title="ending shape"><strong>4.2.</strong></a> 63.754 63.755 @@ -4173,10 +4326,8 @@ 63.756 title="gradient box"><strong>4.</strong></a> 63.757 63.758 <li>gradient line, <a href="#gradient-line" 63.759 - title="gradient line"><strong>4.1.1.</strong></a> 63.760 - 63.761 - <li>gradient ray, <a href="#gradient-ray" 63.762 - title="gradient ray"><strong>4.2.2.</strong></a> 63.763 + title="gradient line"><strong>4.1.1.</strong></a>, <a 63.764 + href="#gradient-line0" title="gradient line"><strong>4.5.</strong></a> 63.765 63.766 <li><image>, <a href="#image-type" 63.767 title="<image>"><strong>3.</strong></a> 63.768 @@ -4233,6 +4384,9 @@ 63.769 <var><percentage></var> ]{2}, <a href="#radial-size-ellipse" 63.770 title="[ <length> | <percentage> ]{2}"><strong>4.2.1.</strong></a> 63.771 63.772 + <li><linear-color-stop>, <a href="#ltlinear-color-stop" 63.773 + title="<linear-color-stop>"><strong>4.5.</strong></a> 63.774 + 63.775 <li><linear-gradient>, <a href="#linear-gradient-type" 63.776 title="<linear-gradient>"><strong>4.1.1.</strong></a> 63.777 63.778 @@ -4256,7 +4410,8 @@ 63.779 <li><radial-gradient>, <a href="#radial-gradient-type" 63.780 title="<radial-gradient>"><strong>4.2.1.</strong></a> 63.781 63.782 - <li>renderer, <a href="#renderer" title=renderer><strong>9.2.</strong></a> 63.783 + <li>renderer, <a href="#renderer" 63.784 + title=renderer><strong>10.2.</strong></a> 63.785 63.786 <li><repeating-conic-gradient>, <a 63.787 href="#repeating-conic-gradient-type" 63.788 @@ -4282,10 +4437,13 @@ 63.789 <li>specified size, <a href="#specified-size" 63.790 title="specified size"><strong>5.1.</strong></a> 63.791 63.792 + <li>starting point, <a href="#starting-point" 63.793 + title="starting point"><strong>4.5.</strong></a> 63.794 + 63.795 <li>style sheet 63.796 <ul> 63.797 <li>as conformance class, <a href="#style-sheet" 63.798 - title="style sheet, as conformance class"><strong>9.2.</strong></a> 63.799 + title="style sheet, as conformance class"><strong>10.2.</strong></a> 63.800 </ul> 63.801 </ul> 63.802 <!--end-index--> 63.803 @@ -4344,7 +4502,7 @@ 63.804 <tr> 63.805 <th><a class=property href="#image-resolution">image-resolution</a> 63.806 63.807 - <td>[from-image || <resolution>] && snap? 63.808 + <td>[from-image || <resolution>] && snap? 63.809 63.810 <td>1dppx 63.811
64.1 --- a/css4-images/Overview.src.html Mon Oct 22 00:33:44 2012 +0200 64.2 +++ b/css4-images/Overview.src.html Mon Oct 22 00:41:17 2012 +0200 64.3 @@ -132,12 +132,8 @@ 64.4 64.5 <li>Logical keywords for specifying linear gradient direction. 64.6 64.7 - <li>Conical gradients 64.8 - 64.9 <li>More interpolation modes for gradients: <a href="http://lists.w3.org/Archives/Public/www-style/2012Jan/0635.html">http://lists.w3.org/Archives/Public/www-style/2012Jan/0635.html</a> 64.10 64.11 - <li>How to transition/animate gradients 64.12 - 64.13 <li>Ability to reference an SVG paint server via url (maybe as element(<string>)?) 64.14 </ol> 64.15 64.16 @@ -1114,7 +1110,7 @@ 64.17 <pre class=prod><!-- 64.18 --><dfn id='linear-gradient-type'><linear-gradient></dfn> = linear-gradient(
<!-- 64.19 --> [ [ <var><angle></var> | to <var><side-or-corner></var> ] ,]? 
<!-- 64.20 - --> <var><color-stop></var>[, <var><color-stop></var>]+
<!-- 64.21 + --> <var><color-stop-list></var>
<!-- 64.22 -->)
<!-- 64.23 -->
<!-- 64.24 --><dfn id='side-or-corner'><side-or-corner></dfn> = [left | right] || [top | bottom]</pre> 64.25 @@ -1308,7 +1304,7 @@ 64.26 --> [ [ <var><shape></var> || <var><size></var> ] [ at <var><position></var> ]? , |
<!-- 64.27 --> at <var><position></var>, 
<!-- 64.28 --> ]?
<!-- 64.29 - --> <var><color-stop></var> [ , <var><color-stop></var> ]+
<!-- 64.30 + --> <var><color-stop-list></var>
<!-- 64.31 -->)</pre> 64.32 64.33 <div class=example> 64.34 @@ -1448,19 +1444,19 @@ 64.35 --><extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side</pre> 64.36 </div> 64.37 64.38 + 64.39 <h4 class="no-toc" id="radial-color-stops"> 64.40 Placing Color Stops</h4> 64.41 64.42 <p> 64.43 - Color-stops are placed on a <dfn>gradient ray</dfn>, 64.44 + Color-stops are placed on a <i>gradient line</i>, 64.45 similar to the <i>gradient line</i> of linear gradients. 64.46 - The <i>gradient ray</i> is anchored at the center of the gradient 64.47 - and extends toward the right. 64.48 - The 0% location is at the start of the <i>gradient ray</i>, 64.49 - and the 100% location is on the point where the <i>gradient ray</i> intersects the <i>ending shape</i>. 64.50 - A color-stop can be placed at a negative location; 64.51 - though the negative region of the <i>gradient ray</i> is never directly consulted for rendering, 64.52 - color stops placed there can affect the color of non-negative locations on the <i>gradient ray</i> through interpolation or repetition 64.53 + The <i>gradient line's</i> <i>start point</i> is at the center of the gradient, 64.54 + and it extends toward the right, 64.55 + with the <i>ending point</i> on the point where the <i>gradient line</i> intersects the <i>ending shape</i>. 64.56 + A color-stop can be placed at a location before 0%; 64.57 + though the negative region of the <i>gradient line</i> is never directly consulted for rendering, 64.58 + color stops placed there can affect the color of non-negative locations on the <i>gradient line</i> through interpolation or repetition 64.59 (see <a href='#repeating-gradients'>repeating gradients</a>). 64.60 For example, ''radial-gradient(red -50px, yellow 100px)'' produces an elliptical gradient 64.61 that starts with a reddish-orange color in the center 64.62 @@ -1472,7 +1468,7 @@ 64.63 The color of the gradient at any point is determined by 64.64 first finding the unique ellipse passing through that point 64.65 with the same center, orientation, and ratio between major and minor axises as the ending-shape. 64.66 - The point's color is then the color of the <i>gradient ray</i> at the location where this ellipse intersects it. 64.67 + The point's color is then the color of the positive section of the <i>gradient line</i> at the location where this ellipse intersects it. 64.68 64.69 <h4 class="no-toc" id="degenerate-radials"> 64.70 Degenerate Radial Gradients</h4> 64.71 @@ -1613,7 +1609,7 @@ 64.72 <pre class='prod'><!-- 64.73 --><dfn id='conic-gradient-type'><conic-gradient></dfn> = conic-gradient(
<!-- 64.74 --> [ at <var><position></var> , ]?
<!-- 64.75 - --> <var><angular-color-stop></var> [ , <var><angular-color-stop></var> ]+
<!-- 64.76 + --> <var><angular-color-stop-list></var>
<!-- 64.77 -->)</pre> 64.78 64.79 <p> 64.80 @@ -1623,9 +1619,6 @@ 64.81 If this argument is omitted, 64.82 it defaults to 'at center'. 64.83 64.84 - <p> 64.85 - The <code><angular-color-stop></code> is defined in the section on color-stops. 64.86 - 64.87 <p class='issue'> 64.88 Anything else that might be useful? Defining the shape of the gradient as elliptical, perhaps? 64.89 64.90 @@ -1827,72 +1820,115 @@ 64.91 <h3 id='color-stop-syntax'> 64.92 Gradient Color-Stops</h3> 64.93 64.94 - <pre class=prod><dfn id='color-stop-type'><color-stop></dfn> = <var><color></var> [ <var><percentage></var> | <var><length></var> ]{0,2}</pre> 64.95 - <pre class=prod><dfn id='angular-color-stop-type'><angular-color-stop></dfn> = <var><color></var> [ <var><percentage></var> | <var><angle></var> ]{0,2}</pre> 64.96 + <pre class=prod>
<!-- 64.97 + --><dfn><color-stop-list></dfn> = 
<!-- 64.98 + --> <var><cap-linear-color-stop></var> , [ <var><linear-color-stop></var># , ]? <var><cap-linear-color-stop></var>
<!-- 64.99 + --><dfn><cap-linear-color-stop></dfn> = <var><color></var> && <var><color-stop-length></var>?
<!-- 64.100 + --><dfn><linear-color-stop></dfn> = <var><color></var> || <var><color-stop-length></var>
<!-- 64.101 + --><dfn><color-stop-length></dfn> = [ <var title=''><length></var> | <var><percentage></var> ]{1,2}
<!-- 64.102 + -->
<!-- 64.103 + --><dfn><angular-color-stop-list></dfn> = 
<!-- 64.104 + --> <var><cap-angular-color-stop></var> , [ <var><angular-color-stop></var># , ]? <var><cap-angular-color-stop></var>
<!-- 64.105 + --><dfn><cap-angular-color-stop></dfn> = <var><color></var> && <var><color-stop-angle></var>?
<!-- 64.106 + --><dfn><angular-color-stop></dfn> = <var><color></var> || <var><color-stop-angle></var>
<!-- 64.107 + --><dfn><color-stop-angle></dfn> = [ <var><angle></var> | <var><percentage></var> ]{1,2}</pre> 64.108 64.109 <p class='issue'> 64.110 - Should we allow the color/percentage to be swapped? 64.111 - CSS is usually permissive about the order of things as long as it doesn't introduce ambiguity. 64.112 - The counter-argument is that people <em>might</em> be confused by an expression like "50% black", 64.113 - which sounds like a gray color. 64.114 + This is past the complexity point where it can be easily understood with just prose. 64.115 + Add a diagram illustrating the possibilities, 64.116 + preferably for all three kinds of gradients 64.117 + (to show off the three shapes of gradient lines). 64.118 64.119 <p> 64.120 - Color-stops are points placed along the <i>gradient line</i> 64.121 - defined by the gradient function in which the color-stop is used. 64.122 - Color-stops must be specified in order. 64.123 - Percentages refer to the length of the gradient line, 64.124 + The colors in gradients are specified using <i>color stops</i>. 64.125 + A <dfn>color stop</dfn> is a combination of a color and one or two positions. 64.126 + (Depending on the type of gradient, that position can be a length, angle, or percentage.) 64.127 + While every color stop conceptually has both of these, 64.128 + either of them can be omitted when writing a stylesheet. 64.129 + (The missing parts are automatically filled in by the user agent.) 64.130 + 64.131 + <p> 64.132 + Color stops are organized into a <dfn>color stop list</dfn>, 64.133 + which is a list of two or more <i>color stops</i>. 64.134 + The first and last <i>color stops</i> in the list 64.135 + must have a color 64.136 + (though their position can be omitted). 64.137 + 64.138 + <p> 64.139 + <i>Color stops</i> are placed on a <dfn>gradient line</dfn>, 64.140 + which defines the colors at every point of a gradient. 64.141 + The gradient function defines the shape and length of the <i>gradient line</i>, 64.142 + along with its <dfn>starting point</dfn> and <dfn>ending point</dfn>. 64.143 + 64.144 + <p> 64.145 + <i>Color stops</i> must be specified in order. 64.146 + Percentages refer to the length of the <i>gradient line</i> between the <i>starting point</i> and <i>ending point</i>, 64.147 with 0% being at the starting point 64.148 - and 100% being at the ending point. 64.149 - Lengths are measured from the starting point in the direction of the ending point. 64.150 + and 100% being at the ending point. 64.151 + Lengths are measured from the <i>starting point</i> in the direction of the <i>ending point</i> along the <i>gradient line</i>. 64.152 Angles are measured with 0deg pointing up, 64.153 - and positive angles corresponding to clockwise rotations. 64.154 - Color-stops are usually placed between the starting point and ending point, 64.155 + and positive angles corresponding to clockwise rotations from there. 64.156 + 64.157 + <p> 64.158 + <i>Color stops</i> are usually placed between the <i>starting point</i> and <i>ending point</i>, 64.159 but that's not required; 64.160 the gradient line extends infinitely in both directions, 64.161 - and a color-stop can be placed at any position on the line. 64.162 + and a <i>color stop</i> can be placed at any position on the <i>gradient line</i>. 64.163 64.164 <p> 64.165 - A color-stop with two locations is exactly equivalent 64.166 - to specifying two color-stops with the same color, 64.167 - one at each location, 64.168 - including how it reacts to the clean-up steps below. 64.169 + A <i>color stop</i> with two locations is mostly equivalent 64.170 + to specifying two <i>color stops</i> with the same color, 64.171 + one for each position. 64.172 + However, if the color is omitted, 64.173 + it's treated slightly differently by step 4 in the clean-up algorithm below. 64.174 <span class='note'>Specifying two locations makes it easier to create solid-color "stripes" in a gradient, 64.175 without having to repeat the color twice.</span> 64.176 64.177 - <p class='issue'> 64.178 - Make sure this is handled well in the serialization rules. 64.179 - 64.180 <p> 64.181 - At each color-stop, 64.182 - the line is the color of the color-stop. 64.183 - Between two color-stops, 64.184 - the line's color is linearly interpolated between the colors of the two color-stops, 64.185 - with the interpolation taking place in premultiplied RGBA space. 64.186 - Before the first color-stop, 64.187 - the line is the color of the first color-stop. 64.188 - After the last color-stop, the line is the color of the last color-stop. 64.189 + The position of a <i>color stop</i> can be omitted. 64.190 + This causes the <i>color stop</i> to position itself automatically 64.191 + between the two surrounding stops. 64.192 + If multiple stops in a row lack a position, 64.193 + they space themselves out equally. 64.194 64.195 <p> 64.196 - The following steps must be applied <em>in order</em> to process the list of color-stops. 64.197 + Similarly, the color of a <i>color stop</i> can be omitted. 64.198 + The causes the <em>color</em> to be automatically computed 64.199 + to halfway between the two surrounding stops, 64.200 + so that the "midpoint" of a transition can be easily adjusted. 64.201 + If multiple stops in a row lack a color, 64.202 + they space themselves out equally in "color space", 64.203 + giving more control over the smoothness of the transition. 64.204 + 64.205 + <p> 64.206 + The following steps must be applied <em>in order</em> to process the list of <i>color stops</i>. 64.207 After applying these rules, 64.208 - all color-stops will have a definite position 64.209 + all <i>color stops</i> will have a definite position and color 64.210 and they will be in ascending order: 64.211 64.212 <ol> 64.213 <li> 64.214 - If the first color-stop does not have a position, 64.215 + If the first <i>color stop</i> does not have a position, 64.216 set its position to 0%. 64.217 - If the last color-stop does not have a position, 64.218 + If the last <i>color stop</i> does not have a position, 64.219 set its position to 100%. 64.220 64.221 <li> 64.222 - If a color-stop has a position that is less than the specified position of any color-stop before it in the list, 64.223 - set its position to be equal to the largest specified position of any color-stop before it. 64.224 + If a <i>color stop</i> has a position that is less than the specified position of any <i>color stop</i> before it in the list, 64.225 + set its position to be equal to the largest specified position of any <i>color stop</i> before it. 64.226 64.227 <li> 64.228 - If any color-stop still does not have a position, 64.229 - then, for each run of adjacent color-stops without positions, 64.230 - set their positions so that they are evenly spaced between the preceding and following color-stops with positions. 64.231 + If any <i>color stop</i> still does not have a position, 64.232 + then, for each run of adjacent <i>color stops</i> without positions, 64.233 + set their positions so that they are evenly spaced between the preceding and following <i>color stops</i> with positions. 64.234 + 64.235 + <li> 64.236 + If any <i>color stop</i> does not have a color, 64.237 + then, for each run of adjacent <i>color stops</i> without colors, 64.238 + set their colors to be evenly spaced linear interpolations in premultiplied sRGBA space 64.239 + between the preceding and following <i>color stops</i> with colors. 64.240 + Note that a <i>color stop</i> with two positions is still counted as a single <i>color stop</i> by this step, 64.241 + so both positions will be assigned the same color. 64.242 </ol> 64.243 64.244 <p class='issue'> 64.245 @@ -1900,12 +1936,23 @@ 64.246 because implied-position stops (set by step 3) 64.247 may depend on stops that need layout information to place, 64.248 and which may be corrected by step 2. 64.249 - Swapping steps 2 and 3 would let us interpolate color-stops purely at computed-value time, 64.250 + Swapping steps 2 and 3 would let us interpolate <i>color stops</i> purely at computed-value time, 64.251 which is a nice plus, 64.252 at the cost of changing behavior from level 3 for some edge cases that triggered fixup. 64.253 + Make sure this is handled well in the serialization rules. 64.254 64.255 <p> 64.256 - If multiple color-stops have the same position, 64.257 + At each <i>color stop</i> position, 64.258 + the line is the color of the <i>color stop</i>. 64.259 + Between two <i>color stops</i>, 64.260 + the line's color is linearly interpolated between the colors of the two <i>color stops</i>, 64.261 + with the interpolation taking place in premultiplied RGBA space. 64.262 + Before the first <i>color stop</i>, 64.263 + the line is the color of the first <i>color stop</i>. 64.264 + After the last <i>color stop</i>, the line is the color of the last <i>color stop</i>. 64.265 + 64.266 + <p> 64.267 + If multiple <i>color stops</i> have the same position, 64.268 they produce an infinitesimal transition from the one specified first in the rule 64.269 to the one specified last. 64.270 In effect, the color suddenly changes at that position rather than smoothly transitioning. 64.271 @@ -1945,7 +1992,11 @@ 64.272 -->
<!-- 64.273 -->7. linear-gradient(red 80px, white 0px, black, blue 100px)
<!-- 64.274 --> =23=>
<!-- 64.275 - --> linear-gradient(red 80px, white 80px, black 90px, blue 100px)</pre> 64.276 + --> linear-gradient(red 80px, white 80px, black 90px, blue 100px)
<!-- 64.277 + -->
<!-- 64.278 + -->8. linear-gradient(red, 25%, white)
<!-- 64.279 + --> =14=>
<!-- 64.280 + --> linear-gradient(red 0%, rgb(100%,50%,50%) 25%, white 100%)</pre> 64.281 </div> 64.282 64.283 <div class=example> 64.284 @@ -1980,12 +2031,12 @@ 64.285 Note: It is recommended that authors not mix different types of units, 64.286 such as px, em, or %, 64.287 in a single rule, 64.288 - as this can cause a color-stop to unintentionally try to move before an earlier one. 64.289 + as this can cause a <i>color stop</i> to unintentionally try to move before an earlier one. 64.290 For example, the rule ''background-image: linear-gradient(yellow 100px, blue 50%)'' 64.291 wouldn't require any fix-up as long as the background area is at least 200px tall. 64.292 If it was 150px tall, however, 64.293 - the blue color-stop's position would be equivalent to "75px", 64.294 - which precedes the yellow color-stop, 64.295 + the blue <i>color stop's</i> position would be equivalent to "75px", 64.296 + which precedes the yellow <i>color stop</i>, 64.297 and would be corrected to a position of 100px. 64.298 64.299 <p class=note> 64.300 @@ -2568,7 +2619,7 @@ 64.301 <td><dfn>image-resolution</dfn> 64.302 <tr> 64.303 <th><a href="#values">Value:</a> 64.304 - <td>[from-image || <var><resolution></var>] && snap? 64.305 + <td>[from-image || <var><resolution></var>] && snap? 64.306 <tr> 64.307 <th>Initial: 64.308 <td>1dppx 64.309 @@ -3168,6 +3219,30 @@ 64.310 --> 64.311 64.312 64.313 +<h2 id='changes'> 64.314 +Changes since Images 3</h2> 64.315 + 64.316 + <ul> 64.317 + <li>added 'x' unit (or rather, put in an issue about adding it as a 64.318 + general alias for dppx) 64.319 + <li>restored the ltr/rtl keywords in image(), but in a different place 64.320 + <li>added image-set() 64.321 + <li>re-added element() 64.322 + <li>re-added cross-fade() 64.323 + <ul> 64.324 + <li>changed the syntax a bit to allow interesting things 64.325 + </ul> 64.326 + <li>added issue for focus-moving to radial-gradient() 64.327 + <li>added conic-gradient() 64.328 + <li>added two-position syntax for color-stops 64.329 + <li>allowed the color to be omitted from color-stops 64.330 + <li>loosened the syntax for color-stops to allow color/length in either order 64.331 + <li>added image-orientation:from-image 64.332 + <li>re-added image-rendering 64.333 + <li>added interpolation section 64.334 + <li>added serialization section 64.335 + </ul> 64.336 + 64.337 64.338 64.339 <h2 id="conformance">
65.1 --- a/cssom/Overview.html Mon Oct 22 00:33:44 2012 +0200 65.2 +++ b/cssom/Overview.html Mon Oct 22 00:41:17 2012 +0200 65.3 @@ -18,7 +18,7 @@ 65.4 65.5 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --> 65.6 65.7 - <h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 2 October 2012</h2> 65.8 + <h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 19 October 2012</h2> 65.9 65.10 <dl> 65.11 65.12 @@ -83,7 +83,7 @@ 65.13 can be found in the 65.14 <a href="http://www.w3.org/TR/">W3C technical reports index at http://www.w3.org/TR/.</a></em> 65.15 65.16 - <p class="dontpublish">This is the 2 October 2012 Editor's Draft of CSSOM. Please send comments to 65.17 + <p class="dontpublish">This is the 19 October 2012 Editor's Draft of CSSOM. Please send comments to 65.18 <a href="mailto:www-style@w3.org?subject=%5Bcssom%5D%20">www-style@w3.org</a> 65.19 (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) 65.20 with <samp>[cssom]</samp> at the start of the subject line. 65.21 @@ -1548,6 +1548,9 @@ 65.22 65.23 <p>To <dfn id="parse-a-css-rule">parse a CSS rule</dfn> ...</p> 65.24 65.25 + <p class="issue">Should a rule be instantiated in OM if there is a parse error? To 65.26 + what extent should original (but non-valid) CSS text be captured in cssText?</p> 65.27 + 65.28 <p>To <dfn id="serialize-a-css-rule">serialize a CSS rule</dfn> depends on the type of CSS rule, as 65.29 follows:</p> 65.30 65.31 @@ -1839,10 +1842,10 @@ 65.32 ordered. This matters for the 65.33 <code title="dom-CSSStyleDeclaration-item">item()</code> method.</p> 65.34 65.35 - 65.36 - <p class="issue">To 65.37 - <dfn id="parse-a-css-declaration-block">parse a CSS declaration block</dfn> 65.38 - ...</p> 65.39 + <p>To <dfn id="parse-a-css-declaration-block">parse a CSS declaration block</dfn> ...</p> 65.40 + 65.41 + <p class="issue">What should be captured in the cssText of a declaration block which fails 65.42 + to parse?</p> 65.43 65.44 <p>To <dfn id="serialize-a-css-declaration-block">serialize a CSS declaration block</dfn> 65.45 represented by a <code>CSSStyleDeclarations</code> instance named <var>d</var>,
66.1 --- a/cssom/cssom-source Mon Oct 22 00:33:44 2012 +0200 66.2 +++ b/cssom/cssom-source Mon Oct 22 00:41:17 2012 +0200 66.3 @@ -1318,6 +1318,9 @@ 66.4 66.5 <p>To <dfn>parse a CSS rule</dfn> ...</p> 66.6 66.7 + <p class="issue">Should a rule be instantiated in OM if there is a parse error? To 66.8 + what extent should original (but non-valid) CSS text be captured in cssText?</p> 66.9 + 66.10 <p>To <dfn>serialize a CSS rule</dfn> depends on the type of CSS rule, as 66.11 follows:</p> 66.12 66.13 @@ -1442,10 +1445,10 @@ 66.14 ordered. This matters for the 66.15 <code title="dom-CSSStyleDeclaration-item">item()</code> method.</p> 66.16 66.17 + <p>To <dfn id="parse-a-css-declaration-block">parse a CSS declaration block</dfn> ...</p> 66.18 66.19 - <p class="issue">To 66.20 - <dfn id="parse-a-css-declaration-block">parse a CSS declaration block</dfn> 66.21 - ...</p> 66.22 + <p class="issue">What should be captured in the cssText of a declaration block which fails 66.23 + to parse?</p> 66.24 66.25 <p>To <dfn id="serialize-a-css-declaration-block">serialize a CSS declaration block</dfn> 66.26 represented by a <code>CSSStyleDeclarations</code> instance named <var>d</var>,
67.1 --- a/selectors4/Overview.html Mon Oct 22 00:33:44 2012 +0200 67.2 +++ b/selectors4/Overview.html Mon Oct 22 00:41:17 2012 +0200 67.3 @@ -4,16 +4,16 @@ 67.4 <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ "> 67.5 <title>Selectors Level 4</title> 67.6 67.7 - <link href="http://purl.org/dc/terms/" rel=schema.DC> 67.8 - <meta content="Selectors Level 4" name=DC.title> 67.9 - <meta content=text name=DC.type> 67.10 - <meta content=2012-09-05 name=DC.issued> 67.11 - <meta content="http://dev.w3.org/csswg/selectors4/" name=DC.creator> 67.12 - <meta content=W3C name=DC.publisher> 67.13 - <meta content="http://www.w3.org/TR/2012/ED-selectors4-20120905/" 67.14 - name=DC.identifier> 67.15 + <link href="http://purl.org/dc/terms/" rel=schema.dcterms> 67.16 <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 67.17 - rel=DC.rights> 67.18 + rel=dcterms.rights> 67.19 + <meta content="Selectors Level 4" name=dcterms.title> 67.20 + <meta content=text name=dcterms.type> 67.21 + <meta content=2012-10-15 name=dcterms.issued> 67.22 + <meta content="http://dev.w3.org/csswg/selectors4/" name=dcterms.creator> 67.23 + <meta content=W3C name=dcterms.publisher> 67.24 + <meta content="http://www.w3.org/TR/2012/ED-selectors4-20121015/" 67.25 + name=dcterms.identifier> 67.26 <link href="../default.css" rel=stylesheet type="text/css"> 67.27 <style type="text/css"> 67.28 .tprofile td, th { vertical-align: baseline; padding: 0 0.5em; } 67.29 @@ -29,14 +29,14 @@ 67.30 67.31 <h1 id=title>Selectors Level 4</h1> 67.32 67.33 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 5 September 67.34 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 15 October 67.35 2012</h2> 67.36 67.37 <dl> 67.38 <dt>This version: 67.39 67.40 - <dd><a href="http://www.w3.org/TR/2012/ED-selectors4-20120905/"> 67.41 - http://www.w3.org/TR/2012/ED-selectors4-20120905/</a> 67.42 + <dd><a href="http://www.w3.org/TR/2012/ED-selectors4-20121015/"> 67.43 + http://www.w3.org/TR/2012/ED-selectors4-20121015/</a> 67.44 67.45 <dt>Editor's draft: 67.46 67.47 @@ -1247,7 +1247,7 @@ 67.48 href="#roo-pseudo"><code>:root</code></a> pseudo-class, however, still 67.49 only matches the actual root of the document.) 67.50 67.51 - <dt><dfn id=scope-constrained>scope-constrained</dfn> selectors 67.52 + <dt><dfn id=scope-filtered>scope-filtered</dfn> selectors 67.53 67.54 <dd> With this method of scoping, a selector matches if the <i>subject</i> 67.55 of the selector is within the scope, even if other components of the 67.56 @@ -1265,8 +1265,8 @@ 67.57 <p> For example, the <code>element.querySelector()</code> function defined 67.58 in <a href="#SELECTORS-API2" 67.59 rel=biblioentry>[SELECTORS-API2]<!--{{SELECTORS-API2}}--></a> allows the 67.60 - author to define a <a 67.61 - href="#scope-constrained"><i>scope-constrained</i></a> selector. 67.62 + author to define a <a href="#scope-filtered"><i>scope-filtered</i></a> 67.63 + selector. 67.64 67.65 <p> On the other hand, the <code>element.find()</code> function defined in 67.66 <a href="#SELECTORS-API2" 67.67 @@ -1475,10 +1475,10 @@ 67.68 67.69 <p><strong>Warning</strong>: the equivalence is true in this example 67.70 because all the selectors are valid selectors. If just one of these 67.71 - selectors were invalid, the entire group of selectors would be invalid. 67.72 - This would invalidate the rule for all three heading elements, whereas in 67.73 - the former case only one of the three individual heading rules would be 67.74 - invalidated. 67.75 + selectors were invalid, the entire <a href="#selector-list"><i>selector 67.76 + list</i></a> would be invalid. This would invalidate the rule for all 67.77 + three heading elements, whereas in the former case only one of the three 67.78 + individual heading rules would be invalidated. 67.79 67.80 <div class=example> 67.81 <p>Invalid CSS example: 67.82 @@ -1810,10 +1810,10 @@ 67.83 by "-" (U+002D). This is primarily intended to allow language subcode 67.84 matches (e.g., the <code>hreflang</code> attribute on the <code>a</code> 67.85 element in HTML) as described in BCP 47 (<a href="#BCP47" 67.86 - rel=biblioentry>[BCP47]<!--{{BCP47}}--></a>) or its successor. For <a 67.87 - href="#lang-pseudo"><code>lang</code></a> (or <code>xml:lang</code>) 67.88 - language subcode matching, please see <a href="#lang-pseudo">the 67.89 - <code>:lang</code> pseudo-class</a>. 67.90 + rel=biblioentry>[BCP47]<!--{{BCP47}}--></a>) or its successor. For 67.91 + <code>lang</code> (or <code>xml:lang</code>) language subcode matching, 67.92 + please see <a href="#lang-pseudo">the <code>:lang</code> 67.93 + pseudo-class</a>. 67.94 </dl> 67.95 67.96 <p>Attribute values must be CSS <a 67.97 @@ -2003,13 +2003,13 @@ 67.98 appear in the document tree. Selectors should be designed so that they 67.99 work whether or not the default values are included in the document tree. 67.100 67.101 - <p>For example, a XML UA may, but is <a 67.102 - href="#negation-pseudo"><em>not</em></a> required to read an "external 67.103 - subset" of the DTD but <em>is</em> required to look for default attribute 67.104 - values in the document's "internal subset." (See, e.g., <a href="#XML10" 67.105 - rel=biblioentry>[XML10]<!--{{XML10}}--></a> for definitions of these 67.106 - subsets.) Depending on the UA, a default attribute value defined in the 67.107 - external subset of the DTD might or might not appear in the document tree. 67.108 + <p>For example, a XML UA may, but is <em>not</em> required to read an 67.109 + "external subset" of the DTD but <em>is</em> required to look for default 67.110 + attribute values in the document's "internal subset." (See, e.g., <a 67.111 + href="#XML10" rel=biblioentry>[XML10]<!--{{XML10}}--></a> for definitions 67.112 + of these subsets.) Depending on the UA, a default attribute value defined 67.113 + in the external subset of the DTD might or might not appear in the 67.114 + document tree. 67.115 67.116 <p>A UA that recognizes an XML namespace may, but is not required to use 67.117 its knowledge of that namespace to treat default attribute values as if 67.118 @@ -2577,8 +2577,7 @@ 67.119 innermost element, or ancestor of an element, that is currently being 67.120 displayed. 67.121 67.122 - <p>Its alternate form <a 67.123 - href="#current-pseudo"><code>:current()</code></a>, like <a 67.124 + <p>Its alternate form <code>:current()</code>, like <a 67.125 href="#matches-pseudo"><code>:matches()</code></a>, takes a list of <a 67.126 href="#compound"><i>compound selectors</i></a> as its argument: it 67.127 represents the <a href="#current-pseudo"><code>:current</code></a> element 67.128 @@ -2630,10 +2629,9 @@ 67.129 write selectors that represent an element based on its directionality as 67.130 determined by the document language. For example, in HTML <a 67.131 href="#HTML401" rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>, the 67.132 - directionality of an element is determined by the <a 67.133 - href="#dir-pseudo"><code>dir</code></a> attribute. The <a 67.134 - href="#dir-pseudo"><code>:dir()</code></a> pseudo-class does not select 67.135 - based on stylistic states—for example, the CSS ‘<code 67.136 + directionality of an element is determined by the <code>dir</code> 67.137 + attribute. The <a href="#dir-pseudo"><code>:dir()</code></a> pseudo-class 67.138 + does not select based on stylistic states—for example, the CSS ‘<code 67.139 class=property>direction</code>’ property does not affect whether it 67.140 matches. 67.141 67.142 @@ -2653,9 +2651,9 @@ 67.143 attribute on the element, while the <code>:dir(C)</code> pseudo-class uses 67.144 the UAs knowledge of the document's semantics to perform the comparison. 67.145 For example, in HTML, the directionality of an element inherits so that a 67.146 - child without a <a href="#dir-pseudo"><code>dir</code></a> attribute will 67.147 - have the same directionality as its closest ancestor with a valid <a 67.148 - href="#dir-pseudo"><code>dir</code></a> attribute. As another example, <a 67.149 + child without a <code>dir</code> attribute will have the same 67.150 + directionality as its closest ancestor with a valid <code>dir</code> 67.151 + attribute. As another example, <a 67.152 href="http://www.w3.org/TR/html5/global-attributes.html#the-directionality">in 67.153 HTML5</a>, an element that matches <code>[dir=auto]</code> will match 67.154 either <code>:dir(ltr)</code> or <code>:dir(rtl)</code> depending on the 67.155 @@ -2682,10 +2680,10 @@ 67.156 document language. For example, in HTML <a href="#HTML401" 67.157 rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>, the <a 67.158 href="#language"><i>language</i></a> is determined by a combination of the 67.159 - <a href="#lang-pseudo"><code>lang</code></a> attribute, information from 67.160 - <code>meta</code> elements, and possibly also the protocol (e.g. from HTTP 67.161 - headers). XML languages can use the <code>xml:lang</code> attribute to 67.162 - indicate language information for an element. 67.163 + <code>lang</code> attribute, information from <code>meta</code> elements, 67.164 + and possibly also the protocol (e.g. from HTTP headers). XML languages can 67.165 + use the <code>xml:lang</code> attribute to indicate language information 67.166 + for an element. 67.167 67.168 <p>The element's <i>language matches</i> a <i>language range</i> if the 67.169 element's <a href="#language"><i>language</i></a> (normalized to BCP 47
68.1 --- a/selectors4/Overview.src.html Mon Oct 22 00:33:44 2012 +0200 68.2 +++ b/selectors4/Overview.src.html Mon Oct 22 00:41:17 2012 +0200 68.3 @@ -611,7 +611,7 @@ 68.4 (The <code>:root</code> pseudo-class, however, 68.5 still only matches the actual root of the document.) 68.6 68.7 - <dt><dfn>scope-constrained</dfn> selectors 68.8 + <dt><dfn>scope-filtered</dfn> selectors 68.9 <dd> 68.10 With this method of scoping, a selector matches if 68.11 the <i>subject</i> of the selector is within the scope, 68.12 @@ -627,7 +627,7 @@ 68.13 <p> 68.14 For example, 68.15 the <code>element.querySelector()</code> function defined in [[SELECTORS-API2]] 68.16 - allows the author to define a <i>scope-constrained</i> selector. 68.17 + allows the author to define a <i>scope-filtered</i> selector. 68.18 68.19 <p> 68.20 On the other hand, the <code>element.find()</code> function defined in [[SELECTORS-API2]] 68.21 @@ -804,7 +804,7 @@ 68.22 68.23 <p><strong>Warning</strong>: the equivalence is true in this example 68.24 because all the selectors are valid selectors. If just one of these 68.25 - selectors were invalid, the entire group of selectors would be 68.26 + selectors were invalid, the entire <i>selector list</i> would be 68.27 invalid. This would invalidate the rule for all three heading 68.28 elements, whereas in the former case only one of the three individual 68.29 heading rules would be invalidated.