changeset
Rename to :nth-fragment and overflow:fragments (and follow with renames to terminology) based on discussion at face-to-face on afternoon of 2012-08-13.
Thu, 16 Aug 2012 14:32:39 -0700
- author
- L. David Baron <dbaron@dbaron.org>
- date
- Thu, 16 Aug 2012 14:32:39 -0700
- changeset 6484
- 4f00e14a11d4
- parent 6483
- ce35838cba90
- child 6485
- d71ab862ce20
Rename to :nth-fragment and overflow:fragments (and follow with renames to terminology) based on discussion at face-to-face on afternoon of 2012-08-13.
| css3-overflow/Overview.html | file | annotate | diff | comparison | revisions | |
| css3-overflow/Overview.src.html | file | annotate | diff | comparison | revisions |
1.1 --- a/css3-overflow/Overview.html Thu Aug 16 14:25:11 2012 -0700 1.2 +++ b/css3-overflow/Overview.html Thu Aug 16 14:32:39 2012 -0700 1.3 @@ -189,8 +189,8 @@ 1.4 the overflow from a fixed size container to be handled by pagination 1.5 (displaying one page at a time). It also describes features, applying to 1.6 all visual media, that allow the contents of an element to be spread 1.7 - across multiple containers, allowing the contents to flow across multiple 1.8 - regions of a page or to have different styles for different parts. 1.9 + across multiple fragments, allowing the contents to flow across multiple 1.10 + regions or to have different styles for different fragments. 1.11 1.12 <h2 class="no-num no-toc" id=status>Status of this document</h2> 1.13 <!--begin-status--> 1.14 @@ -240,20 +240,20 @@ 1.15 <li><a href="#paginated-overflow"><span class=secno>3. </span>Paginated 1.16 overflow</a> 1.17 1.18 - <li><a href="#region-overflow"><span class=secno>4. </span>Region 1.19 + <li><a href="#fragment-overflow"><span class=secno>4. </span>Fragment 1.20 overflow</a> 1.21 <ul class=toc> 1.22 - <li><a href="#region-styling"><span class=secno>4.1. </span>Region 1.23 + <li><a href="#fragment-styling"><span class=secno>4.1. </span>Fragment 1.24 styling</a> 1.25 <ul class=toc> 1.26 - <li><a href="#region-pseudo-element"><span class=secno>4.1.1. 1.27 - </span>The ::nth-region() pseudo-element</a> 1.28 + <li><a href="#fragment-pseudo-element"><span class=secno>4.1.1. 1.29 + </span>The ::nth-fragment() pseudo-element</a> 1.30 1.31 - <li><a href="#style-of-regions"><span class=secno>4.1.2. 1.32 - </span>Styling of regions</a> 1.33 + <li><a href="#style-of-fragments"><span class=secno>4.1.2. 1.34 + </span>Styling of fragments</a> 1.35 1.36 - <li><a href="#style-in-regions"><span class=secno>4.1.3. 1.37 - </span>Styling inside regions</a> 1.38 + <li><a href="#style-in-fragments"><span class=secno>4.1.3. 1.39 + </span>Styling inside fragments</a> 1.40 </ul> 1.41 1.42 <li><a href="#max-lines"><span class=secno>4.2. </span>The ‘<code 1.43 @@ -325,13 +325,13 @@ 1.44 of its advantages. 1.45 1.46 <p> This specification introduces a mechanism for Web pages to specify that 1.47 - a region of a page should handle overflow through pagination rather than 1.48 + an element of a page should handle overflow through pagination rather than 1.49 through scrolling. 1.50 1.51 <p> This specification also extends the concept of overflow in another 1.52 - direction. Instead of requiring that authors specify a single region into 1.53 + direction. Instead of requiring that authors specify a single area into 1.54 which the content of an element must flow, this specification allows 1.55 - authors to specify multiple regions, each with their own dimensions and 1.56 + authors to specify multiple fragments, each with their own dimensions and 1.57 styles, so that the content of the element can flow from one to the next, 1.58 using as many as needed to place the content without overflowing. 1.59 1.60 @@ -355,45 +355,47 @@ 1.61 <p class=issue>Ability to display N pages at once rather than just one page 1.62 at once? 1.63 1.64 - <h2 id=region-overflow><span class=secno>4. </span>Region overflow</h2> 1.65 + <h2 id=fragment-overflow><span class=secno>4. </span>Fragment overflow</h2> 1.66 1.67 <p> This section introduces and defines the meaning of the new ‘<code 1.68 - class=css>regions</code>’ (<span class=issue>or ‘<code 1.69 - class=css>repeat</code>’?</span>) value of the ‘<code 1.70 + class=css>fragments</code>’ value of the ‘<code 1.71 class=property>overflow</code>’ property. 1.72 1.73 <p> When the computed value of ‘<code class=property>overflow</code>’ 1.74 - for an element is ‘<code class=css>regions</code>’, and 1.75 + for an element is ‘<code class=css>fragments</code>’, and 1.76 implementations would otherwise have created a box for the element, then 1.77 implementations must create at least one box for that element. Each box 1.78 - created for the element is called a <dfn id=region-box>region box</dfn> 1.79 - for that element. (If an element with ‘<code class=css>overflow: 1.80 - regions</code>’ generates only one box, that box is a <a 1.81 - href="#region-box"><i>region box</i></a>. However, if an element's 1.82 - computed ‘<code class=property>overflow</code>’ is not ‘<code 1.83 - class=css>regions</code>’, then its box is not a <a 1.84 - href="#region-box"><i>region box</i></a>.) Every <a 1.85 - href="#region-box"><i>region box</i></a> is a fragmentation container, and 1.86 - for each <a href="#region-box"><i>region box</i></a> which ends with a 1.87 - fragmentation break, (which could happen because breakable content 1.88 + created for the element is called a <dfn id=fragment-box>fragment 1.89 + box</dfn> for that element. (If an element with ‘<code 1.90 + class=css>overflow: fragments</code>’ generates only one box, that box 1.91 + is a <a href="#fragment-box"><i>fragment box</i></a>. However, if an 1.92 + element's computed ‘<code class=property>overflow</code>’ is not 1.93 + ‘<code class=css>fragments</code>’, then its box is not a <a 1.94 + href="#fragment-box"><i>fragment box</i></a>.) Every <a 1.95 + href="#fragment-box"><i>fragment box</i></a> is a fragmentation container, 1.96 + and for each <a href="#fragment-box"><i>fragment box</i></a> which ends 1.97 + with a fragmentation break, (which could happen because breakable content 1.98 overflows in the block dimension or because of a forced break), there must 1.99 - be another <a href="#region-box"><i>region box</i></a> created as a next 1.100 - sibling of the previous one. <span class=issue>Or is it as though it's a 1.101 - next sibling of the element? Need to figure out exactly how this interacts 1.102 - with other box-level fixup.</span> (Breakable content might overflow in 1.103 - the box dimension either because of a specified size on the region box or 1.104 - because the region box is within a fragmentation context in which it is 1.105 - being broken. In other words, a single region box is never broken across 1.106 + be another <a href="#fragment-box"><i>fragment box</i></a> created as a 1.107 + next sibling of the previous one. <span class=issue>Or is it as though 1.108 + it's a next sibling of the element? Need to figure out exactly how this 1.109 + interacts with other box-level fixup.</span> (Breakable content might 1.110 + overflow in the box dimension either because of a specified size on the <a 1.111 + href="#fragment-box"><i>fragment box</i></a> or because the <a 1.112 + href="#fragment-box"><i>fragment box</i></a> is within a fragmentation 1.113 + context in which it is being broken. In other words, a single <a 1.114 + href="#fragment-box"><i>fragment box</i></a> is never broken across 1.115 columns or pages; the pieces that are in separate columns or pages are 1.116 - always distinct region boxes.) 1.117 + always distinct <a href="#fragment-box"><i>fragment box</i></a>es.) 1.118 1.119 - <p class=issue> We also want ‘<code class=css>::nth-region()</code>’ 1.120 + <p class=issue> We also want ‘<code class=css>::nth-fragment()</code>’ 1.121 pseudo-elements to be able to apply to the pieces of an element split 1.122 within a fragmentation context. Should we require that authors who want to 1.123 - use ‘<code class=css>::nth-region()</code>’ in this way specify 1.124 - ‘<code class=css>overflow:regions</code>’ (even if they don't specify 1.125 - a constrained height), or should it work automatically for all elements 1.126 - even if they don't have ‘<code class=css>overflow: regions</code>’? 1.127 + use ‘<code class=css>::nth-fragment()</code>’ in this way specify 1.128 + ‘<code class=css>overflow:fragments</code>’ (even if they don't 1.129 + specify a constrained height), or should it work automatically for all 1.130 + elements even if they don't have ‘<code class=css>overflow: 1.131 + fragments</code>’? 1.132 1.133 <div class=example> 1.134 <table class=source-demo-pair> 1.135 @@ -405,7 +407,7 @@ 1.136 equal-sized cards</title> 1.137 <style> 1.138 .in-cards { 1.139 - overflow: regions; 1.140 + overflow: fragments; 1.141 1.142 width: 13em; 1.143 height: 8em; 1.144 @@ -443,48 +445,44 @@ 1.145 </table> 1.146 </div> 1.147 1.148 - <h3 id=region-styling><span class=secno>4.1. </span>Region styling</h3> 1.149 + <h3 id=fragment-styling><span class=secno>4.1. </span>Fragment styling</h3> 1.150 1.151 - <h4 id=region-pseudo-element><span class=secno>4.1.1. </span>The 1.152 - ::nth-region() pseudo-element</h4> 1.153 + <h4 id=fragment-pseudo-element><span class=secno>4.1.1. </span>The 1.154 + ::nth-fragment() pseudo-element</h4> 1.155 1.156 - <p> The ::nth-region() pseudo-element is a pseudo-element that describes 1.157 - some of the region boxes generated by an element. The argument to the 1.158 - pseudo-element takes the same syntax as the argument to the :nth-child() 1.159 - pseudo-class defined in <a href="#SELECT" 1.160 + <p> The ::nth-fragment() pseudo-element is a pseudo-element that describes 1.161 + some of the <a href="#fragment-box"><i>fragment box</i></a>es generated by 1.162 + an element. The argument to the pseudo-element takes the same syntax as 1.163 + the argument to the :nth-child() pseudo-class defined in <a href="#SELECT" 1.164 rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>, and has the same meaning 1.165 - except that the number is relative to <a href="#region-box"><i>region 1.166 - boxes</i></a> generated by the element instead of siblings of the element. 1.167 + except that the number is relative to <a href="#fragment-box"><i>fragment 1.168 + box</i></a>es generated by the element instead of siblings of the element. 1.169 1.170 1.171 - <p class=issue> If we go with a name for the ‘<code 1.172 - class=property>overflow</code>’ value other than ‘<code 1.173 - class=css>overflow: regions</code>’, then we should probably rename this 1.174 - pseudo-element, perhaps to ::nth-piece(), ::nth-part(), or 1.175 - ::nth-instance(). 1.176 + <p class=note> Selectors that allow addressing fragments by counting from 1.177 + the end rather than the start are intentionally not provided. Such 1.178 + selectors would interfere with determining the number of fragments. 1.179 1.180 - <p class=note> Selectors that allow addressing regions by counting from the 1.181 - end rather than the start are intentionally not provided. Such selectors 1.182 - would interfere with determining the number of regions. 1.183 + <h4 id=style-of-fragments><span class=secno>4.1.2. </span>Styling of 1.184 + fragments</h4> 1.185 1.186 - <h4 id=style-of-regions><span class=secno>4.1.2. </span>Styling of regions</h4> 1.187 - 1.188 - <p class=issue> Should this apply to region overflow only, or also to 1.189 + <p class=issue> Should this apply to fragment overflow only, or also to 1.190 paginated overflow? (If it applies, then stricter property restrictions 1.191 would be needed for paginated overflow.) 1.192 1.193 <p> In the absence of rules with ‘<code 1.194 - class=css>::nth-region()</code>’ pseudo-elements, the computed style for 1.195 - each <a href="#region-box"><i>region box</i></a> is the computed style for 1.196 - the element for which the <a href="#region-box"><i>region box</i></a> was 1.197 - created. However, the style for a <a href="#region-box"><i>region 1.198 - box</i></a> is also influenced by rules whose selector's <i>subject</i> <a 1.199 - href="#SELECT" rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a> has an 1.200 - ‘<code class=css>::nth-region()</code>’ pseudo-element, if the 1-based 1.201 - number of the region box matches that ‘<code 1.202 - class=css>::nth-region()</code>’ pseudo-element and the selector 1.203 - (excluding the ‘<code class=css>::nth-region()</code>’ pseudo-element) 1.204 - matches the element generating the regions. 1.205 + class=css>::nth-fragment()</code>’ pseudo-elements, the computed style 1.206 + for each <a href="#fragment-box"><i>fragment box</i></a> is the computed 1.207 + style for the element for which the <a href="#fragment-box"><i>fragment 1.208 + box</i></a> was created. However, the style for a <a 1.209 + href="#fragment-box"><i>fragment box</i></a> is also influenced by rules 1.210 + whose selector's <i>subject</i> <a href="#SELECT" 1.211 + rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a> has an ‘<code 1.212 + class=css>::nth-fragment()</code>’ pseudo-element, if the 1-based number 1.213 + of the <a href="#fragment-box"><i>fragment box</i></a> matches that 1.214 + ‘<code class=css>::nth-fragment()</code>’ pseudo-element and the 1.215 + selector (excluding the ‘<code class=css>::nth-fragment()</code>’ 1.216 + pseudo-element) matches the element generating the fragments. 1.217 1.218 <div class=example> 1.219 <table class=source-demo-pair> 1.220 @@ -494,7 +492,7 @@ 1.221 <pre><!DOCTYPE HTML> 1.222 <style> 1.223 .bouncy-columns { 1.224 - overflow: regions; 1.225 + overflow: fragments; 1.226 width: 6em; 1.227 height: 10em; 1.228 float: left; 1.229 @@ -502,11 +500,11 @@ 1.230 font: medium/1.25 Times New 1.231 Roman, Times, serif; 1.232 } 1.233 - .bouncy-columns::nth-region(1) { 1.234 + .bouncy-columns::nth-fragment(1) { 1.235 background: aqua; color: black; 1.236 transform: rotate(-3deg); 1.237 } 1.238 - .bouncy-columns::nth-region(2) { 1.239 + .bouncy-columns::nth-fragment(2) { 1.240 background: yellow; color: black; 1.241 transform: rotate(3deg); 1.242 } 1.243 @@ -536,7 +534,7 @@ 1.244 1.245 <div class=bouncy-columns-demo>just doesn't<br> 1.246 have any<br> 1.247 - region-specific<br> 1.248 + fragment-specific<br> 1.249 styling because<br> 1.250 the author<br> 1.251 didn't give it<br> 1.252 @@ -544,18 +542,18 @@ 1.253 </table> 1.254 </div> 1.255 1.256 - <p> Styling an ‘<code class=css>::nth-region()</code>’ pseudo-element 1.257 + <p> Styling an ‘<code class=css>::nth-fragment()</code>’ pseudo-element 1.258 with the ‘<code class=property>overflow</code>’ property has no 1.259 effect; the computed value of ‘<code class=property>overflow</code>’ 1.260 - for the region box remains the same as the computed value of overflow for 1.261 - the element. 1.262 + for the fragment box remains the same as the computed value of overflow 1.263 + for the element. 1.264 1.265 - <p> Specifying ‘<code class=css>display: none</code>’ for a region box 1.266 - causes the region box with that index not to be generated. However, in 1.267 - terms of the indices used for matching ‘<code 1.268 - class=css>::nth-region()</code>’ pseudo-elements of later region boxes, 1.269 - it still counts as though it was generated. However, since it is not 1.270 - generated, it does not contain any content. 1.271 + <p> Specifying ‘<code class=css>display: none</code>’ for a <a 1.272 + href="#fragment-box"><i>fragment box</i></a> causes the fragment box with 1.273 + that index not to be generated. However, in terms of the indices used for 1.274 + matching ‘<code class=css>::nth-fragment()</code>’ pseudo-elements of 1.275 + later fragment boxes, it still counts as though it was generated. However, 1.276 + since it is not generated, it does not contain any content. 1.277 1.278 <p class=issue> Would it make more sense to forbid ‘<code 1.279 class=css>display:none</code>’? Or perhaps to forbid ‘<code 1.280 @@ -566,17 +564,17 @@ 1.281 1.282 <p> To match the model for other pseudo-elements where the pseudo-elements 1.283 live inside their corresponding element, declarations in ‘<code 1.284 - class=css>::nth-region()</code>’ pseudo-elements override declarations 1.285 + class=css>::nth-fragment()</code>’ pseudo-elements override declarations 1.286 in rules without the pseudo-element. The relative priority within such 1.287 declarations is determined by normal cascading order (see <a href="#CSS21" 1.288 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>). 1.289 1.290 - <p> Styles specified on ‘<code class=css>::nth-region()</code>’ 1.291 + <p> Styles specified on ‘<code class=css>::nth-fragment()</code>’ 1.292 pseudo-elements do affect inheritance to content within the <a 1.293 - href="#region-box"><i>region box</i></a>. In other words, the content 1.294 - within the <a href="#region-box"><i>region box</i></a> must inherit from 1.295 - the region box's style (i.e., the pseudo-element style) rather than 1.296 - directly from the element. This means that elements split between region 1.297 + href="#fragment-box"><i>fragment box</i></a>. In other words, the content 1.298 + within the <a href="#fragment-box"><i>fragment box</i></a> must inherit 1.299 + from the fragment box's style (i.e., the pseudo-element style) rather than 1.300 + directly from the element. This means that elements split between fragment 1.301 boxes may have different styles for different parts of the element. 1.302 1.303 <p class=issue> This inheritance rule allows specifying styles indirectly 1.304 @@ -584,8 +582,8 @@ 1.305 inheritance on properties that don't apply to ‘<code 1.306 class=css>:first-letter</code>’) that can't be specified directly (based 1.307 on the rules in the next section). This is a problem. The restrictions 1.308 - that apply to styling inside regions should also apply to inheritance from 1.309 - regions. 1.310 + that apply to styling inside fragments should also apply to inheritance 1.311 + from fragments. 1.312 1.313 <div class=example> 1.314 <table class=source-demo-pair> 1.315 @@ -595,14 +593,14 @@ 1.316 <pre><!DOCTYPE HTML> 1.317 <style> 1.318 .article { 1.319 - overflow: regions; 1.320 + overflow: fragments; 1.321 } 1.322 - .article::nth-region(1) { 1.323 + .article::nth-fragment(1) { 1.324 font-size: 1.5em; 1.325 margin-bottom: 1em; 1.326 height: 4em; 1.327 } 1.328 - .article::nth-region(n+2) { 1.329 + .article::nth-fragment(n+2) { 1.330 /* 2 and up */ 1.331 margin-left: 5em; 1.332 margin-right: 2em; 1.333 @@ -615,36 +613,37 @@ 1.334 <td> 1.335 <div class="article-font-inherit-demo one">The <code>font-size</code> 1.336 property<br> 1.337 - specified on the region<br> 1.338 + specified on the fragment<br> 1.339 is inherited into the</div> 1.340 1.341 <div class="article-font-inherit-demo two">descendants of the 1.342 - region.<br> 1.343 + fragment.<br> 1.344 This means that inherited<br> 1.345 properties can be used<br> 1.346 - reliably on a region, as in<br> 1.347 + reliably on a fragment, as in<br> 1.348 this example.</div> 1.349 </table> 1.350 </div> 1.351 1.352 - <h4 id=style-in-regions><span class=secno>4.1.3. </span>Styling inside 1.353 - regions</h4> 1.354 + <h4 id=style-in-fragments><span class=secno>4.1.3. </span>Styling inside 1.355 + fragments</h4> 1.356 1.357 - <p class=issue> Should this apply to region overflow only, or also to 1.358 + <p class=issue> Should this apply to fragment overflow only, or also to 1.359 paginated overflow, or even to pagination across pages? 1.360 1.361 - <p> The ‘<code class=css>::nth-region()</code>’ pseudo-element can also 1.362 - be used to style content inside of a <a href="#region-box"><i>region 1.363 - box</i></a>. Unlike the ‘<code class=css>::first-line</code>’ and 1.364 - ‘<code class=css>::first-letter</code>’ pseudo-elements, the ‘<code 1.365 - class=css>::nth-region()</code>’ pseudo-element can be applied to parts 1.366 - of the selector other than the subject: in particular, it can match 1.367 + <p> The ‘<code class=css>::nth-fragment()</code>’ pseudo-element can 1.368 + also be used to style content inside of a <a 1.369 + href="#fragment-box"><i>fragment box</i></a>. Unlike the ‘<code 1.370 + class=css>::first-line</code>’ and ‘<code 1.371 + class=css>::first-letter</code>’ pseudo-elements, the ‘<code 1.372 + class=css>::nth-fragment()</code>’ pseudo-element can be applied to 1.373 + parts of the selector other than the subject: in particular, it can match 1.374 ancestors of the subject. However, the only CSS properties applied by 1.375 rules with such selectors are those that apply to the ‘<code 1.376 class=css>::first-letter</code>’ pseudo-element. 1.377 1.378 <p> To be more precise, when a rule's selector has ‘<code 1.379 - class=css>::nth-region()</code>’ pseudo-elements attached to parts of 1.380 + class=css>::nth-fragment()</code>’ pseudo-elements attached to parts of 1.381 the selector other than the subject, the declarations in that rule apply 1.382 to a fragment (or pseudo-element thereof) when: 1.383 1.384 @@ -653,13 +652,13 @@ 1.385 class=css>::first-letter</code>’ pseudo-element, 1.386 1.387 <li> the declarations would apply to that fragment (or pseudo-element 1.388 - thereof) had those ‘<code class=css>::nth-region()</code>’ 1.389 + thereof) had those ‘<code class=css>::nth-fragment()</code>’ 1.390 pseudo-elements been removed, with a particular association between each 1.391 sequence of simple selectors and the element it matched, and 1.392 1.393 - <li> for each removed ‘<code class=css>::nth-region()</code>’ 1.394 + <li> for each removed ‘<code class=css>::nth-fragment()</code>’ 1.395 pseudo-element, the fragment lives within a <a 1.396 - href="#region-box"><i>region box</i></a> of the element associated in 1.397 + href="#fragment-box"><i>fragment box</i></a> of the element associated in 1.398 that association with the selector that the pseudo-element was attached 1.399 to, and whose index matches the pseudo-element. 1.400 </ol> 1.401 @@ -672,7 +671,7 @@ 1.402 <pre><!DOCTYPE HTML> 1.403 <style> 1.404 .dark-columns { 1.405 - overflow: regions; 1.406 + overflow: fragments; 1.407 width: 6em; 1.408 height: 10em; 1.409 float: left; 1.410 @@ -680,22 +679,22 @@ 1.411 font: medium/1.25 Times New 1.412 Roman, Times, serif; 1.413 } 1.414 - .dark-columns::nth-region(1) { 1.415 + .dark-columns::nth-fragment(1) { 1.416 background: aqua; color: black; 1.417 } 1.418 - .dark-columns::nth-region(1) :link { 1.419 + .dark-columns::nth-fragment(1) :link { 1.420 color: blue; 1.421 } 1.422 - .dark-columns::nth-region(1) :visited { 1.423 + .dark-columns::nth-fragment(1) :visited { 1.424 color: purple; 1.425 } 1.426 - .dark-columns::nth-region(2) { 1.427 + .dark-columns::nth-fragment(2) { 1.428 background: navy; color: white; 1.429 } 1.430 - .dark-columns::nth-region(2) :link { 1.431 + .dark-columns::nth-fragment(2) :link { 1.432 color: aqua; 1.433 } 1.434 - .dark-columns::nth-region(2) :visited { 1.435 + .dark-columns::nth-fragment(2) :visited { 1.436 color: fuchsia; 1.437 } 1.438 </style> 1.439 @@ -709,17 +708,17 @@ 1.440 text flows<br> 1.441 from one<br> 1.442 light-colored<br> 1.443 - region into<br> 1.444 + fragment into<br> 1.445 another<br> 1.446 dark-colored</div> 1.447 1.448 - <div class="dark-columns-demo two">region. We<br> 1.449 + <div class="dark-columns-demo two">fragment. We<br> 1.450 therefore want<br> 1.451 different styles<br> 1.452 for <a 1.453 href="http://www.w3.org/Provider/Style/IntoContext.html">hyperlinks</a><br> 1.454 in the different<br> 1.455 - regions.</div> 1.456 + fragments.</div> 1.457 </table> 1.458 </div> 1.459 1.460 @@ -727,11 +726,11 @@ 1.461 href="#max-lines0"><code class=property>max-lines</code></a>’ property</h3> 1.462 1.463 <p> Authors may wish to style the opening lines of an element with 1.464 - different styles by putting those opening lines in a separate region. 1.465 + different styles by putting those opening lines in a separate fragment. 1.466 However, since it may be difficult to predict the exact height occupied by 1.467 - those lines in order to restrict the first region to that height, this 1.468 + those lines in order to restrict the first fragment to that height, this 1.469 specification introduces a ‘<a href="#max-lines0"><code 1.470 - class=property>max-lines</code></a>’ property that forces a region to 1.471 + class=property>max-lines</code></a>’ property that forces a fragment to 1.472 break after a specified number of lines. This forces a break after the 1.473 given number of lines contained within the element or its descendants, as 1.474 long as those lines are in the same block formatting context. 1.475 @@ -756,7 +755,7 @@ 1.476 <tr> 1.477 <th>Applies to: 1.478 1.479 - <td>region boxes 1.480 + <td>fragment boxes 1.481 1.482 <tr> 1.483 <th>Inherited: 1.484 @@ -815,7 +814,7 @@ 1.485 parse error.</p> 1.486 </dl> 1.487 1.488 - <p class=issue>Should this apply to regions overflow only, or also to 1.489 + <p class=issue>Should this apply to fragment overflow only, or also to 1.490 pagination? 1.491 1.492 <div class=example> 1.493 @@ -826,17 +825,17 @@ 1.494 <pre><!DOCTYPE HTML> 1.495 <style> 1.496 .article { 1.497 - overflow: regions; 1.498 + overflow: fragments; 1.499 } 1.500 .article::first-letter { 1.501 font-size: 2em; 1.502 line-height: 0.9; 1.503 } 1.504 - .article::nth-region(1) { 1.505 + .article::nth-fragment(1) { 1.506 font-size: 1.5em; 1.507 max-lines: 3; 1.508 } 1.509 - .article::nth-region(n+2) { 1.510 + .article::nth-fragment(n+2) { 1.511 /* 2 and up */ 1.512 column-count: 2; 1.513 } 1.514 @@ -1181,12 +1180,12 @@ 1.515 <li>authoring tool, <a href="#authoring-tool" 1.516 title="authoring tool"><strong>5.4.</strong></a> 1.517 1.518 + <li>fragment box, <a href="#fragment-box" 1.519 + title="fragment box"><strong>4.</strong></a> 1.520 + 1.521 <li>max-lines, <a href="#max-lines0" 1.522 title=max-lines><strong>4.2.</strong></a> 1.523 1.524 - <li>region box, <a href="#region-box" 1.525 - title="region box"><strong>4.</strong></a> 1.526 - 1.527 <li>renderer, <a href="#renderer" title=renderer><strong>5.4.</strong></a> 1.528 1.529 1.530 @@ -1226,7 +1225,7 @@ 1.531 1.532 <td>none 1.533 1.534 - <td>region boxes 1.535 + <td>fragment boxes 1.536 1.537 <td>no 1.538
2.1 --- a/css3-overflow/Overview.src.html Thu Aug 16 14:25:11 2012 -0700 2.2 +++ b/css3-overflow/Overview.src.html Thu Aug 16 14:32:39 2012 -0700 2.3 @@ -163,9 +163,9 @@ 2.4 to be handled by pagination (displaying one page at a time). 2.5 It also describes features, applying to all visual media, 2.6 that allow the contents of an element 2.7 - to be spread across multiple containers, 2.8 - allowing the contents to flow across multiple regions of a page 2.9 - or to have different styles for different parts. 2.10 + to be spread across multiple fragments, 2.11 + allowing the contents to flow across multiple regions 2.12 + or to have different styles for different fragments. 2.13 </p> 2.14 2.15 <h2 class="no-num no-toc" id="status">Status of this document</h2> 2.16 @@ -214,16 +214,16 @@ 2.17 <p> 2.18 This specification introduces 2.19 a mechanism for Web pages to specify 2.20 - that a region of a page should handle overflow 2.21 + that an element of a page should handle overflow 2.22 through pagination rather than through scrolling. 2.23 </p> 2.24 2.25 <p> 2.26 This specification also extends the concept of overflow 2.27 in another direction. 2.28 - Instead of requiring that authors specify a single region 2.29 + Instead of requiring that authors specify a single area 2.30 into which the content of an element must flow, 2.31 - this specification allows authors to specify multiple regions, 2.32 + this specification allows authors to specify multiple fragments, 2.33 each with their own dimensions and styles, 2.34 so that the content of the element can flow from one to the next, 2.35 using as many as needed to place the content without overflowing. 2.36 @@ -249,53 +249,52 @@ 2.37 <p class="issue">Ability to display N pages at once 2.38 rather than just one page at once?</p> 2.39 2.40 -<h2 id="region-overflow">Region overflow</h2> 2.41 +<h2 id="fragment-overflow">Fragment overflow</h2> 2.42 2.43 <p> 2.44 This section introduces and defines the meaning of 2.45 - the new ''regions'' (<span class="issue">or ''repeat''?</span>) 2.46 - value of the 'overflow' property. 2.47 + the new ''fragments'' value of the 'overflow' property. 2.48 </p> 2.49 2.50 <p> 2.51 - When the computed value of 'overflow' for an element is ''regions'', 2.52 + When the computed value of 'overflow' for an element is ''fragments'', 2.53 and implementations would otherwise have created a box for the element, 2.54 then implementations must create at least one box for that element. 2.55 - Each box created for the element is called a <dfn>region box</dfn> 2.56 + Each box created for the element is called a <dfn>fragment box</dfn> 2.57 for that element. 2.58 - (If an element with ''overflow: regions'' generates only one box, 2.59 - that box is a <i>region box</i>. 2.60 - However, if an element's computed 'overflow' is not ''regions'', 2.61 - then its box is not a <i>region box</i>.) 2.62 - Every <i>region box</i> is a fragmentation container, 2.63 - and for each <i>region box</i> which ends with a fragmentation break, 2.64 + (If an element with ''overflow: fragments'' generates only one box, 2.65 + that box is a <i>fragment box</i>. 2.66 + However, if an element's computed 'overflow' is not ''fragments'', 2.67 + then its box is not a <i>fragment box</i>.) 2.68 + Every <i>fragment box</i> is a fragmentation container, 2.69 + and for each <i>fragment box</i> which ends with a fragmentation break, 2.70 (which could happen 2.71 because breakable content overflows in the block dimension 2.72 or because of a forced break), 2.73 - there must be another <i>region box</i> created as a next sibling 2.74 + there must be another <i>fragment box</i> created as a next sibling 2.75 of the previous one. 2.76 <span class="issue">Or is it as though it's a next sibling of 2.77 the element? Need to figure out exactly how this interacts with 2.78 other box-level fixup.</span> 2.79 (Breakable content might overflow in the box dimension either 2.80 - because of a specified size on the region box 2.81 - or because the region box is within a fragmentation context 2.82 + because of a specified size on the <i>fragment box</i> 2.83 + or because the <i>fragment box</i> is within a fragmentation context 2.84 in which it is being broken. 2.85 - In other words, a single region box is never broken 2.86 + In other words, a single <i>fragment box</i> is never broken 2.87 across columns or pages; 2.88 the pieces that are in separate columns or pages 2.89 - are always distinct region boxes.) 2.90 + are always distinct <i>fragment box</i>es.) 2.91 </p> 2.92 2.93 <p class="issue"> 2.94 - We also want ''::nth-region()'' pseudo-elements 2.95 + We also want ''::nth-fragment()'' pseudo-elements 2.96 to be able to apply to the pieces of an element 2.97 split within a fragmentation context. 2.98 Should we require that authors who want to use 2.99 - ''::nth-region()'' in this way specify ''overflow:regions'' 2.100 + ''::nth-fragment()'' in this way specify ''overflow:fragments'' 2.101 (even if they don't specify a constrained height), 2.102 or should it work automatically for all elements 2.103 - even if they don't have ''overflow: regions''? 2.104 + even if they don't have ''overflow: fragments''? 2.105 </p> 2.106 2.107 <div class="example"> 2.108 @@ -304,7 +303,7 @@ 2.109 equal-sized cards</title> 2.110 <style> 2.111 .in-cards { 2.112 - overflow: regions; 2.113 + overflow: fragments; 2.114 2.115 width: 13em; 2.116 height: 8em; 2.117 @@ -332,40 +331,33 @@ 2.118 </td></tr></table> 2.119 </div> 2.120 2.121 -<h3 id="region-styling">Region styling</h3> 2.122 +<h3 id="fragment-styling">Fragment styling</h3> 2.123 2.124 -<h4 id="region-pseudo-element">The ::nth-region() pseudo-element</h4> 2.125 +<h4 id="fragment-pseudo-element">The ::nth-fragment() pseudo-element</h4> 2.126 2.127 <p> 2.128 - The ::nth-region() pseudo-element is a pseudo-element 2.129 - that describes some of the region boxes generated by an element. 2.130 + The ::nth-fragment() pseudo-element is a pseudo-element 2.131 + that describes some of the <i>fragment box</i>es generated by an element. 2.132 The argument to the pseudo-element takes the same syntax 2.133 as the argument to the :nth-child() pseudo-class 2.134 defined in [[!SELECT]], and has the same meaning 2.135 except that the number is relative to 2.136 - <i>region boxes</i> generated by the element 2.137 + <i>fragment box</i>es generated by the element 2.138 instead of siblings of the element. 2.139 </p> 2.140 2.141 - <p class="issue"> 2.142 - If we go with a name for the 'overflow' value other than 2.143 - ''overflow: regions'', 2.144 - then we should probably rename this pseudo-element, 2.145 - perhaps to ::nth-piece(), ::nth-part(), or ::nth-instance(). 2.146 - </p> 2.147 - 2.148 <p class="note"> 2.149 - Selectors that allow addressing regions 2.150 + Selectors that allow addressing fragments 2.151 by counting from the end rather than the start 2.152 are intentionally not provided. 2.153 Such selectors would interfere with determining 2.154 - the number of regions. 2.155 + the number of fragments. 2.156 </p> 2.157 2.158 -<h4 id="style-of-regions">Styling of regions</h4> 2.159 +<h4 id="style-of-fragments">Styling of fragments</h4> 2.160 2.161 <p class="issue"> 2.162 - Should this apply to region overflow only, 2.163 + Should this apply to fragment overflow only, 2.164 or also to paginated overflow? 2.165 (If it applies, 2.166 then stricter property restrictions would be needed 2.167 @@ -373,24 +365,24 @@ 2.168 </p> 2.169 2.170 <p> 2.171 - In the absence of rules with ''::nth-region()'' pseudo-elements, 2.172 - the computed style for each <i>region box</i> 2.173 + In the absence of rules with ''::nth-fragment()'' pseudo-elements, 2.174 + the computed style for each <i>fragment box</i> 2.175 is the computed style for the element 2.176 - for which the <i>region box</i> was created. 2.177 - However, the style for a <i>region box</i> is also influenced 2.178 + for which the <i>fragment box</i> was created. 2.179 + However, the style for a <i>fragment box</i> is also influenced 2.180 by rules whose selector's <i>subject</i> [[!SELECT]] 2.181 - has an ''::nth-region()'' pseudo-element, 2.182 - if the 1-based number of the region box matches 2.183 - that ''::nth-region()'' pseudo-element 2.184 - and the selector (excluding the ''::nth-region()'' pseudo-element) 2.185 - matches the element generating the regions. 2.186 + has an ''::nth-fragment()'' pseudo-element, 2.187 + if the 1-based number of the <i>fragment box</i> matches 2.188 + that ''::nth-fragment()'' pseudo-element 2.189 + and the selector (excluding the ''::nth-fragment()'' pseudo-element) 2.190 + matches the element generating the fragments. 2.191 </p> 2.192 2.193 <div class="example"> 2.194 <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML> 2.195 <style> 2.196 .bouncy-columns { 2.197 - overflow: regions; 2.198 + overflow: fragments; 2.199 width: 6em; 2.200 height: 10em; 2.201 float: left; 2.202 @@ -398,11 +390,11 @@ 2.203 font: medium/1.25 Times New 2.204 Roman, Times, serif; 2.205 } 2.206 - .bouncy-columns::nth-region(1) { 2.207 + .bouncy-columns::nth-fragment(1) { 2.208 background: aqua; color: black; 2.209 transform: rotate(-3deg); 2.210 } 2.211 - .bouncy-columns::nth-region(2) { 2.212 + .bouncy-columns::nth-fragment(2) { 2.213 background: yellow; color: black; 2.214 transform: rotate(3deg); 2.215 } 2.216 @@ -412,23 +404,23 @@ 2.217 </div></pre></td><td> 2.218 <div class="bouncy-columns-demo one">In this<br>example, the<br>text in the div<br>is broken into<br>a series of<br>columns. The<br>author<br>probably</div> 2.219 <div class="bouncy-columns-demo two">intended the<br>text to fill two<br>columns. But<br>if it happens to<br>fill three<br>columns, the<br>third column is<br>still created. It</div> 2.220 - <div class="bouncy-columns-demo">just doesn't<br>have any<br>region-specific<br>styling because<br>the author<br>didn't give it<br>any.</div> 2.221 + <div class="bouncy-columns-demo">just doesn't<br>have any<br>fragment-specific<br>styling because<br>the author<br>didn't give it<br>any.</div> 2.222 </td></tr></table> 2.223 </div> 2.224 2.225 <p> 2.226 - Styling an ''::nth-region()'' pseudo-element with the 'overflow' 2.227 + Styling an ''::nth-fragment()'' pseudo-element with the 'overflow' 2.228 property has no effect; 2.229 - the computed value of 'overflow' for the region box 2.230 + the computed value of 'overflow' for the fragment box 2.231 remains the same as the computed value of overflow for the element. 2.232 </p> 2.233 2.234 <p> 2.235 - Specifying ''display: none'' for a region box causes 2.236 - the region box with that index not to be generated. 2.237 + Specifying ''display: none'' for a <i>fragment box</i> causes 2.238 + the fragment box with that index not to be generated. 2.239 However, in terms of the indices 2.240 - used for matching ''::nth-region()'' pseudo-elements 2.241 - of later region boxes, 2.242 + used for matching ''::nth-fragment()'' pseudo-elements 2.243 + of later fragment boxes, 2.244 it still counts as though it was generated. 2.245 However, since it is not generated, it does not contain any content. 2.246 </p> 2.247 @@ -442,19 +434,19 @@ 2.248 <p> 2.249 To match the model for other pseudo-elements 2.250 where the pseudo-elements live inside their corresponding element, 2.251 - declarations in ''::nth-region()'' pseudo-elements override 2.252 + declarations in ''::nth-fragment()'' pseudo-elements override 2.253 declarations in rules without the pseudo-element. 2.254 The relative priority within such declarations is determined 2.255 by normal cascading order (see [[!CSS21]]). 2.256 </p> 2.257 2.258 <p> 2.259 - Styles specified on ''::nth-region()'' pseudo-elements 2.260 - do affect inheritance to content within the <i>region box</i>. 2.261 - In other words, the content within the <i>region box</i> must 2.262 - inherit from the region box's style (i.e., the pseudo-element style) 2.263 + Styles specified on ''::nth-fragment()'' pseudo-elements 2.264 + do affect inheritance to content within the <i>fragment box</i>. 2.265 + In other words, the content within the <i>fragment box</i> must 2.266 + inherit from the fragment box's style (i.e., the pseudo-element style) 2.267 rather than directly from the element. 2.268 - This means that elements split between region boxes may 2.269 + This means that elements split between fragment boxes may 2.270 have different styles for different parts of the element. 2.271 </p> 2.272 2.273 @@ -465,22 +457,22 @@ 2.274 that can't be specified directly 2.275 (based on the rules in the next section). 2.276 This is a problem. 2.277 - The restrictions that apply to styling inside regions 2.278 - should also apply to inheritance from regions. 2.279 + The restrictions that apply to styling inside fragments 2.280 + should also apply to inheritance from fragments. 2.281 </p> 2.282 2.283 <div class="example"> 2.284 <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML> 2.285 <style> 2.286 .article { 2.287 - overflow: regions; 2.288 + overflow: fragments; 2.289 } 2.290 - .article::nth-region(1) { 2.291 + .article::nth-fragment(1) { 2.292 font-size: 1.5em; 2.293 margin-bottom: 1em; 2.294 height: 4em; 2.295 } 2.296 - .article::nth-region(n+2) { 2.297 + .article::nth-fragment(n+2) { 2.298 /* 2 and up */ 2.299 margin-left: 5em; 2.300 margin-right: 2em; 2.301 @@ -489,25 +481,25 @@ 2.302 <div class="article"> 2.303 The <code>font-size</code> property<i>...</i> 2.304 </div></pre></td><td> 2.305 - <div class="article-font-inherit-demo one">The <code>font-size</code> property<br>specified on the region<br>is inherited into the</div> 2.306 - <div class="article-font-inherit-demo two">descendants of the region.<br>This means that inherited<br>properties can be used<br>reliably on a region, as in<br>this example.</div> 2.307 + <div class="article-font-inherit-demo one">The <code>font-size</code> property<br>specified on the fragment<br>is inherited into the</div> 2.308 + <div class="article-font-inherit-demo two">descendants of the fragment.<br>This means that inherited<br>properties can be used<br>reliably on a fragment, as in<br>this example.</div> 2.309 </td></tr></table> 2.310 </div> 2.311 2.312 -<h4 id="style-in-regions">Styling inside regions</h4> 2.313 +<h4 id="style-in-fragments">Styling inside fragments</h4> 2.314 2.315 <p class="issue"> 2.316 - Should this apply to region overflow only, 2.317 + Should this apply to fragment overflow only, 2.318 or also to paginated overflow, 2.319 or even to pagination across pages? 2.320 </p> 2.321 2.322 <p> 2.323 - The ''::nth-region()'' pseudo-element 2.324 + The ''::nth-fragment()'' pseudo-element 2.325 can also be used to style 2.326 - content inside of a <i>region box</i>. 2.327 + content inside of a <i>fragment box</i>. 2.328 Unlike the ''::first-line'' and ''::first-letter'' pseudo-elements, 2.329 - the ''::nth-region()'' pseudo-element can be applied 2.330 + the ''::nth-fragment()'' pseudo-element can be applied 2.331 to parts of the selector other than the subject: 2.332 in particular, it can match ancestors of the subject. 2.333 However, the only CSS properties applied 2.334 @@ -518,7 +510,7 @@ 2.335 2.336 <p> 2.337 To be more precise, 2.338 - when a rule's selector has ''::nth-region()'' pseudo-elements 2.339 + when a rule's selector has ''::nth-fragment()'' pseudo-elements 2.340 attached to parts of the selector other than the subject, 2.341 the declarations in that rule apply to 2.342 a fragment (or pseudo-element thereof) when: 2.343 @@ -531,14 +523,14 @@ 2.344 <li> 2.345 the declarations would apply to 2.346 that fragment (or pseudo-element thereof) 2.347 - had those ''::nth-region()'' pseudo-elements been removed, 2.348 + had those ''::nth-fragment()'' pseudo-elements been removed, 2.349 with a particular association between 2.350 each sequence of simple selectors and the element it matched, 2.351 and 2.352 </li> 2.353 <li> 2.354 - for each removed ''::nth-region()'' pseudo-element, 2.355 - the fragment lives within a <i>region box</i> 2.356 + for each removed ''::nth-fragment()'' pseudo-element, 2.357 + the fragment lives within a <i>fragment box</i> 2.358 of the element associated in that association 2.359 with the selector that the pseudo-element was attached to, 2.360 and whose index matches the pseudo-element. 2.361 @@ -549,7 +541,7 @@ 2.362 <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML> 2.363 <style> 2.364 .dark-columns { 2.365 - overflow: regions; 2.366 + overflow: fragments; 2.367 width: 6em; 2.368 height: 10em; 2.369 float: left; 2.370 @@ -557,30 +549,30 @@ 2.371 font: medium/1.25 Times New 2.372 Roman, Times, serif; 2.373 } 2.374 - .dark-columns::nth-region(1) { 2.375 + .dark-columns::nth-fragment(1) { 2.376 background: aqua; color: black; 2.377 } 2.378 - .dark-columns::nth-region(1) :link { 2.379 + .dark-columns::nth-fragment(1) :link { 2.380 color: blue; 2.381 } 2.382 - .dark-columns::nth-region(1) :visited { 2.383 + .dark-columns::nth-fragment(1) :visited { 2.384 color: purple; 2.385 } 2.386 - .dark-columns::nth-region(2) { 2.387 + .dark-columns::nth-fragment(2) { 2.388 background: navy; color: white; 2.389 } 2.390 - .dark-columns::nth-region(2) :link { 2.391 + .dark-columns::nth-fragment(2) :link { 2.392 color: aqua; 2.393 } 2.394 - .dark-columns::nth-region(2) :visited { 2.395 + .dark-columns::nth-fragment(2) :visited { 2.396 color: fuchsia; 2.397 } 2.398 </style> 2.399 <div class="dark-columns"> 2.400 <i>...</i> 2.401 </div></pre></td><td> 2.402 - <div class="dark-columns-demo one">In this<br><a href="http://en.wiktionary.org/wiki/example">example</a>, the<br>text flows<br>from one<br>light-colored<br>region into<br>another<br>dark-colored</div> 2.403 - <div class="dark-columns-demo two">region. We<br>therefore want<br>different styles<br>for <a href="http://www.w3.org/Provider/Style/IntoContext.html">hyperlinks</a><br>in the different<br>regions.</div> 2.404 + <div class="dark-columns-demo one">In this<br><a href="http://en.wiktionary.org/wiki/example">example</a>, the<br>text flows<br>from one<br>light-colored<br>fragment into<br>another<br>dark-colored</div> 2.405 + <div class="dark-columns-demo two">fragment. We<br>therefore want<br>different styles<br>for <a href="http://www.w3.org/Provider/Style/IntoContext.html">hyperlinks</a><br>in the different<br>fragments.</div> 2.406 </td></tr></table> 2.407 </div> 2.408 2.409 @@ -590,12 +582,12 @@ 2.410 <p> 2.411 Authors may wish to style the opening lines of an element 2.412 with different styles 2.413 - by putting those opening lines in a separate region. 2.414 + by putting those opening lines in a separate fragment. 2.415 However, since it may be difficult to predict the exact height 2.416 occupied by those lines 2.417 - in order to restrict the first region to that height, 2.418 + in order to restrict the first fragment to that height, 2.419 this specification introduces a 'max-lines' property 2.420 - that forces a region to break 2.421 + that forces a fragment to break 2.422 after a specified number of lines. 2.423 This forces a break after the given number of lines 2.424 contained within the element or its descendants, 2.425 @@ -614,7 +606,7 @@ 2.426 <td>none 2.427 <tr> 2.428 <th>Applies to: 2.429 - <td>region boxes 2.430 + <td>fragment boxes 2.431 <tr> 2.432 <th>Inherited: 2.433 <td>no 2.434 @@ -669,24 +661,24 @@ 2.435 </dd> 2.436 </dl> 2.437 2.438 -<p class="issue">Should this apply to regions overflow only, or also 2.439 +<p class="issue">Should this apply to fragment overflow only, or also 2.440 to pagination?</p> 2.441 2.442 <div class="example"> 2.443 <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML> 2.444 <style> 2.445 .article { 2.446 - overflow: regions; 2.447 + overflow: fragments; 2.448 } 2.449 .article::first-letter { 2.450 font-size: 2em; 2.451 line-height: 0.9; 2.452 } 2.453 - .article::nth-region(1) { 2.454 + .article::nth-fragment(1) { 2.455 font-size: 1.5em; 2.456 max-lines: 3; 2.457 } 2.458 - .article::nth-region(n+2) { 2.459 + .article::nth-fragment(n+2) { 2.460 /* 2 and up */ 2.461 column-count: 2; 2.462 }
