css-overflow/Overview.src.html

Thu, 28 Mar 2013 16:57:56 -0700

author
Tab Atkins Jr. <jackalmage@gmail.com>
date
Thu, 28 Mar 2013 16:57:56 -0700
changeset 7847
f7490857b4eb
parent 7820
css3-overflow/Overview.src.html@dd69498547be
child 7856
589545d6b465
permissions
-rw-r--r--

THE GREAT RENAMING

dbaron@6470 1 <!DOCTYPE html>
dbaron@6470 2 <html lang="en">
dbaron@6470 3 <head>
dbaron@6470 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
dbaron@6483 5 <title>CSS Overflow Module Level 3</title>
dbaron@6470 6 <link rel=contents href="#contents">
dbaron@6470 7 <link rel=index href="#index">
dbaron@6470 8 <link rel="stylesheet" type="text/css" href="../default.css">
dbaron@6470 9 <link rel="stylesheet" type="text/css"
dbaron@6470 10 href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css">
dbaron@6475 11 <style>
dbaron@6477 12 table.source-demo-pair {
dbaron@6477 13 width: 100%;
dbaron@6477 14 }
dbaron@6481 15
dbaron@6475 16 .in-cards-demo {
dbaron@6475 17 width: 13em;
dbaron@6475 18 height: 8em;
dbaron@6475 19
dbaron@6475 20 padding: 4px;
dbaron@6475 21 border: medium solid blue;
dbaron@6475 22 margin: 6px;
dbaron@6475 23
dbaron@6475 24 font: medium/1.3 Times New Roman, Times, serif;
dbaron@6475 25 white-space: nowrap;
dbaron@6475 26 }
dbaron@6481 27
dbaron@6477 28 .bouncy-columns-demo {
dbaron@6477 29 width: 6em;
dbaron@6477 30 height: 10em;
dbaron@6477 31 float: left;
dbaron@6477 32 margin: 1em;
dbaron@6477 33 font: medium/1.25 Times New Roman, Times, serif;
dbaron@6477 34 white-space: nowrap;
dbaron@6477 35 }
dbaron@6477 36 .bouncy-columns-demo.one {
dbaron@6477 37 background: aqua; color: black;
dbaron@6477 38 transform: rotate(-3deg);
dbaron@6477 39 }
dbaron@6477 40 .bouncy-columns-demo.two {
dbaron@6477 41 background: yellow; color: black;
dbaron@6477 42 transform: rotate(3deg);
dbaron@6477 43 }
dbaron@6479 44
dbaron@6480 45 .article-font-inherit-demo {
dbaron@6480 46 font: 1em/1.25 Times New Roman, Times, serif;
dbaron@6480 47 white-space: nowrap;
dbaron@6480 48 }
dbaron@6480 49 .article-font-inherit-demo.one {
dbaron@6480 50 width: 12em;
dbaron@6480 51 font-size: 1.5em;
dbaron@6480 52 margin-bottom: 1em;
dbaron@6480 53 height: 4em;
dbaron@6480 54 }
dbaron@6480 55 .article-font-inherit-demo.two {
dbaron@6480 56 width: 11em;
dbaron@6480 57 margin-left: 5em;
dbaron@6480 58 margin-right: 2em;
dbaron@6480 59 }
dbaron@6480 60
dbaron@6481 61 .dark-columns-demo {
dbaron@6481 62 width: 6em;
dbaron@6481 63 height: 10em;
dbaron@6481 64 float: left;
dbaron@6481 65 margin-right: 1em;
dbaron@6481 66 font: medium/1.25 Times New Roman, Times, serif;
dbaron@6481 67 white-space: nowrap;
dbaron@6481 68 }
dbaron@6481 69 .dark-columns-demo.one {
dbaron@6481 70 background: aqua; color: black;
dbaron@6481 71 }
dbaron@6481 72 .dark-columns-demo.one :link {
dbaron@6481 73 color: blue;
dbaron@6481 74 }
dbaron@6481 75 .dark-columns-demo.one :visited {
dbaron@6481 76 color: purple;
dbaron@6481 77 }
dbaron@6481 78 .dark-columns-demo.two {
dbaron@6481 79 background: navy; color: white;
dbaron@6481 80 }
dbaron@6481 81 .dark-columns-demo.two :link {
dbaron@6481 82 color: aqua;
dbaron@6481 83 }
dbaron@6481 84 .dark-columns-demo.two :visited {
dbaron@6481 85 color: fuchsia;
dbaron@6481 86 }
dbaron@6481 87
dbaron@6479 88 .article-max-lines-demo {
dbaron@6479 89 font: 1em/1.25 Times New Roman, Times, serif;
dbaron@6479 90 white-space: nowrap;
dbaron@6479 91 }
dbaron@6479 92 .article-max-lines-demo.one::first-letter {
dbaron@6479 93 font-size: 2em;
dbaron@6479 94 line-height: 0.9;
dbaron@6479 95 }
dbaron@6479 96 .article-max-lines-demo.one {
dbaron@6479 97 font-size: 1.5em;
dbaron@6479 98 width: 16em;
dbaron@6479 99 }
dbaron@6479 100 .article-max-lines-demo.two {
dbaron@6479 101 width: 11.5em;
dbaron@6479 102 float: left; margin-right: 1em;
dbaron@6479 103 }
dbaron@6479 104 .article-max-lines-demo.three {
dbaron@6479 105 width: 11.5em;
dbaron@6479 106 float: left;
dbaron@6479 107 }
dbaron@6475 108 </style>
dbaron@6470 109 </head>
dbaron@6470 110
dbaron@6470 111 <div class="head">
dbaron@6470 112 <!--logo-->
dbaron@6470 113
dbaron@6483 114 <h1>CSS Overflow Module Level 3</h1>
dbaron@6470 115
dbaron@6470 116 <h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
dbaron@6470 117 <dl>
dbaron@6470 118 <dt>This version:
dbaron@7461 119 <dd><a href="[VERSION]">[VERSION]</a>
dbaron@6470 120
dbaron@6470 121 <dt>Latest version:
dbaron@7461 122 <dd><a href="http://www.w3.org/TR/css3-overflow/">http://www.w3.org/TR/css3-overflow/</a>
dbaron@6470 123
dbaron@6470 124 <dt>Editor's draft:
dbaron@6470 125 <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a>
dbaron@7461 126 (<a href="https://dvcs.w3.org/hg/csswg/log/tip/[SHORTNAME]/Overview.src.html">change log</a>)
dbaron@6470 127
dbaron@6470 128 <dt>Previous version:
dbaron@7460 129 <dd>none
dbaron@6470 130
dbaron@7809 131 <dt>Editors:
dbaron@7809 132 <dd class="h-card vcard">
dbaron@7809 133 <a class="p-name fn u-url url" rel="author"
dbaron@7809 134 href="http://dbaron.org/">L. David Baron</a>,
dbaron@7809 135 <a class="p-org org" href="http://www.mozilla.org/">Mozilla</a>
dbaron@7809 136
dbaron@6470 137 <dt>Issue Tracking:</dt>
dbaron@6470 138 <dd>Maintained in document (only editor's draft is current)
dbaron@6470 139
dbaron@6470 140 <dt>Feedback:</dt>
dbaron@6470 141 <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line &ldquo;<kbd>[[SHORTNAME]] <var>&hellip; message topic &hellip;</var></kbd>&rdquo;
dbaron@6470 142
dbaron@7809 143 <dt>Test suite:
dbaron@7809 144 <dd>none yet
dbaron@6470 145 </dl>
dbaron@6470 146
dbaron@6470 147 <!--copyright-->
dbaron@6470 148
dbaron@6470 149 <hr title="Separator for header">
dbaron@6470 150 </div>
dbaron@6470 151
dbaron@6470 152 <h2 class="no-num no-toc" id="abstract">Abstract</h2>
dbaron@6470 153
dbaron@6470 154 <p>
dbaron@6470 155 <a href="http://www.w3.org/TR/CSS/">CSS</a> is
dbaron@6470 156 a language for describing
dbaron@6470 157 the rendering of structured documents (such as HTML and XML)
dbaron@6470 158 on screen, on paper, in speech, etc.
dbaron@6470 159 This module contains the features of CSS
dbaron@6470 160 relating to new mechanisms of overflow handling in visual media (e.g., screen or paper).
dbaron@6470 161 In interactive media,
dbaron@6470 162 it describes features that allow the overflow
dbaron@6470 163 from a fixed size container
dbaron@6470 164 to be handled by pagination (displaying one page at a time).
dbaron@6470 165 It also describes features, applying to all visual media,
dbaron@6470 166 that allow the contents of an element
dbaron@6484 167 to be spread across multiple fragments,
dbaron@6484 168 allowing the contents to flow across multiple regions
dbaron@6484 169 or to have different styles for different fragments.
dbaron@6470 170 </p>
dbaron@6470 171
dbaron@6470 172 <h2 class="no-num no-toc" id="status">Status of this document</h2>
dbaron@6470 173
dbaron@6470 174 <!--status-->
dbaron@6470 175
dbaron@6470 176 <p>The following features are at risk: &hellip;
dbaron@6470 177
dbaron@6470 178 <h2 class="no-num no-toc" id="contents">
dbaron@6470 179 Table of contents</h2>
dbaron@6470 180
dbaron@6470 181 <!--toc-->
dbaron@6470 182
dbaron@6470 183 <h2 id="intro">
dbaron@6470 184 Introduction</h2>
dbaron@6470 185
dbaron@6470 186 <p>
dbaron@6470 187 In CSS Level 1 [[CSS1]], placing more content than would fit
dbaron@6470 188 inside an element with a specified size
dbaron@6470 189 was generally an authoring error.
dbaron@6470 190 Doing so caused the content to extend
dbaron@6470 191 outside the bounds of the element,
dbaron@6470 192 which would likely cause
dbaron@6470 193 that content to overlap with other elements.
dbaron@6470 194 </p>
dbaron@6470 195
dbaron@6470 196 <p>
dbaron@6470 197 CSS Level 2 [[CSS21]] introduced the 'overflow' property,
dbaron@6470 198 which allows authors to have overflow be handled by scrolling,
dbaron@6470 199 which means it is no longer an authoring error.
dbaron@6470 200 It also allows authors to specify
dbaron@6470 201 that overflow is handled by clipping,
dbaron@6470 202 which makes sense when the author's intent
dbaron@6470 203 is that the content not be shown.
dbaron@6470 204 </p>
dbaron@6470 205
dbaron@6470 206 <p>
dbaron@6470 207 However, scrolling is not the only way
dbaron@6470 208 to present large amounts of content,
dbaron@6470 209 and may even not be the optimal way.
dbaron@6470 210 After all, the codex replaced the scroll
dbaron@6470 211 as the common format for large written works
dbaron@6470 212 because of its advantages.
dbaron@6470 213 </p>
dbaron@6470 214
dbaron@6470 215 <p>
dbaron@6470 216 This specification introduces
dbaron@6470 217 a mechanism for Web pages to specify
dbaron@6484 218 that an element of a page should handle overflow
dbaron@6470 219 through pagination rather than through scrolling.
dbaron@6470 220 </p>
dbaron@6470 221
dbaron@6470 222 <p>
dbaron@6470 223 This specification also extends the concept of overflow
dbaron@6470 224 in another direction.
dbaron@6484 225 Instead of requiring that authors specify a single area
dbaron@6470 226 into which the content of an element must flow,
dbaron@6484 227 this specification allows authors to specify multiple fragments,
dbaron@6470 228 each with their own dimensions and styles,
dbaron@6470 229 so that the content of the element can flow from one to the next,
dbaron@6470 230 using as many as needed to place the content without overflowing.
dbaron@6470 231 </p>
dbaron@6470 232
dbaron@6470 233 <p>
dbaron@6470 234 In both of these cases, implementations must
dbaron@6470 235 break the content in the block-progression dimension.
dbaron@6470 236 Implementations must do this is described
dbaron@6470 237 in the CSS Fragmentation Module [[!CSS3-BREAK]].
dbaron@6470 238 </p>
dbaron@6470 239
dbaron@7811 240 <h2 id="overflow-properties">Overflow properties</h2>
dbaron@7811 241
dbaron@7814 242 <p>
dbaron@7814 243 The ''overflow-x'' property specifies
dbaron@7814 244 the handling of overflow in the horizontal direction
dbaron@7814 245 (i.e., overflow from the left and right sides of the box),
dbaron@7814 246 and the ''overflow-y'' property specifies the handling
dbaron@7814 247 of overflow in the vertical direction
dbaron@7814 248 (i.e., overflow from the top and bottom sides of the box)
dbaron@7814 249 </p>
dbaron@7814 250
dbaron@7811 251 <table class=propdef>
dbaron@7811 252 <tr>
dbaron@7811 253 <th>Name:
dbaron@7811 254 <td><dfn>overflow-x</dfn>, <dfn>overflow-y</dfn>
dbaron@7811 255 <tr>
dbaron@7811 256 <th><a href="#values">Value</a>:
dbaron@7811 257 <td>visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments
dbaron@7811 258 <tr>
dbaron@7811 259 <th>Initial:
dbaron@7811 260 <td>visible
dbaron@7811 261 <tr>
dbaron@7811 262 <th>Applies to:
dbaron@7819 263 <td>block containers [[!CSS21]], flex containers [[!CSS3-FLEXBOX]], and grid containers [[!CSS3-GRID-LAYOUT]]
dbaron@7811 264 <tr>
dbaron@7811 265 <th>Inherited:
dbaron@7811 266 <td>no
dbaron@7811 267 <tr>
dbaron@7811 268 <th>Percentages:
dbaron@7811 269 <td>N/A
dbaron@7811 270 <tr>
dbaron@7811 271 <th>Media:
dbaron@7811 272 <td>visual
dbaron@7811 273 <tr>
dbaron@7811 274 <th>Computed&nbsp;value:
dbaron@7811 275 <td>see below
dbaron@7811 276 <tr>
dbaron@7811 277 <th>Animatable:
dbaron@7811 278 <td>no
dbaron@7811 279 <tr>
dbaron@7811 280 <th>Canonical order:
dbaron@7811 281 <td><abbr title="follows order of property value definition">per grammar</abbr>
dbaron@7811 282 </table>
dbaron@7811 283
dbaron@7814 284 <p>
dbaron@7814 285 The 'overflow' property is a shorthand property
dbaron@7814 286 that sets the specified values of both 'overflow-x' and 'overflow-y'
dbaron@7814 287 to the value specified for 'overflow'.
dbaron@7814 288 </p>
dbaron@7814 289
dbaron@7811 290 <table class=propdef>
dbaron@7811 291 <tr>
dbaron@7811 292 <th>Name:
dbaron@7811 293 <td><dfn>overflow</dfn>
dbaron@7811 294 <tr>
dbaron@7811 295 <th><a href="#values">Value</a>:
dbaron@7811 296 <td>visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments
dbaron@7811 297 <tr>
dbaron@7811 298 <th>Initial:
dbaron@7811 299 <td>see individual properties
dbaron@7811 300 <tr>
dbaron@7811 301 <th>Applies to:
dbaron@7811 302 <td>block containers
dbaron@7811 303 <tr>
dbaron@7811 304 <th>Inherited:
dbaron@7811 305 <td>no
dbaron@7811 306 <tr>
dbaron@7811 307 <th>Percentages:
dbaron@7811 308 <td>N/A
dbaron@7811 309 <tr>
dbaron@7811 310 <th>Media:
dbaron@7811 311 <td>visual
dbaron@7811 312 <tr>
dbaron@7811 313 <th>Computed&nbsp;value:
dbaron@7811 314 <td>see individual properties
dbaron@7811 315 <tr>
dbaron@7811 316 <th>Animatable:
dbaron@7811 317 <td>no
dbaron@7811 318 <tr>
dbaron@7811 319 <th>Canonical order:
dbaron@7811 320 <td><abbr title="follows order of property value definition">per grammar</abbr>
dbaron@7811 321 </table>
dbaron@7811 322
dbaron@7811 323 <p>The values of these properties are:</p>
dbaron@7811 324
dbaron@7811 325 <dl>
dbaron@7811 326 <dt><dfn>visible</dfn>
dbaron@7811 327 <dd>
dbaron@7811 328 There is no special handling of overflow, that is, it
dbaron@7811 329 may be rendered outside the block container.
dbaron@7811 330 </dd>
dbaron@7811 331 <dt><dfn>hidden</dfn>
dbaron@7811 332 <dt><dfn>scroll</dfn>
dbaron@7811 333 <dt><dfn>auto</dfn>
dbaron@7811 334 <dd>
dbaron@7811 335 These values are collectively the <dfn>scrolling values</dfn>;
dbaron@7811 336 they are defined in the section on
dbaron@7811 337 <a href="#scrolling-overflow">scrolling and hidden overflow</a>.
dbaron@7811 338 </dd>
dbaron@7811 339 <dt><dfn>paged-x</dfn>
dbaron@7811 340 <dt><dfn>paged-y</dfn>
dbaron@7811 341 <dt><dfn>paged-x-controls</dfn>
dbaron@7811 342 <dt><dfn>paged-y-controls</dfn>
dbaron@7811 343 <dt><dfn>fragments</dfn>
dbaron@7811 344 <dd>
dbaron@7811 345 These values are collectively the <dfn>fragmenting values</dfn>;
dbaron@7811 346 they are defined in the sections on
dbaron@7811 347 <a href="#paginated-overflow">paginated overflow</a> and
dbaron@7811 348 <a href="#fragment-overflow">fragment overflow</a>.
dbaron@7811 349 </dd>
dbaron@7811 350 </dl>
dbaron@7811 351
dbaron@7811 352 <div id="overflow-computed-values">
dbaron@7811 353 <p>The computed values of 'overflow-x' and 'overflow-y'
dbaron@7811 354 are determined from the cascaded values [[!CSS3CASCADE]]
dbaron@7811 355 based on the following rules:</p>
dbaron@7811 356
dbaron@7811 357 <ol>
dbaron@7811 358 <li>
dbaron@7811 359 If one or both of the cascaded values are
dbaron@7811 360 <i>fragmenting values</i>, then:
dbaron@7811 361 <ol>
dbaron@7811 362 <li>
dbaron@7811 363 If one of the cascaded values is one of the
dbaron@7811 364 <i>fragmenting values</i>
dbaron@7811 365 and the other is not,
dbaron@7811 366 then the computed values are
dbaron@7811 367 the same as the cascaded values.
dbaron@7811 368 </li>
dbaron@7811 369 <li>
dbaron@7811 370 If both of the cascaded values are <i>fragmenting values</i>, then:
dbaron@7811 371 <ol>
dbaron@7811 372 <li>
dbaron@7811 373 for horizontal writing mode [[!CSS3-WRITING-MODES]],
dbaron@7811 374 the computed value for ''overflow-y'' is the cascaded value
dbaron@7811 375 and the computed value for ''overflow-x'' is ''hidden'', or
dbaron@7811 376 </li>
dbaron@7811 377 <li>
dbaron@7811 378 for vertical writing mode [[!CSS3-WRITING-MODES]],
dbaron@7811 379 the computed value for ''overflow-x'' is the cascaded value
dbaron@7811 380 and the computed value for ''overflow-y'' is ''hidden''.
dbaron@7811 381 </li>
dbaron@7811 382 </ol>
dbaron@7811 383 </li>
dbaron@7811 384 </ol>
dbaron@7811 385 </li>
dbaron@7811 386 <li>
dbaron@7811 387 Otherwise, if one cascaded values is
dbaron@7811 388 one of the <i>scrolling values</i>
dbaron@7811 389 and the other is ''visible'',
dbaron@7811 390 then computed values are the cascaded values
dbaron@7811 391 with ''visible'' changed to ''hidden''.
dbaron@7811 392 </li>
dbaron@7811 393 <li>
dbaron@7811 394 Otherwise, the computed values are as specified.
dbaron@7811 395 </li>
dbaron@7811 396 </ol>
dbaron@7811 397 </div>
dbaron@7811 398
dbaron@7811 399 <p class="issue">
dbaron@7811 400 Are all 4 of the ''paged-*'' values really needed?
dbaron@7811 401 </p>
dbaron@7811 402
dbaron@7811 403 <p>
dbaron@7811 404 When the <i>fragmenting values</i> are used,
dbaron@7811 405 the overflow from the fragments themselves
dbaron@7811 406 treats the fragmenting value as ''hidden''.
dbaron@7811 407 <span class="issue">Is this the right behavior?</span>
dbaron@7811 408 <span class="issue">Give example.</span>
dbaron@7811 409 </p>
dbaron@7811 410
dbaron@7820 411 <p class="issue">
dbaron@7820 412 [[CSS3-MARQUEE]] describes an 'overflow-style' property,
dbaron@7820 413 but it has not picked up implementation experience
dbaron@7820 414 that the working group is aware of.
dbaron@7820 415 Should this document treat 'overflow-style' as a defunct proposal,
dbaron@7820 416 or should this document describe the 'overflow-style' property
dbaron@7820 417 and attempt to revive it,
dbaron@7820 418 despite that implementations have implemented
dbaron@7820 419 'overflow-x' and 'overflow-y' instead?
dbaron@7820 420 </p>
dbaron@7820 421
dbaron@6483 422 <h2 id="scrolling-overflow">Scrolling and hidden overflow</h2>
dbaron@6483 423
dbaron@6483 424 <p class="issue">
dbaron@6483 425 Move material from [[CSS21]] and [[CSS3BOX]] here.
dbaron@6483 426 </p>
dbaron@6470 427
dbaron@6470 428 <h2 id="paginated-overflow">Paginated overflow</h2>
dbaron@6470 429
dbaron@6497 430 <p class="issue">overflow:paginate or overflow:pages (or paged-x, paged-y, paged-x-controls, paged-y-controls as [[CSS3GCPM]] has?)</p>
dbaron@6470 431
dbaron@6470 432 <p class="issue">Ability to display N pages at once
dbaron@6470 433 rather than just one page at once?</p>
dbaron@6470 434
dbaron@6497 435 <p class="issue">
dbaron@6497 436 The current implementation of paginated overflow uses
dbaron@6497 437 the 'overflow'/'overflow-x'/'overflow-y' properties
dbaron@6497 438 rather than the 'overflow-style' property as proposed
dbaron@6497 439 in the [[CSS3GCPM]] draft
dbaron@6497 440 (which also matches the [[CSS3-MARQUEE]] proposal).
dbaron@6497 441 We should probably switch away from 'overflow-style',
dbaron@6497 442 but that's not 100% clear.
dbaron@6497 443 </p>
dbaron@6497 444
dbaron@6484 445 <h2 id="fragment-overflow">Fragment overflow</h2>
dbaron@6470 446
dbaron@6470 447 <p>
dbaron@6470 448 This section introduces and defines the meaning of
dbaron@6484 449 the new ''fragments'' value of the 'overflow' property.
dbaron@6470 450 </p>
dbaron@6470 451
dbaron@6470 452 <p>
dbaron@6484 453 When the computed value of 'overflow' for an element is ''fragments'',
dbaron@6470 454 and implementations would otherwise have created a box for the element,
dbaron@6491 455 then implementations must create a sequence of <dfn>fragment box</dfn>es
dbaron@6470 456 for that element.
dbaron@6491 457 (It is possible for an element with ''overflow: fragments''
dbaron@6491 458 to generate only one <i>fragment box</i>.
dbaron@6484 459 However, if an element's computed 'overflow' is not ''fragments'',
dbaron@6484 460 then its box is not a <i>fragment box</i>.)
dbaron@6484 461 Every <i>fragment box</i> is a fragmentation container,
dbaron@6491 462 and any overflow
dbaron@6491 463 that would cause that fragmentation container to fragment
dbaron@6491 464 causes another <i>fragment box</i> created as a next sibling
dbaron@6470 465 of the previous one.
dbaron@6470 466 <span class="issue">Or is it as though it's a next sibling of
dbaron@6470 467 the element? Need to figure out exactly how this interacts with
dbaron@6470 468 other box-level fixup.</span>
dbaron@6492 469 Additionally, if the <i>fragment box</i> is also
dbaron@6492 470 a multi-column box (as defined in [[!CSS3COL]]
dbaron@6492 471 <span class="issue">though it defines <i>multi-column element</i></span>)
dbaron@6492 472 any content that would lead to the creation of <i>overflow columns</i> [[!CSS3COL]]
dbaron@6492 473 instead is flown into an additional fragment box.
dbaron@6491 474 However, fragment boxes may themselves be broken
dbaron@6491 475 (due to fragmentation in a fragmentation context outside of them,
dbaron@6491 476 such as pages, columns, or other fragment boxes);
dbaron@6491 477 such breaking leads to fragments of the same fragment box
dbaron@6491 478 rather than multiple fragment boxes.
dbaron@6491 479 (This matters because fragment boxes may be styled by their index;
dbaron@6491 480 such breaking leads to multiple fragments of a fragment box
dbaron@6491 481 with a single index.
dbaron@6491 482 This design choice is so that
dbaron@6491 483 breaking a fragment box across pages does not break
dbaron@6491 484 the association of indices to particular pieces of content.)
dbaron@6491 485 <span class="issue">Should a forced break that breaks to
dbaron@6491 486 an outer fragmentation context cause a new fragment of a single
dbaron@6491 487 fragment box or a new fragment box?</span>
dbaron@6491 488 <span class="issue">Should we find a term other than
dbaron@6491 489 <i>fragment box</i> here to make this a little less confusing?</span>
dbaron@6470 490 </p>
dbaron@6470 491
dbaron@6470 492 <p class="issue">
dbaron@6491 493 What if we want to be able to style the pieces of an element
dbaron@6491 494 split within another type of fragmentation context?
dbaron@6491 495 These rules prevent ever using ''::nth-fragment()'' for that,
dbaron@6491 496 despite that the name seems the most logical name for such a feature.
dbaron@6470 497 </p>
dbaron@6470 498
dbaron@6475 499 <div class="example">
dbaron@6477 500 <table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
dbaron@6475 501 &lt;title&gt;Breaking content into
dbaron@6475 502 equal-sized cards&lt;/title&gt;
dbaron@6475 503 &lt;style&gt;
dbaron@6475 504 .in-cards {
dbaron@6484 505 overflow: fragments;
dbaron@6475 506
dbaron@6475 507 width: 13em;
dbaron@6475 508 height: 8em;
dbaron@6475 509
dbaron@6475 510 padding: 4px;
dbaron@6475 511 border: medium solid blue;
dbaron@6475 512 margin: 6px;
dbaron@6475 513
dbaron@6475 514 font: medium/1.3 Times New
dbaron@6475 515 Roman, Times, serif;
dbaron@6475 516 }
dbaron@6475 517 &lt;/style&gt;
dbaron@6475 518 &lt;div class="in-cards"&gt;
dbaron@6475 519 In this example, the text in the div
dbaron@6475 520 is broken into a series of cards.
dbaron@6475 521 These cards all have the same style.
dbaron@6475 522 The presence of enough content to
dbaron@6475 523 overflow one of the cards causes
dbaron@6475 524 another one to be created. The second
dbaron@6475 525 card is created just like it's the
dbaron@6475 526 next sibling of the first.
dbaron@6477 527 &lt;/div&gt;</pre></td><td>
dbaron@6475 528 <div class="in-cards-demo">In this example, the text in the<br>div is broken into a series of<br>cards. These cards all have the<br>same style. The presence of<br>enough content to overflow<br>one of the cards causes another</div>
dbaron@6475 529 <div class="in-cards-demo">one to be created. The second<br>card is created just like it's the<br>next sibling of the first.</div>
dbaron@6475 530 </td></tr></table>
dbaron@6475 531 </div>
dbaron@6475 532
dbaron@6487 533 <p class="issue">
dbaron@6487 534 We should specify that ''overflow: fragments'' does not apply
dbaron@6487 535 to at least some table parts,
dbaron@6487 536 and perhaps other elements as well.
dbaron@6487 537 We need to determine exactly which ones.
dbaron@6487 538 </p>
dbaron@6487 539
dbaron@6488 540 <p class="issue">
dbaron@6488 541 This specification needs to say which type of
dbaron@6488 542 fragmentation context is created
dbaron@6488 543 so that it's clear which values of the 'break' property
dbaron@6488 544 cause breaks within this context.
dbaron@6488 545 We probably want ''break: regions'' to apply.
dbaron@6488 546 </p>
dbaron@6488 547
dbaron@6494 548 <p class="issue">
dbaron@6494 549 This specification needs a processing model
dbaron@6494 550 that will apply in cases where the layout containing the
dbaron@6494 551 fragments has characteristics that use the intrinsic size of the fragments
dbaron@6494 552 to change the amount of space available for them,
dbaron@6494 553 such as [[CSS3-GRID-LAYOUT]].
dbaron@6494 554 There has already been some work on such a processing model
dbaron@6494 555 in [[CSS3-REGIONS]],
dbaron@6494 556 and the work done on a model there,
dbaron@6494 557 and the editors of that specification,
dbaron@6494 558 should inform what happens in this specification.
dbaron@6494 559 </p>
dbaron@6494 560
dbaron@6484 561 <h3 id="fragment-styling">Fragment styling</h3>
dbaron@6470 562
dbaron@6484 563 <h4 id="fragment-pseudo-element">The ::nth-fragment() pseudo-element</h4>
dbaron@6470 564
dbaron@6470 565 <p>
dbaron@6484 566 The ::nth-fragment() pseudo-element is a pseudo-element
dbaron@6484 567 that describes some of the <i>fragment box</i>es generated by an element.
dbaron@6470 568 The argument to the pseudo-element takes the same syntax
dbaron@6470 569 as the argument to the :nth-child() pseudo-class
dbaron@6470 570 defined in [[!SELECT]], and has the same meaning
dbaron@6470 571 except that the number is relative to
dbaron@6484 572 <i>fragment box</i>es generated by the element
dbaron@6470 573 instead of siblings of the element.
dbaron@6470 574 </p>
dbaron@6470 575
dbaron@6470 576 <p class="note">
dbaron@6484 577 Selectors that allow addressing fragments
dbaron@6470 578 by counting from the end rather than the start
dbaron@6470 579 are intentionally not provided.
dbaron@6470 580 Such selectors would interfere with determining
dbaron@6484 581 the number of fragments.
dbaron@6470 582 </p>
dbaron@6470 583
dbaron@6489 584 <p class="issue">
dbaron@6489 585 Depending on future discussions,
dbaron@6489 586 this ''::nth-fragment(<var>an+b</var>)'' syntax
dbaron@6489 587 may be replaced with
dbaron@6489 588 the new ''::fragment:nth(<var>an+b</var>)'' syntax.
dbaron@6489 589 </p>
dbaron@6489 590
dbaron@6484 591 <h4 id="style-of-fragments">Styling of fragments</h4>
dbaron@6470 592
dbaron@6470 593 <p class="issue">
dbaron@6484 594 Should this apply to fragment overflow only,
dbaron@6470 595 or also to paginated overflow?
dbaron@6470 596 (If it applies,
dbaron@6470 597 then stricter property restrictions would be needed
dbaron@6470 598 for paginated overflow.)
dbaron@6470 599 </p>
dbaron@6470 600
dbaron@6470 601 <p>
dbaron@6484 602 In the absence of rules with ''::nth-fragment()'' pseudo-elements,
dbaron@6484 603 the computed style for each <i>fragment box</i>
dbaron@6470 604 is the computed style for the element
dbaron@6484 605 for which the <i>fragment box</i> was created.
dbaron@6484 606 However, the style for a <i>fragment box</i> is also influenced
dbaron@6470 607 by rules whose selector's <i>subject</i> [[!SELECT]]
dbaron@6484 608 has an ''::nth-fragment()'' pseudo-element,
dbaron@6484 609 if the 1-based number of the <i>fragment box</i> matches
dbaron@6484 610 that ''::nth-fragment()'' pseudo-element
dbaron@6484 611 and the selector (excluding the ''::nth-fragment()'' pseudo-element)
dbaron@6484 612 matches the element generating the fragments.
dbaron@6470 613 </p>
dbaron@6470 614
dbaron@6486 615 <p>
dbaron@6486 616 When determining the style of the <i>fragment box</i>,
dbaron@6486 617 these rules that match the fragment pseudo-element
dbaron@6486 618 cascade together with the rules that match the element,
dbaron@6486 619 with the fragment pseudo-element adding the specificity
dbaron@6486 620 of a pseudo-class to the specificity calculation.
dbaron@6486 621 <span class="issue">Does this need to be specified in
dbaron@6486 622 the cascading module as well?</span>
dbaron@6486 623 </p>
dbaron@6486 624
dbaron@6477 625 <div class="example">
dbaron@6477 626 <table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
dbaron@6477 627 &lt;style&gt;
dbaron@6477 628 .bouncy-columns {
dbaron@6484 629 overflow: fragments;
dbaron@6477 630 width: 6em;
dbaron@6477 631 height: 10em;
dbaron@6477 632 float: left;
dbaron@6477 633 margin: 1em;
dbaron@6477 634 font: medium/1.25 Times New
dbaron@6477 635 Roman, Times, serif;
dbaron@6477 636 }
dbaron@6484 637 .bouncy-columns::nth-fragment(1) {
dbaron@6477 638 background: aqua; color: black;
dbaron@6477 639 transform: rotate(-3deg);
dbaron@6477 640 }
dbaron@6484 641 .bouncy-columns::nth-fragment(2) {
dbaron@6477 642 background: yellow; color: black;
dbaron@6477 643 transform: rotate(3deg);
dbaron@6477 644 }
dbaron@6477 645 &lt;/style&gt;
dbaron@6477 646 &lt;div class="bouncy-columns"&gt;
dbaron@6477 647 <i>...</i>
dbaron@6477 648 &lt;/div&gt;</pre></td><td>
dbaron@6477 649 <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>
dbaron@6477 650 <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>
dbaron@6484 651 <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>
dbaron@6477 652 </td></tr></table>
dbaron@6477 653 </div>
dbaron@6477 654
dbaron@6470 655 <p>
dbaron@6484 656 Styling an ''::nth-fragment()'' pseudo-element with the 'overflow'
dbaron@6490 657 property does take effect;
dbaron@6490 658 if a <i>fragment box</i> has a
dbaron@6490 659 computed value of 'overflow' other than ''fragments''
dbaron@6490 660 then that fragment box is the last fragment.
dbaron@6490 661 However, overriding ''overflow'' on the first fragment
dbaron@6490 662 does not cause the <i>fragment box</i> not to exist;
dbaron@6490 663 whether there are fragment boxes at all is determined by
dbaron@6490 664 the computed value of overflow for the element.
dbaron@7813 665 <span class="issue">Need to reword this to refer to the
dbaron@7813 666 appropriate choice of ''overflow-x'' or ''overflow-y'',
dbaron@7813 667 and then point to rule about the handling of the other one
dbaron@7813 668 of ''overflow-x'' or ''overflow-y''.</span>
dbaron@6470 669 </p>
dbaron@6470 670
dbaron@6470 671 <p>
dbaron@6485 672 Styling an ''::nth-fragment()'' pseudo-element with the 'content'
dbaron@6485 673 property has no effect;
dbaron@6485 674 the computed value of 'content' for the fragment box
dbaron@6485 675 remains the same as the computed value of content for the element.
dbaron@6485 676 </p>
dbaron@6485 677
dbaron@6485 678 <p>
dbaron@6484 679 Specifying ''display: none'' for a <i>fragment box</i> causes
dbaron@6484 680 the fragment box with that index not to be generated.
dbaron@6470 681 However, in terms of the indices
dbaron@6484 682 used for matching ''::nth-fragment()'' pseudo-elements
dbaron@6484 683 of later fragment boxes,
dbaron@6470 684 it still counts as though it was generated.
dbaron@6470 685 However, since it is not generated, it does not contain any content.
dbaron@6470 686 </p>
dbaron@6470 687
dbaron@7813 688 <p>
dbaron@7813 689 Specifying other values of 'display', 'position',
dbaron@7813 690 or 'float' is permitted, but is not allowed to change
dbaron@7813 691 the computed value of 'display-inside'.
dbaron@7813 692 (Since 'overflow', 'overflow-x', and 'overflow-y' only
dbaron@7819 693 apply to block containers, flex containers, and grid containers
dbaron@7813 694 the computed value of 'display-inside' is always
dbaron@7819 695 ''block'', ''flex'' or ''grid''.
dbaron@7813 696 <span class="issue">Need to specify exactly how this works,
dbaron@7813 697 but it depends on
dbaron@7813 698 having 'display-inside' and 'display-outside' specified.</span>
dbaron@6470 699 </p>
dbaron@6470 700
dbaron@6470 701 <p>
dbaron@6470 702 To match the model for other pseudo-elements
dbaron@6470 703 where the pseudo-elements live inside their corresponding element,
dbaron@6484 704 declarations in ''::nth-fragment()'' pseudo-elements override
dbaron@6470 705 declarations in rules without the pseudo-element.
dbaron@6470 706 The relative priority within such declarations is determined
dbaron@6470 707 by normal cascading order (see [[!CSS21]]).
dbaron@6470 708 </p>
dbaron@6470 709
dbaron@6470 710 <p>
dbaron@6484 711 Styles specified on ''::nth-fragment()'' pseudo-elements
dbaron@6484 712 do affect inheritance to content within the <i>fragment box</i>.
dbaron@6484 713 In other words, the content within the <i>fragment box</i> must
dbaron@6484 714 inherit from the fragment box's style (i.e., the pseudo-element style)
dbaron@6470 715 rather than directly from the element.
dbaron@6484 716 This means that elements split between fragment boxes may
dbaron@6470 717 have different styles for different parts of the element.
dbaron@6470 718 </p>
dbaron@6470 719
dbaron@6472 720 <p class="issue">
dbaron@6472 721 This inheritance rule allows specifying styles indirectly
dbaron@6472 722 (by using explicit ''inherit'' or using default inheritance
dbaron@6472 723 on properties that don't apply to '':first-letter'')
dbaron@6472 724 that can't be specified directly
dbaron@6472 725 (based on the rules in the next section).
dbaron@6472 726 This is a problem.
dbaron@6484 727 The restrictions that apply to styling inside fragments
dbaron@6484 728 should also apply to inheritance from fragments.
dbaron@6472 729 </p>
dbaron@6472 730
dbaron@6480 731 <div class="example">
dbaron@6480 732 <table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
dbaron@6480 733 &lt;style&gt;
dbaron@6480 734 .article {
dbaron@6484 735 overflow: fragments;
dbaron@6480 736 }
dbaron@6484 737 .article::nth-fragment(1) {
dbaron@6480 738 font-size: 1.5em;
dbaron@6480 739 margin-bottom: 1em;
dbaron@6480 740 height: 4em;
dbaron@6480 741 }
dbaron@6491 742 .article::nth-fragment(2) {
dbaron@6480 743 margin-left: 5em;
dbaron@6480 744 margin-right: 2em;
dbaron@6480 745 }
dbaron@6480 746 &lt;/style&gt;
dbaron@6480 747 &lt;div class="article"&gt;
dbaron@6480 748 The &lt;code&gt;font-size&lt;/code&gt; property<i>...</i>
dbaron@6480 749 &lt;/div&gt;</pre></td><td>
dbaron@6484 750 <div class="article-font-inherit-demo one">The <code>font-size</code> property<br>specified on the fragment<br>is inherited into the</div>
dbaron@6484 751 <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>
dbaron@6480 752 </td></tr></table>
dbaron@6480 753 </div>
dbaron@6478 754
dbaron@6484 755 <h4 id="style-in-fragments">Styling inside fragments</h4>
dbaron@6470 756
dbaron@6470 757 <p class="issue">
dbaron@6484 758 Should this apply to fragment overflow only,
dbaron@6470 759 or also to paginated overflow,
dbaron@6470 760 or even to pagination across pages?
dbaron@6470 761 </p>
dbaron@6470 762
dbaron@6470 763 <p>
dbaron@6484 764 The ''::nth-fragment()'' pseudo-element
dbaron@6470 765 can also be used to style
dbaron@6484 766 content inside of a <i>fragment box</i>.
dbaron@6470 767 Unlike the ''::first-line'' and ''::first-letter'' pseudo-elements,
dbaron@6484 768 the ''::nth-fragment()'' pseudo-element can be applied
dbaron@6470 769 to parts of the selector other than the subject:
dbaron@6470 770 in particular, it can match ancestors of the subject.
dbaron@6470 771 However, the only CSS properties applied
dbaron@6470 772 by rules with such selectors
dbaron@6470 773 are those that apply
dbaron@6470 774 to the ''::first-letter'' pseudo-element.
dbaron@6470 775 </p>
dbaron@6470 776
dbaron@6470 777 <p>
dbaron@6470 778 To be more precise,
dbaron@6484 779 when a rule's selector has ''::nth-fragment()'' pseudo-elements
dbaron@6470 780 attached to parts of the selector other than the subject,
dbaron@6470 781 the declarations in that rule apply to
dbaron@6470 782 a fragment (or pseudo-element thereof) when:
dbaron@6470 783 </p>
dbaron@6470 784 <ol>
dbaron@6470 785 <li>
dbaron@6470 786 the declarations are for properties that apply to the
dbaron@6470 787 ''::first-letter'' pseudo-element,
dbaron@6470 788 </li>
dbaron@6470 789 <li>
dbaron@6470 790 the declarations would apply to
dbaron@6470 791 that fragment (or pseudo-element thereof)
dbaron@6484 792 had those ''::nth-fragment()'' pseudo-elements been removed,
dbaron@6470 793 with a particular association between
dbaron@6470 794 each sequence of simple selectors and the element it matched,
dbaron@6470 795 and
dbaron@6470 796 </li>
dbaron@6470 797 <li>
dbaron@6484 798 for each removed ''::nth-fragment()'' pseudo-element,
dbaron@6484 799 the fragment lives within a <i>fragment box</i>
dbaron@6470 800 of the element associated in that association
dbaron@6470 801 with the selector that the pseudo-element was attached to,
dbaron@6470 802 and whose index matches the pseudo-element.
dbaron@6470 803 </li>
dbaron@6470 804 </ol>
dbaron@6470 805
dbaron@6481 806 <div class="example">
dbaron@6481 807 <table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
dbaron@6481 808 &lt;style&gt;
dbaron@6481 809 .dark-columns {
dbaron@6484 810 overflow: fragments;
dbaron@6481 811 width: 6em;
dbaron@6481 812 height: 10em;
dbaron@6481 813 float: left;
dbaron@6481 814 margin-right: 1em;
dbaron@6481 815 font: medium/1.25 Times New
dbaron@6481 816 Roman, Times, serif;
dbaron@6481 817 }
dbaron@6484 818 .dark-columns::nth-fragment(1) {
dbaron@6481 819 background: aqua; color: black;
dbaron@6481 820 }
dbaron@6484 821 .dark-columns::nth-fragment(1) :link {
dbaron@6481 822 color: blue;
dbaron@6481 823 }
dbaron@6484 824 .dark-columns::nth-fragment(1) :visited {
dbaron@6481 825 color: purple;
dbaron@6481 826 }
dbaron@6484 827 .dark-columns::nth-fragment(2) {
dbaron@6481 828 background: navy; color: white;
dbaron@6481 829 }
dbaron@6484 830 .dark-columns::nth-fragment(2) :link {
dbaron@6481 831 color: aqua;
dbaron@6481 832 }
dbaron@6484 833 .dark-columns::nth-fragment(2) :visited {
dbaron@6481 834 color: fuchsia;
dbaron@6481 835 }
dbaron@6481 836 &lt;/style&gt;
dbaron@6481 837 &lt;div class="dark-columns"&gt;
dbaron@6481 838 <i>...</i>
dbaron@6481 839 &lt;/div&gt;</pre></td><td>
dbaron@6484 840 <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>
dbaron@6484 841 <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>
dbaron@6481 842 </td></tr></table>
dbaron@6481 843 </div>
dbaron@6481 844
dbaron@6478 845
dbaron@6470 846 <h3 id="max-lines">The 'max-lines' property</h3>
dbaron@6470 847
dbaron@6470 848 <p>
dbaron@6470 849 Authors may wish to style the opening lines of an element
dbaron@6470 850 with different styles
dbaron@6484 851 by putting those opening lines in a separate fragment.
dbaron@6470 852 However, since it may be difficult to predict the exact height
dbaron@6470 853 occupied by those lines
dbaron@6484 854 in order to restrict the first fragment to that height,
dbaron@6470 855 this specification introduces a 'max-lines' property
dbaron@6484 856 that forces a fragment to break
dbaron@6470 857 after a specified number of lines.
dbaron@6470 858 This forces a break after the given number of lines
dbaron@6470 859 contained within the element or its descendants,
dbaron@6470 860 as long as those lines are in the same block formatting context.
dbaron@6470 861 </p>
dbaron@6470 862
dbaron@6470 863 <table class=propdef>
dbaron@6470 864 <tr>
dbaron@6470 865 <th>Name:
dbaron@6470 866 <td><dfn>max-lines</dfn>
dbaron@6470 867 <tr>
dbaron@6470 868 <th><a href="#values">Value</a>:
dbaron@6470 869 <td>none | &lt;integer&gt;
dbaron@6470 870 <tr>
dbaron@6470 871 <th>Initial:
dbaron@6470 872 <td>none
dbaron@6470 873 <tr>
dbaron@6470 874 <th>Applies to:
dbaron@6484 875 <td>fragment boxes
dbaron@6470 876 <tr>
dbaron@6470 877 <th>Inherited:
dbaron@6470 878 <td>no
dbaron@6470 879 <tr>
dbaron@6482 880 <th>Animatable:
dbaron@6482 881 <td>as <a href="http://www.w3.org/TR/css3-transitions/#animatable-types">integer</a>
dbaron@6482 882 <tr>
dbaron@6470 883 <th>Percentages:
dbaron@6470 884 <td>N/A
dbaron@6470 885 <tr>
dbaron@6470 886 <th>Media:
dbaron@6470 887 <td>visual
dbaron@6470 888 <tr>
dbaron@6470 889 <th>Computed&nbsp;value:
dbaron@6470 890 <td>specified value
dbaron@6470 891 <tr>
dbaron@6470 892 <th>Canonical order:
dbaron@6470 893 <td><abbr title="follows order of property value definition">per grammar</abbr>
dbaron@6470 894 </table>
dbaron@6470 895
dbaron@6470 896 <dl>
dbaron@6470 897 <dt>none
dbaron@6470 898 <dd>
dbaron@6470 899 <p>
dbaron@6470 900 Breaks occur only as specified elsewhere.
dbaron@6470 901 </p>
dbaron@6470 902 </dd>
dbaron@6470 903
dbaron@6470 904 <dt>&lt;integer&gt;
dbaron@6470 905 <dd>
dbaron@6470 906 <p>
dbaron@6470 907 In addition to any breaks specified elsewhere,
dbaron@6470 908 a break is forced before any line that would exceed
dbaron@6470 909 the given number of lines
dbaron@6470 910 being placed inside the element
dbaron@6470 911 (excluding lines that are in
dbaron@6470 912 a different block formatting context from
dbaron@6470 913 the block formatting context to which
dbaron@6470 914 an unstyled child of the element would belong).
dbaron@6470 915 </p>
dbaron@6470 916
dbaron@6470 917 <p class="issue">
dbaron@6470 918 If there are multiple boundaries between this line
dbaron@6470 919 and the previous, where exactly (in terms of element
dbaron@6470 920 boundaries) is the break forced?
dbaron@6470 921 </p>
dbaron@6470 922
dbaron@6470 923 <p>
dbaron@6470 924 Only positive integers are accepted.
dbaron@6470 925 Zero or negative integers are a parse error.
dbaron@6470 926 </p>
dbaron@6470 927 </dd>
dbaron@6470 928 </dl>
dbaron@6470 929
dbaron@6484 930 <p class="issue">Should this apply to fragment overflow only, or also
dbaron@6470 931 to pagination?</p>
dbaron@6470 932
dbaron@6479 933 <div class="example">
dbaron@6479 934 <table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
dbaron@6479 935 &lt;style&gt;
dbaron@6479 936 .article {
dbaron@6484 937 overflow: fragments;
dbaron@6479 938 }
dbaron@6479 939 .article::first-letter {
dbaron@6479 940 font-size: 2em;
dbaron@6479 941 line-height: 0.9;
dbaron@6479 942 }
dbaron@6484 943 .article::nth-fragment(1) {
dbaron@6479 944 font-size: 1.5em;
dbaron@6479 945 max-lines: 3;
dbaron@6479 946 }
dbaron@6491 947 .article::nth-fragment(2) {
dbaron@6479 948 column-count: 2;
dbaron@6479 949 }
dbaron@6479 950 &lt;/style&gt;
dbaron@6479 951 &lt;div class="article"&gt;
dbaron@6479 952 <i>...</i>
dbaron@6479 953 &lt;/div&gt;</pre></td><td>
dbaron@6479 954 <div class="article-max-lines-demo one">The max-lines property allows<br>authors to use a larger font for the first<br>few lines of an article. Without the</div>
dbaron@6479 955 <div class="article-max-lines-demo two">max-lines property, authors<br>might have to use the<br>'height' property instead, but<br>that would leave a slight gap<br>if the author miscalculated<br>how much height a given<br>number of lines would<br>occupy (which might be</div>
dbaron@6479 956 <div class="article-max-lines-demo three">particularly hard if the author<br>didn't know what text would<br>be filling the space, exactly<br>what font would be used, or<br>exactly which platform's font<br>rendering would be used to<br>display the font).</div>
dbaron@6479 957 </td></tr></table>
dbaron@6479 958 </div>
dbaron@6478 959
dbaron@6493 960 <h2 id="static-media">Overflow in static media</h2>
dbaron@6493 961
dbaron@6493 962 <p class="issue">
dbaron@6493 963 This specification should define useful behavior
dbaron@6493 964 for all values of 'overflow'
dbaron@6493 965 in static media (such as print).
dbaron@6493 966 Current implementation behavior is quite poor and
dbaron@6493 967 produces unexpected results when authors have not considered
dbaron@6493 968 what will happen when
dbaron@6493 969 the content they produce for interactive media
dbaron@6493 970 is printed.
dbaron@6493 971 </p>
dbaron@6493 972
dbaron@6470 973 <h2 id="conformance">
dbaron@6470 974 Conformance</h2>
dbaron@6470 975
dbaron@6470 976 <h3 id="placement">
dbaron@6470 977 Module interactions</h3>
dbaron@6470 978
dbaron@6470 979 <p>This module extends the 'overflow'
dbaron@6470 980 feature defined in [[CSS21]] section 11.1.1. It defines additional
dbaron@6470 981 overflow handling mechanisms that implementations must implement as
dbaron@6470 982 described in this module in order to conform to this module.</p>
dbaron@6470 983
dbaron@6470 984 <p>No properties in this module apply to the <code>::first-line</code> or
dbaron@6470 985 <code>::first-letter</code> pseudo-elements.</p>
dbaron@6470 986
dbaron@6470 987 <h3 id="values">
dbaron@6470 988 Values</h3>
dbaron@6470 989
dbaron@6470 990 <p>This specification follows the
dbaron@6470 991 <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
dbaron@6470 992 definition conventions</a> from [[!CSS21]]. Value types not defined in
dbaron@6470 993 this specification are defined in CSS Level 2 Revision 1 [[!CSS21]].
dbaron@6470 994 Other CSS modules may expand the definitions of these value types: for
dbaron@6470 995 example [[CSS3COLOR]], when combined with this module, expands the
dbaron@6470 996 definition of the &lt;color&gt; value type as used in this specification.</p>
dbaron@6470 997
dbaron@6470 998 <p>In addition to the property-specific values listed in their definitions,
dbaron@6470 999 all properties defined in this specification also accept the
dbaron@6470 1000 <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
dbaron@6470 1001 keyword as their property value. For readability it has not been repeated
dbaron@6470 1002 explicitly.
dbaron@6470 1003
dbaron@6470 1004
dbaron@6470 1005 <h3 id="conventions">
dbaron@6470 1006 Document conventions</h3>
dbaron@6470 1007
dbaron@6470 1008 <p>Conformance requirements are expressed with a combination of
dbaron@6470 1009 descriptive assertions and RFC 2119 terminology. The key words “MUST”,
dbaron@6470 1010 “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
dbaron@6470 1011 “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
dbaron@6470 1012 document are to be interpreted as described in RFC 2119.
dbaron@6470 1013 However, for readability, these words do not appear in all uppercase
dbaron@6470 1014 letters in this specification.
dbaron@6470 1015
dbaron@6470 1016 <p>All of the text of this specification is normative except sections
dbaron@6470 1017 explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p>
dbaron@6470 1018
dbaron@6470 1019 <p>Examples in this specification are introduced with the words “for example”
dbaron@6470 1020 or are set apart from the normative text with <code>class="example"</code>,
dbaron@6470 1021 like this:
dbaron@6470 1022
dbaron@6470 1023 <div class="example">
dbaron@6470 1024 <p>This is an example of an informative example.</p>
dbaron@6470 1025 </div>
dbaron@6470 1026
dbaron@6470 1027 <p>Informative notes begin with the word “Note” and are set apart from the
dbaron@6470 1028 normative text with <code>class="note"</code>, like this:
dbaron@6470 1029
dbaron@6470 1030 <p class="note">Note, this is an informative note.</p>
dbaron@6470 1031
dbaron@6470 1032 <h3 id="conformance-classes">
dbaron@6470 1033 Conformance classes</h3>
dbaron@6470 1034
dbaron@6483 1035 <p>Conformance to CSS Overflow Module Level 3
dbaron@6470 1036 is defined for three conformance classes:
dbaron@6470 1037 <dl>
dbaron@6470 1038 <dt><dfn title="style sheet!!as conformance class">style sheet</dfn>
dbaron@6470 1039 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
dbaron@6470 1040 style sheet</a>.
dbaron@6470 1041 <dt><dfn>renderer</dfn></dt>
dbaron@6470 1042 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
dbaron@6470 1043 that interprets the semantics of a style sheet and renders
dbaron@6470 1044 documents that use them.
dbaron@6470 1045 <dt><dfn id="authoring-tool">authoring tool</dfn></dt>
dbaron@6470 1046 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
dbaron@6470 1047 that writes a style sheet.
dbaron@6470 1048 </dl>
dbaron@6470 1049
dbaron@6483 1050 <p>A style sheet is conformant to CSS Overflow Module Level 3
dbaron@6470 1051 if all of its statements that use syntax defined in this module are valid
dbaron@6470 1052 according to the generic CSS grammar and the individual grammars of each
dbaron@6470 1053 feature defined in this module.
dbaron@6470 1054
dbaron@6483 1055 <p>A renderer is conformant to CSS Overflow Module Level 3
dbaron@6470 1056 if, in addition to interpreting the style sheet as defined by the
dbaron@6470 1057 appropriate specifications, it supports all the features defined
dbaron@6483 1058 by CSS Overflow Module Level 3 by parsing them correctly
dbaron@6470 1059 and rendering the document accordingly. However, the inability of a
dbaron@6470 1060 UA to correctly render a document due to limitations of the device
dbaron@6470 1061 does not make the UA non-conformant. (For example, a UA is not
dbaron@6470 1062 required to render color on a monochrome monitor.)
dbaron@6470 1063
dbaron@6483 1064 <p>An authoring tool is conformant to CSS Overflow Module Level 3
dbaron@6470 1065 if it writes style sheets that are syntactically correct according to the
dbaron@6470 1066 generic CSS grammar and the individual grammars of each feature in
dbaron@6470 1067 this module, and meet all other conformance requirements of style sheets
dbaron@6470 1068 as described in this module.
dbaron@6470 1069
dbaron@6470 1070 <h3 id="partial">
dbaron@6470 1071 Partial implementations</h3>
dbaron@6470 1072
dbaron@6470 1073 <p>So that authors can exploit the forward-compatible parsing rules to
dbaron@6470 1074 assign fallback values, CSS renderers <strong>must</strong>
dbaron@6470 1075 treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
dbaron@6470 1076 as appropriate</a>) any at-rules, properties, property values, keywords,
dbaron@6470 1077 and other syntactic constructs for which they have no usable level of
dbaron@6470 1078 support. In particular, user agents <strong>must not</strong> selectively
dbaron@6470 1079 ignore unsupported component values and honor supported values in a single
dbaron@6470 1080 multi-value property declaration: if any value is considered invalid
dbaron@6470 1081 (as unsupported values must be), CSS requires that the entire declaration
dbaron@6470 1082 be ignored.</p>
dbaron@6470 1083
dbaron@6470 1084 <h3 id="experimental">
dbaron@6470 1085 Experimental implementations</h3>
dbaron@6470 1086
dbaron@6470 1087 <p>To avoid clashes with future CSS features, the CSS2.1 specification
dbaron@6470 1088 reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
dbaron@6470 1089 syntax</a> for proprietary and experimental extensions to CSS.
dbaron@6470 1090
dbaron@6470 1091 <p>Prior to a specification reaching the Candidate Recommendation stage
dbaron@6470 1092 in the W3C process, all implementations of a CSS feature are considered
dbaron@6470 1093 experimental. The CSS Working Group recommends that implementations
dbaron@6470 1094 use a vendor-prefixed syntax for such features, including those in
dbaron@6470 1095 W3C Working Drafts. This avoids incompatibilities with future changes
dbaron@6470 1096 in the draft.
dbaron@6470 1097 </p>
dbaron@6470 1098
dbaron@6470 1099 <h3 id="testing">
dbaron@6470 1100 Non-experimental implementations</h3>
dbaron@6470 1101
dbaron@6470 1102 <p>Once a specification reaches the Candidate Recommendation stage,
dbaron@6470 1103 non-experimental implementations are possible, and implementors should
dbaron@6470 1104 release an unprefixed implementation of any CR-level feature they
dbaron@6470 1105 can demonstrate to be correctly implemented according to spec.
dbaron@6470 1106
dbaron@6470 1107 <p>To establish and maintain the interoperability of CSS across
dbaron@6470 1108 implementations, the CSS Working Group requests that non-experimental
dbaron@6470 1109 CSS renderers submit an implementation report (and, if necessary, the
dbaron@6470 1110 testcases used for that implementation report) to the W3C before
dbaron@6470 1111 releasing an unprefixed implementation of any CSS features. Testcases
dbaron@6470 1112 submitted to W3C are subject to review and correction by the CSS
dbaron@6470 1113 Working Group.
dbaron@6470 1114
dbaron@6470 1115 <p>Further information on submitting testcases and implementation reports
dbaron@6470 1116 can be found from on the CSS Working Group's website at
dbaron@6470 1117 <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
dbaron@6470 1118 Questions should be directed to the
dbaron@6470 1119 <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
dbaron@6470 1120 mailing list.
dbaron@6470 1121
dbaron@6470 1122 <h3 id="cr-exit-criteria">
dbaron@6470 1123 CR exit criteria</h3>
dbaron@6470 1124
dbaron@6470 1125 <p class=issue>[Change or remove the following CR exit criteria if
dbaron@6470 1126 the spec is not a module, but, e.g., a Note or a profile. This text was <a
dbaron@6470 1127 href="http://www.w3.org/Style/CSS/Tracker/actions/44"> decided on 2008-06-04.</a>]</p>
dbaron@6470 1128
dbaron@6470 1129 <p>
dbaron@6470 1130 For this specification to be advanced to Proposed Recommendation,
dbaron@6470 1131 there must be at least two independent, interoperable implementations
dbaron@6470 1132 of each feature. Each feature may be implemented by a different set of
dbaron@6470 1133 products, there is no requirement that all features be implemented by
dbaron@6470 1134 a single product. For the purposes of this criterion, we define the
dbaron@6470 1135 following terms:
dbaron@6470 1136
dbaron@6470 1137 <dl>
dbaron@6470 1138 <dt>independent <dd>each implementation must be developed by a
dbaron@6470 1139 different party and cannot share, reuse, or derive from code
dbaron@6470 1140 used by another qualifying implementation. Sections of code that
dbaron@6470 1141 have no bearing on the implementation of this specification are
dbaron@6470 1142 exempt from this requirement.
dbaron@6470 1143
dbaron@6470 1144 <dt>interoperable <dd>passing the respective test case(s) in the
dbaron@6470 1145 official CSS test suite, or, if the implementation is not a Web
dbaron@6470 1146 browser, an equivalent test. Every relevant test in the test
dbaron@6470 1147 suite should have an equivalent test created if such a user
dbaron@6470 1148 agent (UA) is to be used to claim interoperability. In addition
dbaron@6470 1149 if such a UA is to be used to claim interoperability, then there
dbaron@6470 1150 must one or more additional UAs which can also pass those
dbaron@6470 1151 equivalent tests in the same way for the purpose of
dbaron@6470 1152 interoperability. The equivalent tests must be made publicly
dbaron@6470 1153 available for the purposes of peer review.
dbaron@6470 1154
dbaron@6470 1155 <dt>implementation <dd>a user agent which:
dbaron@6470 1156
dbaron@6470 1157 <ol class=inline>
dbaron@6470 1158 <li>implements the specification.
dbaron@6470 1159
dbaron@6470 1160 <li>is available to the general public. The implementation may
dbaron@6470 1161 be a shipping product or other publicly available version
dbaron@6470 1162 (i.e., beta version, preview release, or “nightly build”).
dbaron@6470 1163 Non-shipping product releases must have implemented the
dbaron@6470 1164 feature(s) for a period of at least one month in order to
dbaron@6470 1165 demonstrate stability.
dbaron@6470 1166
dbaron@6470 1167 <li>is not experimental (i.e., a version specifically designed
dbaron@6470 1168 to pass the test suite and is not intended for normal usage
dbaron@6470 1169 going forward).
dbaron@6470 1170 </ol>
dbaron@6470 1171 </dl>
dbaron@6470 1172
dbaron@6470 1173 <p>The specification will remain Candidate Recommendation for at least
dbaron@6470 1174 six months.
dbaron@6470 1175
dbaron@6470 1176 <h2 class=no-num id="acknowledgments">
dbaron@6470 1177 Acknowledgments</h2>
dbaron@6470 1178
dbaron@6470 1179 <p>
dbaron@6470 1180 Thanks especially to the feedback from
dbaron@6496 1181 Rossen Atanassov,
dbaron@6496 1182 Bert Bos,
dbaron@6496 1183 Tantek Çelik,
dbaron@6496 1184 John Daggett,
dbaron@6496 1185 fantasai,
dbaron@6496 1186 Daniel Glazman,
dbaron@6496 1187 Vincent Hardy,
dbaron@6470 1188 H&aring;kon Wium Lie,
dbaron@6496 1189 Peter Linss,
dbaron@7815 1190 Robert O'Callahan,
dbaron@6470 1191 Florian Rivoal,
dbaron@6473 1192 Alan Stearns,
dbaron@6496 1193 Steve Zilles,
dbaron@6470 1194 and all the rest of the
dbaron@6470 1195 <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.
dbaron@6470 1196 </p>
dbaron@6470 1197
dbaron@6470 1198 <h2 class=no-num id="references">
dbaron@6470 1199 References</h2>
dbaron@6470 1200
dbaron@6470 1201 <h3 class="no-num" id="normative-references">
dbaron@6470 1202 Normative references</h3>
dbaron@6470 1203 <!--normative-->
dbaron@6470 1204
dbaron@6470 1205 <h3 class="no-num" id="other-references">
dbaron@6470 1206 Other references</h3>
dbaron@6470 1207 <!--informative-->
dbaron@6470 1208
dbaron@6470 1209 <h2 class="no-num" id="index">
dbaron@6470 1210 Index</h2>
dbaron@6470 1211 <!--index-->
dbaron@6470 1212
dbaron@6470 1213 <h2 class="no-num" id="property-index">
dbaron@6470 1214 Property index</h2>
dbaron@6470 1215 <!-- properties -->
dbaron@6470 1216
dbaron@6470 1217 </body>
dbaron@6470 1218 </html>
dbaron@6470 1219 <!-- Keep this comment at the end of the file
dbaron@6470 1220 Local variables:
dbaron@6470 1221 mode: sgml
dbaron@6470 1222 sgml-declaration:"~/SGML/HTML4.decl"
dbaron@6470 1223 sgml-default-doctype-name:"html"
dbaron@6470 1224 sgml-minimize-attributes:t
dbaron@6470 1225 sgml-nofill-elements:("pre" "style" "br")
dbaron@6470 1226 sgml-live-element-indicator:t
dbaron@6470 1227 sgml-omittag:nil
dbaron@6470 1228 sgml-shorttag:nil
dbaron@6470 1229 sgml-namecase-general:t
dbaron@6470 1230 sgml-general-insert-case:lower
dbaron@6470 1231 sgml-always-quote-attributes:t
dbaron@6470 1232 sgml-indent-step:nil
dbaron@6470 1233 sgml-indent-data:t
dbaron@6470 1234 sgml-parent-document:nil
dbaron@6470 1235 sgml-exposed-tags:nil
dbaron@6470 1236 sgml-local-catalogs:nil
dbaron@6470 1237 sgml-local-ecat-files:nil
dbaron@6470 1238 End:
dbaron@6470 1239 -->
dbaron@6470 1240

mercurial