css-overflow/Overview.src.html

Thu, 28 Mar 2013 18:31:31 -0700

author
Tab Atkins Jr. <jackalmage@gmail.com>
date
Thu, 28 Mar 2013 18:31:31 -0700
changeset 7856
589545d6b465
parent 7847
f7490857b4eb
child 7863
b37f9017599f
permissions
-rw-r--r--

Change feedback shortnames.

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

mercurial