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