css-overflow/Overview.src.html

Thu, 18 Apr 2013 16:18:13 +0200

author
L. David Baron <dbaron@dbaron.org>
date
Thu, 18 Apr 2013 16:18:13 +0200
changeset 7967
3a40da90d7d8
parent 7955
786e657320f3
child 8332
31b5970ee580
permissions
-rw-r--r--

[css-overflow] Update previous version link to reflect TR publication.

     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/css-overflow-3/">http://www.w3.org/TR/css-overflow-3/</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/css-overflow/Overview.src.html">change log</a>,
   127     <a href="https://dvcs.w3.org/hg/csswg/log/tip/css3-overflow/Overview.src.html">older change log</a>)
   129   <dt>Previous version:
   130     <dd><a href="http://www.w3.org/TR/2013/WD-css-overflow-3-20130418/">http://www.w3.org/TR/2013/WD-css-overflow-3-20130418/</a>
   132   <dt>Editors:
   133     <dd class="h-card vcard">
   134       <a class="p-name fn u-url url" rel="author"
   135          href="http://dbaron.org/">L. David Baron</a>,
   136       <a class="p-org org" href="http://www.mozilla.org/">Mozilla</a>
   138   <dt>Issue Tracking:</dt>
   139     <dd>Maintained in document (only editor's draft is current)
   141   <dt>Feedback:</dt>
   142     <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-overflow%5D%20feedback"
   143          >www-style@w3.org</a> 
   144          with subject line &ldquo;<kbd>[css-overflow] 
   145          <var>&hellip; message topic &hellip;</var></kbd>&rdquo;
   146          (<a rel="discussion" href="http://lists.w3.org/Archives/Public/www-style/"
   147            >archives</a>)
   149   <dt>Test suite:
   150     <dd>none yet
   151 </dl>
   153 <!--copyright-->
   155 <hr title="Separator for header">
   156 </div>
   158 <h2 class="no-num no-toc" id="abstract">Abstract</h2>
   160 	<p>
   161 		<a href="http://www.w3.org/TR/CSS/">CSS</a> is
   162 		a language for describing
   163 		the rendering of structured documents (such as HTML and XML)
   164 		on screen, on paper, in speech, etc.
   165 		This module contains the features of CSS
   166 		relating to new mechanisms of overflow handling in visual media (e.g., screen or paper).
   167 		In interactive media,
   168 		it describes features that allow the overflow
   169 		from a fixed size container
   170 		to be handled by pagination (displaying one page at a time).
   171 		It also describes features, applying to all visual media,
   172 		that allow the contents of an element
   173 		to be spread across multiple fragments,
   174 		allowing the contents to flow across multiple regions
   175 		or to have different styles for different fragments.
   176 	</p>
   178 <h2 class="no-num no-toc" id="status">Status of this document</h2>
   180 <!--status-->
   182 <p>The following features are at risk: &hellip;
   184 <h2 class="no-num no-toc" id="contents">
   185 Table of contents</h2>
   187 <!--toc-->
   189 <h2 id="intro">
   190 Introduction</h2>
   192 	<p>
   193 		In CSS Level 1 [[CSS1]], placing more content than would fit
   194 		inside an element with a specified size
   195 		was generally an authoring error.
   196 		Doing so caused the content to extend
   197 		outside the bounds of the element,
   198 		which would likely cause
   199 		that content to overlap with other elements.
   200 	</p>
   202 	<p>
   203 		CSS Level 2 [[CSS21]] introduced the 'overflow' property,
   204 		which allows authors to have overflow be handled by scrolling,
   205 		which means it is no longer an authoring error.
   206 		It also allows authors to specify
   207 		that overflow is handled by clipping,
   208 		which makes sense when the author's intent
   209 		is that the content not be shown.
   210 	</p>
   212 	<p>
   213 		However, scrolling is not the only way
   214 		to present large amounts of content,
   215 		and may even not be the optimal way.
   216 		After all, the codex replaced the scroll
   217 		as the common format for large written works
   218 		because of its advantages.
   219 	</p>
   221 	<p>
   222 		This specification introduces
   223 		a mechanism for Web pages to specify
   224 		that an element of a page should handle overflow
   225 		through pagination rather than through scrolling.
   226 	</p>
   228 	<p>
   229 		This specification also extends the concept of overflow
   230 		in another direction.
   231 		Instead of requiring that authors specify a single area
   232 		into which the content of an element must flow,
   233 		this specification allows authors to specify multiple fragments,
   234 		each with their own dimensions and styles,
   235 		so that the content of the element can flow from one to the next,
   236 		using as many as needed to place the content without overflowing.
   237 	</p>
   239 	<p>
   240 		In both of these cases, implementations must
   241 		break the content in the block-progression dimension.
   242 		Implementations must do this is described
   243 		in the CSS Fragmentation Module [[!CSS3-BREAK]].
   244 	</p>
   246 <h2 id="overflow-properties">Overflow properties</h2>
   248 	<p>
   249 		The ''overflow-x'' property specifies
   250 		the handling of overflow in the horizontal direction
   251 		(i.e., overflow from the left and right sides of the box),
   252 		and the ''overflow-y'' property specifies the handling
   253 		of overflow in the vertical direction
   254 		(i.e., overflow from the top and bottom sides of the box) 
   255 	</p>
   257 	<table class=propdef>
   258 		<tr>
   259 			<th>Name:
   260 			<td><dfn>overflow-x</dfn>, <dfn>overflow-y</dfn>
   261 		<tr>
   262 			<th><a href="#values">Value</a>:
   263 			<td>visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments
   264 		<tr>
   265 			<th>Initial:
   266 			<td>visible
   267 		<tr>
   268 			<th>Applies to:
   269 			<td>block containers [[!CSS21]], flex containers [[!CSS3-FLEXBOX]], and grid containers [[!CSS3-GRID-LAYOUT]]
   270 		<tr>
   271 			<th>Inherited:
   272 			<td>no
   273 		<tr>
   274 			<th>Percentages:
   275 			<td>N/A
   276 		<tr>
   277 			<th>Media:
   278 			<td>visual
   279 		<tr>
   280 			<th>Computed&nbsp;value:
   281 			<td>see below
   282 		<tr>
   283 			<th>Animatable:
   284 			<td>no
   285 		<tr>
   286 			<th>Canonical order:
   287 			<td><abbr title="follows order of property value definition">per grammar</abbr>
   288 	</table>
   290 	<p>
   291 		The 'overflow' property is a shorthand property
   292 		that sets the specified values of both 'overflow-x' and 'overflow-y'
   293 		to the value specified for 'overflow'.
   294 	</p>
   296 	<table class=propdef>
   297 		<tr>
   298 			<th>Name:
   299 			<td><dfn>overflow</dfn>
   300 		<tr>
   301 			<th><a href="#values">Value</a>:
   302 			<td>visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments
   303 		<tr>
   304 			<th>Initial:
   305 			<td>see individual properties
   306 		<tr>
   307 			<th>Applies to:
   308 			<td>block containers
   309 		<tr>
   310 			<th>Inherited:
   311 			<td>no
   312 		<tr>
   313 			<th>Percentages:
   314 			<td>N/A
   315 		<tr>
   316 			<th>Media:
   317 			<td>visual
   318 		<tr>
   319 			<th>Computed&nbsp;value:
   320 			<td>see individual properties
   321 		<tr>
   322 			<th>Animatable:
   323 			<td>no
   324 		<tr>
   325 			<th>Canonical order:
   326 			<td><abbr title="follows order of property value definition">per grammar</abbr>
   327 	</table>
   329 	<p>The values of these properties are:</p>
   331 	<dl>
   332 		<dt><dfn>visible</dfn>
   333 		<dd>
   334 			There is no special handling of overflow, that is, it
   335 			may be rendered outside the block container.
   336 		</dd>
   337 		<dt><dfn>hidden</dfn>
   338 		<dt><dfn>scroll</dfn>
   339 		<dt><dfn>auto</dfn>
   340 		<dd>
   341 			These values are collectively the <dfn>scrolling values</dfn>;
   342 			they are defined in the section on
   343 			<a href="#scrolling-overflow">scrolling and hidden overflow</a>.
   344 		</dd>
   345 		<dt><dfn>paged-x</dfn>
   346 		<dt><dfn>paged-y</dfn>
   347 		<dt><dfn>paged-x-controls</dfn>
   348 		<dt><dfn>paged-y-controls</dfn>
   349 		<dt><dfn>fragments</dfn>
   350 		<dd>
   351 			These values are collectively the <dfn>fragmenting values</dfn>;
   352 			they are defined in the sections on
   353 			<a href="#paginated-overflow">paginated overflow</a> and
   354 			<a href="#fragment-overflow">fragment overflow</a>.
   355 		</dd>
   356 	</dl>
   358 	<div id="overflow-computed-values">
   359 		<p>The computed values of 'overflow-x' and 'overflow-y'
   360 		are determined from the cascaded values [[!CSS3CASCADE]]
   361 		based on the following rules:</p>
   363 		<ol>
   364 			<li>
   365 				If one or both of the cascaded values are
   366 				<i>fragmenting values</i>, then:
   367 				<ol>
   368 					<li>
   369 						If one of the cascaded values is one of the
   370 						<i>fragmenting values</i>
   371 						and the other is not,
   372 						then the computed values are
   373 						the same as the cascaded values.
   374 					</li>
   375 					<li>
   376 						If both of the cascaded values are <i>fragmenting values</i>, then:
   377 						<ol>
   378 							<li>
   379 								for horizontal writing mode [[!CSS3-WRITING-MODES]],
   380 								the computed value for ''overflow-y'' is the cascaded value
   381 								and the computed value for ''overflow-x'' is ''hidden'', or
   382 							</li>
   383 							<li>
   384 								for vertical writing mode [[!CSS3-WRITING-MODES]],
   385 								the computed value for ''overflow-x'' is the cascaded value
   386 								and the computed value for ''overflow-y'' is ''hidden''.
   387 							</li>
   388 						</ol>
   389 					</li>
   390 				</ol>
   391 			</li>
   392 			<li>
   393 				Otherwise, if one cascaded values is
   394 				one of the <i>scrolling values</i>
   395 				and the other is ''visible'',
   396 				then computed values are the cascaded values
   397 				with ''visible'' changed to ''hidden''.
   398 			</li>
   399 			<li>
   400 				Otherwise, the computed values are as specified.
   401 			</li>
   402 		</ol>
   403 	</div>
   405 	<p class="issue">
   406 		Are all 4 of the ''paged-*'' values really needed?
   407 	</p>
   409 	<p>
   410 		When the <i>fragmenting values</i> are used,
   411 		the overflow from the fragments themselves
   412 		treats the fragmenting value as ''hidden''.
   413 		<span class="issue">Is this the right behavior?</span>
   414 		<span class="issue">Give example.</span>
   415 	</p>
   417 	<p class="issue">
   418 		[[CSS3-MARQUEE]] describes an 'overflow-style' property,
   419 		but it has not picked up implementation experience
   420 		that the working group is aware of.
   421 		Should this document treat 'overflow-style' as a defunct proposal,
   422 		or should this document describe the 'overflow-style' property
   423 		and attempt to revive it,
   424 		despite that implementations have implemented
   425 		'overflow-x' and 'overflow-y' instead?
   426 	</p>
   428 	<p class="issue">
   429 		There are <a href="http://lists.w3.org/Archives/Public/www-style/2012May/1197.html">discussions</a>
   430 		about how overflow, overflow-style, overflow-x and overflow-y
   431 		should work and interact with each other.
   432 		Until consensus on this topic is reached,
   433 		it is not completely clear which of these
   434 		should be used for
   435 		paged-x | paged-y | paged-x-controls | paged-y-controls | fragments
   436 	</p>
   438 <h2 id="scrolling-overflow">Scrolling and hidden overflow</h2>
   440 	<p class="issue">
   441 		Move material from [[CSS21]] and [[CSS3BOX]] here.
   442 	</p>
   444 <h2 id="paginated-overflow">Paginated overflow</h2>
   446 <p class="issue">overflow:paginate or overflow:pages (or paged-x, paged-y, paged-x-controls, paged-y-controls as [[CSS3GCPM]] has?)</p>
   448 <p class="issue">Ability to display N pages at once
   449 rather than just one page at once?</p>
   451 	<p class="issue">
   452 		The current implementation of paginated overflow uses
   453 		the 'overflow'/'overflow-x'/'overflow-y' properties
   454 		rather than the 'overflow-style' property as proposed
   455 		in the [[CSS3GCPM]] draft
   456 		(which also matches the [[CSS3-MARQUEE]] proposal).
   457 		We should probably switch away from 'overflow-style',
   458 		but that's not 100% clear.
   459 	</p>
   461 <h2 id="fragment-overflow">Fragment overflow</h2>
   463 	<p>
   464 		This section introduces and defines the meaning of
   465 		the new ''fragments'' value of the 'overflow' property.
   466 	</p>
   468 	<p>
   469 		When the computed value of 'overflow' for an element is ''fragments'',
   470 		and implementations would otherwise have created a box for the element,
   471 		then implementations must create a sequence of <dfn>fragment box</dfn>es
   472 		for that element.
   473 		(It is possible for an element with ''overflow: fragments''
   474 		to generate only one <i>fragment box</i>.
   475 		However, if an element's computed 'overflow' is not ''fragments'',
   476 		then its box is not a <i>fragment box</i>.)
   477 		Every <i>fragment box</i> is a fragmentation container,
   478 		and any overflow
   479 		that would cause that fragmentation container to fragment
   480 		causes another <i>fragment box</i> created as a next sibling
   481 		of the previous one.
   482 		<span class="issue">Or is it as though it's a next sibling of
   483 		the element?  Need to figure out exactly how this interacts with
   484 		other box-level fixup.</span>
   485 		Additionally, if the <i>fragment box</i> is also
   486 		a multi-column box (as defined in [[!CSS3COL]]
   487 		<span class="issue">though it defines <i>multi-column element</i></span>)
   488 		any content that would lead to the creation of <i>overflow columns</i> [[!CSS3COL]]
   489 		instead is flown into an additional fragment box.
   490 		However, fragment boxes may themselves be broken
   491 		(due to fragmentation in a fragmentation context outside of them,
   492 		such as pages, columns, or other fragment boxes);
   493 		such breaking leads to fragments of the same fragment box
   494 		rather than multiple fragment boxes.
   495 		(This matters because fragment boxes may be styled by their index;
   496 		such breaking leads to multiple fragments of a fragment box
   497 		with a single index.
   498 		This design choice is so that
   499 		breaking a fragment box across pages does not break
   500 		the association of indices to particular pieces of content.)
   501 		<span class="issue">Should a forced break that breaks to
   502 		an outer fragmentation context cause a new fragment of a single
   503 		fragment box or a new fragment box?</span>
   504 		<span class="issue">Should we find a term other than
   505 		<i>fragment box</i> here to make this a little less confusing?</span>
   506 	</p>
   508 	<p class="issue">
   509 		What if we want to be able to style the pieces of an element
   510 		split within another type of fragmentation context?
   511 		These rules prevent ever using ''::nth-fragment()'' for that,
   512 		despite that the name seems the most logical name for such a feature.
   513 	</p>
   515 	<div class="example">
   516 		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
   517 &lt;title&gt;Breaking content into
   518   equal-sized cards&lt;/title&gt;
   519 &lt;style&gt;
   520   .in-cards {
   521     overflow: fragments;
   523     width: 13em;
   524     height: 8em;
   526     padding: 4px;
   527     border: medium solid blue;
   528     margin: 6px;
   530     font: medium/1.3 Times New
   531       Roman, Times, serif;
   532   }
   533 &lt;/style&gt;
   534 &lt;div class="in-cards"&gt;
   535   In this example, the text in the div
   536   is broken into a series of cards.
   537   These cards all have the same style.
   538   The presence of enough content to
   539   overflow one of the cards causes
   540   another one to be created.  The second
   541   card is created just like it's the
   542   next sibling of the first.
   543 &lt;/div&gt;</pre></td><td>
   544 			<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>
   545 			<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>
   546 		</td></tr></table>
   547 	</div>
   549 	<p class="issue">
   550 		We should specify that ''overflow: fragments'' does not apply
   551 		to at least some table parts,
   552 		and perhaps other elements as well.
   553 		We need to determine exactly which ones.
   554 	</p>
   556 	<p class="issue">
   557 		This specification needs to say which type of
   558 		fragmentation context is created
   559 		so that it's clear which values of the 'break' property
   560 		cause breaks within this context.
   561 		We probably want ''break: regions'' to apply.
   562 	</p>
   564 	<p class="issue">
   565 		This specification needs a processing model
   566 		that will apply in cases where the layout containing the
   567 		fragments has characteristics that use the intrinsic size of the fragments
   568 		to change the amount of space available for them,
   569 		such as [[CSS3-GRID-LAYOUT]].
   570 		There has already been some work on such a processing model
   571 		in [[CSS3-REGIONS]],
   572 		and the work done on a model there,
   573 		and the editors of that specification,
   574 		should inform what happens in this specification.
   575 	</p>
   577 <h3 id="fragment-styling">Fragment styling</h3>
   579 <h4 id="fragment-pseudo-element">The ::nth-fragment() pseudo-element</h4>
   581 	<p>
   582 		The ::nth-fragment() pseudo-element is a pseudo-element
   583 		that describes some of the <i>fragment box</i>es generated by an element.
   584 		The argument to the pseudo-element takes the same syntax
   585 		as the argument to the :nth-child() pseudo-class
   586 		defined in [[!SELECT]], and has the same meaning
   587 		except that the number is relative to
   588 		<i>fragment box</i>es generated by the element
   589 		instead of siblings of the element.
   590 	</p>
   592 	<p class="note">
   593 		Selectors that allow addressing fragments
   594 		by counting from the end rather than the start
   595 		are intentionally not provided.
   596 		Such selectors would interfere with determining
   597 		the number of fragments.
   598 	</p>
   600 	<p class="issue">
   601 		Depending on future discussions,
   602 		this ''::nth-fragment(<var>an+b</var>)'' syntax
   603 		may be replaced with
   604 		the new ''::fragment:nth(<var>an+b</var>)'' syntax.
   605 	</p>
   607 <h4 id="style-of-fragments">Styling of fragments</h4>
   609 	<p class="issue">
   610 		Should this apply to fragment overflow only,
   611 		or also to paginated overflow?
   612 		(If it applies,
   613 		then stricter property restrictions would be needed
   614 		for paginated overflow.)
   615 	</p>
   617 	<p>
   618 		In the absence of rules with ''::nth-fragment()'' pseudo-elements,
   619 		the computed style for each <i>fragment box</i>
   620 		is the computed style for the element
   621 		for which the <i>fragment box</i> was created.
   622 		However, the style for a <i>fragment box</i> is also influenced
   623 		by rules whose selector's <i>subject</i> [[!SELECT]]
   624 		has an ''::nth-fragment()'' pseudo-element,
   625 		if the 1-based number of the <i>fragment box</i> matches
   626 		that ''::nth-fragment()'' pseudo-element
   627 		and the selector (excluding the ''::nth-fragment()'' pseudo-element)
   628 		matches the element generating the fragments.
   629 	</p>
   631 	<p>
   632 		When determining the style of the <i>fragment box</i>,
   633 		these rules that match the fragment pseudo-element
   634 		cascade together with the rules that match the element,
   635 		with the fragment pseudo-element adding the specificity
   636 		of a pseudo-class to the specificity calculation.
   637 		<span class="issue">Does this need to be specified in
   638 		the cascading module as well?</span>
   639 	</p>
   641 	<div class="example">
   642 		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
   643 &lt;style&gt;
   644   .bouncy-columns {
   645     overflow: fragments;
   646     width: 6em;
   647     height: 10em;
   648     float: left;
   649     margin: 1em;
   650     font: medium/1.25 Times New
   651       Roman, Times, serif;
   652   }
   653   .bouncy-columns::nth-fragment(1) {
   654     background: aqua; color: black;
   655     transform: rotate(-3deg);
   656   }
   657   .bouncy-columns::nth-fragment(2) {
   658     background: yellow; color: black;
   659     transform: rotate(3deg);
   660   }
   661 &lt;/style&gt;
   662 &lt;div class="bouncy-columns"&gt;
   663   <i>...</i>
   664 &lt;/div&gt;</pre></td><td>
   665 			<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>
   666 			<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>
   667 			<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>
   668 		</td></tr></table>
   669 	</div>
   671 	<p>
   672 		Styling an ''::nth-fragment()'' pseudo-element with the 'overflow'
   673 		property does take effect;
   674 		if a <i>fragment box</i> has a
   675 		computed value of 'overflow' other than ''fragments''
   676 		then that fragment box is the last fragment.
   677 		However, overriding ''overflow'' on the first fragment
   678 		does not cause the <i>fragment box</i> not to exist;
   679 		whether there are fragment boxes at all is determined by
   680 		the computed value of overflow for the element.
   681 		<span class="issue">Need to reword this to refer to the
   682 		appropriate choice of ''overflow-x'' or ''overflow-y'',
   683 		and then point to rule about the handling of the other one
   684 		of ''overflow-x'' or ''overflow-y''.</span>
   685 	</p>
   687 	<p>
   688 		Styling an ''::nth-fragment()'' pseudo-element with the 'content'
   689 		property has no effect;
   690 		the computed value of 'content' for the fragment box
   691 		remains the same as the computed value of content for the element.
   692 	</p>
   694 	<p>
   695 		Specifying ''display: none'' for a <i>fragment box</i> causes
   696 		the fragment box with that index not to be generated.
   697 		However, in terms of the indices
   698 		used for matching ''::nth-fragment()'' pseudo-elements
   699 		of later fragment boxes,
   700 		it still counts as though it was generated.
   701 		However, since it is not generated, it does not contain any content.
   702 	</p>
   704 	<p>
   705 		Specifying other values of 'display', 'position',
   706 		or 'float' is permitted, but is not allowed to change
   707 		the computed value of 'display-inside'.
   708 		(Since 'overflow', 'overflow-x', and 'overflow-y' only
   709 		apply to block containers, flex containers, and grid containers
   710 		the computed value of 'display-inside' is always
   711 		''block'', ''flex'' or ''grid''.
   712 		<span class="issue">Need to specify exactly how this works,
   713 		but it depends on
   714 		having 'display-inside' and 'display-outside' specified.</span>
   715 	</p>
   717 	<p>
   718 		To match the model for other pseudo-elements
   719 		where the pseudo-elements live inside their corresponding element,
   720 		declarations in ''::nth-fragment()'' pseudo-elements override
   721 		declarations in rules without the pseudo-element.
   722 		The relative priority within such declarations is determined
   723 		by normal cascading order (see [[!CSS21]]).
   724 	</p>
   726 	<p>
   727 		Styles specified on ''::nth-fragment()'' pseudo-elements
   728 		do affect inheritance to content within the <i>fragment box</i>.
   729 		In other words, the content within the <i>fragment box</i> must
   730 		inherit from the fragment box's style (i.e., the pseudo-element style)
   731 		rather than directly from the element.
   732 		This means that elements split between fragment boxes may
   733 		have different styles for different parts of the element.
   734 	</p>
   736 	<p class="issue">
   737 		This inheritance rule allows specifying styles indirectly
   738 		(by using explicit ''inherit'' or using default inheritance
   739 		on properties that don't apply to '':first-letter'')
   740 		that can't be specified directly
   741 		(based on the rules in the next section).
   742 		This is a problem.
   743 		The restrictions that apply to styling inside fragments
   744 		should also apply to inheritance from fragments.
   745 	</p>
   747 	<div class="example">
   748 		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
   749 &lt;style&gt;
   750   .article {
   751     overflow: fragments;
   752   }
   753   .article::nth-fragment(1) {
   754     font-size: 1.5em;
   755     margin-bottom: 1em;
   756     height: 4em;
   757   }
   758   .article::nth-fragment(2) {
   759     margin-left: 5em;
   760     margin-right: 2em;
   761   }
   762 &lt;/style&gt;
   763 &lt;div class="article"&gt;
   764   The &lt;code&gt;font-size&lt;/code&gt; property<i>...</i>
   765 &lt;/div&gt;</pre></td><td>
   766 			<div class="article-font-inherit-demo one">The <code>font-size</code> property<br>specified on the fragment<br>is inherited into the</div>
   767 			<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>
   768 		</td></tr></table>
   769 	</div>
   771 <h4 id="style-in-fragments">Styling inside fragments</h4>
   773 	<p class="issue">
   774 		Should this apply to fragment overflow only,
   775 		or also to paginated overflow,
   776 		or even to pagination across pages?
   777 	</p>
   779 	<p>
   780 		The ''::nth-fragment()'' pseudo-element
   781 		can also be used to style
   782 		content inside of a <i>fragment box</i>.
   783 		Unlike the ''::first-line'' and ''::first-letter'' pseudo-elements,
   784 		the ''::nth-fragment()'' pseudo-element can be applied
   785 		to parts of the selector other than the subject:
   786 		in particular, it can match ancestors of the subject.
   787 		However, the only CSS properties applied
   788 		by rules with such selectors
   789 		are those that apply
   790 		to the ''::first-letter'' pseudo-element.
   791 	</p>
   793 	<p>
   794 		To be more precise,
   795 		when a rule's selector has ''::nth-fragment()'' pseudo-elements
   796 		attached to parts of the selector other than the subject,
   797 		the declarations in that rule apply to
   798 		a fragment (or pseudo-element thereof) when:
   799 	</p>
   800 	<ol>
   801 		<li>
   802 			the declarations are for properties that apply to the
   803 			''::first-letter'' pseudo-element,
   804 		</li>
   805 		<li>
   806 			the declarations would apply to
   807 			that fragment (or pseudo-element thereof)
   808 			had those ''::nth-fragment()'' pseudo-elements been removed,
   809 			with a particular association between
   810 			each sequence of simple selectors and the element it matched,
   811 			and
   812 		</li>
   813 		<li>
   814 			for each removed ''::nth-fragment()'' pseudo-element,
   815 			the fragment lives within a <i>fragment box</i>
   816 			of the element associated in that association
   817 			with the selector that the pseudo-element was attached to,
   818 			and whose index matches the pseudo-element.
   819 		</li>
   820 	</ol>
   822 	<div class="example">
   823 		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
   824 &lt;style&gt;
   825   .dark-columns {
   826     overflow: fragments;
   827     width: 6em;
   828     height: 10em;
   829     float: left;
   830     margin-right: 1em;
   831     font: medium/1.25 Times New
   832       Roman, Times, serif;
   833   }
   834   .dark-columns::nth-fragment(1) {
   835     background: aqua; color: black;
   836   }
   837   .dark-columns::nth-fragment(1) :link {
   838     color: blue;
   839   }
   840   .dark-columns::nth-fragment(1) :visited {
   841     color: purple;
   842   }
   843   .dark-columns::nth-fragment(2) {
   844     background: navy; color: white;
   845   }
   846   .dark-columns::nth-fragment(2) :link {
   847     color: aqua;
   848   }
   849   .dark-columns::nth-fragment(2) :visited {
   850     color: fuchsia;
   851   }
   852 &lt;/style&gt;
   853 &lt;div class="dark-columns"&gt;
   854   <i>...</i>
   855 &lt;/div&gt;</pre></td><td>
   856 			<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>
   857 			<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>
   858 		</td></tr></table>
   859 	</div>
   862 <h3 id="max-lines">The 'max-lines' property</h3>
   864 	<p>
   865 		Authors may wish to style the opening lines of an element
   866 		with different styles
   867 		by putting those opening lines in a separate fragment.
   868 		However, since it may be difficult to predict the exact height
   869 		occupied by those lines
   870 		in order to restrict the first fragment to that height,
   871 		this specification introduces a 'max-lines' property
   872 		that forces a fragment to break
   873 		after a specified number of lines.
   874 		This forces a break after the given number of lines
   875 		contained within the element or its descendants,
   876 		as long as those lines are in the same block formatting context.
   877 	</p>
   879 	<table class=propdef>
   880 		<tr>
   881 			<th>Name:
   882 			<td><dfn>max-lines</dfn>
   883 		<tr>
   884 			<th><a href="#values">Value</a>:
   885 			<td>none | &lt;integer&gt;
   886 		<tr>
   887 			<th>Initial:
   888 			<td>none
   889 		<tr>
   890 			<th>Applies to:
   891 			<td>fragment boxes
   892 		<tr>
   893 			<th>Inherited:
   894 			<td>no
   895 		<tr>
   896 			<th>Animatable:
   897 			<td>as <a href="http://www.w3.org/TR/css3-transitions/#animatable-types">integer</a>
   898 		<tr>
   899 			<th>Percentages:
   900 			<td>N/A
   901 		<tr>
   902 			<th>Media:
   903 			<td>visual
   904 		<tr>
   905 			<th>Computed&nbsp;value:
   906 			<td>specified value
   907 		<tr>
   908 			<th>Canonical order:
   909 			<td><abbr title="follows order of property value definition">per grammar</abbr>
   910 	</table>
   912 	<dl>
   913 		<dt>none
   914 		<dd>
   915 			<p>
   916 				Breaks occur only as specified elsewhere.
   917 			</p>
   918 		</dd>
   920 		<dt>&lt;integer&gt;
   921 		<dd>
   922 			<p>
   923 				In addition to any breaks specified elsewhere,
   924 				a break is forced before any line that would exceed
   925 				the given number of lines
   926 				being placed inside the element
   927 				(excluding lines that are in
   928 				a different block formatting context from
   929 				the block formatting context to which
   930 				an unstyled child of the element would belong).
   931 			</p>
   933 			<p class="issue">
   934 				If there are multiple boundaries between this line
   935 				and the previous, where exactly (in terms of element
   936 				boundaries) is the break forced?
   937 			</p>
   939 			<p>
   940 				Only positive integers are accepted.
   941 				Zero or negative integers are a parse error.
   942 			</p>
   943 		</dd>
   944 	</dl>
   946 <p class="issue">Should this apply to fragment overflow only, or also
   947 to pagination?</p>
   949 	<div class="example">
   950 		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
   951 &lt;style&gt;
   952   .article {
   953     overflow: fragments;
   954   }
   955   .article::first-letter {
   956     font-size: 2em;
   957     line-height: 0.9;
   958   }
   959   .article::nth-fragment(1) {
   960     font-size: 1.5em;
   961     max-lines: 3;
   962   }
   963   .article::nth-fragment(2) {
   964     column-count: 2;
   965   }
   966 &lt;/style&gt;
   967 &lt;div class="article"&gt;
   968   <i>...</i>
   969 &lt;/div&gt;</pre></td><td>
   970 			<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>
   971 			<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>
   972 			<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>
   973 		</td></tr></table>
   974 	</div>
   976 <h2 id="static-media">Overflow in static media</h2>
   978 	<p class="issue">
   979 		This specification should define useful behavior
   980 		for all values of 'overflow'
   981 		in static media (such as print).
   982 		Current implementation behavior is quite poor and
   983 		produces unexpected results when authors have not considered
   984 		what will happen when
   985 		the content they produce for interactive media
   986 		is printed.
   987 	</p>
   989 <h2 id="conformance">
   990 Conformance</h2>
   992 <h3 id="placement">
   993 Module interactions</h3>
   995   <p>This module extends the 'overflow'
   996   feature defined in [[CSS21]] section 11.1.1.  It defines additional
   997   overflow handling mechanisms that implementations must implement as
   998   described in this module in order to conform to this module.</p>
  1000   <p>No properties in this module apply to the <code>::first-line</code> or
  1001   <code>::first-letter</code> pseudo-elements.</p>
  1003 <h3 id="values">
  1004 Values</h3>
  1006   <p>This specification follows the
  1007   <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
  1008   definition conventions</a> from [[!CSS21]]. Value types not defined in
  1009   this specification are defined in CSS Level 2 Revision 1 [[!CSS21]].
  1010   Other CSS modules may expand the definitions of these value types: for
  1011   example [[CSS3COLOR]], when combined with this module, expands the
  1012   definition of the &lt;color&gt; value type as used in this specification.</p>
  1014   <p>In addition to the property-specific values listed in their definitions,
  1015   all properties defined in this specification also accept the
  1016   <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
  1017   keyword as their property value. For readability it has not been repeated
  1018   explicitly.
  1021 <h3 id="conventions">
  1022 Document conventions</h3>
  1024   <p>Conformance requirements are expressed with a combination of
  1025   descriptive assertions and RFC 2119 terminology. The key words “MUST”,
  1026   “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
  1027   “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
  1028   document are to be interpreted as described in RFC 2119.
  1029   However, for readability, these words do not appear in all uppercase
  1030   letters in this specification.
  1032   <p>All of the text of this specification is normative except sections
  1033   explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p>
  1035   <p>Examples in this specification are introduced with the words “for example”
  1036   or are set apart from the normative text with <code>class="example"</code>,
  1037   like this:
  1039   <div class="example">
  1040     <p>This is an example of an informative example.</p>
  1041   </div>
  1043   <p>Informative notes begin with the word “Note” and are set apart from the
  1044   normative text with <code>class="note"</code>, like this:
  1046   <p class="note">Note, this is an informative note.</p>
  1048 <h3 id="conformance-classes">
  1049 Conformance classes</h3>
  1051   <p>Conformance to CSS Overflow Module Level 3
  1052   is defined for three conformance classes:
  1053   <dl>
  1054     <dt><dfn title="style sheet!!as conformance class">style sheet</dfn>
  1055       <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
  1056       style sheet</a>.
  1057     <dt><dfn>renderer</dfn></dt>
  1058       <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
  1059       that interprets the semantics of a style sheet and renders
  1060       documents that use them.
  1061     <dt><dfn id="authoring-tool">authoring tool</dfn></dt>
  1062       <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
  1063       that writes a style sheet.
  1064   </dl>
  1066   <p>A style sheet is conformant to CSS Overflow Module Level 3
  1067   if all of its statements that use syntax defined in this module are valid
  1068   according to the generic CSS grammar and the individual grammars of each
  1069   feature defined in this module.
  1071   <p>A renderer is conformant to CSS Overflow Module Level 3
  1072   if, in addition to interpreting the style sheet as defined by the
  1073   appropriate specifications, it supports all the features defined
  1074   by CSS Overflow Module Level 3 by parsing them correctly
  1075   and rendering the document accordingly. However, the inability of a
  1076   UA to correctly render a document due to limitations of the device
  1077   does not make the UA non-conformant. (For example, a UA is not
  1078   required to render color on a monochrome monitor.)
  1080   <p>An authoring tool is conformant to CSS Overflow Module Level 3
  1081   if it writes style sheets that are syntactically correct according to the
  1082   generic CSS grammar and the individual grammars of each feature in
  1083   this module, and meet all other conformance requirements of style sheets
  1084   as described in this module.
  1086 <h3 id="partial">
  1087 Partial implementations</h3>
  1089   <p>So that authors can exploit the forward-compatible parsing rules to
  1090   assign fallback values, CSS renderers <strong>must</strong>
  1091   treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
  1092   as appropriate</a>) any at-rules, properties, property values, keywords,
  1093   and other syntactic constructs for which they have no usable level of
  1094   support. In particular, user agents <strong>must not</strong> selectively
  1095   ignore unsupported component values and honor supported values in a single
  1096   multi-value property declaration: if any value is considered invalid
  1097   (as unsupported values must be), CSS requires that the entire declaration
  1098   be ignored.</p>
  1100 <h3 id="experimental">
  1101 Experimental implementations</h3>
  1103   <p>To avoid clashes with future CSS features, the CSS2.1 specification
  1104   reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
  1105   syntax</a> for proprietary and experimental extensions to CSS.
  1107   <p>Prior to a specification reaching the Candidate Recommendation stage
  1108   in the W3C process, all implementations of a CSS feature are considered
  1109   experimental. The CSS Working Group recommends that implementations
  1110   use a vendor-prefixed syntax for such features, including those in
  1111   W3C Working Drafts. This avoids incompatibilities with future changes
  1112   in the draft.
  1113   </p>
  1115 <h3 id="testing">
  1116 Non-experimental implementations</h3>
  1118   <p>Once a specification reaches the Candidate Recommendation stage,
  1119   non-experimental implementations are possible, and implementors should
  1120   release an unprefixed implementation of any CR-level feature they
  1121   can demonstrate to be correctly implemented according to spec.
  1123   <p>To establish and maintain the interoperability of CSS across
  1124   implementations, the CSS Working Group requests that non-experimental
  1125   CSS renderers submit an implementation report (and, if necessary, the
  1126   testcases used for that implementation report) to the W3C before
  1127   releasing an unprefixed implementation of any CSS features. Testcases
  1128   submitted to W3C are subject to review and correction by the CSS
  1129   Working Group.
  1131   <p>Further information on submitting testcases and implementation reports
  1132   can be found from on the CSS Working Group's website at
  1133   <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
  1134   Questions should be directed to the
  1135   <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
  1136   mailing list.
  1138 <h3 id="cr-exit-criteria">
  1139 CR exit criteria</h3>
  1141   <p class=issue>[Change or remove the following CR exit criteria if
  1142   the spec is not a module, but, e.g., a Note or a profile. This text was <a
  1143   href="http://www.w3.org/Style/CSS/Tracker/actions/44"> decided on 2008-06-04.</a>]</p>
  1145   <p>
  1146   For this specification to be advanced to Proposed Recommendation,
  1147   there must be at least two independent, interoperable implementations
  1148   of each feature. Each feature may be implemented by a different set of
  1149   products, there is no requirement that all features be implemented by
  1150   a single product. For the purposes of this criterion, we define the
  1151   following terms:
  1153   <dl>
  1154     <dt>independent <dd>each implementation must be developed by a
  1155     different party and cannot share, reuse, or derive from code
  1156     used by another qualifying implementation. Sections of code that
  1157     have no bearing on the implementation of this specification are
  1158     exempt from this requirement.
  1160     <dt>interoperable <dd>passing the respective test case(s) in the
  1161     official CSS test suite, or, if the implementation is not a Web
  1162     browser, an equivalent test. Every relevant test in the test
  1163     suite should have an equivalent test created if such a user
  1164     agent (UA) is to be used to claim interoperability. In addition
  1165     if such a UA is to be used to claim interoperability, then there
  1166     must one or more additional UAs which can also pass those
  1167     equivalent tests in the same way for the purpose of
  1168     interoperability. The equivalent tests must be made publicly
  1169     available for the purposes of peer review.
  1171     <dt>implementation <dd>a user agent which:
  1173     <ol class=inline>
  1174       <li>implements the specification.
  1176       <li>is available to the general public. The implementation may
  1177       be a shipping product or other publicly available version
  1178       (i.e., beta version, preview release, or “nightly build”). 
  1179       Non-shipping product releases must have implemented the
  1180       feature(s) for a period of at least one month in order to
  1181       demonstrate stability.
  1183       <li>is not experimental (i.e., a version specifically designed
  1184       to pass the test suite and is not intended for normal usage
  1185       going forward).
  1186     </ol>
  1187   </dl>
  1189   <p>The specification will remain Candidate Recommendation for at least
  1190   six months.
  1192 <h2 class=no-num id="acknowledgments">
  1193 Acknowledgments</h2>
  1195 	<p>
  1196 		Thanks especially to the feedback from
  1197 		Rossen Atanassov,
  1198 		Bert Bos,
  1199 		Tantek Çelik,
  1200 		John Daggett,
  1201 		fantasai,
  1202 		Daniel Glazman,
  1203 		Vincent Hardy,
  1204 		H&aring;kon Wium Lie,
  1205 		Peter Linss,
  1206 		Robert O'Callahan,
  1207 		Florian Rivoal,
  1208 		Alan Stearns,
  1209 		Steve Zilles,
  1210 		and all the rest of the
  1211 		<a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.
  1212 	</p>
  1214 <h2 class=no-num id="references">
  1215 References</h2>
  1217 <h3 class="no-num" id="normative-references">
  1218 Normative references</h3>
  1219 <!--normative-->
  1221 <h3 class="no-num" id="other-references">
  1222 Other references</h3>
  1223 <!--informative-->
  1225 <h2 class="no-num" id="index">
  1226 Index</h2>
  1227 <!--index-->
  1229 <h2 class="no-num" id="property-index">
  1230 Property index</h2>
  1231 <!-- properties -->
  1233 </body>
  1234 </html>
  1235 <!-- Keep this comment at the end of the file
  1236 Local variables:
  1237 mode: sgml
  1238 sgml-declaration:"~/SGML/HTML4.decl"
  1239 sgml-default-doctype-name:"html"
  1240 sgml-minimize-attributes:t
  1241 sgml-nofill-elements:("pre" "style" "br")
  1242 sgml-live-element-indicator:t
  1243 sgml-omittag:nil
  1244 sgml-shorttag:nil
  1245 sgml-namecase-general:t
  1246 sgml-general-insert-case:lower
  1247 sgml-always-quote-attributes:t
  1248 sgml-indent-step:nil
  1249 sgml-indent-data:t
  1250 sgml-parent-document:nil
  1251 sgml-exposed-tags:nil
  1252 sgml-local-catalogs:nil
  1253 sgml-local-ecat-files:nil
  1254 End:
  1255 -->

mercurial