css3-overflow/Overview.src.html

Wed, 13 Feb 2013 16:46:43 -0800

author
L. David Baron <dbaron@dbaron.org>
date
Wed, 13 Feb 2013 16:46:43 -0800
changeset 7460
4a64a80a24d5
parent 6497
60743929aa4e
child 7461
63b605c570e4
permissions
-rw-r--r--

[css3-overflow]Add a Previous version: line so the current version of the preprocessor doesn't choke.

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

mercurial