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