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