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