1.1 --- a/css3-overflow/Overview.src.html Thu Aug 16 14:25:11 2012 -0700
1.2 +++ b/css3-overflow/Overview.src.html Thu Aug 16 14:32:39 2012 -0700
1.3 @@ -163,9 +163,9 @@
1.4 to be handled by pagination (displaying one page at a time).
1.5 It also describes features, applying to all visual media,
1.6 that allow the contents of an element
1.7 - to be spread across multiple containers,
1.8 - allowing the contents to flow across multiple regions of a page
1.9 - or to have different styles for different parts.
1.10 + to be spread across multiple fragments,
1.11 + allowing the contents to flow across multiple regions
1.12 + or to have different styles for different fragments.
1.13 </p>
1.14
1.15 <h2 class="no-num no-toc" id="status">Status of this document</h2>
1.16 @@ -214,16 +214,16 @@
1.17 <p>
1.18 This specification introduces
1.19 a mechanism for Web pages to specify
1.20 - that a region of a page should handle overflow
1.21 + that an element of a page should handle overflow
1.22 through pagination rather than through scrolling.
1.23 </p>
1.24
1.25 <p>
1.26 This specification also extends the concept of overflow
1.27 in another direction.
1.28 - Instead of requiring that authors specify a single region
1.29 + Instead of requiring that authors specify a single area
1.30 into which the content of an element must flow,
1.31 - this specification allows authors to specify multiple regions,
1.32 + this specification allows authors to specify multiple fragments,
1.33 each with their own dimensions and styles,
1.34 so that the content of the element can flow from one to the next,
1.35 using as many as needed to place the content without overflowing.
1.36 @@ -249,53 +249,52 @@
1.37 <p class="issue">Ability to display N pages at once
1.38 rather than just one page at once?</p>
1.39
1.40 -<h2 id="region-overflow">Region overflow</h2>
1.41 +<h2 id="fragment-overflow">Fragment overflow</h2>
1.42
1.43 <p>
1.44 This section introduces and defines the meaning of
1.45 - the new ''regions'' (<span class="issue">or ''repeat''?</span>)
1.46 - value of the 'overflow' property.
1.47 + the new ''fragments'' value of the 'overflow' property.
1.48 </p>
1.49
1.50 <p>
1.51 - When the computed value of 'overflow' for an element is ''regions'',
1.52 + When the computed value of 'overflow' for an element is ''fragments'',
1.53 and implementations would otherwise have created a box for the element,
1.54 then implementations must create at least one box for that element.
1.55 - Each box created for the element is called a <dfn>region box</dfn>
1.56 + Each box created for the element is called a <dfn>fragment box</dfn>
1.57 for that element.
1.58 - (If an element with ''overflow: regions'' generates only one box,
1.59 - that box is a <i>region box</i>.
1.60 - However, if an element's computed 'overflow' is not ''regions'',
1.61 - then its box is not a <i>region box</i>.)
1.62 - Every <i>region box</i> is a fragmentation container,
1.63 - and for each <i>region box</i> which ends with a fragmentation break,
1.64 + (If an element with ''overflow: fragments'' generates only one box,
1.65 + that box is a <i>fragment box</i>.
1.66 + However, if an element's computed 'overflow' is not ''fragments'',
1.67 + then its box is not a <i>fragment box</i>.)
1.68 + Every <i>fragment box</i> is a fragmentation container,
1.69 + and for each <i>fragment box</i> which ends with a fragmentation break,
1.70 (which could happen
1.71 because breakable content overflows in the block dimension
1.72 or because of a forced break),
1.73 - there must be another <i>region box</i> created as a next sibling
1.74 + there must be another <i>fragment box</i> created as a next sibling
1.75 of the previous one.
1.76 <span class="issue">Or is it as though it's a next sibling of
1.77 the element? Need to figure out exactly how this interacts with
1.78 other box-level fixup.</span>
1.79 (Breakable content might overflow in the box dimension either
1.80 - because of a specified size on the region box
1.81 - or because the region box is within a fragmentation context
1.82 + because of a specified size on the <i>fragment box</i>
1.83 + or because the <i>fragment box</i> is within a fragmentation context
1.84 in which it is being broken.
1.85 - In other words, a single region box is never broken
1.86 + In other words, a single <i>fragment box</i> is never broken
1.87 across columns or pages;
1.88 the pieces that are in separate columns or pages
1.89 - are always distinct region boxes.)
1.90 + are always distinct <i>fragment box</i>es.)
1.91 </p>
1.92
1.93 <p class="issue">
1.94 - We also want ''::nth-region()'' pseudo-elements
1.95 + We also want ''::nth-fragment()'' pseudo-elements
1.96 to be able to apply to the pieces of an element
1.97 split within a fragmentation context.
1.98 Should we require that authors who want to use
1.99 - ''::nth-region()'' in this way specify ''overflow:regions''
1.100 + ''::nth-fragment()'' in this way specify ''overflow:fragments''
1.101 (even if they don't specify a constrained height),
1.102 or should it work automatically for all elements
1.103 - even if they don't have ''overflow: regions''?
1.104 + even if they don't have ''overflow: fragments''?
1.105 </p>
1.106
1.107 <div class="example">
1.108 @@ -304,7 +303,7 @@
1.109 equal-sized cards</title>
1.110 <style>
1.111 .in-cards {
1.112 - overflow: regions;
1.113 + overflow: fragments;
1.114
1.115 width: 13em;
1.116 height: 8em;
1.117 @@ -332,40 +331,33 @@
1.118 </td></tr></table>
1.119 </div>
1.120
1.121 -<h3 id="region-styling">Region styling</h3>
1.122 +<h3 id="fragment-styling">Fragment styling</h3>
1.123
1.124 -<h4 id="region-pseudo-element">The ::nth-region() pseudo-element</h4>
1.125 +<h4 id="fragment-pseudo-element">The ::nth-fragment() pseudo-element</h4>
1.126
1.127 <p>
1.128 - The ::nth-region() pseudo-element is a pseudo-element
1.129 - that describes some of the region boxes generated by an element.
1.130 + The ::nth-fragment() pseudo-element is a pseudo-element
1.131 + that describes some of the <i>fragment box</i>es generated by an element.
1.132 The argument to the pseudo-element takes the same syntax
1.133 as the argument to the :nth-child() pseudo-class
1.134 defined in [[!SELECT]], and has the same meaning
1.135 except that the number is relative to
1.136 - <i>region boxes</i> generated by the element
1.137 + <i>fragment box</i>es generated by the element
1.138 instead of siblings of the element.
1.139 </p>
1.140
1.141 - <p class="issue">
1.142 - If we go with a name for the 'overflow' value other than
1.143 - ''overflow: regions'',
1.144 - then we should probably rename this pseudo-element,
1.145 - perhaps to ::nth-piece(), ::nth-part(), or ::nth-instance().
1.146 - </p>
1.147 -
1.148 <p class="note">
1.149 - Selectors that allow addressing regions
1.150 + Selectors that allow addressing fragments
1.151 by counting from the end rather than the start
1.152 are intentionally not provided.
1.153 Such selectors would interfere with determining
1.154 - the number of regions.
1.155 + the number of fragments.
1.156 </p>
1.157
1.158 -<h4 id="style-of-regions">Styling of regions</h4>
1.159 +<h4 id="style-of-fragments">Styling of fragments</h4>
1.160
1.161 <p class="issue">
1.162 - Should this apply to region overflow only,
1.163 + Should this apply to fragment overflow only,
1.164 or also to paginated overflow?
1.165 (If it applies,
1.166 then stricter property restrictions would be needed
1.167 @@ -373,24 +365,24 @@
1.168 </p>
1.169
1.170 <p>
1.171 - In the absence of rules with ''::nth-region()'' pseudo-elements,
1.172 - the computed style for each <i>region box</i>
1.173 + In the absence of rules with ''::nth-fragment()'' pseudo-elements,
1.174 + the computed style for each <i>fragment box</i>
1.175 is the computed style for the element
1.176 - for which the <i>region box</i> was created.
1.177 - However, the style for a <i>region box</i> is also influenced
1.178 + for which the <i>fragment box</i> was created.
1.179 + However, the style for a <i>fragment box</i> is also influenced
1.180 by rules whose selector's <i>subject</i> [[!SELECT]]
1.181 - has an ''::nth-region()'' pseudo-element,
1.182 - if the 1-based number of the region box matches
1.183 - that ''::nth-region()'' pseudo-element
1.184 - and the selector (excluding the ''::nth-region()'' pseudo-element)
1.185 - matches the element generating the regions.
1.186 + has an ''::nth-fragment()'' pseudo-element,
1.187 + if the 1-based number of the <i>fragment box</i> matches
1.188 + that ''::nth-fragment()'' pseudo-element
1.189 + and the selector (excluding the ''::nth-fragment()'' pseudo-element)
1.190 + matches the element generating the fragments.
1.191 </p>
1.192
1.193 <div class="example">
1.194 <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML>
1.195 <style>
1.196 .bouncy-columns {
1.197 - overflow: regions;
1.198 + overflow: fragments;
1.199 width: 6em;
1.200 height: 10em;
1.201 float: left;
1.202 @@ -398,11 +390,11 @@
1.203 font: medium/1.25 Times New
1.204 Roman, Times, serif;
1.205 }
1.206 - .bouncy-columns::nth-region(1) {
1.207 + .bouncy-columns::nth-fragment(1) {
1.208 background: aqua; color: black;
1.209 transform: rotate(-3deg);
1.210 }
1.211 - .bouncy-columns::nth-region(2) {
1.212 + .bouncy-columns::nth-fragment(2) {
1.213 background: yellow; color: black;
1.214 transform: rotate(3deg);
1.215 }
1.216 @@ -412,23 +404,23 @@
1.217 </div></pre></td><td>
1.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>
1.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>
1.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>
1.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>
1.222 </td></tr></table>
1.223 </div>
1.224
1.225 <p>
1.226 - Styling an ''::nth-region()'' pseudo-element with the 'overflow'
1.227 + Styling an ''::nth-fragment()'' pseudo-element with the 'overflow'
1.228 property has no effect;
1.229 - the computed value of 'overflow' for the region box
1.230 + the computed value of 'overflow' for the fragment box
1.231 remains the same as the computed value of overflow for the element.
1.232 </p>
1.233
1.234 <p>
1.235 - Specifying ''display: none'' for a region box causes
1.236 - the region box with that index not to be generated.
1.237 + Specifying ''display: none'' for a <i>fragment box</i> causes
1.238 + the fragment box with that index not to be generated.
1.239 However, in terms of the indices
1.240 - used for matching ''::nth-region()'' pseudo-elements
1.241 - of later region boxes,
1.242 + used for matching ''::nth-fragment()'' pseudo-elements
1.243 + of later fragment boxes,
1.244 it still counts as though it was generated.
1.245 However, since it is not generated, it does not contain any content.
1.246 </p>
1.247 @@ -442,19 +434,19 @@
1.248 <p>
1.249 To match the model for other pseudo-elements
1.250 where the pseudo-elements live inside their corresponding element,
1.251 - declarations in ''::nth-region()'' pseudo-elements override
1.252 + declarations in ''::nth-fragment()'' pseudo-elements override
1.253 declarations in rules without the pseudo-element.
1.254 The relative priority within such declarations is determined
1.255 by normal cascading order (see [[!CSS21]]).
1.256 </p>
1.257
1.258 <p>
1.259 - Styles specified on ''::nth-region()'' pseudo-elements
1.260 - do affect inheritance to content within the <i>region box</i>.
1.261 - In other words, the content within the <i>region box</i> must
1.262 - inherit from the region box's style (i.e., the pseudo-element style)
1.263 + Styles specified on ''::nth-fragment()'' pseudo-elements
1.264 + do affect inheritance to content within the <i>fragment box</i>.
1.265 + In other words, the content within the <i>fragment box</i> must
1.266 + inherit from the fragment box's style (i.e., the pseudo-element style)
1.267 rather than directly from the element.
1.268 - This means that elements split between region boxes may
1.269 + This means that elements split between fragment boxes may
1.270 have different styles for different parts of the element.
1.271 </p>
1.272
1.273 @@ -465,22 +457,22 @@
1.274 that can't be specified directly
1.275 (based on the rules in the next section).
1.276 This is a problem.
1.277 - The restrictions that apply to styling inside regions
1.278 - should also apply to inheritance from regions.
1.279 + The restrictions that apply to styling inside fragments
1.280 + should also apply to inheritance from fragments.
1.281 </p>
1.282
1.283 <div class="example">
1.284 <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML>
1.285 <style>
1.286 .article {
1.287 - overflow: regions;
1.288 + overflow: fragments;
1.289 }
1.290 - .article::nth-region(1) {
1.291 + .article::nth-fragment(1) {
1.292 font-size: 1.5em;
1.293 margin-bottom: 1em;
1.294 height: 4em;
1.295 }
1.296 - .article::nth-region(n+2) {
1.297 + .article::nth-fragment(n+2) {
1.298 /* 2 and up */
1.299 margin-left: 5em;
1.300 margin-right: 2em;
1.301 @@ -489,25 +481,25 @@
1.302 <div class="article">
1.303 The <code>font-size</code> property<i>...</i>
1.304 </div></pre></td><td>
1.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>
1.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>
1.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>
1.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>
1.309 </td></tr></table>
1.310 </div>
1.311
1.312 -<h4 id="style-in-regions">Styling inside regions</h4>
1.313 +<h4 id="style-in-fragments">Styling inside fragments</h4>
1.314
1.315 <p class="issue">
1.316 - Should this apply to region overflow only,
1.317 + Should this apply to fragment overflow only,
1.318 or also to paginated overflow,
1.319 or even to pagination across pages?
1.320 </p>
1.321
1.322 <p>
1.323 - The ''::nth-region()'' pseudo-element
1.324 + The ''::nth-fragment()'' pseudo-element
1.325 can also be used to style
1.326 - content inside of a <i>region box</i>.
1.327 + content inside of a <i>fragment box</i>.
1.328 Unlike the ''::first-line'' and ''::first-letter'' pseudo-elements,
1.329 - the ''::nth-region()'' pseudo-element can be applied
1.330 + the ''::nth-fragment()'' pseudo-element can be applied
1.331 to parts of the selector other than the subject:
1.332 in particular, it can match ancestors of the subject.
1.333 However, the only CSS properties applied
1.334 @@ -518,7 +510,7 @@
1.335
1.336 <p>
1.337 To be more precise,
1.338 - when a rule's selector has ''::nth-region()'' pseudo-elements
1.339 + when a rule's selector has ''::nth-fragment()'' pseudo-elements
1.340 attached to parts of the selector other than the subject,
1.341 the declarations in that rule apply to
1.342 a fragment (or pseudo-element thereof) when:
1.343 @@ -531,14 +523,14 @@
1.344 <li>
1.345 the declarations would apply to
1.346 that fragment (or pseudo-element thereof)
1.347 - had those ''::nth-region()'' pseudo-elements been removed,
1.348 + had those ''::nth-fragment()'' pseudo-elements been removed,
1.349 with a particular association between
1.350 each sequence of simple selectors and the element it matched,
1.351 and
1.352 </li>
1.353 <li>
1.354 - for each removed ''::nth-region()'' pseudo-element,
1.355 - the fragment lives within a <i>region box</i>
1.356 + for each removed ''::nth-fragment()'' pseudo-element,
1.357 + the fragment lives within a <i>fragment box</i>
1.358 of the element associated in that association
1.359 with the selector that the pseudo-element was attached to,
1.360 and whose index matches the pseudo-element.
1.361 @@ -549,7 +541,7 @@
1.362 <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML>
1.363 <style>
1.364 .dark-columns {
1.365 - overflow: regions;
1.366 + overflow: fragments;
1.367 width: 6em;
1.368 height: 10em;
1.369 float: left;
1.370 @@ -557,30 +549,30 @@
1.371 font: medium/1.25 Times New
1.372 Roman, Times, serif;
1.373 }
1.374 - .dark-columns::nth-region(1) {
1.375 + .dark-columns::nth-fragment(1) {
1.376 background: aqua; color: black;
1.377 }
1.378 - .dark-columns::nth-region(1) :link {
1.379 + .dark-columns::nth-fragment(1) :link {
1.380 color: blue;
1.381 }
1.382 - .dark-columns::nth-region(1) :visited {
1.383 + .dark-columns::nth-fragment(1) :visited {
1.384 color: purple;
1.385 }
1.386 - .dark-columns::nth-region(2) {
1.387 + .dark-columns::nth-fragment(2) {
1.388 background: navy; color: white;
1.389 }
1.390 - .dark-columns::nth-region(2) :link {
1.391 + .dark-columns::nth-fragment(2) :link {
1.392 color: aqua;
1.393 }
1.394 - .dark-columns::nth-region(2) :visited {
1.395 + .dark-columns::nth-fragment(2) :visited {
1.396 color: fuchsia;
1.397 }
1.398 </style>
1.399 <div class="dark-columns">
1.400 <i>...</i>
1.401 </div></pre></td><td>
1.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>
1.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>
1.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>
1.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>
1.406 </td></tr></table>
1.407 </div>
1.408
1.409 @@ -590,12 +582,12 @@
1.410 <p>
1.411 Authors may wish to style the opening lines of an element
1.412 with different styles
1.413 - by putting those opening lines in a separate region.
1.414 + by putting those opening lines in a separate fragment.
1.415 However, since it may be difficult to predict the exact height
1.416 occupied by those lines
1.417 - in order to restrict the first region to that height,
1.418 + in order to restrict the first fragment to that height,
1.419 this specification introduces a 'max-lines' property
1.420 - that forces a region to break
1.421 + that forces a fragment to break
1.422 after a specified number of lines.
1.423 This forces a break after the given number of lines
1.424 contained within the element or its descendants,
1.425 @@ -614,7 +606,7 @@
1.426 <td>none
1.427 <tr>
1.428 <th>Applies to:
1.429 - <td>region boxes
1.430 + <td>fragment boxes
1.431 <tr>
1.432 <th>Inherited:
1.433 <td>no
1.434 @@ -669,24 +661,24 @@
1.435 </dd>
1.436 </dl>
1.437
1.438 -<p class="issue">Should this apply to regions overflow only, or also
1.439 +<p class="issue">Should this apply to fragment overflow only, or also
1.440 to pagination?</p>
1.441
1.442 <div class="example">
1.443 <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML>
1.444 <style>
1.445 .article {
1.446 - overflow: regions;
1.447 + overflow: fragments;
1.448 }
1.449 .article::first-letter {
1.450 font-size: 2em;
1.451 line-height: 0.9;
1.452 }
1.453 - .article::nth-region(1) {
1.454 + .article::nth-fragment(1) {
1.455 font-size: 1.5em;
1.456 max-lines: 3;
1.457 }
1.458 - .article::nth-region(n+2) {
1.459 + .article::nth-fragment(n+2) {
1.460 /* 2 and up */
1.461 column-count: 2;
1.462 }
