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