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