css-overflow/Overview.src.html@b37f9017599f
css-overflow/Overview.src.html
Fri, 29 Mar 2013 14:38:58 -0700
- author
- L. David Baron <dbaron@dbaron.org>
- date
- Fri, 29 Mar 2013 14:38:58 -0700
- changeset 7863
- b37f9017599f
- parent 7856
- 589545d6b465
- child 7916
- 8eafed64a4f8
- permissions
- -rw-r--r--
Fix changelog links in response to spec renaming (and don't use SHORTNAME since SHORTNAME is broken).
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/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>none
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=%5B[css-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 <h2 id="scrolling-overflow">Scrolling and hidden overflow</h2>
430 <p class="issue">
431 Move material from [[CSS21]] and [[CSS3BOX]] here.
432 </p>
434 <h2 id="paginated-overflow">Paginated overflow</h2>
436 <p class="issue">overflow:paginate or overflow:pages (or paged-x, paged-y, paged-x-controls, paged-y-controls as [[CSS3GCPM]] has?)</p>
438 <p class="issue">Ability to display N pages at once
439 rather than just one page at once?</p>
441 <p class="issue">
442 The current implementation of paginated overflow uses
443 the 'overflow'/'overflow-x'/'overflow-y' properties
444 rather than the 'overflow-style' property as proposed
445 in the [[CSS3GCPM]] draft
446 (which also matches the [[CSS3-MARQUEE]] proposal).
447 We should probably switch away from 'overflow-style',
448 but that's not 100% clear.
449 </p>
451 <h2 id="fragment-overflow">Fragment overflow</h2>
453 <p>
454 This section introduces and defines the meaning of
455 the new ''fragments'' value of the 'overflow' property.
456 </p>
458 <p>
459 When the computed value of 'overflow' for an element is ''fragments'',
460 and implementations would otherwise have created a box for the element,
461 then implementations must create a sequence of <dfn>fragment box</dfn>es
462 for that element.
463 (It is possible for an element with ''overflow: fragments''
464 to generate only one <i>fragment box</i>.
465 However, if an element's computed 'overflow' is not ''fragments'',
466 then its box is not a <i>fragment box</i>.)
467 Every <i>fragment box</i> is a fragmentation container,
468 and any overflow
469 that would cause that fragmentation container to fragment
470 causes another <i>fragment box</i> created as a next sibling
471 of the previous one.
472 <span class="issue">Or is it as though it's a next sibling of
473 the element? Need to figure out exactly how this interacts with
474 other box-level fixup.</span>
475 Additionally, if the <i>fragment box</i> is also
476 a multi-column box (as defined in [[!CSS3COL]]
477 <span class="issue">though it defines <i>multi-column element</i></span>)
478 any content that would lead to the creation of <i>overflow columns</i> [[!CSS3COL]]
479 instead is flown into an additional fragment box.
480 However, fragment boxes may themselves be broken
481 (due to fragmentation in a fragmentation context outside of them,
482 such as pages, columns, or other fragment boxes);
483 such breaking leads to fragments of the same fragment box
484 rather than multiple fragment boxes.
485 (This matters because fragment boxes may be styled by their index;
486 such breaking leads to multiple fragments of a fragment box
487 with a single index.
488 This design choice is so that
489 breaking a fragment box across pages does not break
490 the association of indices to particular pieces of content.)
491 <span class="issue">Should a forced break that breaks to
492 an outer fragmentation context cause a new fragment of a single
493 fragment box or a new fragment box?</span>
494 <span class="issue">Should we find a term other than
495 <i>fragment box</i> here to make this a little less confusing?</span>
496 </p>
498 <p class="issue">
499 What if we want to be able to style the pieces of an element
500 split within another type of fragmentation context?
501 These rules prevent ever using ''::nth-fragment()'' for that,
502 despite that the name seems the most logical name for such a feature.
503 </p>
505 <div class="example">
506 <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML>
507 <title>Breaking content into
508 equal-sized cards</title>
509 <style>
510 .in-cards {
511 overflow: fragments;
513 width: 13em;
514 height: 8em;
516 padding: 4px;
517 border: medium solid blue;
518 margin: 6px;
520 font: medium/1.3 Times New
521 Roman, Times, serif;
522 }
523 </style>
524 <div class="in-cards">
525 In this example, the text in the div
526 is broken into a series of cards.
527 These cards all have the same style.
528 The presence of enough content to
529 overflow one of the cards causes
530 another one to be created. The second
531 card is created just like it's the
532 next sibling of the first.
533 </div></pre></td><td>
534 <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>
535 <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>
536 </td></tr></table>
537 </div>
539 <p class="issue">
540 We should specify that ''overflow: fragments'' does not apply
541 to at least some table parts,
542 and perhaps other elements as well.
543 We need to determine exactly which ones.
544 </p>
546 <p class="issue">
547 This specification needs to say which type of
548 fragmentation context is created
549 so that it's clear which values of the 'break' property
550 cause breaks within this context.
551 We probably want ''break: regions'' to apply.
552 </p>
554 <p class="issue">
555 This specification needs a processing model
556 that will apply in cases where the layout containing the
557 fragments has characteristics that use the intrinsic size of the fragments
558 to change the amount of space available for them,
559 such as [[CSS3-GRID-LAYOUT]].
560 There has already been some work on such a processing model
561 in [[CSS3-REGIONS]],
562 and the work done on a model there,
563 and the editors of that specification,
564 should inform what happens in this specification.
565 </p>
567 <h3 id="fragment-styling">Fragment styling</h3>
569 <h4 id="fragment-pseudo-element">The ::nth-fragment() pseudo-element</h4>
571 <p>
572 The ::nth-fragment() pseudo-element is a pseudo-element
573 that describes some of the <i>fragment box</i>es generated by an element.
574 The argument to the pseudo-element takes the same syntax
575 as the argument to the :nth-child() pseudo-class
576 defined in [[!SELECT]], and has the same meaning
577 except that the number is relative to
578 <i>fragment box</i>es generated by the element
579 instead of siblings of the element.
580 </p>
582 <p class="note">
583 Selectors that allow addressing fragments
584 by counting from the end rather than the start
585 are intentionally not provided.
586 Such selectors would interfere with determining
587 the number of fragments.
588 </p>
590 <p class="issue">
591 Depending on future discussions,
592 this ''::nth-fragment(<var>an+b</var>)'' syntax
593 may be replaced with
594 the new ''::fragment:nth(<var>an+b</var>)'' syntax.
595 </p>
597 <h4 id="style-of-fragments">Styling of fragments</h4>
599 <p class="issue">
600 Should this apply to fragment overflow only,
601 or also to paginated overflow?
602 (If it applies,
603 then stricter property restrictions would be needed
604 for paginated overflow.)
605 </p>
607 <p>
608 In the absence of rules with ''::nth-fragment()'' pseudo-elements,
609 the computed style for each <i>fragment box</i>
610 is the computed style for the element
611 for which the <i>fragment box</i> was created.
612 However, the style for a <i>fragment box</i> is also influenced
613 by rules whose selector's <i>subject</i> [[!SELECT]]
614 has an ''::nth-fragment()'' pseudo-element,
615 if the 1-based number of the <i>fragment box</i> matches
616 that ''::nth-fragment()'' pseudo-element
617 and the selector (excluding the ''::nth-fragment()'' pseudo-element)
618 matches the element generating the fragments.
619 </p>
621 <p>
622 When determining the style of the <i>fragment box</i>,
623 these rules that match the fragment pseudo-element
624 cascade together with the rules that match the element,
625 with the fragment pseudo-element adding the specificity
626 of a pseudo-class to the specificity calculation.
627 <span class="issue">Does this need to be specified in
628 the cascading module as well?</span>
629 </p>
631 <div class="example">
632 <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML>
633 <style>
634 .bouncy-columns {
635 overflow: fragments;
636 width: 6em;
637 height: 10em;
638 float: left;
639 margin: 1em;
640 font: medium/1.25 Times New
641 Roman, Times, serif;
642 }
643 .bouncy-columns::nth-fragment(1) {
644 background: aqua; color: black;
645 transform: rotate(-3deg);
646 }
647 .bouncy-columns::nth-fragment(2) {
648 background: yellow; color: black;
649 transform: rotate(3deg);
650 }
651 </style>
652 <div class="bouncy-columns">
653 <i>...</i>
654 </div></pre></td><td>
655 <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>
656 <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>
657 <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>
658 </td></tr></table>
659 </div>
661 <p>
662 Styling an ''::nth-fragment()'' pseudo-element with the 'overflow'
663 property does take effect;
664 if a <i>fragment box</i> has a
665 computed value of 'overflow' other than ''fragments''
666 then that fragment box is the last fragment.
667 However, overriding ''overflow'' on the first fragment
668 does not cause the <i>fragment box</i> not to exist;
669 whether there are fragment boxes at all is determined by
670 the computed value of overflow for the element.
671 <span class="issue">Need to reword this to refer to the
672 appropriate choice of ''overflow-x'' or ''overflow-y'',
673 and then point to rule about the handling of the other one
674 of ''overflow-x'' or ''overflow-y''.</span>
675 </p>
677 <p>
678 Styling an ''::nth-fragment()'' pseudo-element with the 'content'
679 property has no effect;
680 the computed value of 'content' for the fragment box
681 remains the same as the computed value of content for the element.
682 </p>
684 <p>
685 Specifying ''display: none'' for a <i>fragment box</i> causes
686 the fragment box with that index not to be generated.
687 However, in terms of the indices
688 used for matching ''::nth-fragment()'' pseudo-elements
689 of later fragment boxes,
690 it still counts as though it was generated.
691 However, since it is not generated, it does not contain any content.
692 </p>
694 <p>
695 Specifying other values of 'display', 'position',
696 or 'float' is permitted, but is not allowed to change
697 the computed value of 'display-inside'.
698 (Since 'overflow', 'overflow-x', and 'overflow-y' only
699 apply to block containers, flex containers, and grid containers
700 the computed value of 'display-inside' is always
701 ''block'', ''flex'' or ''grid''.
702 <span class="issue">Need to specify exactly how this works,
703 but it depends on
704 having 'display-inside' and 'display-outside' specified.</span>
705 </p>
707 <p>
708 To match the model for other pseudo-elements
709 where the pseudo-elements live inside their corresponding element,
710 declarations in ''::nth-fragment()'' pseudo-elements override
711 declarations in rules without the pseudo-element.
712 The relative priority within such declarations is determined
713 by normal cascading order (see [[!CSS21]]).
714 </p>
716 <p>
717 Styles specified on ''::nth-fragment()'' pseudo-elements
718 do affect inheritance to content within the <i>fragment box</i>.
719 In other words, the content within the <i>fragment box</i> must
720 inherit from the fragment box's style (i.e., the pseudo-element style)
721 rather than directly from the element.
722 This means that elements split between fragment boxes may
723 have different styles for different parts of the element.
724 </p>
726 <p class="issue">
727 This inheritance rule allows specifying styles indirectly
728 (by using explicit ''inherit'' or using default inheritance
729 on properties that don't apply to '':first-letter'')
730 that can't be specified directly
731 (based on the rules in the next section).
732 This is a problem.
733 The restrictions that apply to styling inside fragments
734 should also apply to inheritance from fragments.
735 </p>
737 <div class="example">
738 <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML>
739 <style>
740 .article {
741 overflow: fragments;
742 }
743 .article::nth-fragment(1) {
744 font-size: 1.5em;
745 margin-bottom: 1em;
746 height: 4em;
747 }
748 .article::nth-fragment(2) {
749 margin-left: 5em;
750 margin-right: 2em;
751 }
752 </style>
753 <div class="article">
754 The <code>font-size</code> property<i>...</i>
755 </div></pre></td><td>
756 <div class="article-font-inherit-demo one">The <code>font-size</code> property<br>specified on the fragment<br>is inherited into the</div>
757 <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>
758 </td></tr></table>
759 </div>
761 <h4 id="style-in-fragments">Styling inside fragments</h4>
763 <p class="issue">
764 Should this apply to fragment overflow only,
765 or also to paginated overflow,
766 or even to pagination across pages?
767 </p>
769 <p>
770 The ''::nth-fragment()'' pseudo-element
771 can also be used to style
772 content inside of a <i>fragment box</i>.
773 Unlike the ''::first-line'' and ''::first-letter'' pseudo-elements,
774 the ''::nth-fragment()'' pseudo-element can be applied
775 to parts of the selector other than the subject:
776 in particular, it can match ancestors of the subject.
777 However, the only CSS properties applied
778 by rules with such selectors
779 are those that apply
780 to the ''::first-letter'' pseudo-element.
781 </p>
783 <p>
784 To be more precise,
785 when a rule's selector has ''::nth-fragment()'' pseudo-elements
786 attached to parts of the selector other than the subject,
787 the declarations in that rule apply to
788 a fragment (or pseudo-element thereof) when:
789 </p>
790 <ol>
791 <li>
792 the declarations are for properties that apply to the
793 ''::first-letter'' pseudo-element,
794 </li>
795 <li>
796 the declarations would apply to
797 that fragment (or pseudo-element thereof)
798 had those ''::nth-fragment()'' pseudo-elements been removed,
799 with a particular association between
800 each sequence of simple selectors and the element it matched,
801 and
802 </li>
803 <li>
804 for each removed ''::nth-fragment()'' pseudo-element,
805 the fragment lives within a <i>fragment box</i>
806 of the element associated in that association
807 with the selector that the pseudo-element was attached to,
808 and whose index matches the pseudo-element.
809 </li>
810 </ol>
812 <div class="example">
813 <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML>
814 <style>
815 .dark-columns {
816 overflow: fragments;
817 width: 6em;
818 height: 10em;
819 float: left;
820 margin-right: 1em;
821 font: medium/1.25 Times New
822 Roman, Times, serif;
823 }
824 .dark-columns::nth-fragment(1) {
825 background: aqua; color: black;
826 }
827 .dark-columns::nth-fragment(1) :link {
828 color: blue;
829 }
830 .dark-columns::nth-fragment(1) :visited {
831 color: purple;
832 }
833 .dark-columns::nth-fragment(2) {
834 background: navy; color: white;
835 }
836 .dark-columns::nth-fragment(2) :link {
837 color: aqua;
838 }
839 .dark-columns::nth-fragment(2) :visited {
840 color: fuchsia;
841 }
842 </style>
843 <div class="dark-columns">
844 <i>...</i>
845 </div></pre></td><td>
846 <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>
847 <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>
848 </td></tr></table>
849 </div>
852 <h3 id="max-lines">The 'max-lines' property</h3>
854 <p>
855 Authors may wish to style the opening lines of an element
856 with different styles
857 by putting those opening lines in a separate fragment.
858 However, since it may be difficult to predict the exact height
859 occupied by those lines
860 in order to restrict the first fragment to that height,
861 this specification introduces a 'max-lines' property
862 that forces a fragment to break
863 after a specified number of lines.
864 This forces a break after the given number of lines
865 contained within the element or its descendants,
866 as long as those lines are in the same block formatting context.
867 </p>
869 <table class=propdef>
870 <tr>
871 <th>Name:
872 <td><dfn>max-lines</dfn>
873 <tr>
874 <th><a href="#values">Value</a>:
875 <td>none | <integer>
876 <tr>
877 <th>Initial:
878 <td>none
879 <tr>
880 <th>Applies to:
881 <td>fragment boxes
882 <tr>
883 <th>Inherited:
884 <td>no
885 <tr>
886 <th>Animatable:
887 <td>as <a href="http://www.w3.org/TR/css3-transitions/#animatable-types">integer</a>
888 <tr>
889 <th>Percentages:
890 <td>N/A
891 <tr>
892 <th>Media:
893 <td>visual
894 <tr>
895 <th>Computed value:
896 <td>specified value
897 <tr>
898 <th>Canonical order:
899 <td><abbr title="follows order of property value definition">per grammar</abbr>
900 </table>
902 <dl>
903 <dt>none
904 <dd>
905 <p>
906 Breaks occur only as specified elsewhere.
907 </p>
908 </dd>
910 <dt><integer>
911 <dd>
912 <p>
913 In addition to any breaks specified elsewhere,
914 a break is forced before any line that would exceed
915 the given number of lines
916 being placed inside the element
917 (excluding lines that are in
918 a different block formatting context from
919 the block formatting context to which
920 an unstyled child of the element would belong).
921 </p>
923 <p class="issue">
924 If there are multiple boundaries between this line
925 and the previous, where exactly (in terms of element
926 boundaries) is the break forced?
927 </p>
929 <p>
930 Only positive integers are accepted.
931 Zero or negative integers are a parse error.
932 </p>
933 </dd>
934 </dl>
936 <p class="issue">Should this apply to fragment overflow only, or also
937 to pagination?</p>
939 <div class="example">
940 <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML>
941 <style>
942 .article {
943 overflow: fragments;
944 }
945 .article::first-letter {
946 font-size: 2em;
947 line-height: 0.9;
948 }
949 .article::nth-fragment(1) {
950 font-size: 1.5em;
951 max-lines: 3;
952 }
953 .article::nth-fragment(2) {
954 column-count: 2;
955 }
956 </style>
957 <div class="article">
958 <i>...</i>
959 </div></pre></td><td>
960 <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>
961 <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>
962 <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>
963 </td></tr></table>
964 </div>
966 <h2 id="static-media">Overflow in static media</h2>
968 <p class="issue">
969 This specification should define useful behavior
970 for all values of 'overflow'
971 in static media (such as print).
972 Current implementation behavior is quite poor and
973 produces unexpected results when authors have not considered
974 what will happen when
975 the content they produce for interactive media
976 is printed.
977 </p>
979 <h2 id="conformance">
980 Conformance</h2>
982 <h3 id="placement">
983 Module interactions</h3>
985 <p>This module extends the 'overflow'
986 feature defined in [[CSS21]] section 11.1.1. It defines additional
987 overflow handling mechanisms that implementations must implement as
988 described in this module in order to conform to this module.</p>
990 <p>No properties in this module apply to the <code>::first-line</code> or
991 <code>::first-letter</code> pseudo-elements.</p>
993 <h3 id="values">
994 Values</h3>
996 <p>This specification follows the
997 <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
998 definition conventions</a> from [[!CSS21]]. Value types not defined in
999 this specification are defined in CSS Level 2 Revision 1 [[!CSS21]].
1000 Other CSS modules may expand the definitions of these value types: for
1001 example [[CSS3COLOR]], when combined with this module, expands the
1002 definition of the <color> value type as used in this specification.</p>
1004 <p>In addition to the property-specific values listed in their definitions,
1005 all properties defined in this specification also accept the
1006 <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
1007 keyword as their property value. For readability it has not been repeated
1008 explicitly.
1011 <h3 id="conventions">
1012 Document conventions</h3>
1014 <p>Conformance requirements are expressed with a combination of
1015 descriptive assertions and RFC 2119 terminology. The key words “MUST”,
1016 “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
1017 “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
1018 document are to be interpreted as described in RFC 2119.
1019 However, for readability, these words do not appear in all uppercase
1020 letters in this specification.
1022 <p>All of the text of this specification is normative except sections
1023 explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p>
1025 <p>Examples in this specification are introduced with the words “for example”
1026 or are set apart from the normative text with <code>class="example"</code>,
1027 like this:
1029 <div class="example">
1030 <p>This is an example of an informative example.</p>
1031 </div>
1033 <p>Informative notes begin with the word “Note” and are set apart from the
1034 normative text with <code>class="note"</code>, like this:
1036 <p class="note">Note, this is an informative note.</p>
1038 <h3 id="conformance-classes">
1039 Conformance classes</h3>
1041 <p>Conformance to CSS Overflow Module Level 3
1042 is defined for three conformance classes:
1043 <dl>
1044 <dt><dfn title="style sheet!!as conformance class">style sheet</dfn>
1045 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
1046 style sheet</a>.
1047 <dt><dfn>renderer</dfn></dt>
1048 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
1049 that interprets the semantics of a style sheet and renders
1050 documents that use them.
1051 <dt><dfn id="authoring-tool">authoring tool</dfn></dt>
1052 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
1053 that writes a style sheet.
1054 </dl>
1056 <p>A style sheet is conformant to CSS Overflow Module Level 3
1057 if all of its statements that use syntax defined in this module are valid
1058 according to the generic CSS grammar and the individual grammars of each
1059 feature defined in this module.
1061 <p>A renderer is conformant to CSS Overflow Module Level 3
1062 if, in addition to interpreting the style sheet as defined by the
1063 appropriate specifications, it supports all the features defined
1064 by CSS Overflow Module Level 3 by parsing them correctly
1065 and rendering the document accordingly. However, the inability of a
1066 UA to correctly render a document due to limitations of the device
1067 does not make the UA non-conformant. (For example, a UA is not
1068 required to render color on a monochrome monitor.)
1070 <p>An authoring tool is conformant to CSS Overflow Module Level 3
1071 if it writes style sheets that are syntactically correct according to the
1072 generic CSS grammar and the individual grammars of each feature in
1073 this module, and meet all other conformance requirements of style sheets
1074 as described in this module.
1076 <h3 id="partial">
1077 Partial implementations</h3>
1079 <p>So that authors can exploit the forward-compatible parsing rules to
1080 assign fallback values, CSS renderers <strong>must</strong>
1081 treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
1082 as appropriate</a>) any at-rules, properties, property values, keywords,
1083 and other syntactic constructs for which they have no usable level of
1084 support. In particular, user agents <strong>must not</strong> selectively
1085 ignore unsupported component values and honor supported values in a single
1086 multi-value property declaration: if any value is considered invalid
1087 (as unsupported values must be), CSS requires that the entire declaration
1088 be ignored.</p>
1090 <h3 id="experimental">
1091 Experimental implementations</h3>
1093 <p>To avoid clashes with future CSS features, the CSS2.1 specification
1094 reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
1095 syntax</a> for proprietary and experimental extensions to CSS.
1097 <p>Prior to a specification reaching the Candidate Recommendation stage
1098 in the W3C process, all implementations of a CSS feature are considered
1099 experimental. The CSS Working Group recommends that implementations
1100 use a vendor-prefixed syntax for such features, including those in
1101 W3C Working Drafts. This avoids incompatibilities with future changes
1102 in the draft.
1103 </p>
1105 <h3 id="testing">
1106 Non-experimental implementations</h3>
1108 <p>Once a specification reaches the Candidate Recommendation stage,
1109 non-experimental implementations are possible, and implementors should
1110 release an unprefixed implementation of any CR-level feature they
1111 can demonstrate to be correctly implemented according to spec.
1113 <p>To establish and maintain the interoperability of CSS across
1114 implementations, the CSS Working Group requests that non-experimental
1115 CSS renderers submit an implementation report (and, if necessary, the
1116 testcases used for that implementation report) to the W3C before
1117 releasing an unprefixed implementation of any CSS features. Testcases
1118 submitted to W3C are subject to review and correction by the CSS
1119 Working Group.
1121 <p>Further information on submitting testcases and implementation reports
1122 can be found from on the CSS Working Group's website at
1123 <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
1124 Questions should be directed to the
1125 <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
1126 mailing list.
1128 <h3 id="cr-exit-criteria">
1129 CR exit criteria</h3>
1131 <p class=issue>[Change or remove the following CR exit criteria if
1132 the spec is not a module, but, e.g., a Note or a profile. This text was <a
1133 href="http://www.w3.org/Style/CSS/Tracker/actions/44"> decided on 2008-06-04.</a>]</p>
1135 <p>
1136 For this specification to be advanced to Proposed Recommendation,
1137 there must be at least two independent, interoperable implementations
1138 of each feature. Each feature may be implemented by a different set of
1139 products, there is no requirement that all features be implemented by
1140 a single product. For the purposes of this criterion, we define the
1141 following terms:
1143 <dl>
1144 <dt>independent <dd>each implementation must be developed by a
1145 different party and cannot share, reuse, or derive from code
1146 used by another qualifying implementation. Sections of code that
1147 have no bearing on the implementation of this specification are
1148 exempt from this requirement.
1150 <dt>interoperable <dd>passing the respective test case(s) in the
1151 official CSS test suite, or, if the implementation is not a Web
1152 browser, an equivalent test. Every relevant test in the test
1153 suite should have an equivalent test created if such a user
1154 agent (UA) is to be used to claim interoperability. In addition
1155 if such a UA is to be used to claim interoperability, then there
1156 must one or more additional UAs which can also pass those
1157 equivalent tests in the same way for the purpose of
1158 interoperability. The equivalent tests must be made publicly
1159 available for the purposes of peer review.
1161 <dt>implementation <dd>a user agent which:
1163 <ol class=inline>
1164 <li>implements the specification.
1166 <li>is available to the general public. The implementation may
1167 be a shipping product or other publicly available version
1168 (i.e., beta version, preview release, or “nightly build”).
1169 Non-shipping product releases must have implemented the
1170 feature(s) for a period of at least one month in order to
1171 demonstrate stability.
1173 <li>is not experimental (i.e., a version specifically designed
1174 to pass the test suite and is not intended for normal usage
1175 going forward).
1176 </ol>
1177 </dl>
1179 <p>The specification will remain Candidate Recommendation for at least
1180 six months.
1182 <h2 class=no-num id="acknowledgments">
1183 Acknowledgments</h2>
1185 <p>
1186 Thanks especially to the feedback from
1187 Rossen Atanassov,
1188 Bert Bos,
1189 Tantek Çelik,
1190 John Daggett,
1191 fantasai,
1192 Daniel Glazman,
1193 Vincent Hardy,
1194 Håkon Wium Lie,
1195 Peter Linss,
1196 Robert O'Callahan,
1197 Florian Rivoal,
1198 Alan Stearns,
1199 Steve Zilles,
1200 and all the rest of the
1201 <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.
1202 </p>
1204 <h2 class=no-num id="references">
1205 References</h2>
1207 <h3 class="no-num" id="normative-references">
1208 Normative references</h3>
1209 <!--normative-->
1211 <h3 class="no-num" id="other-references">
1212 Other references</h3>
1213 <!--informative-->
1215 <h2 class="no-num" id="index">
1216 Index</h2>
1217 <!--index-->
1219 <h2 class="no-num" id="property-index">
1220 Property index</h2>
1221 <!-- properties -->
1223 </body>
1224 </html>
1225 <!-- Keep this comment at the end of the file
1226 Local variables:
1227 mode: sgml
1228 sgml-declaration:"~/SGML/HTML4.decl"
1229 sgml-default-doctype-name:"html"
1230 sgml-minimize-attributes:t
1231 sgml-nofill-elements:("pre" "style" "br")
1232 sgml-live-element-indicator:t
1233 sgml-omittag:nil
1234 sgml-shorttag:nil
1235 sgml-namecase-general:t
1236 sgml-general-insert-case:lower
1237 sgml-always-quote-attributes:t
1238 sgml-indent-step:nil
1239 sgml-indent-data:t
1240 sgml-parent-document:nil
1241 sgml-exposed-tags:nil
1242 sgml-local-catalogs:nil
1243 sgml-local-ecat-files:nil
1244 End:
1245 -->
