css3-overflow/Overview.src.html

Mon, 25 Mar 2013 16:15:28 -0700

author
L. David Baron <dbaron@dbaron.org>
date
Mon, 25 Mar 2013 16:15:28 -0700
changeset 7812
d7ddd11519d1
parent 7811
85802187d27b
child 7813
2945b61850d0
permissions
-rw-r--r--

[css3-overflow] Overflow also needs to apply to flex containers (as it does in css3-flexbox).

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

mercurial