css3-overflow/Overview.src.html

Mon, 06 Aug 2012 17:42:01 -0700

author
L. David Baron <dbaron@dbaron.org>
date
Mon, 06 Aug 2012 17:42:01 -0700
changeset 6475
4454a4d747b2
parent 6474
accd2ba885a3
child 6476
abfd019f595b
permissions
-rw-r--r--

Add one example.

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@6474 5 <title>CSS Region Styling 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@6475 12 .in-cards-demo {
dbaron@6475 13 width: 13em;
dbaron@6475 14 height: 8em;
dbaron@6475 15
dbaron@6475 16 padding: 4px;
dbaron@6475 17 border: medium solid blue;
dbaron@6475 18 margin: 6px;
dbaron@6475 19
dbaron@6475 20 font: medium/1.3 Times New Roman, Times, serif;
dbaron@6475 21 white-space: nowrap;
dbaron@6475 22 }
dbaron@6475 23 </style>
dbaron@6470 24 </head>
dbaron@6470 25
dbaron@6470 26 <div class="head">
dbaron@6470 27 <!--logo-->
dbaron@6470 28
dbaron@6474 29 <h1>CSS Region Styling Module Level 3</h1>
dbaron@6470 30
dbaron@6470 31 <h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
dbaron@6470 32 <dl>
dbaron@6470 33 <dt>This version:
dbaron@6474 34 <dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/ED-css3-region-styling-[CDATE]/</a>
dbaron@6470 35
dbaron@6470 36 <dt>Latest version:
dbaron@6470 37 <dd><a href="http://www.w3.org/TR/[SHORTNAME]/">http://www.w3.org/TR/[SHORTNAME]/</a>
dbaron@6470 38
dbaron@6470 39 <dt>Editor's draft:
dbaron@6470 40 <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a>
dbaron@6470 41
dbaron@6470 42 <!--
dbaron@6470 43 <dt>Previous version:
dbaron@6470 44 <dd><a href="http://www.w3.org/PreviousVersionURI">
dbaron@6470 45 http://www.w3.org/PreviousVersionURI</a>
dbaron@6470 46 -->
dbaron@6470 47
dbaron@6470 48 <dt>Issue Tracking:</dt>
dbaron@6470 49 <dd>Maintained in document (only editor's draft is current)
dbaron@6470 50
dbaron@6470 51 <dt>Feedback:</dt>
dbaron@6470 52 <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 53
dbaron@6470 54 <dt>Editors:
dbaron@6470 55 <dd class="h-card vcard">
dbaron@6470 56 <a class="p-name fn u-url url" rel="author"
dbaron@6470 57 href="http://dbaron.org/">L. David Baron</a>,
dbaron@6470 58 <a class="p-org org" href="http://www.mozilla.org/">Mozilla</a>
dbaron@6470 59 </dl>
dbaron@6470 60
dbaron@6470 61 <!--copyright-->
dbaron@6470 62
dbaron@6470 63 <hr title="Separator for header">
dbaron@6470 64 </div>
dbaron@6470 65
dbaron@6470 66 <h2 class="no-num no-toc" id="abstract">Abstract</h2>
dbaron@6470 67
dbaron@6470 68 <p>
dbaron@6470 69 <a href="http://www.w3.org/TR/CSS/">CSS</a> is
dbaron@6470 70 a language for describing
dbaron@6470 71 the rendering of structured documents (such as HTML and XML)
dbaron@6470 72 on screen, on paper, in speech, etc.
dbaron@6470 73 This module contains the features of CSS
dbaron@6470 74 relating to new mechanisms of overflow handling in visual media (e.g., screen or paper).
dbaron@6470 75 In interactive media,
dbaron@6470 76 it describes features that allow the overflow
dbaron@6470 77 from a fixed size container
dbaron@6470 78 to be handled by pagination (displaying one page at a time).
dbaron@6470 79 It also describes features, applying to all visual media,
dbaron@6470 80 that allow the contents of an element
dbaron@6470 81 to be spread across multiple containers,
dbaron@6470 82 allowing the contents to flow across multiple regions of a page
dbaron@6470 83 or to have different styles for different parts.
dbaron@6470 84 </p>
dbaron@6470 85
dbaron@6470 86 <h2 class="no-num no-toc" id="status">Status of this document</h2>
dbaron@6470 87
dbaron@6470 88 <!--status-->
dbaron@6470 89
dbaron@6470 90 <p>The following features are at risk: &hellip;
dbaron@6470 91
dbaron@6470 92 <h2 class="no-num no-toc" id="contents">
dbaron@6470 93 Table of contents</h2>
dbaron@6470 94
dbaron@6470 95 <!--toc-->
dbaron@6470 96
dbaron@6470 97 <h2 id="intro">
dbaron@6470 98 Introduction</h2>
dbaron@6470 99
dbaron@6470 100 <p>
dbaron@6470 101 In CSS Level 1 [[CSS1]], placing more content than would fit
dbaron@6470 102 inside an element with a specified size
dbaron@6470 103 was generally an authoring error.
dbaron@6470 104 Doing so caused the content to extend
dbaron@6470 105 outside the bounds of the element,
dbaron@6470 106 which would likely cause
dbaron@6470 107 that content to overlap with other elements.
dbaron@6470 108 </p>
dbaron@6470 109
dbaron@6470 110 <p>
dbaron@6470 111 CSS Level 2 [[CSS21]] introduced the 'overflow' property,
dbaron@6470 112 which allows authors to have overflow be handled by scrolling,
dbaron@6470 113 which means it is no longer an authoring error.
dbaron@6470 114 It also allows authors to specify
dbaron@6470 115 that overflow is handled by clipping,
dbaron@6470 116 which makes sense when the author's intent
dbaron@6470 117 is that the content not be shown.
dbaron@6470 118 </p>
dbaron@6470 119
dbaron@6470 120 <p>
dbaron@6470 121 However, scrolling is not the only way
dbaron@6470 122 to present large amounts of content,
dbaron@6470 123 and may even not be the optimal way.
dbaron@6470 124 After all, the codex replaced the scroll
dbaron@6470 125 as the common format for large written works
dbaron@6470 126 because of its advantages.
dbaron@6470 127 </p>
dbaron@6470 128
dbaron@6470 129 <p>
dbaron@6470 130 This specification introduces
dbaron@6470 131 a mechanism for Web pages to specify
dbaron@6470 132 that a region of a page should handle overflow
dbaron@6470 133 through pagination rather than through scrolling.
dbaron@6470 134 </p>
dbaron@6470 135
dbaron@6470 136 <p>
dbaron@6470 137 This specification also extends the concept of overflow
dbaron@6470 138 in another direction.
dbaron@6470 139 Instead of requiring that authors specify a single region
dbaron@6470 140 into which the content of an element must flow,
dbaron@6470 141 this specification allows authors to specify multiple regions,
dbaron@6470 142 each with their own dimensions and styles,
dbaron@6470 143 so that the content of the element can flow from one to the next,
dbaron@6470 144 using as many as needed to place the content without overflowing.
dbaron@6470 145 </p>
dbaron@6470 146
dbaron@6470 147 <p>
dbaron@6470 148 In both of these cases, implementations must
dbaron@6470 149 break the content in the block-progression dimension.
dbaron@6470 150 Implementations must do this is described
dbaron@6470 151 in the CSS Fragmentation Module [[!CSS3-BREAK]].
dbaron@6470 152 </p>
dbaron@6470 153
dbaron@6470 154
dbaron@6470 155 <h2 id="paginated-overflow">Paginated overflow</h2>
dbaron@6470 156
dbaron@6470 157 <p class="issue">overflow:paginate or overflow:pages (or paged-x, paged-y, paged-x-controls, paged-y-controls as css3-gcpm has?)</p>
dbaron@6470 158
dbaron@6470 159 <p class="issue">Ability to display N pages at once
dbaron@6470 160 rather than just one page at once?</p>
dbaron@6470 161
dbaron@6470 162 <h2 id="region-overflow">Region overflow</h2>
dbaron@6470 163
dbaron@6470 164 <p>
dbaron@6470 165 This section introduces and defines the meaning of
dbaron@6470 166 the new ''regions'' (<span class="issue">or ''repeat''?</span>)
dbaron@6470 167 value of the 'overflow' property.
dbaron@6470 168 </p>
dbaron@6470 169
dbaron@6470 170 <p>
dbaron@6470 171 When the computed value of 'overflow' for an element is ''regions'',
dbaron@6470 172 and implementations would otherwise have created a box for the element,
dbaron@6470 173 then implementations must create at least one box for that element.
dbaron@6470 174 Each box created for the element is called a <dfn>region box</dfn>
dbaron@6470 175 for that element.
dbaron@6470 176 (If an element with ''overflow: regions'' generates only one box,
dbaron@6470 177 that box is a <i>region box</i>.
dbaron@6470 178 However, if an element's computed 'overflow' is not ''regions'',
dbaron@6470 179 then its box is not a <i>region box</i>.)
dbaron@6470 180 Every <i>region box</i> is a fragmentation container,
dbaron@6471 181 and for each <i>region box</i> which ends with a fragmentation break,
dbaron@6471 182 (which could happen
dbaron@6471 183 because breakable content overflows in the block dimension
dbaron@6471 184 or because of a forced break),
dbaron@6470 185 there must be another <i>region box</i> created as a next sibling
dbaron@6470 186 of the previous one.
dbaron@6470 187 <span class="issue">Or is it as though it's a next sibling of
dbaron@6470 188 the element? Need to figure out exactly how this interacts with
dbaron@6470 189 other box-level fixup.</span>
dbaron@6470 190 (Breakable content might overflow in the box dimension either
dbaron@6470 191 because of a specified size on the region box
dbaron@6470 192 or because the region box is within a fragmentation context
dbaron@6470 193 in which it is being broken.
dbaron@6470 194 In other words, a single region box is never broken
dbaron@6470 195 across columns or pages;
dbaron@6470 196 the pieces that are in separate columns or pages
dbaron@6470 197 are always distinct region boxes.)
dbaron@6470 198 </p>
dbaron@6470 199
dbaron@6470 200 <p class="issue">
dbaron@6470 201 We also want '':nth-region()'' pseudo-elements
dbaron@6470 202 to be able to apply to the pieces of an element
dbaron@6470 203 split within a fragmentation context.
dbaron@6470 204 Should we require that authors who want to use
dbaron@6470 205 '':nth-region()'' in this way specify ''overflow:regions''
dbaron@6470 206 (even if they don't specify a constrained height),
dbaron@6470 207 or should it work automatically for all elements
dbaron@6470 208 even if they don't have ''overflow: regions''?
dbaron@6470 209 </p>
dbaron@6470 210
dbaron@6475 211 <div class="example">
dbaron@6475 212 <table style="width: 100%"><tr><td><pre>
dbaron@6475 213 &lt;!DOCTYPE HTML&gt;
dbaron@6475 214 &lt;title&gt;Breaking content into
dbaron@6475 215 equal-sized cards&lt;/title&gt;
dbaron@6475 216 &lt;style&gt;
dbaron@6475 217 .in-cards {
dbaron@6475 218 overflow: regions;
dbaron@6475 219
dbaron@6475 220 width: 13em;
dbaron@6475 221 height: 8em;
dbaron@6475 222
dbaron@6475 223 padding: 4px;
dbaron@6475 224 border: medium solid blue;
dbaron@6475 225 margin: 6px;
dbaron@6475 226
dbaron@6475 227 font: medium/1.3 Times New
dbaron@6475 228 Roman, Times, serif;
dbaron@6475 229 }
dbaron@6475 230 &lt;/style&gt;
dbaron@6475 231 &lt;div class="in-cards"&gt;
dbaron@6475 232 In this example, the text in the div
dbaron@6475 233 is broken into a series of cards.
dbaron@6475 234 These cards all have the same style.
dbaron@6475 235 The presence of enough content to
dbaron@6475 236 overflow one of the cards causes
dbaron@6475 237 another one to be created. The second
dbaron@6475 238 card is created just like it's the
dbaron@6475 239 next sibling of the first.
dbaron@6475 240 &lt;/div&gt;
dbaron@6475 241 </pre></td><td>
dbaron@6475 242 <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 243 <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 244 </td></tr></table>
dbaron@6475 245 </div>
dbaron@6475 246
dbaron@6470 247 <h3 id="region-styling">Region styling</h3>
dbaron@6470 248
dbaron@6470 249 <h4 id="region-pseudo-element">The ::nth-region() pseudo-element</h4>
dbaron@6470 250
dbaron@6470 251 <p>
dbaron@6470 252 The ::nth-region() pseudo-element is a pseudo-element
dbaron@6470 253 that describes some of the region boxes generated by an element.
dbaron@6470 254 The argument to the pseudo-element takes the same syntax
dbaron@6470 255 as the argument to the :nth-child() pseudo-class
dbaron@6470 256 defined in [[!SELECT]], and has the same meaning
dbaron@6470 257 except that the number is relative to
dbaron@6470 258 <i>region boxes</i> generated by the element
dbaron@6470 259 instead of siblings of the element.
dbaron@6470 260 </p>
dbaron@6470 261
dbaron@6470 262 <p class="issue">
dbaron@6470 263 If we go with a name for the 'overflow' value other than
dbaron@6470 264 ''overflow: regions'',
dbaron@6470 265 then we should probably rename this pseudo-element,
dbaron@6470 266 perhaps to ::nth-piece(), ::nth-part(), or ::nth-instance().
dbaron@6470 267 </p>
dbaron@6470 268
dbaron@6470 269 <p class="note">
dbaron@6470 270 Selectors that allow addressing regions
dbaron@6470 271 by counting from the end rather than the start
dbaron@6470 272 are intentionally not provided.
dbaron@6470 273 Such selectors would interfere with determining
dbaron@6470 274 the number of regions.
dbaron@6470 275 </p>
dbaron@6470 276
dbaron@6470 277 <h4 id="style-of-regions">Styling of regions</h4>
dbaron@6470 278
dbaron@6470 279 <p class="issue">
dbaron@6470 280 Should this apply to region overflow only,
dbaron@6470 281 or also to paginated overflow?
dbaron@6470 282 (If it applies,
dbaron@6470 283 then stricter property restrictions would be needed
dbaron@6470 284 for paginated overflow.)
dbaron@6470 285 </p>
dbaron@6470 286
dbaron@6470 287 <p>
dbaron@6470 288 In the absence of rules with ''::nth-region()'' pseudo-elements,
dbaron@6470 289 the computed style for each <i>region box</i>
dbaron@6470 290 is the computed style for the element
dbaron@6470 291 for which the <i>region box</i> was created.
dbaron@6470 292 However, the style for a <i>region box</i> is also influenced
dbaron@6470 293 by rules whose selector's <i>subject</i> [[!SELECT]]
dbaron@6470 294 has an ''::nth-region()'' pseudo-element,
dbaron@6470 295 if the 1-based number of the region box matches
dbaron@6470 296 that ''::nth-region()'' pseudo-element
dbaron@6470 297 and the selector (excluding the ''::nth-region()'' pseudo-element)
dbaron@6470 298 matches the element generating the regions.
dbaron@6470 299 </p>
dbaron@6470 300
dbaron@6470 301 <p>
dbaron@6470 302 Styling an '':nth-region()'' pseudo-element with the 'overflow'
dbaron@6470 303 property has no effect;
dbaron@6470 304 the computed value of 'overflow' for the region box
dbaron@6470 305 remains the same as the computed value of overflow for the element.
dbaron@6470 306 </p>
dbaron@6470 307
dbaron@6470 308 <p>
dbaron@6470 309 Specifying ''display: none'' for a region box causes
dbaron@6470 310 the region box with that index not to be generated.
dbaron@6470 311 However, in terms of the indices
dbaron@6470 312 used for matching '':nth-region()'' pseudo-elements
dbaron@6470 313 of later region boxes,
dbaron@6470 314 it still counts as though it was generated.
dbaron@6470 315 However, since it is not generated, it does not contain any content.
dbaron@6470 316 </p>
dbaron@6470 317
dbaron@6470 318 <p class="issue">
dbaron@6470 319 Would it make more sense to forbid ''display:none''?
dbaron@6470 320 Or perhaps to forbid 'display', 'position', 'float',
dbaron@6470 321 and similar (in addition to 'overflow')?
dbaron@6470 322 </p>
dbaron@6470 323
dbaron@6470 324 <p>
dbaron@6470 325 To match the model for other pseudo-elements
dbaron@6470 326 where the pseudo-elements live inside their corresponding element,
dbaron@6470 327 declarations in ''::nth-region()'' pseudo-elements override
dbaron@6470 328 declarations in rules without the pseudo-element.
dbaron@6470 329 The relative priority within such declarations is determined
dbaron@6470 330 by normal cascading order (see [[!CSS21]]).
dbaron@6470 331 </p>
dbaron@6470 332
dbaron@6470 333 <p>
dbaron@6470 334 Styles specified on ''::nth-region()'' pseudo-elements
dbaron@6470 335 do affect inheritance to content within the <i>region box</i>.
dbaron@6470 336 In other words, the content within the <i>region box</i> must
dbaron@6470 337 inherit from the region box's style (i.e., the pseudo-element style)
dbaron@6470 338 rather than directly from the element.
dbaron@6470 339 This means that elements split between region boxes may
dbaron@6470 340 have different styles for different parts of the element.
dbaron@6470 341 </p>
dbaron@6470 342
dbaron@6472 343 <p class="issue">
dbaron@6472 344 This inheritance rule allows specifying styles indirectly
dbaron@6472 345 (by using explicit ''inherit'' or using default inheritance
dbaron@6472 346 on properties that don't apply to '':first-letter'')
dbaron@6472 347 that can't be specified directly
dbaron@6472 348 (based on the rules in the next section).
dbaron@6472 349 This is a problem.
dbaron@6472 350 The restrictions that apply to styling inside regions
dbaron@6472 351 should also apply to inheritance from regions.
dbaron@6472 352 </p>
dbaron@6472 353
dbaron@6470 354 <h4 id="style-in-regions">Styling inside regions</h4>
dbaron@6470 355
dbaron@6470 356 <p class="issue">
dbaron@6470 357 Should this apply to region overflow only,
dbaron@6470 358 or also to paginated overflow,
dbaron@6470 359 or even to pagination across pages?
dbaron@6470 360 </p>
dbaron@6470 361
dbaron@6470 362 <p>
dbaron@6470 363 The '':nth-region()'' pseudo-element
dbaron@6470 364 can also be used to style
dbaron@6470 365 content inside of a <i>region box</i>.
dbaron@6470 366 Unlike the ''::first-line'' and ''::first-letter'' pseudo-elements,
dbaron@6470 367 the '':nth-region()'' pseudo-element can be applied
dbaron@6470 368 to parts of the selector other than the subject:
dbaron@6470 369 in particular, it can match ancestors of the subject.
dbaron@6470 370 However, the only CSS properties applied
dbaron@6470 371 by rules with such selectors
dbaron@6470 372 are those that apply
dbaron@6470 373 to the ''::first-letter'' pseudo-element.
dbaron@6470 374 </p>
dbaron@6470 375
dbaron@6470 376 <p>
dbaron@6470 377 To be more precise,
dbaron@6470 378 when a rule's selector has ''::nth-region()'' pseudo-elements
dbaron@6470 379 attached to parts of the selector other than the subject,
dbaron@6470 380 the declarations in that rule apply to
dbaron@6470 381 a fragment (or pseudo-element thereof) when:
dbaron@6470 382 </p>
dbaron@6470 383 <ol>
dbaron@6470 384 <li>
dbaron@6470 385 the declarations are for properties that apply to the
dbaron@6470 386 ''::first-letter'' pseudo-element,
dbaron@6470 387 </li>
dbaron@6470 388 <li>
dbaron@6470 389 the declarations would apply to
dbaron@6470 390 that fragment (or pseudo-element thereof)
dbaron@6470 391 had those ''::nth-region()'' pseudo-elements been removed,
dbaron@6470 392 with a particular association between
dbaron@6470 393 each sequence of simple selectors and the element it matched,
dbaron@6470 394 and
dbaron@6470 395 </li>
dbaron@6470 396 <li>
dbaron@6470 397 for each removed ''::nth-region()'' pseudo-element,
dbaron@6470 398 the fragment lives within a <i>region box</i>
dbaron@6470 399 of the element associated in that association
dbaron@6470 400 with the selector that the pseudo-element was attached to,
dbaron@6470 401 and whose index matches the pseudo-element.
dbaron@6470 402 </li>
dbaron@6470 403 </ol>
dbaron@6470 404
dbaron@6470 405 <h3 id="max-lines">The 'max-lines' property</h3>
dbaron@6470 406
dbaron@6470 407 <p>
dbaron@6470 408 Authors may wish to style the opening lines of an element
dbaron@6470 409 with different styles
dbaron@6470 410 by putting those opening lines in a separate region.
dbaron@6470 411 However, since it may be difficult to predict the exact height
dbaron@6470 412 occupied by those lines
dbaron@6470 413 in order to restrict the first region to that height,
dbaron@6470 414 this specification introduces a 'max-lines' property
dbaron@6470 415 that forces a region to break
dbaron@6470 416 after a specified number of lines.
dbaron@6470 417 This forces a break after the given number of lines
dbaron@6470 418 contained within the element or its descendants,
dbaron@6470 419 as long as those lines are in the same block formatting context.
dbaron@6470 420 </p>
dbaron@6470 421
dbaron@6470 422 <table class=propdef>
dbaron@6470 423 <tr>
dbaron@6470 424 <th>Name:
dbaron@6470 425 <td><dfn>max-lines</dfn>
dbaron@6470 426 <tr>
dbaron@6470 427 <th><a href="#values">Value</a>:
dbaron@6470 428 <td>none | &lt;integer&gt;
dbaron@6470 429 <tr>
dbaron@6470 430 <th>Initial:
dbaron@6470 431 <td>none
dbaron@6470 432 <tr>
dbaron@6470 433 <th>Applies to:
dbaron@6470 434 <td>region boxes
dbaron@6470 435 <tr>
dbaron@6470 436 <th>Inherited:
dbaron@6470 437 <td>no
dbaron@6470 438 <tr>
dbaron@6470 439 <th>Percentages:
dbaron@6470 440 <td>N/A
dbaron@6470 441 <tr>
dbaron@6470 442 <th>Media:
dbaron@6470 443 <td>visual
dbaron@6470 444 <tr>
dbaron@6470 445 <th>Computed&nbsp;value:
dbaron@6470 446 <td>specified value
dbaron@6470 447 <tr>
dbaron@6470 448 <th>Animatable:
dbaron@6470 449 <td>as <a href="http://www.w3.org/TR/css3-transitions/#animatable-types">integer</a>
dbaron@6470 450 <tr>
dbaron@6470 451 <th>Canonical order:
dbaron@6470 452 <td><abbr title="follows order of property value definition">per grammar</abbr>
dbaron@6470 453 </table>
dbaron@6470 454
dbaron@6470 455 <dl>
dbaron@6470 456 <dt>none
dbaron@6470 457 <dd>
dbaron@6470 458 <p>
dbaron@6470 459 Breaks occur only as specified elsewhere.
dbaron@6470 460 </p>
dbaron@6470 461 </dd>
dbaron@6470 462
dbaron@6470 463 <dt>&lt;integer&gt;
dbaron@6470 464 <dd>
dbaron@6470 465 <p>
dbaron@6470 466 In addition to any breaks specified elsewhere,
dbaron@6470 467 a break is forced before any line that would exceed
dbaron@6470 468 the given number of lines
dbaron@6470 469 being placed inside the element
dbaron@6470 470 (excluding lines that are in
dbaron@6470 471 a different block formatting context from
dbaron@6470 472 the block formatting context to which
dbaron@6470 473 an unstyled child of the element would belong).
dbaron@6470 474 </p>
dbaron@6470 475
dbaron@6470 476 <p class="issue">
dbaron@6470 477 If there are multiple boundaries between this line
dbaron@6470 478 and the previous, where exactly (in terms of element
dbaron@6470 479 boundaries) is the break forced?
dbaron@6470 480 </p>
dbaron@6470 481
dbaron@6470 482 <p>
dbaron@6470 483 Only positive integers are accepted.
dbaron@6470 484 Zero or negative integers are a parse error.
dbaron@6470 485 </p>
dbaron@6470 486 </dd>
dbaron@6470 487 </dl>
dbaron@6470 488
dbaron@6470 489 <p class="issue">Should this apply to regions overflow only, or also
dbaron@6470 490 to pagination?</p>
dbaron@6470 491
dbaron@6470 492 <h2 id="conformance">
dbaron@6470 493 Conformance</h2>
dbaron@6470 494
dbaron@6470 495 <h3 id="placement">
dbaron@6470 496 Module interactions</h3>
dbaron@6470 497
dbaron@6470 498 <p>This module extends the 'overflow'
dbaron@6470 499 feature defined in [[CSS21]] section 11.1.1. It defines additional
dbaron@6470 500 overflow handling mechanisms that implementations must implement as
dbaron@6470 501 described in this module in order to conform to this module.</p>
dbaron@6470 502
dbaron@6470 503 <p>No properties in this module apply to the <code>::first-line</code> or
dbaron@6470 504 <code>::first-letter</code> pseudo-elements.</p>
dbaron@6470 505
dbaron@6470 506 <h3 id="values">
dbaron@6470 507 Values</h3>
dbaron@6470 508
dbaron@6470 509 <p>This specification follows the
dbaron@6470 510 <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
dbaron@6470 511 definition conventions</a> from [[!CSS21]]. Value types not defined in
dbaron@6470 512 this specification are defined in CSS Level 2 Revision 1 [[!CSS21]].
dbaron@6470 513 Other CSS modules may expand the definitions of these value types: for
dbaron@6470 514 example [[CSS3COLOR]], when combined with this module, expands the
dbaron@6470 515 definition of the &lt;color&gt; value type as used in this specification.</p>
dbaron@6470 516
dbaron@6470 517 <p>In addition to the property-specific values listed in their definitions,
dbaron@6470 518 all properties defined in this specification also accept the
dbaron@6470 519 <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
dbaron@6470 520 keyword as their property value. For readability it has not been repeated
dbaron@6470 521 explicitly.
dbaron@6470 522
dbaron@6470 523
dbaron@6470 524 <h3 id="conventions">
dbaron@6470 525 Document conventions</h3>
dbaron@6470 526
dbaron@6470 527 <p>Conformance requirements are expressed with a combination of
dbaron@6470 528 descriptive assertions and RFC 2119 terminology. The key words “MUST”,
dbaron@6470 529 “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
dbaron@6470 530 “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
dbaron@6470 531 document are to be interpreted as described in RFC 2119.
dbaron@6470 532 However, for readability, these words do not appear in all uppercase
dbaron@6470 533 letters in this specification.
dbaron@6470 534
dbaron@6470 535 <p>All of the text of this specification is normative except sections
dbaron@6470 536 explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p>
dbaron@6470 537
dbaron@6470 538 <p>Examples in this specification are introduced with the words “for example”
dbaron@6470 539 or are set apart from the normative text with <code>class="example"</code>,
dbaron@6470 540 like this:
dbaron@6470 541
dbaron@6470 542 <div class="example">
dbaron@6470 543 <p>This is an example of an informative example.</p>
dbaron@6470 544 </div>
dbaron@6470 545
dbaron@6470 546 <p>Informative notes begin with the word “Note” and are set apart from the
dbaron@6470 547 normative text with <code>class="note"</code>, like this:
dbaron@6470 548
dbaron@6470 549 <p class="note">Note, this is an informative note.</p>
dbaron@6470 550
dbaron@6470 551 <h3 id="conformance-classes">
dbaron@6470 552 Conformance classes</h3>
dbaron@6470 553
dbaron@6474 554 <p>Conformance to CSS Region Styling Module Level 3
dbaron@6470 555 is defined for three conformance classes:
dbaron@6470 556 <dl>
dbaron@6470 557 <dt><dfn title="style sheet!!as conformance class">style sheet</dfn>
dbaron@6470 558 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
dbaron@6470 559 style sheet</a>.
dbaron@6470 560 <dt><dfn>renderer</dfn></dt>
dbaron@6470 561 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
dbaron@6470 562 that interprets the semantics of a style sheet and renders
dbaron@6470 563 documents that use them.
dbaron@6470 564 <dt><dfn id="authoring-tool">authoring tool</dfn></dt>
dbaron@6470 565 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
dbaron@6470 566 that writes a style sheet.
dbaron@6470 567 </dl>
dbaron@6470 568
dbaron@6474 569 <p>A style sheet is conformant to CSS Region Styling Module Level 3
dbaron@6470 570 if all of its statements that use syntax defined in this module are valid
dbaron@6470 571 according to the generic CSS grammar and the individual grammars of each
dbaron@6470 572 feature defined in this module.
dbaron@6470 573
dbaron@6474 574 <p>A renderer is conformant to CSS Region Styling Module Level 3
dbaron@6470 575 if, in addition to interpreting the style sheet as defined by the
dbaron@6470 576 appropriate specifications, it supports all the features defined
dbaron@6474 577 by CSS Region Styling Module Level 3 by parsing them correctly
dbaron@6470 578 and rendering the document accordingly. However, the inability of a
dbaron@6470 579 UA to correctly render a document due to limitations of the device
dbaron@6470 580 does not make the UA non-conformant. (For example, a UA is not
dbaron@6470 581 required to render color on a monochrome monitor.)
dbaron@6470 582
dbaron@6474 583 <p>An authoring tool is conformant to CSS Region Styling Module Level 3
dbaron@6470 584 if it writes style sheets that are syntactically correct according to the
dbaron@6470 585 generic CSS grammar and the individual grammars of each feature in
dbaron@6470 586 this module, and meet all other conformance requirements of style sheets
dbaron@6470 587 as described in this module.
dbaron@6470 588
dbaron@6470 589 <h3 id="partial">
dbaron@6470 590 Partial implementations</h3>
dbaron@6470 591
dbaron@6470 592 <p>So that authors can exploit the forward-compatible parsing rules to
dbaron@6470 593 assign fallback values, CSS renderers <strong>must</strong>
dbaron@6470 594 treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
dbaron@6470 595 as appropriate</a>) any at-rules, properties, property values, keywords,
dbaron@6470 596 and other syntactic constructs for which they have no usable level of
dbaron@6470 597 support. In particular, user agents <strong>must not</strong> selectively
dbaron@6470 598 ignore unsupported component values and honor supported values in a single
dbaron@6470 599 multi-value property declaration: if any value is considered invalid
dbaron@6470 600 (as unsupported values must be), CSS requires that the entire declaration
dbaron@6470 601 be ignored.</p>
dbaron@6470 602
dbaron@6470 603 <h3 id="experimental">
dbaron@6470 604 Experimental implementations</h3>
dbaron@6470 605
dbaron@6470 606 <p>To avoid clashes with future CSS features, the CSS2.1 specification
dbaron@6470 607 reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
dbaron@6470 608 syntax</a> for proprietary and experimental extensions to CSS.
dbaron@6470 609
dbaron@6470 610 <p>Prior to a specification reaching the Candidate Recommendation stage
dbaron@6470 611 in the W3C process, all implementations of a CSS feature are considered
dbaron@6470 612 experimental. The CSS Working Group recommends that implementations
dbaron@6470 613 use a vendor-prefixed syntax for such features, including those in
dbaron@6470 614 W3C Working Drafts. This avoids incompatibilities with future changes
dbaron@6470 615 in the draft.
dbaron@6470 616 </p>
dbaron@6470 617
dbaron@6470 618 <h3 id="testing">
dbaron@6470 619 Non-experimental implementations</h3>
dbaron@6470 620
dbaron@6470 621 <p>Once a specification reaches the Candidate Recommendation stage,
dbaron@6470 622 non-experimental implementations are possible, and implementors should
dbaron@6470 623 release an unprefixed implementation of any CR-level feature they
dbaron@6470 624 can demonstrate to be correctly implemented according to spec.
dbaron@6470 625
dbaron@6470 626 <p>To establish and maintain the interoperability of CSS across
dbaron@6470 627 implementations, the CSS Working Group requests that non-experimental
dbaron@6470 628 CSS renderers submit an implementation report (and, if necessary, the
dbaron@6470 629 testcases used for that implementation report) to the W3C before
dbaron@6470 630 releasing an unprefixed implementation of any CSS features. Testcases
dbaron@6470 631 submitted to W3C are subject to review and correction by the CSS
dbaron@6470 632 Working Group.
dbaron@6470 633
dbaron@6470 634 <p>Further information on submitting testcases and implementation reports
dbaron@6470 635 can be found from on the CSS Working Group's website at
dbaron@6470 636 <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
dbaron@6470 637 Questions should be directed to the
dbaron@6470 638 <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
dbaron@6470 639 mailing list.
dbaron@6470 640
dbaron@6470 641 <h3 id="cr-exit-criteria">
dbaron@6470 642 CR exit criteria</h3>
dbaron@6470 643
dbaron@6470 644 <p class=issue>[Change or remove the following CR exit criteria if
dbaron@6470 645 the spec is not a module, but, e.g., a Note or a profile. This text was <a
dbaron@6470 646 href="http://www.w3.org/Style/CSS/Tracker/actions/44"> decided on 2008-06-04.</a>]</p>
dbaron@6470 647
dbaron@6470 648 <p>
dbaron@6470 649 For this specification to be advanced to Proposed Recommendation,
dbaron@6470 650 there must be at least two independent, interoperable implementations
dbaron@6470 651 of each feature. Each feature may be implemented by a different set of
dbaron@6470 652 products, there is no requirement that all features be implemented by
dbaron@6470 653 a single product. For the purposes of this criterion, we define the
dbaron@6470 654 following terms:
dbaron@6470 655
dbaron@6470 656 <dl>
dbaron@6470 657 <dt>independent <dd>each implementation must be developed by a
dbaron@6470 658 different party and cannot share, reuse, or derive from code
dbaron@6470 659 used by another qualifying implementation. Sections of code that
dbaron@6470 660 have no bearing on the implementation of this specification are
dbaron@6470 661 exempt from this requirement.
dbaron@6470 662
dbaron@6470 663 <dt>interoperable <dd>passing the respective test case(s) in the
dbaron@6470 664 official CSS test suite, or, if the implementation is not a Web
dbaron@6470 665 browser, an equivalent test. Every relevant test in the test
dbaron@6470 666 suite should have an equivalent test created if such a user
dbaron@6470 667 agent (UA) is to be used to claim interoperability. In addition
dbaron@6470 668 if such a UA is to be used to claim interoperability, then there
dbaron@6470 669 must one or more additional UAs which can also pass those
dbaron@6470 670 equivalent tests in the same way for the purpose of
dbaron@6470 671 interoperability. The equivalent tests must be made publicly
dbaron@6470 672 available for the purposes of peer review.
dbaron@6470 673
dbaron@6470 674 <dt>implementation <dd>a user agent which:
dbaron@6470 675
dbaron@6470 676 <ol class=inline>
dbaron@6470 677 <li>implements the specification.
dbaron@6470 678
dbaron@6470 679 <li>is available to the general public. The implementation may
dbaron@6470 680 be a shipping product or other publicly available version
dbaron@6470 681 (i.e., beta version, preview release, or “nightly build”).
dbaron@6470 682 Non-shipping product releases must have implemented the
dbaron@6470 683 feature(s) for a period of at least one month in order to
dbaron@6470 684 demonstrate stability.
dbaron@6470 685
dbaron@6470 686 <li>is not experimental (i.e., a version specifically designed
dbaron@6470 687 to pass the test suite and is not intended for normal usage
dbaron@6470 688 going forward).
dbaron@6470 689 </ol>
dbaron@6470 690 </dl>
dbaron@6470 691
dbaron@6470 692 <p>The specification will remain Candidate Recommendation for at least
dbaron@6470 693 six months.
dbaron@6470 694
dbaron@6470 695 <h2 class=no-num id="acknowledgments">
dbaron@6470 696 Acknowledgments</h2>
dbaron@6470 697
dbaron@6470 698 <p>
dbaron@6470 699 Thanks especially to the feedback from
dbaron@6470 700 H&aring;kon Wium Lie,
dbaron@6470 701 Florian Rivoal,
dbaron@6473 702 Alan Stearns,
dbaron@6470 703 and all the rest of the
dbaron@6470 704 <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.
dbaron@6470 705 </p>
dbaron@6470 706
dbaron@6470 707 <h2 class=no-num id="references">
dbaron@6470 708 References</h2>
dbaron@6470 709
dbaron@6470 710 <h3 class="no-num" id="normative-references">
dbaron@6470 711 Normative references</h3>
dbaron@6470 712 <!--normative-->
dbaron@6470 713
dbaron@6470 714 <h3 class="no-num" id="other-references">
dbaron@6470 715 Other references</h3>
dbaron@6470 716 <!--informative-->
dbaron@6470 717
dbaron@6470 718 <h2 class="no-num" id="index">
dbaron@6470 719 Index</h2>
dbaron@6470 720 <!--index-->
dbaron@6470 721
dbaron@6470 722 <h2 class="no-num" id="property-index">
dbaron@6470 723 Property index</h2>
dbaron@6470 724 <!-- properties -->
dbaron@6470 725
dbaron@6470 726 </body>
dbaron@6470 727 </html>
dbaron@6470 728 <!-- Keep this comment at the end of the file
dbaron@6470 729 Local variables:
dbaron@6470 730 mode: sgml
dbaron@6470 731 sgml-declaration:"~/SGML/HTML4.decl"
dbaron@6470 732 sgml-default-doctype-name:"html"
dbaron@6470 733 sgml-minimize-attributes:t
dbaron@6470 734 sgml-nofill-elements:("pre" "style" "br")
dbaron@6470 735 sgml-live-element-indicator:t
dbaron@6470 736 sgml-omittag:nil
dbaron@6470 737 sgml-shorttag:nil
dbaron@6470 738 sgml-namecase-general:t
dbaron@6470 739 sgml-general-insert-case:lower
dbaron@6470 740 sgml-always-quote-attributes:t
dbaron@6470 741 sgml-indent-step:nil
dbaron@6470 742 sgml-indent-data:t
dbaron@6470 743 sgml-parent-document:nil
dbaron@6470 744 sgml-exposed-tags:nil
dbaron@6470 745 sgml-local-catalogs:nil
dbaron@6470 746 sgml-local-ecat-files:nil
dbaron@6470 747 End:
dbaron@6470 748 -->
dbaron@6470 749

mercurial