css3-overflow/Overview.src.html

Thu, 16 Aug 2012 14:43:26 -0700

author
L. David Baron <dbaron@dbaron.org>
date
Thu, 16 Aug 2012 14:43:26 -0700
changeset 6488
5eeaa30b7d12
parent 6487
cd908039c977
child 6489
826370658d6c
permissions
-rw-r--r--

Mention need for prose to make break:regions apply, as discussed at face-to-face meeting afternoon of 2012-08-13.

     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]">http://www.w3.org/TR/[YEAR]/ED-css3-overflow-[CDATE]/</a>
   121   <dt>Latest version:
   122     <dd><a href="http://www.w3.org/TR/[SHORTNAME]/">http://www.w3.org/TR/[SHORTNAME]/</a>
   124   <dt>Editor's draft:
   125     <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a>
   127 <!--
   128   <dt>Previous version:
   129     <dd><a href="http://www.w3.org/PreviousVersionURI">
   130     http://www.w3.org/PreviousVersionURI</a>
   131 -->
   133   <dt>Issue Tracking:</dt>
   134     <dd>Maintained in document (only editor's draft is current)
   136   <dt>Feedback:</dt>
   137     <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line &ldquo;<kbd>[[SHORTNAME]] <var>&hellip; message topic &hellip;</var></kbd>&rdquo;
   139   <dt>Editors:
   140     <dd class="h-card vcard">
   141       <a class="p-name fn u-url url" rel="author"
   142          href="http://dbaron.org/">L. David Baron</a>,
   143       <a class="p-org org" href="http://www.mozilla.org/">Mozilla</a>
   144 </dl>
   146 <!--copyright-->
   148 <hr title="Separator for header">
   149 </div>
   151 <h2 class="no-num no-toc" id="abstract">Abstract</h2>
   153 	<p>
   154 		<a href="http://www.w3.org/TR/CSS/">CSS</a> is
   155 		a language for describing
   156 		the rendering of structured documents (such as HTML and XML)
   157 		on screen, on paper, in speech, etc.
   158 		This module contains the features of CSS
   159 		relating to new mechanisms of overflow handling in visual media (e.g., screen or paper).
   160 		In interactive media,
   161 		it describes features that allow the overflow
   162 		from a fixed size container
   163 		to be handled by pagination (displaying one page at a time).
   164 		It also describes features, applying to all visual media,
   165 		that allow the contents of an element
   166 		to be spread across multiple fragments,
   167 		allowing the contents to flow across multiple regions
   168 		or to have different styles for different fragments.
   169 	</p>
   171 <h2 class="no-num no-toc" id="status">Status of this document</h2>
   173 <!--status-->
   175 <p>The following features are at risk: &hellip;
   177 <h2 class="no-num no-toc" id="contents">
   178 Table of contents</h2>
   180 <!--toc-->
   182 <h2 id="intro">
   183 Introduction</h2>
   185 	<p>
   186 		In CSS Level 1 [[CSS1]], placing more content than would fit
   187 		inside an element with a specified size
   188 		was generally an authoring error.
   189 		Doing so caused the content to extend
   190 		outside the bounds of the element,
   191 		which would likely cause
   192 		that content to overlap with other elements.
   193 	</p>
   195 	<p>
   196 		CSS Level 2 [[CSS21]] introduced the 'overflow' property,
   197 		which allows authors to have overflow be handled by scrolling,
   198 		which means it is no longer an authoring error.
   199 		It also allows authors to specify
   200 		that overflow is handled by clipping,
   201 		which makes sense when the author's intent
   202 		is that the content not be shown.
   203 	</p>
   205 	<p>
   206 		However, scrolling is not the only way
   207 		to present large amounts of content,
   208 		and may even not be the optimal way.
   209 		After all, the codex replaced the scroll
   210 		as the common format for large written works
   211 		because of its advantages.
   212 	</p>
   214 	<p>
   215 		This specification introduces
   216 		a mechanism for Web pages to specify
   217 		that an element of a page should handle overflow
   218 		through pagination rather than through scrolling.
   219 	</p>
   221 	<p>
   222 		This specification also extends the concept of overflow
   223 		in another direction.
   224 		Instead of requiring that authors specify a single area
   225 		into which the content of an element must flow,
   226 		this specification allows authors to specify multiple fragments,
   227 		each with their own dimensions and styles,
   228 		so that the content of the element can flow from one to the next,
   229 		using as many as needed to place the content without overflowing.
   230 	</p>
   232 	<p>
   233 		In both of these cases, implementations must
   234 		break the content in the block-progression dimension.
   235 		Implementations must do this is described
   236 		in the CSS Fragmentation Module [[!CSS3-BREAK]].
   237 	</p>
   239 <h2 id="scrolling-overflow">Scrolling and hidden overflow</h2>
   241 	<p class="issue">
   242 		Move material from [[CSS21]] and [[CSS3BOX]] here.
   243 	</p>
   245 <h2 id="paginated-overflow">Paginated overflow</h2>
   247 <p class="issue">overflow:paginate or overflow:pages (or paged-x, paged-y, paged-x-controls, paged-y-controls as css3-gcpm has?)</p>
   249 <p class="issue">Ability to display N pages at once
   250 rather than just one page at once?</p>
   252 <h2 id="fragment-overflow">Fragment overflow</h2>
   254 	<p>
   255 		This section introduces and defines the meaning of
   256 		the new ''fragments'' value of the 'overflow' property.
   257 	</p>
   259 	<p>
   260 		When the computed value of 'overflow' for an element is ''fragments'',
   261 		and implementations would otherwise have created a box for the element,
   262 		then implementations must create at least one box for that element.
   263 		Each box created for the element is called a <dfn>fragment box</dfn>
   264 		for that element.
   265 		(If an element with ''overflow: fragments'' generates only one box,
   266 		that box is a <i>fragment box</i>.
   267 		However, if an element's computed 'overflow' is not ''fragments'',
   268 		then its box is not a <i>fragment box</i>.)
   269 		Every <i>fragment box</i> is a fragmentation container,
   270 		and for each <i>fragment box</i> which ends with a fragmentation break,
   271 		(which could happen
   272 		because breakable content overflows in the block dimension
   273 		or because of a forced break),
   274 		there must be another <i>fragment box</i> created as a next sibling
   275 		of the previous one.
   276 		<span class="issue">Or is it as though it's a next sibling of
   277 		the element?  Need to figure out exactly how this interacts with
   278 		other box-level fixup.</span>
   279 		(Breakable content might overflow in the box dimension either
   280 		because of a specified size on the <i>fragment box</i>
   281 		or because the <i>fragment box</i> is within a fragmentation context
   282 		in which it is being broken.
   283 		In other words, a single <i>fragment box</i> is never broken
   284 		across columns or pages;
   285 		the pieces that are in separate columns or pages
   286 		are always distinct <i>fragment box</i>es.)
   287 	</p>
   289 	<p class="issue">
   290 		We also want ''::nth-fragment()'' pseudo-elements
   291 		to be able to apply to the pieces of an element
   292 		split within a fragmentation context.
   293 		Should we require that authors who want to use
   294 		''::nth-fragment()'' in this way specify ''overflow:fragments''
   295 		(even if they don't specify a constrained height),
   296 		or should it work automatically for all elements
   297 		even if they don't have ''overflow: fragments''?
   298 	</p>
   300 	<div class="example">
   301 		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
   302 &lt;title&gt;Breaking content into
   303   equal-sized cards&lt;/title&gt;
   304 &lt;style&gt;
   305   .in-cards {
   306     overflow: fragments;
   308     width: 13em;
   309     height: 8em;
   311     padding: 4px;
   312     border: medium solid blue;
   313     margin: 6px;
   315     font: medium/1.3 Times New
   316       Roman, Times, serif;
   317   }
   318 &lt;/style&gt;
   319 &lt;div class="in-cards"&gt;
   320   In this example, the text in the div
   321   is broken into a series of cards.
   322   These cards all have the same style.
   323   The presence of enough content to
   324   overflow one of the cards causes
   325   another one to be created.  The second
   326   card is created just like it's the
   327   next sibling of the first.
   328 &lt;/div&gt;</pre></td><td>
   329 			<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>
   330 			<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>
   331 		</td></tr></table>
   332 	</div>
   334 	<p class="issue">
   335 		We should specify that ''overflow: fragments'' does not apply
   336 		to at least some table parts,
   337 		and perhaps other elements as well.
   338 		We need to determine exactly which ones.
   339 	</p>
   341 	<p class="issue">
   342 		This specification needs to say which type of
   343 		fragmentation context is created
   344 		so that it's clear which values of the 'break' property
   345 		cause breaks within this context.
   346 		We probably want ''break: regions'' to apply.
   347 	</p>
   349 <h3 id="fragment-styling">Fragment styling</h3>
   351 <h4 id="fragment-pseudo-element">The ::nth-fragment() pseudo-element</h4>
   353 	<p>
   354 		The ::nth-fragment() pseudo-element is a pseudo-element
   355 		that describes some of the <i>fragment box</i>es generated by an element.
   356 		The argument to the pseudo-element takes the same syntax
   357 		as the argument to the :nth-child() pseudo-class
   358 		defined in [[!SELECT]], and has the same meaning
   359 		except that the number is relative to
   360 		<i>fragment box</i>es generated by the element
   361 		instead of siblings of the element.
   362 	</p>
   364 	<p class="note">
   365 		Selectors that allow addressing fragments
   366 		by counting from the end rather than the start
   367 		are intentionally not provided.
   368 		Such selectors would interfere with determining
   369 		the number of fragments.
   370 	</p>
   372 <h4 id="style-of-fragments">Styling of fragments</h4>
   374 	<p class="issue">
   375 		Should this apply to fragment overflow only,
   376 		or also to paginated overflow?
   377 		(If it applies,
   378 		then stricter property restrictions would be needed
   379 		for paginated overflow.)
   380 	</p>
   382 	<p>
   383 		In the absence of rules with ''::nth-fragment()'' pseudo-elements,
   384 		the computed style for each <i>fragment box</i>
   385 		is the computed style for the element
   386 		for which the <i>fragment box</i> was created.
   387 		However, the style for a <i>fragment box</i> is also influenced
   388 		by rules whose selector's <i>subject</i> [[!SELECT]]
   389 		has an ''::nth-fragment()'' pseudo-element,
   390 		if the 1-based number of the <i>fragment box</i> matches
   391 		that ''::nth-fragment()'' pseudo-element
   392 		and the selector (excluding the ''::nth-fragment()'' pseudo-element)
   393 		matches the element generating the fragments.
   394 	</p>
   396 	<p>
   397 		When determining the style of the <i>fragment box</i>,
   398 		these rules that match the fragment pseudo-element
   399 		cascade together with the rules that match the element,
   400 		with the fragment pseudo-element adding the specificity
   401 		of a pseudo-class to the specificity calculation.
   402 		<span class="issue">Does this need to be specified in
   403 		the cascading module as well?</span>
   404 	</p>
   406 	<div class="example">
   407 		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
   408 &lt;style&gt;
   409   .bouncy-columns {
   410     overflow: fragments;
   411     width: 6em;
   412     height: 10em;
   413     float: left;
   414     margin: 1em;
   415     font: medium/1.25 Times New
   416       Roman, Times, serif;
   417   }
   418   .bouncy-columns::nth-fragment(1) {
   419     background: aqua; color: black;
   420     transform: rotate(-3deg);
   421   }
   422   .bouncy-columns::nth-fragment(2) {
   423     background: yellow; color: black;
   424     transform: rotate(3deg);
   425   }
   426 &lt;/style&gt;
   427 &lt;div class="bouncy-columns"&gt;
   428   <i>...</i>
   429 &lt;/div&gt;</pre></td><td>
   430 			<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>
   431 			<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>
   432 			<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>
   433 		</td></tr></table>
   434 	</div>
   436 	<p>
   437 		Styling an ''::nth-fragment()'' pseudo-element with the 'overflow'
   438 		property has no effect;
   439 		the computed value of 'overflow' for the fragment box
   440 		remains the same as the computed value of overflow for the element.
   441 	</p>
   443 	<p>
   444 		Styling an ''::nth-fragment()'' pseudo-element with the 'content'
   445 		property has no effect;
   446 		the computed value of 'content' for the fragment box
   447 		remains the same as the computed value of content for the element.
   448 	</p>
   450 	<p>
   451 		Specifying ''display: none'' for a <i>fragment box</i> causes
   452 		the fragment box with that index not to be generated.
   453 		However, in terms of the indices
   454 		used for matching ''::nth-fragment()'' pseudo-elements
   455 		of later fragment boxes,
   456 		it still counts as though it was generated.
   457 		However, since it is not generated, it does not contain any content.
   458 	</p>
   460 	<p class="issue">
   461 		Would it make more sense to forbid ''display:none''?
   462 		Or perhaps to forbid 'display', 'position', 'float',
   463 		and similar (in addition to 'overflow')?
   464 	</p>
   466 	<p>
   467 		To match the model for other pseudo-elements
   468 		where the pseudo-elements live inside their corresponding element,
   469 		declarations in ''::nth-fragment()'' pseudo-elements override
   470 		declarations in rules without the pseudo-element.
   471 		The relative priority within such declarations is determined
   472 		by normal cascading order (see [[!CSS21]]).
   473 	</p>
   475 	<p>
   476 		Styles specified on ''::nth-fragment()'' pseudo-elements
   477 		do affect inheritance to content within the <i>fragment box</i>.
   478 		In other words, the content within the <i>fragment box</i> must
   479 		inherit from the fragment box's style (i.e., the pseudo-element style)
   480 		rather than directly from the element.
   481 		This means that elements split between fragment boxes may
   482 		have different styles for different parts of the element.
   483 	</p>
   485 	<p class="issue">
   486 		This inheritance rule allows specifying styles indirectly
   487 		(by using explicit ''inherit'' or using default inheritance
   488 		on properties that don't apply to '':first-letter'')
   489 		that can't be specified directly
   490 		(based on the rules in the next section).
   491 		This is a problem.
   492 		The restrictions that apply to styling inside fragments
   493 		should also apply to inheritance from fragments.
   494 	</p>
   496 	<div class="example">
   497 		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
   498 &lt;style&gt;
   499   .article {
   500     overflow: fragments;
   501   }
   502   .article::nth-fragment(1) {
   503     font-size: 1.5em;
   504     margin-bottom: 1em;
   505     height: 4em;
   506   }
   507   .article::nth-fragment(n+2) {
   508     /* 2 and up */
   509     margin-left: 5em;
   510     margin-right: 2em;
   511   }
   512 &lt;/style&gt;
   513 &lt;div class="article"&gt;
   514   The &lt;code&gt;font-size&lt;/code&gt; property<i>...</i>
   515 &lt;/div&gt;</pre></td><td>
   516 			<div class="article-font-inherit-demo one">The <code>font-size</code> property<br>specified on the fragment<br>is inherited into the</div>
   517 			<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>
   518 		</td></tr></table>
   519 	</div>
   521 <h4 id="style-in-fragments">Styling inside fragments</h4>
   523 	<p class="issue">
   524 		Should this apply to fragment overflow only,
   525 		or also to paginated overflow,
   526 		or even to pagination across pages?
   527 	</p>
   529 	<p>
   530 		The ''::nth-fragment()'' pseudo-element
   531 		can also be used to style
   532 		content inside of a <i>fragment box</i>.
   533 		Unlike the ''::first-line'' and ''::first-letter'' pseudo-elements,
   534 		the ''::nth-fragment()'' pseudo-element can be applied
   535 		to parts of the selector other than the subject:
   536 		in particular, it can match ancestors of the subject.
   537 		However, the only CSS properties applied
   538 		by rules with such selectors
   539 		are those that apply
   540 		to the ''::first-letter'' pseudo-element.
   541 	</p>
   543 	<p>
   544 		To be more precise,
   545 		when a rule's selector has ''::nth-fragment()'' pseudo-elements
   546 		attached to parts of the selector other than the subject,
   547 		the declarations in that rule apply to
   548 		a fragment (or pseudo-element thereof) when:
   549 	</p>
   550 	<ol>
   551 		<li>
   552 			the declarations are for properties that apply to the
   553 			''::first-letter'' pseudo-element,
   554 		</li>
   555 		<li>
   556 			the declarations would apply to
   557 			that fragment (or pseudo-element thereof)
   558 			had those ''::nth-fragment()'' pseudo-elements been removed,
   559 			with a particular association between
   560 			each sequence of simple selectors and the element it matched,
   561 			and
   562 		</li>
   563 		<li>
   564 			for each removed ''::nth-fragment()'' pseudo-element,
   565 			the fragment lives within a <i>fragment box</i>
   566 			of the element associated in that association
   567 			with the selector that the pseudo-element was attached to,
   568 			and whose index matches the pseudo-element.
   569 		</li>
   570 	</ol>
   572 	<div class="example">
   573 		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
   574 &lt;style&gt;
   575   .dark-columns {
   576     overflow: fragments;
   577     width: 6em;
   578     height: 10em;
   579     float: left;
   580     margin-right: 1em;
   581     font: medium/1.25 Times New
   582       Roman, Times, serif;
   583   }
   584   .dark-columns::nth-fragment(1) {
   585     background: aqua; color: black;
   586   }
   587   .dark-columns::nth-fragment(1) :link {
   588     color: blue;
   589   }
   590   .dark-columns::nth-fragment(1) :visited {
   591     color: purple;
   592   }
   593   .dark-columns::nth-fragment(2) {
   594     background: navy; color: white;
   595   }
   596   .dark-columns::nth-fragment(2) :link {
   597     color: aqua;
   598   }
   599   .dark-columns::nth-fragment(2) :visited {
   600     color: fuchsia;
   601   }
   602 &lt;/style&gt;
   603 &lt;div class="dark-columns"&gt;
   604   <i>...</i>
   605 &lt;/div&gt;</pre></td><td>
   606 			<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>
   607 			<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>
   608 		</td></tr></table>
   609 	</div>
   612 <h3 id="max-lines">The 'max-lines' property</h3>
   614 	<p>
   615 		Authors may wish to style the opening lines of an element
   616 		with different styles
   617 		by putting those opening lines in a separate fragment.
   618 		However, since it may be difficult to predict the exact height
   619 		occupied by those lines
   620 		in order to restrict the first fragment to that height,
   621 		this specification introduces a 'max-lines' property
   622 		that forces a fragment to break
   623 		after a specified number of lines.
   624 		This forces a break after the given number of lines
   625 		contained within the element or its descendants,
   626 		as long as those lines are in the same block formatting context.
   627 	</p>
   629 	<table class=propdef>
   630 		<tr>
   631 			<th>Name:
   632 			<td><dfn>max-lines</dfn>
   633 		<tr>
   634 			<th><a href="#values">Value</a>:
   635 			<td>none | &lt;integer&gt;
   636 		<tr>
   637 			<th>Initial:
   638 			<td>none
   639 		<tr>
   640 			<th>Applies to:
   641 			<td>fragment boxes
   642 		<tr>
   643 			<th>Inherited:
   644 			<td>no
   645 		<tr>
   646 			<th>Animatable:
   647 			<td>as <a href="http://www.w3.org/TR/css3-transitions/#animatable-types">integer</a>
   648 		<tr>
   649 			<th>Percentages:
   650 			<td>N/A
   651 		<tr>
   652 			<th>Media:
   653 			<td>visual
   654 		<tr>
   655 			<th>Computed&nbsp;value:
   656 			<td>specified value
   657 		<tr>
   658 			<th>Canonical order:
   659 			<td><abbr title="follows order of property value definition">per grammar</abbr>
   660 	</table>
   662 	<dl>
   663 		<dt>none
   664 		<dd>
   665 			<p>
   666 				Breaks occur only as specified elsewhere.
   667 			</p>
   668 		</dd>
   670 		<dt>&lt;integer&gt;
   671 		<dd>
   672 			<p>
   673 				In addition to any breaks specified elsewhere,
   674 				a break is forced before any line that would exceed
   675 				the given number of lines
   676 				being placed inside the element
   677 				(excluding lines that are in
   678 				a different block formatting context from
   679 				the block formatting context to which
   680 				an unstyled child of the element would belong).
   681 			</p>
   683 			<p class="issue">
   684 				If there are multiple boundaries between this line
   685 				and the previous, where exactly (in terms of element
   686 				boundaries) is the break forced?
   687 			</p>
   689 			<p>
   690 				Only positive integers are accepted.
   691 				Zero or negative integers are a parse error.
   692 			</p>
   693 		</dd>
   694 	</dl>
   696 <p class="issue">Should this apply to fragment overflow only, or also
   697 to pagination?</p>
   699 	<div class="example">
   700 		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
   701 &lt;style&gt;
   702   .article {
   703     overflow: fragments;
   704   }
   705   .article::first-letter {
   706     font-size: 2em;
   707     line-height: 0.9;
   708   }
   709   .article::nth-fragment(1) {
   710     font-size: 1.5em;
   711     max-lines: 3;
   712   }
   713   .article::nth-fragment(n+2) {
   714     /* 2 and up */
   715     column-count: 2;
   716   }
   717 &lt;/style&gt;
   718 &lt;div class="article"&gt;
   719   <i>...</i>
   720 &lt;/div&gt;</pre></td><td>
   721 			<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>
   722 			<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>
   723 			<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>
   724 		</td></tr></table>
   725 	</div>
   727 <h2 id="conformance">
   728 Conformance</h2>
   730 <h3 id="placement">
   731 Module interactions</h3>
   733   <p>This module extends the 'overflow'
   734   feature defined in [[CSS21]] section 11.1.1.  It defines additional
   735   overflow handling mechanisms that implementations must implement as
   736   described in this module in order to conform to this module.</p>
   738   <p>No properties in this module apply to the <code>::first-line</code> or
   739   <code>::first-letter</code> pseudo-elements.</p>
   741 <h3 id="values">
   742 Values</h3>
   744   <p>This specification follows the
   745   <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
   746   definition conventions</a> from [[!CSS21]]. Value types not defined in
   747   this specification are defined in CSS Level 2 Revision 1 [[!CSS21]].
   748   Other CSS modules may expand the definitions of these value types: for
   749   example [[CSS3COLOR]], when combined with this module, expands the
   750   definition of the &lt;color&gt; value type as used in this specification.</p>
   752   <p>In addition to the property-specific values listed in their definitions,
   753   all properties defined in this specification also accept the
   754   <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
   755   keyword as their property value. For readability it has not been repeated
   756   explicitly.
   759 <h3 id="conventions">
   760 Document conventions</h3>
   762   <p>Conformance requirements are expressed with a combination of
   763   descriptive assertions and RFC 2119 terminology. The key words “MUST”,
   764   “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
   765   “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
   766   document are to be interpreted as described in RFC 2119.
   767   However, for readability, these words do not appear in all uppercase
   768   letters in this specification.
   770   <p>All of the text of this specification is normative except sections
   771   explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p>
   773   <p>Examples in this specification are introduced with the words “for example”
   774   or are set apart from the normative text with <code>class="example"</code>,
   775   like this:
   777   <div class="example">
   778     <p>This is an example of an informative example.</p>
   779   </div>
   781   <p>Informative notes begin with the word “Note” and are set apart from the
   782   normative text with <code>class="note"</code>, like this:
   784   <p class="note">Note, this is an informative note.</p>
   786 <h3 id="conformance-classes">
   787 Conformance classes</h3>
   789   <p>Conformance to CSS Overflow Module Level 3
   790   is defined for three conformance classes:
   791   <dl>
   792     <dt><dfn title="style sheet!!as conformance class">style sheet</dfn>
   793       <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
   794       style sheet</a>.
   795     <dt><dfn>renderer</dfn></dt>
   796       <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
   797       that interprets the semantics of a style sheet and renders
   798       documents that use them.
   799     <dt><dfn id="authoring-tool">authoring tool</dfn></dt>
   800       <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
   801       that writes a style sheet.
   802   </dl>
   804   <p>A style sheet is conformant to CSS Overflow Module Level 3
   805   if all of its statements that use syntax defined in this module are valid
   806   according to the generic CSS grammar and the individual grammars of each
   807   feature defined in this module.
   809   <p>A renderer is conformant to CSS Overflow Module Level 3
   810   if, in addition to interpreting the style sheet as defined by the
   811   appropriate specifications, it supports all the features defined
   812   by CSS Overflow Module Level 3 by parsing them correctly
   813   and rendering the document accordingly. However, the inability of a
   814   UA to correctly render a document due to limitations of the device
   815   does not make the UA non-conformant. (For example, a UA is not
   816   required to render color on a monochrome monitor.)
   818   <p>An authoring tool is conformant to CSS Overflow Module Level 3
   819   if it writes style sheets that are syntactically correct according to the
   820   generic CSS grammar and the individual grammars of each feature in
   821   this module, and meet all other conformance requirements of style sheets
   822   as described in this module.
   824 <h3 id="partial">
   825 Partial implementations</h3>
   827   <p>So that authors can exploit the forward-compatible parsing rules to
   828   assign fallback values, CSS renderers <strong>must</strong>
   829   treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
   830   as appropriate</a>) any at-rules, properties, property values, keywords,
   831   and other syntactic constructs for which they have no usable level of
   832   support. In particular, user agents <strong>must not</strong> selectively
   833   ignore unsupported component values and honor supported values in a single
   834   multi-value property declaration: if any value is considered invalid
   835   (as unsupported values must be), CSS requires that the entire declaration
   836   be ignored.</p>
   838 <h3 id="experimental">
   839 Experimental implementations</h3>
   841   <p>To avoid clashes with future CSS features, the CSS2.1 specification
   842   reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
   843   syntax</a> for proprietary and experimental extensions to CSS.
   845   <p>Prior to a specification reaching the Candidate Recommendation stage
   846   in the W3C process, all implementations of a CSS feature are considered
   847   experimental. The CSS Working Group recommends that implementations
   848   use a vendor-prefixed syntax for such features, including those in
   849   W3C Working Drafts. This avoids incompatibilities with future changes
   850   in the draft.
   851   </p>
   853 <h3 id="testing">
   854 Non-experimental implementations</h3>
   856   <p>Once a specification reaches the Candidate Recommendation stage,
   857   non-experimental implementations are possible, and implementors should
   858   release an unprefixed implementation of any CR-level feature they
   859   can demonstrate to be correctly implemented according to spec.
   861   <p>To establish and maintain the interoperability of CSS across
   862   implementations, the CSS Working Group requests that non-experimental
   863   CSS renderers submit an implementation report (and, if necessary, the
   864   testcases used for that implementation report) to the W3C before
   865   releasing an unprefixed implementation of any CSS features. Testcases
   866   submitted to W3C are subject to review and correction by the CSS
   867   Working Group.
   869   <p>Further information on submitting testcases and implementation reports
   870   can be found from on the CSS Working Group's website at
   871   <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
   872   Questions should be directed to the
   873   <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
   874   mailing list.
   876 <h3 id="cr-exit-criteria">
   877 CR exit criteria</h3>
   879   <p class=issue>[Change or remove the following CR exit criteria if
   880   the spec is not a module, but, e.g., a Note or a profile. This text was <a
   881   href="http://www.w3.org/Style/CSS/Tracker/actions/44"> decided on 2008-06-04.</a>]</p>
   883   <p>
   884   For this specification to be advanced to Proposed Recommendation,
   885   there must be at least two independent, interoperable implementations
   886   of each feature. Each feature may be implemented by a different set of
   887   products, there is no requirement that all features be implemented by
   888   a single product. For the purposes of this criterion, we define the
   889   following terms:
   891   <dl>
   892     <dt>independent <dd>each implementation must be developed by a
   893     different party and cannot share, reuse, or derive from code
   894     used by another qualifying implementation. Sections of code that
   895     have no bearing on the implementation of this specification are
   896     exempt from this requirement.
   898     <dt>interoperable <dd>passing the respective test case(s) in the
   899     official CSS test suite, or, if the implementation is not a Web
   900     browser, an equivalent test. Every relevant test in the test
   901     suite should have an equivalent test created if such a user
   902     agent (UA) is to be used to claim interoperability. In addition
   903     if such a UA is to be used to claim interoperability, then there
   904     must one or more additional UAs which can also pass those
   905     equivalent tests in the same way for the purpose of
   906     interoperability. The equivalent tests must be made publicly
   907     available for the purposes of peer review.
   909     <dt>implementation <dd>a user agent which:
   911     <ol class=inline>
   912       <li>implements the specification.
   914       <li>is available to the general public. The implementation may
   915       be a shipping product or other publicly available version
   916       (i.e., beta version, preview release, or “nightly build”). 
   917       Non-shipping product releases must have implemented the
   918       feature(s) for a period of at least one month in order to
   919       demonstrate stability.
   921       <li>is not experimental (i.e., a version specifically designed
   922       to pass the test suite and is not intended for normal usage
   923       going forward).
   924     </ol>
   925   </dl>
   927   <p>The specification will remain Candidate Recommendation for at least
   928   six months.
   930 <h2 class=no-num id="acknowledgments">
   931 Acknowledgments</h2>
   933 	<p>
   934 		Thanks especially to the feedback from
   935 		H&aring;kon Wium Lie,
   936 		Florian Rivoal,
   937 		Alan Stearns,
   938 		and all the rest of the
   939 		<a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.
   940 	</p>
   942 <h2 class=no-num id="references">
   943 References</h2>
   945 <h3 class="no-num" id="normative-references">
   946 Normative references</h3>
   947 <!--normative-->
   949 <h3 class="no-num" id="other-references">
   950 Other references</h3>
   951 <!--informative-->
   953 <h2 class="no-num" id="index">
   954 Index</h2>
   955 <!--index-->
   957 <h2 class="no-num" id="property-index">
   958 Property index</h2>
   959 <!-- properties -->
   961 </body>
   962 </html>
   963 <!-- Keep this comment at the end of the file
   964 Local variables:
   965 mode: sgml
   966 sgml-declaration:"~/SGML/HTML4.decl"
   967 sgml-default-doctype-name:"html"
   968 sgml-minimize-attributes:t
   969 sgml-nofill-elements:("pre" "style" "br")
   970 sgml-live-element-indicator:t
   971 sgml-omittag:nil
   972 sgml-shorttag:nil
   973 sgml-namecase-general:t
   974 sgml-general-insert-case:lower
   975 sgml-always-quote-attributes:t
   976 sgml-indent-step:nil
   977 sgml-indent-data:t
   978 sgml-parent-document:nil
   979 sgml-exposed-tags:nil
   980 sgml-local-catalogs:nil
   981 sgml-local-ecat-files:nil
   982 End:
   983 -->

mercurial