css3-overflow/Overview.src.html

Mon, 25 Mar 2013 15:00:44 -0700

author
L. David Baron <dbaron@dbaron.org>
date
Mon, 25 Mar 2013 15:00:44 -0700
changeset 7809
2a3ae65ab0c8
parent 7461
63b605c570e4
child 7811
85802187d27b
permissions
-rw-r--r--

[css3-overflow] Add test suite field to header.

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

mercurial