• file
• revisions
• annotate
• diff
• comparison
• raw

css-overflow/Overview.bs@f237c1a2c6aa (annotated)

css-overflow/Overview.bs

Mon, 22 May 2017 18:25:40 +0900

author

Florian Rivoal <[email protected]>

date

Mon, 22 May 2017 18:25:40 +0900

changeset 19333

f237c1a2c6aa

parent 18680

078265332f8e

child 19337

0dff842d4ab5

permissions

-rw-r--r--

[css-overflow] Synchronize level 3 and 4

Remove from level 4 parts that are maintained in level 3,
and from level 3 an issue that has been solved in level 4.

peter@16999	1	<h1>CSS Overflow Module Level 4</h1>
dbaron@15115	2	<pre class="metadata">
dbaron@15115	3	Status: ED
jackalmage@15674	4	Work Status: Exploring
peter@16999	5	ED: https://drafts.csswg.org/css-overflow-4/
dbaron@15115	6	Shortname: css-overflow
dbaron@15115	7	Group: csswg
florian@17019	8	Level: 4
peter@16999	9	TR: https://www.w3.org/TR/css-overflow-4/
peter@16999	10	Previous version: https://www.w3.org/TR/css-overflow-3/
dbaron@18303	11	Editor: L. David Baron, Mozilla https://www.mozilla.org/, https://dbaron.org/
git@18674	12	Editor: Florian Rivoal, On behalf of Bloomberg, http://florian.rivoal.net/
dbaron@15115	13	Abstract: This module contains the features of CSS relating to new mechanisms of overflow handling in visual media (e.g., screen or paper). In interactive media, it describes features that allow the overflow from a fixed size container to be handled by pagination (displaying one page at a time). It also describes features, applying to all visual media, that allow the contents of an element to be spread across multiple fragments, allowing the contents to flow across multiple regions or to have different styles for different fragments.
dbaron@15115	14	</pre>
dbaron@15115	15	<pre class="link-defaults">
jackalmage@15315	16	type: dfn; spec:css-multicol-1; text:overflow column
dbaron@15115	17	</pre>
dbaron@15115	18	<pre class="anchors">
peter@16986	19	url: https://drafts.csswg.org/selectors-3/#subject; type: dfn; text: subject;
dbaron@15115	20	</pre>
dbaron@6475	21	<style>
dbaron@6477	22	table.source-demo-pair {
dbaron@6477	23	width: 100%;
dbaron@6477	24	}
dbaron@6481	25
dbaron@6475	26	.in-cards-demo {
dbaron@6475	27	width: 13em;
dbaron@6475	28	height: 8em;
dbaron@6475	29
dbaron@6475	30	padding: 4px;
dbaron@6475	31	border: medium solid blue;
dbaron@6475	32	margin: 6px;
dbaron@6475	33
dbaron@6475	34	font: medium/1.3 Times New Roman, Times, serif;
dbaron@6475	35	white-space: nowrap;
dbaron@6475	36	}
dbaron@6481	37
dbaron@6477	38	.bouncy-columns-demo {
dbaron@6477	39	width: 6em;
dbaron@6477	40	height: 10em;
dbaron@6477	41	float: left;
dbaron@6477	42	margin: 1em;
dbaron@6477	43	font: medium/1.25 Times New Roman, Times, serif;
dbaron@6477	44	white-space: nowrap;
dbaron@6477	45	}
dbaron@6477	46	.bouncy-columns-demo.one {
dbaron@6477	47	background: aqua; color: black;
dbaron@6477	48	transform: rotate(-3deg);
dbaron@6477	49	}
dbaron@6477	50	.bouncy-columns-demo.two {
dbaron@6477	51	background: yellow; color: black;
dbaron@6477	52	transform: rotate(3deg);
dbaron@6477	53	}
dbaron@6479	54
dbaron@6480	55	.article-font-inherit-demo {
dbaron@6480	56	font: 1em/1.25 Times New Roman, Times, serif;
dbaron@6480	57	white-space: nowrap;
dbaron@6480	58	}
dbaron@6480	59	.article-font-inherit-demo.one {
dbaron@6480	60	width: 12em;
dbaron@6480	61	font-size: 1.5em;
dbaron@6480	62	margin-bottom: 1em;
dbaron@6480	63	height: 4em;
dbaron@6480	64	}
dbaron@6480	65	.article-font-inherit-demo.two {
dbaron@6480	66	width: 11em;
dbaron@6480	67	margin-left: 5em;
dbaron@6480	68	margin-right: 2em;
dbaron@6480	69	}
dbaron@6480	70
dbaron@6481	71	.dark-columns-demo {
dbaron@6481	72	width: 6em;
dbaron@6481	73	height: 10em;
dbaron@6481	74	float: left;
dbaron@6481	75	margin-right: 1em;
dbaron@6481	76	font: medium/1.25 Times New Roman, Times, serif;
dbaron@6481	77	white-space: nowrap;
dbaron@6481	78	}
dbaron@6481	79	.dark-columns-demo.one {
dbaron@6481	80	background: aqua; color: black;
dbaron@6481	81	}
dbaron@6481	82	.dark-columns-demo.one :link {
dbaron@6481	83	color: blue;
dbaron@6481	84	}
dbaron@6481	85	.dark-columns-demo.one :visited {
dbaron@6481	86	color: purple;
dbaron@6481	87	}
dbaron@6481	88	.dark-columns-demo.two {
dbaron@6481	89	background: navy; color: white;
dbaron@6481	90	}
dbaron@6481	91	.dark-columns-demo.two :link {
dbaron@6481	92	color: aqua;
dbaron@6481	93	}
dbaron@6481	94	.dark-columns-demo.two :visited {
dbaron@6481	95	color: fuchsia;
dbaron@6481	96	}
dbaron@6481	97
dbaron@6479	98	.article-max-lines-demo {
dbaron@6479	99	font: 1em/1.25 Times New Roman, Times, serif;
dbaron@6479	100	white-space: nowrap;
dbaron@6479	101	}
dbaron@6479	102	.article-max-lines-demo.one::first-letter {
dbaron@6479	103	font-size: 2em;
dbaron@6479	104	line-height: 0.9;
dbaron@6479	105	}
dbaron@6479	106	.article-max-lines-demo.one {
dbaron@6479	107	font-size: 1.5em;
dbaron@6479	108	width: 16em;
dbaron@6479	109	}
dbaron@6479	110	.article-max-lines-demo.two {
dbaron@6479	111	width: 11.5em;
dbaron@6479	112	float: left; margin-right: 1em;
dbaron@6479	113	}
dbaron@6479	114	.article-max-lines-demo.three {
dbaron@6479	115	width: 11.5em;
dbaron@6479	116	float: left;
dbaron@6479	117	}
dbaron@6475	118	</style>
dbaron@6470	119
dbaron@6470	120	<h2 id="intro">
dbaron@6470	121	Introduction</h2>
dbaron@6470	122
git@19333	123	Note: At the time of writing, [[CSS-OVERFLOW-3]] is not completely finalized yet.
git@19333	124	To avoid accidental divergences and maintenance overhead,
git@19333	125	This specification is written as a delta specification over css-overflow Level 3.
git@19333	126	Once the level 3 specification is final,
git@19333	127	its content will be integrated into this specification,
git@19333	128	which will then replace it.
git@19333	129	Until then, this specification only contains additions and extensions to level 3.
git@19333	130
dbaron@6470	131	<p>
dbaron@6470	132	In CSS Level 1 [[CSS1]], placing more content than would fit
dbaron@6470	133	inside an element with a specified size
dbaron@6470	134	was generally an authoring error.
dbaron@6470	135	Doing so caused the content to extend
dbaron@6470	136	outside the bounds of the element,
dbaron@6470	137	which would likely cause
dbaron@6470	138	that content to overlap with other elements.
dbaron@6470	139	</p>
dbaron@6470	140
dbaron@6470	141	<p>
dbaron@6470	142	CSS Level 2 [[CSS21]] introduced the 'overflow' property,
dbaron@6470	143	which allows authors to have overflow be handled by scrolling,
dbaron@6470	144	which means it is no longer an authoring error.
dbaron@6470	145	It also allows authors to specify
dbaron@6470	146	that overflow is handled by clipping,
dbaron@6470	147	which makes sense when the author's intent
dbaron@6470	148	is that the content not be shown.
git@19333	149	This was further refined in the CSS Overflow Module Level 3 [[CSS-OVERFLOW-3]].
dbaron@6470	150	</p>
dbaron@6470	151
dbaron@6470	152	<p>
dbaron@6470	153	However, scrolling is not the only way
dbaron@6470	154	to present large amounts of content,
dbaron@6470	155	and may even not be the optimal way.
dbaron@6470	156	After all, the codex replaced the scroll
dbaron@6470	157	as the common format for large written works
dbaron@6470	158	because of its advantages.
dbaron@6470	159	</p>
dbaron@6470	160
dbaron@6470	161	<p>
dbaron@6470	162	This specification introduces
dbaron@6470	163	a mechanism for Web pages to specify
dbaron@6484	164	that an element of a page should handle overflow
dbaron@6470	165	through pagination rather than through scrolling.
dbaron@6470	166	</p>
dbaron@6470	167
dbaron@6470	168	<p>
dbaron@6470	169	This specification also extends the concept of overflow
dbaron@6470	170	in another direction.
dbaron@6484	171	Instead of requiring that authors specify a single area
dbaron@6470	172	into which the content of an element must flow,
dbaron@6484	173	this specification allows authors to specify multiple fragments,
dbaron@6470	174	each with their own dimensions and styles,
dbaron@6470	175	so that the content of the element can flow from one to the next,
dbaron@6470	176	using as many as needed to place the content without overflowing.
dbaron@6470	177	</p>
dbaron@6470	178
dbaron@6470	179	<p>
dbaron@6470	180	In both of these cases, implementations must
dbaron@6470	181	break the content in the block-progression dimension.
dbaron@6470	182	Implementations must do this is described
dbaron@6470	183	in the CSS Fragmentation Module [[!CSS3-BREAK]].
dbaron@6470	184	</p>
dbaron@6470	185
dbaron@9850	186	<h2 id="overflow-concepts">Types of overflow</h2>
dbaron@9850	187
git@19333	188	Issue: copy level 3 content when final
dbaron@9850	189
dbaron@9850	190
dbaron@7811	191	<h2 id="overflow-properties">Overflow properties</h2>
dbaron@7811	192
git@19333	193	Issue: copy level 3 content when final
dbaron@7814	194
florian@15277	195
git@18680	196	<h2 id="scollbar-gutter-property">
git@18680	197	Reserving space for the scrollbar: the 'scrollbar-gutter' property</h2>
florian@15277	198
git@18680	199	The space between the inner border edge and the outer padding edge
git@18680	200	which user agents may reserve to display the scrollbar
git@18680	201	is called the <dfn>scrollbar gutter</dfn>.
git@18680	202
git@18680	203	The 'scrollbar-gutter' property gives control to the author
git@18680	204	over the presence of <a>scrollbar gutters</a>
git@18680	205	separately from the ability to control the presence of scrollbars
git@18680	206	provided by the 'overflow' property.
git@18680	207
git@18680	208	<pre class="propdef">
git@18680	209	Name: scrollbar-gutter
git@18680	210	Value: ''auto'' | [ ''stable'' | ''always'' ] && ''both''? && ''force''?
git@18680	211	Initial: auto
git@18680	212	Inherited: yes
git@18680	213	Computed value: specified value
git@18680	214	</pre>
git@18680	215
git@18680	216	This property affects the presence of <a>scrollbar gutters</a>
git@18680	217	placed at the <a>inline start</a> edge or <a>inline end</a> edge of the box.
git@18680	218
git@18680	219	The presence of a <a>scrollbar gutter</a>
git@18680	220	at the <a>block start</a> edge and <a>block end</a> edge of the box
git@18680	221	cannot be controlled in this level,
git@18680	222	and is determined the same way as the presence of <a>scrollbar gutters</a>
git@18680	223	placed at the <a>inline start</a> edge or <a>inline end</a> edge of the box
git@18680	224	when 'scrollbar-gutter' is ''scrollbar-gutter/auto''.
git@18680	225
git@18680	226	Scrollbars which by default are placed over the content box
git@18680	227	and do not cause <a>scrollbar gutters</a> to be created
git@18680	228	are called <dfn>overlay scrollbars</dfn>.
git@18680	229	Such scrollbars are usually partially transparent, revealing the content behind them if any.
git@18680	230	Their appearance and size may vary
git@18680	231	based on whether and how the user is interacting with them.
git@18680	232
git@18680	233	Scrollbars which are always placed in a <a>scrollbar gutter</a>,
git@18680	234	consuming space when present,
git@18680	235	are called <dfn>classic scrollbars</dfn>.
git@18680	236	Such scrollbars are usually opaque.
git@18680	237
git@18680	238	Whether <a>classic scrollbars</a> or <a>overlay scrollbars</a> are used is UA defined.
git@18680	239
git@18680	240	The appearance and size of the scrollbar is UA defined.
git@18680	241
git@18680	242	Whether scrollbars appear on the start or end edge of the box is UA defined.
git@18680	243
git@18680	244	For <a>classic scrollbars</a>,
git@18680	245	the width of the <a>scrollbar gutter</a> is the same as the width of the scrollbar.
git@18680	246	For <a>overlay scrollbars</a>,
git@18680	247	the width of the <a>scrollbar gutter</a> is UA defined.
git@18680	248	However, it must not be 0,
git@18680	249	and it must not change based on user interactions with the page or the scrollbar
git@18680	250	even if the scrollbar itself changes.
git@18680	251	Also, it must be the same for all elements in the page.
git@18680	252
git@18680	253	The values of this property have the following meaning:
git@18680	254
git@18680	255	<dl dfn-for="scrollbar-gutter">
git@18680	256	<dt><dfn>''scrollbar-gutter/auto''</dfn>
git@18680	257	<dd><a>Classic scrollbars</a> consume space by creating a <a>scrollbar gutter</a>
git@18680	258	when 'overflow' is ''overflow/scroll',
git@18680	259	or when 'overflow' is ''overflow/auto'' and the box is overflowing.
git@18680	260	<a>Overlay scrollbars</a> do not consume space.
git@18680	261
git@18680	262	<dt><dfn>''stable''</dfn>
git@18680	263	<dd>The <a>scrollbar gutter</a> is present when
git@18680	264	'overflow' is ''overflow/scroll'' or ''overflow/auto''
git@18680	265	and the scrollbar is a <a>classic scrollbar</a>
git@18680	266	even if the box is not overflowing,
git@18680	267	but not when the scrollbar is an <a>overlay scrollbar</a>.
git@18680	268
git@18680	269	<dt><dfn>''always''</dfn>
git@18680	270	<dd>The <a>scrollbar gutter</a> is always present when
git@18680	271	'overflow' is ''overflow/scroll'' or ''overflow/auto'',
git@18680	272	regardless of the type of scrollbar or
git@18680	273	of whether the box is overflowing.
git@18680	274
git@18680	275	<dt><dfn>''both''</dfn>
git@18680	276	<dd>If a <a>scrollbar gutter</a> would be present
git@18680	277	on one of the inline start edge or the inline end edge of the box,
git@18680	278	another <a>scrollbar gutter</a> must be present on the opposite edge as well.
git@18680	279
git@18680	280	<dt><dfn>''force''</dfn>
git@18680	281	<dd>When the ''scrollbar-gutter/force'' keyword is present
git@18680	282	''scrollbar-gutter/stable'' and ''scrollbar-gutter/always'' take effect
git@18680	283	when 'overflow' is ''overflow/visible'', ''overflow/hidden'' or ''overflow/clip''
git@18680	284	in addition ''overflow/auto'' or ''overflow/scroll''.
git@18680	285	This does not cause a scrollbar to be displayed, only a <a>scrollbar gutter</a>.
git@18680	286	</dl>
git@18680	287
git@18680	288	When the <a>scrollbar gutter</a> is present but the scrollbar is not,
git@18680	289	or the scrollbar is transparent or otherwise does not fully obscure the <a>scrollbar gutter</a>,
git@18680	290	the background of the <a>scrollbar gutter</a> must be painted as an extension of the padding.
git@18680	291
git@18680	292	<div class=note>
git@18680	293	Note: The following table summarises the interaction of 'overflow' and 'scrollbar-gutter',
git@18680	294	showing in which case space is reserved for the <a>scrollbar gutter</a>.
git@18680	295	In this table, “G” represents cases where space is reserved for the <a>scrollbar gutter</a>,
git@18680	296	“f?” cases where space is reserved for the <a>scrollbar gutter</a>
git@18680	297	if ''scrollbar-gutter/force'' was specified,
git@18680	298	and empty cells cases where the no space is reserved.
git@18680	299
git@18680	300	<table class=data>
git@18680	301	<thead>
git@18680	302	<tr>
git@18680	303	<td>
git@18680	304	<td>
git@18680	305	<th colspan=2>Classic scrollbars
git@18680	306	<th colspan=2>Overlay scrollbars
git@18680	307	<tr>
git@18680	308	<th>'overflow'
git@18680	309	<th>'scrollbar-gutter'
git@18680	310	<th>Overflowing
git@18680	311	<th>Not overflowing
git@18680	312	<th>Overflowing
git@18680	313	<th>Not overflowing
git@18680	314	</thead>
git@18680	315	<tr>
git@18680	316	<th rowspan=3>'overflow/scroll'
git@18680	317	<th>''scrollbar-gutter/auto''
git@18680	318	<td>G
git@18680	319	<td>G
git@18680	320	<td>
git@18680	321	<td>
git@18680	322	<tr>
git@18680	323	<th>''scrollbar-gutter/stable''
git@18680	324	<td>G
git@18680	325	<td>G
git@18680	326	<td>
git@18680	327	<td>
git@18680	328	<tr>
git@18680	329	<th>''scrollbar-gutter/always''
git@18680	330	<td>G
git@18680	331	<td>G
git@18680	332	<td>G
git@18680	333	<td>G
git@18680	334	<tr>
git@18680	335	<th rowspan=3>''overflow/auto''
git@18680	336	<th>''scrollbar-gutter/auto''
git@18680	337	<td>G
git@18680	338	<td>
git@18680	339	<td>
git@18680	340	<td>
git@18680	341	<tr>
git@18680	342	<th>''scrollbar-gutter/stable''
git@18680	343	<td>G
git@18680	344	<td>G
git@18680	345	<td>
git@18680	346	<td>
git@18680	347	<tr>
git@18680	348	<th>''scrollbar-gutter/always''
git@18680	349	<td>G
git@18680	350	<td>G
git@18680	351	<td>G
git@18680	352	<td>G
git@18680	353	<tr>
git@18680	354	<th rowspan=3>''overflow/visible'', ''overflow/hidden'', ''overflow/clip''
git@18680	355	<th>''scrollbar-gutter/auto''
git@18680	356	<td>
git@18680	357	<td>
git@18680	358	<td>
git@18680	359	<td>
git@18680	360	<tr>
git@18680	361	<th>''scrollbar-gutter/stable''
git@18680	362	<td>f?
git@18680	363	<td>f?
git@18680	364	<td>
git@18680	365	<td>
git@18680	366	<tr>
git@18680	367	<th>''scrollbar-gutter/always''
git@18680	368	<td>f?
git@18680	369	<td>f?
git@18680	370	<td>f?
git@18680	371	<td>f?
git@18680	372	</table>
git@18680	373	</div>
florian@15277	374
florian@15278	375	<h2 id="fragmentation">Fragmentation of overflow</h2>
florian@15277	376
florian@15279	377	The 'continue' property gives authors the ability
florian@15279	378	to request that content that does not fit inside an element
florian@15279	379	be fragmented (in the sense of [[!CSS3-BREAK]]),
florian@15279	380	and provides alternatives
florian@15279	381	for where the remaining content should continue.
florian@15279	382
florian@15279	383	Notably, this property explains traditional pagination,
florian@15279	384	and extends it further.
florian@15279	385
florian@15278	386	<pre class=propdef>
florian@15278	387	Name: continue
jackalmage@15301	388	Value: ''auto'' | ''overflow'' | ''paginate'' | ''fragments'' | ''discard''
florian@15293	389	Initial: auto
florian@15278	390	Applies to: block containers [[!CSS21]], flex containers [[!CSS3-FLEXBOX]], and grid containers [[!CSS3-GRID-LAYOUT]]
florian@15278	391	Inherited: no
florian@15278	392	Percentages: N/A
florian@15278	393	Media: visual
florian@15278	394	Computed value: see below
florian@15278	395	Animatable: no
florian@15278	396	Canonical order: <abbr title="follows order of property value definition">per grammar</abbr>
florian@15278	397	</pre>
florian@15277	398
florian@15282	399	Issue: The naming of this property and its values is preliminary.
florian@15282	400	This was initially proposed as
florian@15282	401	"fragmentation: auto | none | break | clone | page"
florian@15282	402	in <a href="https://lists.w3.org/Archives/Public/www-style/2015Jan/0357.html">https://lists.w3.org/Archives/Public/www-style/2015Jan/0357.html</a>,
florian@15282	403	and there is not yet wide agreement as to which naming is better.
florian@15277	404
florian@15284	405	Issue: This property is meant to generalize and replace 'region-fragment'.
florian@15284	406	Once it is sufficiently stable in this specification,
florian@15284	407	'region-fragment' should be removed from the regions specification in favor of this.
florian@15284	408
florian@15278	409	Note: ''continue: fragments'' replaces "overflow:fragments"
florian@15278	410	from earlier versions of this specification,
florian@15278	411	while ''continue: paginate'' replaces "overflow: paged-x | paged-y | paged-x-controls | paged-y-controls"
florian@15277	412
florian@15278	413	<dl dfn-for="continue" dfn-type="value">
florian@15293	414	<dt><dfn>auto</dfn>
florian@15293	415	<dd>''continue/auto'' may only occur as a computed value
florian@15279	416	if the element is a <a spec="css-regions">CSS Region</a>
florian@15293	417	other than the last one in a <a spec="css-regions">region chain</a>.
florian@15293	418	Content that doesn't fit is pushed to the next region of the chain.
florian@15293	419
florian@15293	420	In all other cases, ''continue/auto'' computes to one of the other values.
florian@15278	421
florian@15278	422	<dt><dfn>overflow</dfn>
florian@15278	423	<dd>Content that doesn't fit overflows, according to the 'overflow' property
florian@15278	424
florian@15278	425	<dt><dfn>discard</dfn>
florian@15278	426	<dd>Content that doesn't fit is discarded at a fragmentation break
florian@15278	427
florian@15278	428	Note: generalized from region-fragment: break; on the last region of a region chain
florian@15278	429
florian@15279	430	Issue: When the element isn't a <a spec="css-break">fragmentation container</a> already,
florian@15279	431	should this work by turning it directly into one,
florian@15279	432	or by creating a <a>fragment box</a> inside it like ''continue/fragments'' does?
florian@15278	433
florian@15278	434	<dt><dfn>paginate</dfn>
florian@15278	435	<dd>Content that doesn't fit paginates.
florian@15278	436	This creates a paginated view inside the element
florian@15278	437	similar to the way that 'overflow: scroll' creates a scrollable view.
florian@15278	438
florian@15279	439	See <a href="#paginated-overflow">paginated overflow</a>
florian@15278	440
florian@15278	441	Note: Print is effectively "continue: paginate" on the root.
dbaron@7811	442	<dt><dfn>fragments</dfn>
florian@15278	443	<dd>content that doesn't fit causes the element to copy itself and continue laying out.
florian@15279	444
florian@15278	445	See <a href="#fragment-overflow">fragment overflow</a>.
dbaron@7811	446	</dl>
dbaron@7811	447
florian@15279	448	The computed value of the 'continue' for a given element or pseudo element is determined as follow:
florian@15279	449	<ol>
florian@15293	450	<li>If the specified value is ''continue/auto''
florian@15279	451	<ol>
florian@15279	452	<li>On a <a spec="css-regions">CSS Region</a> other than the last one in a <a spec="css-regions">region chain</a>,
florian@15293	453	the computed value is ''continue/auto''
florian@15279	454	<li>On a page
florian@15279	455	the computed value is ''continue/paginate''
florian@15279	456	<li>On a <a>fragment box</a>
florian@15279	457	the computed value is ''continue/fragments''
florian@15283	458	<li>Otherwise, the computed value is ''continue/overflow''
florian@15279	459	</ol>
florian@15279	460	<li>If the specified value is ''continue/framgents''
florian@15279	461	<ol>
florian@15279	462	<li>On a page
florian@15279	463	the computed value is ''continue/paginate''
florian@15279	464	<li>Otherwise, the computed value is the specified value
florian@15279	465	</ol>
florian@15279	466	<li>In all other cases, the computed value is the specified value
florian@15279	467	</ol>
florian@15279	468
florian@15280	469	Issue: If we introduce a pseudo element that can select columns in a multicol,
florian@15293	470	we would need to specify that auto computes to auto on it,
florian@15293	471	or introduce a new value and have auto compute to that
florian@15280	472	(but what would that value compute to on things that aren't columns?).
florian@15280	473
florian@15278	474	Note: For background discussions leading to this property, see these threads:
florian@15278	475	<a href="http://lists.w3.org/Archives/Public/www-style/2012May/1197.html">discussion of overflow, overflow-x, overflow-y and overflow-style</a> and
florian@15278	476	<a href="https://lists.w3.org/Archives/Public/www-style/2015Jan/0357.html">proposal for a fragmentation property</a>
dbaron@14821	477
dbaron@6470	478	<h2 id="paginated-overflow">Paginated overflow</h2>
dbaron@6470	479
florian@15278	480	This section introduces and defines the meaning of the ''continue/paginate'' value of the 'continue' property.
dbaron@6470	481
florian@15278	482	Issue: Write this section
florian@15278	483
florian@15281	484	Issue: Pages should be possible to style with @page rules. How does that work for nested pages?
florian@15281	485
florian@15281	486	<div class="issue">
florian@15281	487	Should traditional pagination (e.g. when printing)
florian@15293	488	be expressed through some magic in the computed value of ''continue/auto'',
florian@15281	489	or by inserting this in the UA stylesheet:
florian@15281	490	<pre><code class="lang-css">
florian@15281	491	@media (overflow-block: paged), (overflow-block: optional-paged) {
florian@15281	492	:root {
florian@15281	493	continue: paginate;
florian@15281	494	}
florian@15281	495	}
florian@15281	496	</code></pre>
florian@15281	497	</div>
florian@15281	498
florian@15281	499	Issue: Traditional pagination (e.g. when printing) assumes that
florian@15281	500	:root is contained in the page box,
florian@15281	501	rather than having the page box be a pseudo element child of :root.
florian@15281	502	Can we work around that using something similar to fragment boxes?
florian@15281	503	Or maybe by having a fragment box (reproducing :root) inside a page box inside :root?
florian@15281	504
florian@15281	505	Issue: How does the page box model work when it is a child of a regular css box?
florian@15281	506
florian@15278	507	Issue: The initial proposal in [[CSS3GCPM]] and implemantation from Opera
florian@15278	508	used 4 values instead of ''continue/paginate'':
florian@15278	509	"paged-x | paged-y | paged-x-controls | paged-y-controls".
florian@15278	510	Should this property also include these values,
florian@15278	511	or are they better handled as separate properties?
florian@15278	512	(e.g.: "pagination-layout: auto | horizontal | vertical", "pagination-controls: auto | none")
florian@15278	513
florian@15278	514	Issue: Ability to display N pages at once
florian@15278	515	rather than just one page at once?
florian@15278	516	Could this be a value of "pagination-layout", such as:
florian@15278	517	"pagination-layout: horizontal 2;"
dbaron@6470	518
florian@15303	519	Issue: Brad Kemper has proposed a model for combining pagination and
florian@15303	520	fragment overflow, which also deals with displaying multiple pages.
florian@15303	521	<a href="http://www.w3.org/mid/[email protected]">http://www.w3.org/mid/[email protected]</a>
florian@15303	522
dbaron@6497	523	<p class="issue">
dbaron@6497	524	The current implementation of paginated overflow uses
dbaron@6497	525	the 'overflow'/'overflow-x'/'overflow-y' properties
dbaron@6497	526	rather than the 'overflow-style' property as proposed
dbaron@6497	527	in the [[CSS3GCPM]] draft
dbaron@6497	528	(which also matches the [[CSS3-MARQUEE]] proposal).
florian@15278	529	or the 'continue' property as described here.
dbaron@6497	530	</p>
dbaron@6497	531
dbaron@6484	532	<h2 id="fragment-overflow">Fragment overflow</h2>
dbaron@6470	533
florian@15278	534	This section introduces and defines the meaning of
florian@15278	535	the ''continue/fragments'' value of the 'continue' property.
dbaron@6470	536
dbaron@6470	537	<p>
florian@15278	538	When the computed value of 'continue' for an element is ''continue/fragments'',
dbaron@6470	539	and implementations would otherwise have created a box for the element,
dbaron@6491	540	then implementations must create a sequence of <dfn>fragment box</dfn>es
dbaron@6470	541	for that element.
florian@15278	542	(It is possible for an element with ''continue: fragments''
dbaron@15115	543	to generate only one <a>fragment box</a>.
florian@15278	544	However, if an element's computed 'continue' is not ''continue/fragments'',
dbaron@15115	545	then its box is not a <a>fragment box</a>.)
dbaron@15115	546	Every <a>fragment box</a> is a fragmentation container,
dbaron@6491	547	and any overflow
dbaron@6491	548	that would cause that fragmentation container to fragment
dbaron@15115	549	causes another <a>fragment box</a> created as a next sibling
dbaron@6470	550	of the previous one.
dbaron@6470	551	<span class="issue">Or is it as though it's a next sibling of
dbaron@6470	552	the element? Need to figure out exactly how this interacts with
dbaron@6470	553	other box-level fixup.</span>
dbaron@15115	554	Additionally, if the <a>fragment box</a> is also
dbaron@6492	555	a multi-column box (as defined in [[!CSS3COL]]
dbaron@6492	556	<span class="issue">though it defines <i>multi-column element</i></span>)
dbaron@15115	557	any content that would lead to the creation of <a>overflow columns</a> [[!CSS3COL]]
dbaron@6492	558	instead is flown into an additional fragment box.
dbaron@6491	559	However, fragment boxes may themselves be broken
dbaron@6491	560	(due to fragmentation in a fragmentation context outside of them,
dbaron@6491	561	such as pages, columns, or other fragment boxes);
dbaron@6491	562	such breaking leads to fragments of the same fragment box
dbaron@6491	563	rather than multiple fragment boxes.
dbaron@6491	564	(This matters because fragment boxes may be styled by their index;
dbaron@6491	565	such breaking leads to multiple fragments of a fragment box
dbaron@6491	566	with a single index.
dbaron@6491	567	This design choice is so that
dbaron@6491	568	breaking a fragment box across pages does not break
dbaron@6491	569	the association of indices to particular pieces of content.)
dbaron@6491	570	<span class="issue">Should a forced break that breaks to
dbaron@6491	571	an outer fragmentation context cause a new fragment of a single
dbaron@6491	572	fragment box or a new fragment box?</span>
dbaron@6491	573	<span class="issue">Should we find a term other than
dbaron@15115	574	<a>fragment box</a> here to make this a little less confusing?</span>
dbaron@6470	575	</p>
dbaron@6470	576
dbaron@6470	577	<p class="issue">
dbaron@6491	578	What if we want to be able to style the pieces of an element
dbaron@6491	579	split within another type of fragmentation context?
dbaron@6491	580	These rules prevent ever using ''::nth-fragment()'' for that,
dbaron@6491	581	despite that the name seems the most logical name for such a feature.
dbaron@6470	582	</p>
dbaron@6470	583
dbaron@6475	584	<div class="example">
dbaron@6477	585	<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
dbaron@6475	586	&lt;title&gt;Breaking content into
dbaron@6475	587	equal-sized cards&lt;/title&gt;
dbaron@6475	588	&lt;style&gt;
dbaron@6475	589	.in-cards {
florian@15278	590	continue: fragments;
dbaron@6475	591
dbaron@6475	592	width: 13em;
dbaron@6475	593	height: 8em;
dbaron@6475	594
dbaron@6475	595	padding: 4px;
dbaron@6475	596	border: medium solid blue;
dbaron@6475	597	margin: 6px;
dbaron@6475	598
dbaron@6475	599	font: medium/1.3 Times New
dbaron@6475	600	Roman, Times, serif;
dbaron@6475	601	}
dbaron@6475	602	&lt;/style&gt;
dbaron@6475	603	&lt;div class="in-cards"&gt;
dbaron@6475	604	In this example, the text in the div
dbaron@6475	605	is broken into a series of cards.
dbaron@6475	606	These cards all have the same style.
dbaron@6475	607	The presence of enough content to
dbaron@6475	608	overflow one of the cards causes
dbaron@6475	609	another one to be created. The second
dbaron@6475	610	card is created just like it's the
dbaron@6475	611	next sibling of the first.
dbaron@6477	612	&lt;/div&gt;</pre></td><td>
dbaron@6475	613	<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>
dbaron@6475	614	<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>
dbaron@6475	615	</td></tr></table>
dbaron@6475	616	</div>
dbaron@6475	617
dbaron@6487	618	<p class="issue">
florian@15278	619	We should specify that ''continue: fragments'' does not apply
dbaron@6487	620	to at least some table parts,
dbaron@6487	621	and perhaps other elements as well.
dbaron@6487	622	We need to determine exactly which ones.
dbaron@6487	623	</p>
dbaron@6487	624
dbaron@6488	625	<p class="issue">
dbaron@6488	626	This specification needs to say which type of
dbaron@6488	627	fragmentation context is created
dbaron@15113	628	so that it's clear which values of the 'break-*' properties
dbaron@6488	629	cause breaks within this context.
dbaron@15113	630	We probably want ''break-*: region'' to apply.
dbaron@6488	631	</p>
dbaron@6488	632
dbaron@6494	633	<p class="issue">
dbaron@6494	634	This specification needs a processing model
dbaron@6494	635	that will apply in cases where the layout containing the
dbaron@6494	636	fragments has characteristics that use the intrinsic size of the fragments
dbaron@6494	637	to change the amount of space available for them,
dbaron@6494	638	such as [[CSS3-GRID-LAYOUT]].
dbaron@6494	639	There has already been some work on such a processing model
dbaron@6494	640	in [[CSS3-REGIONS]],
dbaron@6494	641	and the work done on a model there,
dbaron@6494	642	and the editors of that specification,
dbaron@6494	643	should inform what happens in this specification.
dbaron@6494	644	</p>
dbaron@6494	645
dbaron@6484	646	<h3 id="fragment-styling">Fragment styling</h3>
dbaron@6470	647
dbaron@6484	648	<h4 id="fragment-pseudo-element">The ::nth-fragment() pseudo-element</h4>
dbaron@6470	649
dbaron@6470	650	<p>
dbaron@15120	651	The <dfn selector>::nth-fragment()</dfn> pseudo-element
dbaron@15120	652	is a pseudo-element
dbaron@15115	653	that describes some of the <a>fragment box</a>es generated by an element.
dbaron@6470	654	The argument to the pseudo-element takes the same syntax
dbaron@6470	655	as the argument to the :nth-child() pseudo-class
dbaron@6470	656	defined in [[!SELECT]], and has the same meaning
dbaron@6470	657	except that the number is relative to
dbaron@15115	658	<a>fragment box</a>es generated by the element
dbaron@6470	659	instead of siblings of the element.
dbaron@6470	660	</p>
dbaron@6470	661
dbaron@6470	662	<p class="note">
dbaron@6484	663	Selectors that allow addressing fragments
dbaron@6470	664	by counting from the end rather than the start
dbaron@6470	665	are intentionally not provided.
dbaron@6470	666	Such selectors would interfere with determining
dbaron@6484	667	the number of fragments.
dbaron@6470	668	</p>
dbaron@6470	669
dbaron@6489	670	<p class="issue">
dbaron@6489	671	Depending on future discussions,
dbaron@6489	672	this ''::nth-fragment(<var>an+b</var>)'' syntax
dbaron@6489	673	may be replaced with
dbaron@6489	674	the new ''::fragment:nth(<var>an+b</var>)'' syntax.
dbaron@6489	675	</p>
dbaron@6489	676
dbaron@6484	677	<h4 id="style-of-fragments">Styling of fragments</h4>
dbaron@6470	678
dbaron@6470	679	<p class="issue">
florian@15278	680	Should this apply to continue:fragments only,
florian@15278	681	or also to continue:paginate?
dbaron@6470	682	(If it applies,
dbaron@6470	683	then stricter property restrictions would be needed
florian@15278	684	for continue:paginate.)
dbaron@6470	685	</p>
dbaron@6470	686
dbaron@6470	687	<p>
dbaron@6484	688	In the absence of rules with ''::nth-fragment()'' pseudo-elements,
dbaron@15115	689	the computed style for each <a>fragment box</a>
dbaron@6470	690	is the computed style for the element
dbaron@15115	691	for which the <a>fragment box</a> was created.
dbaron@15115	692	However, the style for a <a>fragment box</a> is also influenced
dbaron@15115	693	by rules whose selector's <a>subject</a> [[!SELECT]]
dbaron@6484	694	has an ''::nth-fragment()'' pseudo-element,
dbaron@15115	695	if the 1-based number of the <a>fragment box</a> matches
dbaron@6484	696	that ''::nth-fragment()'' pseudo-element
dbaron@6484	697	and the selector (excluding the ''::nth-fragment()'' pseudo-element)
dbaron@6484	698	matches the element generating the fragments.
dbaron@6470	699	</p>
dbaron@6470	700
dbaron@6486	701	<p>
dbaron@15115	702	When determining the style of the <a>fragment box</a>,
dbaron@6486	703	these rules that match the fragment pseudo-element
dbaron@6486	704	cascade together with the rules that match the element,
dbaron@6486	705	with the fragment pseudo-element adding the specificity
dbaron@6486	706	of a pseudo-class to the specificity calculation.
dbaron@6486	707	<span class="issue">Does this need to be specified in
dbaron@6486	708	the cascading module as well?</span>
dbaron@6486	709	</p>
dbaron@6486	710
dbaron@6477	711	<div class="example">
dbaron@6477	712	<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
dbaron@6477	713	&lt;style&gt;
dbaron@6477	714	.bouncy-columns {
florian@15278	715	continue: fragments;
dbaron@6477	716	width: 6em;
dbaron@6477	717	height: 10em;
dbaron@6477	718	float: left;
dbaron@6477	719	margin: 1em;
dbaron@6477	720	font: medium/1.25 Times New
dbaron@6477	721	Roman, Times, serif;
dbaron@6477	722	}
dbaron@6484	723	.bouncy-columns::nth-fragment(1) {
dbaron@6477	724	background: aqua; color: black;
dbaron@6477	725	transform: rotate(-3deg);
dbaron@6477	726	}
dbaron@6484	727	.bouncy-columns::nth-fragment(2) {
dbaron@6477	728	background: yellow; color: black;
dbaron@6477	729	transform: rotate(3deg);
dbaron@6477	730	}
dbaron@6477	731	&lt;/style&gt;
dbaron@6477	732	&lt;div class="bouncy-columns"&gt;
dbaron@6477	733	<i>...</i>
dbaron@6477	734	&lt;/div&gt;</pre></td><td>
dbaron@6477	735	<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>
dbaron@6477	736	<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>
dbaron@6484	737	<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>
dbaron@6477	738	</td></tr></table>
dbaron@6477	739	</div>
dbaron@6477	740
dbaron@6470	741	<p>
florian@15278	742	Styling an ''::nth-fragment()'' pseudo-element with the 'continue'
dbaron@6490	743	property does take effect;
dbaron@15115	744	if a <a>fragment box</a> has a
florian@15278	745	computed value of 'continue' other than ''fragments''
dbaron@6490	746	then that fragment box is the last fragment.
florian@15278	747	However, overriding 'continue' on the first fragment
dbaron@15115	748	does not cause the <a>fragment box</a> not to exist;
dbaron@6490	749	whether there are fragment boxes at all is determined by
dbaron@6490	750	the computed value of overflow for the element.
dbaron@6470	751	</p>
dbaron@6470	752
dbaron@6470	753	<p>
dbaron@6485	754	Styling an ''::nth-fragment()'' pseudo-element with the 'content'
dbaron@6485	755	property has no effect;
dbaron@6485	756	the computed value of 'content' for the fragment box
dbaron@6485	757	remains the same as the computed value of content for the element.
dbaron@6485	758	</p>
dbaron@6485	759
dbaron@6485	760	<p>
dbaron@15115	761	Specifying ''display: none'' for a <a>fragment box</a> causes
dbaron@6484	762	the fragment box with that index not to be generated.
dbaron@6470	763	However, in terms of the indices
dbaron@6484	764	used for matching ''::nth-fragment()'' pseudo-elements
dbaron@6484	765	of later fragment boxes,
dbaron@6470	766	it still counts as though it was generated.
dbaron@6470	767	However, since it is not generated, it does not contain any content.
dbaron@6470	768	</p>
dbaron@6470	769
dbaron@7813	770	<p>
dbaron@7813	771	Specifying other values of 'display', 'position',
dbaron@7813	772	or 'float' is permitted, but is not allowed to change
dbaron@7813	773	the computed value of 'display-inside'.
florian@15278	774	(Since 'continue' only
florian@15278	775	applies to block containers, flex containers, and grid containers
dbaron@7813	776	the computed value of 'display-inside' is always
dbaron@15115	777	''display-inside/block'', ''display-inside/flex'', or
dbaron@15115	778	''display-inside/grid''.
dbaron@7813	779	<span class="issue">Need to specify exactly how this works,
dbaron@7813	780	but it depends on
dbaron@7813	781	having 'display-inside' and 'display-outside' specified.</span>
dbaron@6470	782	</p>
dbaron@6470	783
dbaron@6470	784	<p>
dbaron@6470	785	To match the model for other pseudo-elements
dbaron@6470	786	where the pseudo-elements live inside their corresponding element,
dbaron@6484	787	declarations in ''::nth-fragment()'' pseudo-elements override
dbaron@6470	788	declarations in rules without the pseudo-element.
dbaron@6470	789	The relative priority within such declarations is determined
dbaron@6470	790	by normal cascading order (see [[!CSS21]]).
dbaron@6470	791	</p>
dbaron@6470	792
dbaron@6470	793	<p>
dbaron@6484	794	Styles specified on ''::nth-fragment()'' pseudo-elements
dbaron@15115	795	do affect inheritance to content within the <a>fragment box</a>.
dbaron@15115	796	In other words, the content within the <a>fragment box</a> must
dbaron@6484	797	inherit from the fragment box's style (i.e., the pseudo-element style)
dbaron@6470	798	rather than directly from the element.
dbaron@6484	799	This means that elements split between fragment boxes may
dbaron@6470	800	have different styles for different parts of the element.
dbaron@6470	801	</p>
dbaron@6470	802
dbaron@6472	803	<p class="issue">
dbaron@6472	804	This inheritance rule allows specifying styles indirectly
dbaron@6472	805	(by using explicit ''inherit'' or using default inheritance
dbaron@15117	806	on properties that don't apply to ''::first-letter'')
dbaron@6472	807	that can't be specified directly
dbaron@6472	808	(based on the rules in the next section).
dbaron@6472	809	This is a problem.
dbaron@6484	810	The restrictions that apply to styling inside fragments
dbaron@6484	811	should also apply to inheritance from fragments.
dbaron@6472	812	</p>
dbaron@6472	813
dbaron@6480	814	<div class="example">
dbaron@6480	815	<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
dbaron@6480	816	&lt;style&gt;
dbaron@6480	817	.article {
florian@15278	818	continue: fragments;
dbaron@6480	819	}
dbaron@6484	820	.article::nth-fragment(1) {
dbaron@6480	821	font-size: 1.5em;
dbaron@6480	822	margin-bottom: 1em;
dbaron@6480	823	height: 4em;
dbaron@6480	824	}
dbaron@6491	825	.article::nth-fragment(2) {
dbaron@6480	826	margin-left: 5em;
dbaron@6480	827	margin-right: 2em;
dbaron@6480	828	}
dbaron@6480	829	&lt;/style&gt;
dbaron@6480	830	&lt;div class="article"&gt;
dbaron@6480	831	The &lt;code&gt;font-size&lt;/code&gt; property<i>...</i>
dbaron@6480	832	&lt;/div&gt;</pre></td><td>
dbaron@6484	833	<div class="article-font-inherit-demo one">The <code>font-size</code> property<br>specified on the fragment<br>is inherited into the</div>
dbaron@6484	834	<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>
dbaron@6480	835	</td></tr></table>
dbaron@6480	836	</div>
dbaron@6478	837
dbaron@6484	838	<h4 id="style-in-fragments">Styling inside fragments</h4>
dbaron@6470	839
dbaron@6470	840	<p class="issue">
florian@15278	841	Should this apply to continue:fragments only,
florian@15278	842	or also to continue:paginate?
dbaron@6470	843	</p>
dbaron@6470	844
dbaron@6470	845	<p>
dbaron@6484	846	The ''::nth-fragment()'' pseudo-element
dbaron@6470	847	can also be used to style
dbaron@15115	848	content inside of a <a>fragment box</a>.
dbaron@6470	849	Unlike the ''::first-line'' and ''::first-letter'' pseudo-elements,
dbaron@6484	850	the ''::nth-fragment()'' pseudo-element can be applied
dbaron@6470	851	to parts of the selector other than the subject:
dbaron@6470	852	in particular, it can match ancestors of the subject.
dbaron@6470	853	However, the only CSS properties applied
dbaron@6470	854	by rules with such selectors
dbaron@6470	855	are those that apply
dbaron@6470	856	to the ''::first-letter'' pseudo-element.
dbaron@6470	857	</p>
dbaron@6470	858
dbaron@6470	859	<p>
dbaron@6470	860	To be more precise,
dbaron@6484	861	when a rule's selector has ''::nth-fragment()'' pseudo-elements
dbaron@6470	862	attached to parts of the selector other than the subject,
dbaron@6470	863	the declarations in that rule apply to
dbaron@6470	864	a fragment (or pseudo-element thereof) when:
dbaron@6470	865	</p>
dbaron@6470	866	<ol>
dbaron@6470	867	<li>
dbaron@6470	868	the declarations are for properties that apply to the
dbaron@6470	869	''::first-letter'' pseudo-element,
dbaron@6470	870	</li>
dbaron@6470	871	<li>
dbaron@6470	872	the declarations would apply to
dbaron@6470	873	that fragment (or pseudo-element thereof)
dbaron@6484	874	had those ''::nth-fragment()'' pseudo-elements been removed,
dbaron@6470	875	with a particular association between
dbaron@6470	876	each sequence of simple selectors and the element it matched,
dbaron@6470	877	and
dbaron@6470	878	</li>
dbaron@6470	879	<li>
dbaron@6484	880	for each removed ''::nth-fragment()'' pseudo-element,
dbaron@15115	881	the fragment lives within a <a>fragment box</a>
dbaron@6470	882	of the element associated in that association
dbaron@6470	883	with the selector that the pseudo-element was attached to,
dbaron@6470	884	and whose index matches the pseudo-element.
dbaron@6470	885	</li>
dbaron@6470	886	</ol>
dbaron@6470	887
dbaron@6481	888	<div class="example">
dbaron@6481	889	<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
dbaron@6481	890	&lt;style&gt;
dbaron@6481	891	.dark-columns {
florian@15278	892	continue: fragments;
dbaron@6481	893	width: 6em;
dbaron@6481	894	height: 10em;
dbaron@6481	895	float: left;
dbaron@6481	896	margin-right: 1em;
dbaron@6481	897	font: medium/1.25 Times New
dbaron@6481	898	Roman, Times, serif;
dbaron@6481	899	}
dbaron@6484	900	.dark-columns::nth-fragment(1) {
dbaron@6481	901	background: aqua; color: black;
dbaron@6481	902	}
dbaron@6484	903	.dark-columns::nth-fragment(1) :link {
dbaron@6481	904	color: blue;
dbaron@6481	905	}
dbaron@6484	906	.dark-columns::nth-fragment(1) :visited {
dbaron@6481	907	color: purple;
dbaron@6481	908	}
dbaron@6484	909	.dark-columns::nth-fragment(2) {
dbaron@6481	910	background: navy; color: white;
dbaron@6481	911	}
dbaron@6484	912	.dark-columns::nth-fragment(2) :link {
dbaron@6481	913	color: aqua;
dbaron@6481	914	}
dbaron@6484	915	.dark-columns::nth-fragment(2) :visited {
dbaron@6481	916	color: fuchsia;
dbaron@6481	917	}
dbaron@6481	918	&lt;/style&gt;
dbaron@6481	919	&lt;div class="dark-columns"&gt;
dbaron@6481	920	<i>...</i>
dbaron@6481	921	&lt;/div&gt;</pre></td><td>
dbaron@6484	922	<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>
dbaron@6484	923	<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>
dbaron@6481	924	</td></tr></table>
dbaron@6481	925	</div>
dbaron@6481	926
dbaron@6478	927
dbaron@6470	928	<h3 id="max-lines">The 'max-lines' property</h3>
dbaron@6470	929
dbaron@6470	930	<p>
dbaron@6470	931	Authors may wish to style the opening lines of an element
dbaron@6470	932	with different styles
dbaron@6484	933	by putting those opening lines in a separate fragment.
dbaron@6470	934	However, since it may be difficult to predict the exact height
dbaron@6470	935	occupied by those lines
dbaron@6484	936	in order to restrict the first fragment to that height,
dbaron@6470	937	this specification introduces a 'max-lines' property
dbaron@6484	938	that forces a fragment to break
dbaron@6470	939	after a specified number of lines.
dbaron@6470	940	This forces a break after the given number of lines
dbaron@6470	941	contained within the element or its descendants,
dbaron@6470	942	as long as those lines are in the same block formatting context.
dbaron@6470	943	</p>
dbaron@6470	944
dbaron@15119	945	<pre class=propdef>
dbaron@15119	946	Name: max-lines
jackalmage@15301	947	Value: ''none'' | ''&lt;integer>''
dbaron@15180	948	Initial: ''none''
dbaron@15119	949	Applies to: fragment boxes
dbaron@15119	950	Inherited: no
peter@16989	951	Animatable: as <a href="https://www.w3.org/TR/css3-transitions/#animatable-types">integer</a>
dbaron@15119	952	Percentages: N/A
dbaron@15119	953	Media: visual
dbaron@15119	954	Computed value: specified value
dbaron@15119	955	Canonical order: <abbr title="follows order of property value definition">per grammar</abbr>
dbaron@15119	956	</pre>
dbaron@6470	957
dbaron@15115	958	<dl dfn-for="max-lines" dfn-type="value">
dbaron@15115	959	<dt><dfn>none</dfn>
dbaron@6470	960	<dd>
dbaron@6470	961	<p>
dbaron@6470	962	Breaks occur only as specified elsewhere.
dbaron@6470	963	</p>
dbaron@6470	964	</dd>
dbaron@6470	965
dbaron@15181	966	<dt><dfn><<integer>></dfn>
dbaron@6470	967	<dd>
dbaron@6470	968	<p>
dbaron@6470	969	In addition to any breaks specified elsewhere,
dbaron@6470	970	a break is forced before any line that would exceed
dbaron@6470	971	the given number of lines
dbaron@6470	972	being placed inside the element
dbaron@6470	973	(excluding lines that are in
dbaron@6470	974	a different block formatting context from
dbaron@6470	975	the block formatting context to which
dbaron@6470	976	an unstyled child of the element would belong).
dbaron@6470	977	</p>
dbaron@6470	978
dbaron@6470	979	<p class="issue">
dbaron@6470	980	If there are multiple boundaries between this line
dbaron@6470	981	and the previous, where exactly (in terms of element
dbaron@6470	982	boundaries) is the break forced?
dbaron@6470	983	</p>
dbaron@6470	984
dbaron@6470	985	<p>
dbaron@6470	986	Only positive integers are accepted.
dbaron@6470	987	Zero or negative integers are a parse error.
dbaron@6470	988	</p>
dbaron@6470	989	</dd>
dbaron@6470	990	</dl>
dbaron@6470	991
dbaron@6484	992	<p class="issue">Should this apply to fragment overflow only, or also
florian@15296	993	to pagination?
florian@15296	994	Given what we're doing with the continue property,
florian@15296	995	it should actually apply to any fragmentainer.</p>
florian@15296	996
florian@15296	997	Issue: having max-lines do nothing on regular elements is not ideal.
florian@15296	998	When applied to non fragmentainers,
florian@15296	999	it should probably cause 'continue' to compute to ''continue/discard''
florian@15296	1000	so that you only need to reach for one property rather than 2 to get
florian@15296	1001	that effect.
dbaron@6470	1002
dbaron@6479	1003	<div class="example">
dbaron@6479	1004	<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
dbaron@6479	1005	&lt;style&gt;
dbaron@6479	1006	.article {
florian@15278	1007	continue: fragments;
dbaron@6479	1008	}
dbaron@6479	1009	.article::first-letter {
dbaron@6479	1010	font-size: 2em;
dbaron@6479	1011	line-height: 0.9;
dbaron@6479	1012	}
dbaron@6484	1013	.article::nth-fragment(1) {
dbaron@6479	1014	font-size: 1.5em;
dbaron@6479	1015	max-lines: 3;
dbaron@6479	1016	}
dbaron@6491	1017	.article::nth-fragment(2) {
dbaron@6479	1018	column-count: 2;
dbaron@6479	1019	}
dbaron@6479	1020	&lt;/style&gt;
dbaron@6479	1021	&lt;div class="article"&gt;
dbaron@6479	1022	<i>...</i>
dbaron@6479	1023	&lt;/div&gt;</pre></td><td>
dbaron@6479	1024	<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>
dbaron@6479	1025	<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>
dbaron@6479	1026	<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>
dbaron@6479	1027	</td></tr></table>
dbaron@6479	1028	</div>
dbaron@6478	1029
git@19333	1030	<h2 id="changes" class="no-num">
git@19333	1031	Changes</h2>
git@19333	1032	<h3 id="changes-l3">
git@19333	1033	Changes Since Level 3</h3>
dbaron@6493	1034
git@19333	1035	The following changes were made to this specification since the
git@19333	1036	<a href="https://drafts.csswg.org/css-overflow-3/">CSS Overflow Module Level 3</a>:
git@19333	1037
git@19333	1038	<ul>
git@19333	1039	<li>The Fragmentation of overflow, Paginated overflow, and Fragment overflow sections and subsections have been removed form Level 3 and moved to Level 4.
git@19333	1040	<li>The 'scrollbar-gutter' property has been added.
git@19333	1041	</ul>
dbaron@6493	1042
dbaron@6470	1043	<h2 class=no-num id="acknowledgments">
dbaron@6470	1044	Acknowledgments</h2>
dbaron@6470	1045
dbaron@6470	1046	<p>
dbaron@6470	1047	Thanks especially to the feedback from
dbaron@6496	1048	Rossen Atanassov,
dbaron@6496	1049	Bert Bos,
dbaron@6496	1050	Tantek Çelik,
dbaron@6496	1051	John Daggett,
dbaron@6496	1052	fantasai,
dbaron@6496	1053	Daniel Glazman,
dbaron@6496	1054	Vincent Hardy,
dbaron@6470	1055	H&aring;kon Wium Lie,
dbaron@6496	1056	Peter Linss,
dbaron@7815	1057	Robert O'Callahan,
dbaron@6470	1058	Florian Rivoal,
dbaron@6473	1059	Alan Stearns,
dbaron@6496	1060	Steve Zilles,
dbaron@6470	1061	and all the rest of the
dbaron@6470	1062	<a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.