css3-overflow/Overview.src.html@b804d6ed5183
css3-overflow/Overview.src.html
Wed, 01 Aug 2012 14:13:01 -0700
- author
- L. David Baron <dbaron@dbaron.org>
- date
- Wed, 01 Aug 2012 14:13:01 -0700
- changeset 6473
- b804d6ed5183
- parent 6472
- 1743788dff9d
- child 6474
- accd2ba885a3
- permissions
- -rw-r--r--
Add acks.
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> which ends with a fragmentation break,
169 (which could happen
170 because breakable content overflows in the block dimension
171 or because of a forced break),
172 there must be another <i>region box</i> created as a next sibling
173 of the previous one.
174 <span class="issue">Or is it as though it's a next sibling of
175 the element? Need to figure out exactly how this interacts with
176 other box-level fixup.</span>
177 (Breakable content might overflow in the box dimension either
178 because of a specified size on the region box
179 or because the region box is within a fragmentation context
180 in which it is being broken.
181 In other words, a single region box is never broken
182 across columns or pages;
183 the pieces that are in separate columns or pages
184 are always distinct region boxes.)
185 </p>
187 <p class="issue">
188 We also want '':nth-region()'' pseudo-elements
189 to be able to apply to the pieces of an element
190 split within a fragmentation context.
191 Should we require that authors who want to use
192 '':nth-region()'' in this way specify ''overflow:regions''
193 (even if they don't specify a constrained height),
194 or should it work automatically for all elements
195 even if they don't have ''overflow: regions''?
196 </p>
198 <h3 id="region-styling">Region styling</h3>
200 <h4 id="region-pseudo-element">The ::nth-region() pseudo-element</h4>
202 <p>
203 The ::nth-region() pseudo-element is a pseudo-element
204 that describes some of the region boxes generated by an element.
205 The argument to the pseudo-element takes the same syntax
206 as the argument to the :nth-child() pseudo-class
207 defined in [[!SELECT]], and has the same meaning
208 except that the number is relative to
209 <i>region boxes</i> generated by the element
210 instead of siblings of the element.
211 </p>
213 <p class="issue">
214 If we go with a name for the 'overflow' value other than
215 ''overflow: regions'',
216 then we should probably rename this pseudo-element,
217 perhaps to ::nth-piece(), ::nth-part(), or ::nth-instance().
218 </p>
220 <p class="note">
221 Selectors that allow addressing regions
222 by counting from the end rather than the start
223 are intentionally not provided.
224 Such selectors would interfere with determining
225 the number of regions.
226 </p>
228 <h4 id="style-of-regions">Styling of regions</h4>
230 <p class="issue">
231 Should this apply to region overflow only,
232 or also to paginated overflow?
233 (If it applies,
234 then stricter property restrictions would be needed
235 for paginated overflow.)
236 </p>
238 <p>
239 In the absence of rules with ''::nth-region()'' pseudo-elements,
240 the computed style for each <i>region box</i>
241 is the computed style for the element
242 for which the <i>region box</i> was created.
243 However, the style for a <i>region box</i> is also influenced
244 by rules whose selector's <i>subject</i> [[!SELECT]]
245 has an ''::nth-region()'' pseudo-element,
246 if the 1-based number of the region box matches
247 that ''::nth-region()'' pseudo-element
248 and the selector (excluding the ''::nth-region()'' pseudo-element)
249 matches the element generating the regions.
250 </p>
252 <p>
253 Styling an '':nth-region()'' pseudo-element with the 'overflow'
254 property has no effect;
255 the computed value of 'overflow' for the region box
256 remains the same as the computed value of overflow for the element.
257 </p>
259 <p>
260 Specifying ''display: none'' for a region box causes
261 the region box with that index not to be generated.
262 However, in terms of the indices
263 used for matching '':nth-region()'' pseudo-elements
264 of later region boxes,
265 it still counts as though it was generated.
266 However, since it is not generated, it does not contain any content.
267 </p>
269 <p class="issue">
270 Would it make more sense to forbid ''display:none''?
271 Or perhaps to forbid 'display', 'position', 'float',
272 and similar (in addition to 'overflow')?
273 </p>
275 <p>
276 To match the model for other pseudo-elements
277 where the pseudo-elements live inside their corresponding element,
278 declarations in ''::nth-region()'' pseudo-elements override
279 declarations in rules without the pseudo-element.
280 The relative priority within such declarations is determined
281 by normal cascading order (see [[!CSS21]]).
282 </p>
284 <p>
285 Styles specified on ''::nth-region()'' pseudo-elements
286 do affect inheritance to content within the <i>region box</i>.
287 In other words, the content within the <i>region box</i> must
288 inherit from the region box's style (i.e., the pseudo-element style)
289 rather than directly from the element.
290 This means that elements split between region boxes may
291 have different styles for different parts of the element.
292 </p>
294 <p class="issue">
295 This inheritance rule allows specifying styles indirectly
296 (by using explicit ''inherit'' or using default inheritance
297 on properties that don't apply to '':first-letter'')
298 that can't be specified directly
299 (based on the rules in the next section).
300 This is a problem.
301 The restrictions that apply to styling inside regions
302 should also apply to inheritance from regions.
303 </p>
305 <h4 id="style-in-regions">Styling inside regions</h4>
307 <p class="issue">
308 Should this apply to region overflow only,
309 or also to paginated overflow,
310 or even to pagination across pages?
311 </p>
313 <p>
314 The '':nth-region()'' pseudo-element
315 can also be used to style
316 content inside of a <i>region box</i>.
317 Unlike the ''::first-line'' and ''::first-letter'' pseudo-elements,
318 the '':nth-region()'' pseudo-element can be applied
319 to parts of the selector other than the subject:
320 in particular, it can match ancestors of the subject.
321 However, the only CSS properties applied
322 by rules with such selectors
323 are those that apply
324 to the ''::first-letter'' pseudo-element.
325 </p>
327 <p>
328 To be more precise,
329 when a rule's selector has ''::nth-region()'' pseudo-elements
330 attached to parts of the selector other than the subject,
331 the declarations in that rule apply to
332 a fragment (or pseudo-element thereof) when:
333 </p>
334 <ol>
335 <li>
336 the declarations are for properties that apply to the
337 ''::first-letter'' pseudo-element,
338 </li>
339 <li>
340 the declarations would apply to
341 that fragment (or pseudo-element thereof)
342 had those ''::nth-region()'' pseudo-elements been removed,
343 with a particular association between
344 each sequence of simple selectors and the element it matched,
345 and
346 </li>
347 <li>
348 for each removed ''::nth-region()'' pseudo-element,
349 the fragment lives within a <i>region box</i>
350 of the element associated in that association
351 with the selector that the pseudo-element was attached to,
352 and whose index matches the pseudo-element.
353 </li>
354 </ol>
356 <h3 id="max-lines">The 'max-lines' property</h3>
358 <p>
359 Authors may wish to style the opening lines of an element
360 with different styles
361 by putting those opening lines in a separate region.
362 However, since it may be difficult to predict the exact height
363 occupied by those lines
364 in order to restrict the first region to that height,
365 this specification introduces a 'max-lines' property
366 that forces a region to break
367 after a specified number of lines.
368 This forces a break after the given number of lines
369 contained within the element or its descendants,
370 as long as those lines are in the same block formatting context.
371 </p>
373 <table class=propdef>
374 <tr>
375 <th>Name:
376 <td><dfn>max-lines</dfn>
377 <tr>
378 <th><a href="#values">Value</a>:
379 <td>none | <integer>
380 <tr>
381 <th>Initial:
382 <td>none
383 <tr>
384 <th>Applies to:
385 <td>region boxes
386 <tr>
387 <th>Inherited:
388 <td>no
389 <tr>
390 <th>Percentages:
391 <td>N/A
392 <tr>
393 <th>Media:
394 <td>visual
395 <tr>
396 <th>Computed value:
397 <td>specified value
398 <tr>
399 <th>Animatable:
400 <td>as <a href="http://www.w3.org/TR/css3-transitions/#animatable-types">integer</a>
401 <tr>
402 <th>Canonical order:
403 <td><abbr title="follows order of property value definition">per grammar</abbr>
404 </table>
406 <dl>
407 <dt>none
408 <dd>
409 <p>
410 Breaks occur only as specified elsewhere.
411 </p>
412 </dd>
414 <dt><integer>
415 <dd>
416 <p>
417 In addition to any breaks specified elsewhere,
418 a break is forced before any line that would exceed
419 the given number of lines
420 being placed inside the element
421 (excluding lines that are in
422 a different block formatting context from
423 the block formatting context to which
424 an unstyled child of the element would belong).
425 </p>
427 <p class="issue">
428 If there are multiple boundaries between this line
429 and the previous, where exactly (in terms of element
430 boundaries) is the break forced?
431 </p>
433 <p>
434 Only positive integers are accepted.
435 Zero or negative integers are a parse error.
436 </p>
437 </dd>
438 </dl>
440 <p class="issue">Should this apply to regions overflow only, or also
441 to pagination?</p>
443 <h2 id="conformance">
444 Conformance</h2>
446 <h3 id="placement">
447 Module interactions</h3>
449 <p>This module extends the 'overflow'
450 feature defined in [[CSS21]] section 11.1.1. It defines additional
451 overflow handling mechanisms that implementations must implement as
452 described in this module in order to conform to this module.</p>
454 <p>No properties in this module apply to the <code>::first-line</code> or
455 <code>::first-letter</code> pseudo-elements.</p>
457 <h3 id="values">
458 Values</h3>
460 <p>This specification follows the
461 <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
462 definition conventions</a> from [[!CSS21]]. Value types not defined in
463 this specification are defined in CSS Level 2 Revision 1 [[!CSS21]].
464 Other CSS modules may expand the definitions of these value types: for
465 example [[CSS3COLOR]], when combined with this module, expands the
466 definition of the <color> value type as used in this specification.</p>
468 <p>In addition to the property-specific values listed in their definitions,
469 all properties defined in this specification also accept the
470 <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
471 keyword as their property value. For readability it has not been repeated
472 explicitly.
475 <h3 id="conventions">
476 Document conventions</h3>
478 <p>Conformance requirements are expressed with a combination of
479 descriptive assertions and RFC 2119 terminology. The key words “MUST”,
480 “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
481 “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
482 document are to be interpreted as described in RFC 2119.
483 However, for readability, these words do not appear in all uppercase
484 letters in this specification.
486 <p>All of the text of this specification is normative except sections
487 explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p>
489 <p>Examples in this specification are introduced with the words “for example”
490 or are set apart from the normative text with <code>class="example"</code>,
491 like this:
493 <div class="example">
494 <p>This is an example of an informative example.</p>
495 </div>
497 <p>Informative notes begin with the word “Note” and are set apart from the
498 normative text with <code>class="note"</code>, like this:
500 <p class="note">Note, this is an informative note.</p>
502 <h3 id="conformance-classes">
503 Conformance classes</h3>
505 <p>Conformance to CSS Regions Module Level 3 (Option B)
506 is defined for three conformance classes:
507 <dl>
508 <dt><dfn title="style sheet!!as conformance class">style sheet</dfn>
509 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
510 style sheet</a>.
511 <dt><dfn>renderer</dfn></dt>
512 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
513 that interprets the semantics of a style sheet and renders
514 documents that use them.
515 <dt><dfn id="authoring-tool">authoring tool</dfn></dt>
516 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
517 that writes a style sheet.
518 </dl>
520 <p>A style sheet is conformant to CSS Regions Module Level 3 (Option B)
521 if all of its statements that use syntax defined in this module are valid
522 according to the generic CSS grammar and the individual grammars of each
523 feature defined in this module.
525 <p>A renderer is conformant to CSS Regions Module Level 3 (Option B)
526 if, in addition to interpreting the style sheet as defined by the
527 appropriate specifications, it supports all the features defined
528 by CSS Regions Module Level 3 (Option B) by parsing them correctly
529 and rendering the document accordingly. However, the inability of a
530 UA to correctly render a document due to limitations of the device
531 does not make the UA non-conformant. (For example, a UA is not
532 required to render color on a monochrome monitor.)
534 <p>An authoring tool is conformant to CSS Regions Module Level 3 (Option B)
535 if it writes style sheets that are syntactically correct according to the
536 generic CSS grammar and the individual grammars of each feature in
537 this module, and meet all other conformance requirements of style sheets
538 as described in this module.
540 <h3 id="partial">
541 Partial implementations</h3>
543 <p>So that authors can exploit the forward-compatible parsing rules to
544 assign fallback values, CSS renderers <strong>must</strong>
545 treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
546 as appropriate</a>) any at-rules, properties, property values, keywords,
547 and other syntactic constructs for which they have no usable level of
548 support. In particular, user agents <strong>must not</strong> selectively
549 ignore unsupported component values and honor supported values in a single
550 multi-value property declaration: if any value is considered invalid
551 (as unsupported values must be), CSS requires that the entire declaration
552 be ignored.</p>
554 <h3 id="experimental">
555 Experimental implementations</h3>
557 <p>To avoid clashes with future CSS features, the CSS2.1 specification
558 reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
559 syntax</a> for proprietary and experimental extensions to CSS.
561 <p>Prior to a specification reaching the Candidate Recommendation stage
562 in the W3C process, all implementations of a CSS feature are considered
563 experimental. The CSS Working Group recommends that implementations
564 use a vendor-prefixed syntax for such features, including those in
565 W3C Working Drafts. This avoids incompatibilities with future changes
566 in the draft.
567 </p>
569 <h3 id="testing">
570 Non-experimental implementations</h3>
572 <p>Once a specification reaches the Candidate Recommendation stage,
573 non-experimental implementations are possible, and implementors should
574 release an unprefixed implementation of any CR-level feature they
575 can demonstrate to be correctly implemented according to spec.
577 <p>To establish and maintain the interoperability of CSS across
578 implementations, the CSS Working Group requests that non-experimental
579 CSS renderers submit an implementation report (and, if necessary, the
580 testcases used for that implementation report) to the W3C before
581 releasing an unprefixed implementation of any CSS features. Testcases
582 submitted to W3C are subject to review and correction by the CSS
583 Working Group.
585 <p>Further information on submitting testcases and implementation reports
586 can be found from on the CSS Working Group's website at
587 <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
588 Questions should be directed to the
589 <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
590 mailing list.
592 <h3 id="cr-exit-criteria">
593 CR exit criteria</h3>
595 <p class=issue>[Change or remove the following CR exit criteria if
596 the spec is not a module, but, e.g., a Note or a profile. This text was <a
597 href="http://www.w3.org/Style/CSS/Tracker/actions/44"> decided on 2008-06-04.</a>]</p>
599 <p>
600 For this specification to be advanced to Proposed Recommendation,
601 there must be at least two independent, interoperable implementations
602 of each feature. Each feature may be implemented by a different set of
603 products, there is no requirement that all features be implemented by
604 a single product. For the purposes of this criterion, we define the
605 following terms:
607 <dl>
608 <dt>independent <dd>each implementation must be developed by a
609 different party and cannot share, reuse, or derive from code
610 used by another qualifying implementation. Sections of code that
611 have no bearing on the implementation of this specification are
612 exempt from this requirement.
614 <dt>interoperable <dd>passing the respective test case(s) in the
615 official CSS test suite, or, if the implementation is not a Web
616 browser, an equivalent test. Every relevant test in the test
617 suite should have an equivalent test created if such a user
618 agent (UA) is to be used to claim interoperability. In addition
619 if such a UA is to be used to claim interoperability, then there
620 must one or more additional UAs which can also pass those
621 equivalent tests in the same way for the purpose of
622 interoperability. The equivalent tests must be made publicly
623 available for the purposes of peer review.
625 <dt>implementation <dd>a user agent which:
627 <ol class=inline>
628 <li>implements the specification.
630 <li>is available to the general public. The implementation may
631 be a shipping product or other publicly available version
632 (i.e., beta version, preview release, or “nightly build”).
633 Non-shipping product releases must have implemented the
634 feature(s) for a period of at least one month in order to
635 demonstrate stability.
637 <li>is not experimental (i.e., a version specifically designed
638 to pass the test suite and is not intended for normal usage
639 going forward).
640 </ol>
641 </dl>
643 <p>The specification will remain Candidate Recommendation for at least
644 six months.
646 <h2 class=no-num id="acknowledgments">
647 Acknowledgments</h2>
649 <p>
650 Thanks especially to the feedback from
651 Håkon Wium Lie,
652 Florian Rivoal,
653 Alan Stearns,
654 and all the rest of the
655 <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.
656 </p>
658 <h2 class=no-num id="references">
659 References</h2>
661 <h3 class="no-num" id="normative-references">
662 Normative references</h3>
663 <!--normative-->
665 <h3 class="no-num" id="other-references">
666 Other references</h3>
667 <!--informative-->
669 <h2 class="no-num" id="index">
670 Index</h2>
671 <!--index-->
673 <h2 class="no-num" id="property-index">
674 Property index</h2>
675 <!-- properties -->
677 </body>
678 </html>
679 <!-- Keep this comment at the end of the file
680 Local variables:
681 mode: sgml
682 sgml-declaration:"~/SGML/HTML4.decl"
683 sgml-default-doctype-name:"html"
684 sgml-minimize-attributes:t
685 sgml-nofill-elements:("pre" "style" "br")
686 sgml-live-element-indicator:t
687 sgml-omittag:nil
688 sgml-shorttag:nil
689 sgml-namecase-general:t
690 sgml-general-insert-case:lower
691 sgml-always-quote-attributes:t
692 sgml-indent-step:nil
693 sgml-indent-data:t
694 sgml-parent-document:nil
695 sgml-exposed-tags:nil
696 sgml-local-catalogs:nil
697 sgml-local-ecat-files:nil
698 End:
699 -->
