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