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