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