[css-overflow-4] Refactor text

Move continue:collapse to be before continue:discard, and move details
of continue:discard to subsection.

See also #12795

Author: frivoal

css-overflow-4/Overview.bs

@@ -1051,14 +1051,24 @@ Fragmentation of Overflow: the 'continue' property</h3>
 			If the box has more content than can fit,
 			the excess content is handled according to the usual rules.
 
+		<dt><dfn>collapse</dfn>
+		<dd>
+			If the box is a [=block container=], then it must
+			[=establish an independent formatting context=] that also becomes a [=line-clamp container=].
+			This causes all content after the [=clamp point=] to be visually hidden, and to not be
+			taken into account for the box's [=automatic block size=].
+
+			If the box is a [=multicol container=],
+			the behavior is the same as 'continue/auto'.
+
 		<dt><dfn>discard</dfn>
 		<dd>
 			The box must [=establish an independent formatting context=]
 			and becomes a [=fragmentation container=]
 			that captures <a>region breaks</a>,
 			if it is not already.
 			[[!CSS-BREAK-3]]
-			Content after the first [=region break=] is not rendered (see below).
+			Content after the first [=region break=] is not rendered.
 
 			Note: This [=region break=] might be <a lt="forced break">forced</a>
 			(e.g. imposed by 'max-lines' or by another mechanism,
@@ -1070,103 +1080,7 @@ Fragmentation of Overflow: the 'continue' property</h3>
 			(such as pagination of this box itself)
 			do not cause any content to be discarded.
 
-			Additionally,
-			if the box is a [=multi-column container=],
-			any [=overflow columns=] are also not rendered,
-			nor is any subsequent content--
-			including any [=out of flow=] content
-			whose static position is in or after overflow columns,
-			nor is any additional [=multicol line=] or [=multicol row=]
-			that would be generated to hold such content.
-
-			<div class=example id=discard-overflow-column>
-				In the absence of the 'continue' property,
-				based on [[css-multicol-1 inline]],
-				the following markup and associated CSS would be expected
-				to render as follows.
-
-				<xmp highlight=markup>
-					<div class="multicol">
-						<p>Column 1</p>
-						<p>Column 2</p>
-						<p>Column 3</p>
-						<p>Overflow column
-							<div class="spanner">Spanner 1</div>
-						</p>
-						<div class="spanner">Spanner 2</div>
-						<p>Following 1</p>
-						<p>Following 2</p>
-						<p>Following 3</p>
-						<div class="spanner">Spanner 3</div>
-						<p>Following 4</p>
-						<p>Following 5</p>
-						<p>Following 6</p>
-					</div>
-				</xmp>
-				<pre><code highlight=css>
-					.multicol {
-					  columns: 3;
-					  border: solid 1px;
-					}
-					.multicol p {
-					  break-after: column;
-					  break-inside: avoid;
-					}
-					.spanner {
-					  column-span: all;
-					  text-align: center;
-					}
-				</code></pre>
-				<!--
-					ommitted because incidental to the example, but needed for an exact rendering:
-					p { margin: 0; }
-					.multicol {
-					  width: 47ch;
-					  font-family: monospace;
-					  gap: 1ch;
-					}
-				-->
-				<figure>
-				<pre id=sample-rendering-overflow-multicolumn-1 style="width: 63ch">
-				<div style="border:solid 1px; width: 47ch;">Column 1        Column 2        Column 3        Overflow column
-				                   Spanner 1
-				                   Spanner 2
-				Following 1     Following 2     Following 3
-				                   Spanner 3
-				Following 4     Following 5     Following 6
-				</div></pre>
-				</figure>
-
-				There is one overflow column,
-				a spanner whose static position is within that overflow column,
-				another spanner whose static position is after the overflow column,
-				inflow content after the spanners and the overflow column,
-				and another spanner whose static position is in this subsequent inflow content.
-
-				If we additionally apply the following style,
-				everything starting from and including the overflow column is discarded.
-
-				<pre><code highlight=css>
-					.multicol {
-					  continue: discard;
-					  block-ellipsis: auto;
-					}
-				</code></pre>
-				<figure>
-				<pre id=sample-rendering-overflow-multicolumn-2>
-				<div style="border:solid 1px; width: 47ch;">Column 1        Column 2        Column 3…</div></pre>
-				</figure>
-
-			</div>
-		<dt><dfn>collapse</dfn>
-		<dd>
-			If the box is a [=block container=], then it must
-			[=establish an independent formatting context=] that also becomes a [=line-clamp container=].
-			This causes all content after the [=clamp point=] to be visually hidden, and to not be
-			taken into account for the box's [=automatic block size=].
-
-			If the box is a [=multicol container=],
-			the behavior is the same as 'continue/auto'.
+			See [[#discarding-content]] for further details.
 	</dl>
 
 	<div class=example id=ex-continue-overflow>
@@ -1217,40 +1131,6 @@ Fragmentation of Overflow: the 'continue' property</h3>
 
 	</div>
 
-	Content that is “not rendered” due to ''continue: discard''
-	is discarded, similar to ''display: none'':
-		* It is not rendered.
-		* It is also not made available for speech rendering.
-		* It does not allow user interaction.
-		* Issue(2970): Make sure effects on OM are well defined
-		* Issue(2971): What about [=positioned=] elements whose static position is in the discarded content are not rendered?
-			See also discussions in the <a href="https://lists.w3.org/Archives/Public/www-style/2018Jul/0030.html">Sydney F2F meeting</a>.
-
-	However, since intrinsic sizes are calculated across <a>fragmentation containers</a>,
-	this content <em>is</em> taken into account
-	for the purpose of finding the box’s
-	<a lt="min-content inline size">min-content</a> and <a>max-content</a> <a>inline sizes</a>
-	(see [[css-break-3#varying-size-boxes]]).
-	<a lt="min-content inline size">Min-content</a> and <a>max-content</a> <a>block sizes</a>
-	are calculated based on the content
-	from the start of the [=fragmented flow=]
-	to the first [=forced break=] if any,
-	or to the end of the [=fragmented flow=] if there is no forced break.
-
-<!--
-	Calculating intrinsic block sizes to the first forced <em>or unforced</em> break
-	would cause intrinsic sizes to depend on layout, which would cause circularities.
--->
-
-	Note: This differs from the ''visibility: hidden''-like behavior
-	of content after the [=clamp point=] with ''continue: collapse''.
-
-	Note: In the case of <a href="https://www.w3.org/TR/css-break-3/#parallel-flows">parallel fragmentation flows</a>,
-	content occurring after the <a>fragmentation break</a> in the box tree
-	could still be rendered,
-	if it is laid out above the position
-	representing the end of this <a>fragmentation container</a>.
-
 	Additionaliy,
 	for compatibility (see [[#webkit-line-clamp]]),
 	when the [=computed value=] of the 'continue' property is ''collapse'', ''continue/-webkit-legacy'', or ''discard''
@@ -1331,6 +1211,130 @@ Fragmentation of Overflow: the 'continue' property</h3>
 	This is regardless of whether this would cause any content after the [=clamp point=]
 	to be within the container's bounds.
 
+<h4 id=discarding-content>Discarding Content</h4>
+
+	Content that is “not rendered” due to ''continue: discard''
+	is discarded, similar to ''display: none'':
+		* It is not rendered.
+		* It is also not made available for speech rendering.
+		* It does not allow user interaction.
+		* Issue(2970): Make sure effects on OM are well defined
+		* Issue(2971): What about [=positioned=] elements whose static position is in the discarded content are not rendered?
+			See also discussions in the <a href="https://lists.w3.org/Archives/Public/www-style/2018Jul/0030.html">Sydney F2F meeting</a>.
+
+	However, since intrinsic sizes are calculated across <a>fragmentation containers</a>,
+	this content <em>is</em> taken into account
+	for the purpose of finding the box’s
+	<a lt="min-content inline size">min-content</a> and <a>max-content</a> <a>inline sizes</a>
+	(see [[css-break-3#varying-size-boxes]]).
+	<a lt="min-content inline size">Min-content</a> and <a>max-content</a> <a>block sizes</a>
+	are calculated based on the content
+	from the start of the [=fragmented flow=]
+	to the first [=forced break=] if any,
+	or to the end of the [=fragmented flow=] if there is no forced break.
+
+<!--
+	Calculating intrinsic block sizes to the first forced <em>or unforced</em> break
+	would cause intrinsic sizes to depend on layout, which would cause circularities.
+-->
+
+	Note: This differs from the ''visibility: hidden''-like behavior
+	of content after the [=clamp point=] with ''continue: collapse''.
+
+	Note: In the case of <a href="https://www.w3.org/TR/css-break-3/#parallel-flows">parallel fragmentation flows</a>,
+	content occurring after the <a>fragmentation break</a> in the box tree
+	could still be rendered,
+	if it is laid out above the position
+	representing the end of this <a>fragmentation container</a>.
+
+	Additionally,
+	if the box is a [=multi-column container=],
+	any [=overflow columns=] are also not rendered,
+	nor is any subsequent content--
+	including any [=out of flow=] content
+	whose static position is in or after overflow columns,
+	nor is any additional [=multi-column line=] or [=multi-column row=]
+	that would be generated to hold such content.
+
+	<div class=example id=discard-overflow-column>
+		In the absence of the 'continue' property,
+		based on [[css-multicol-1 inline]],
+		the following markup and associated CSS would be expected
+		to render as follows.
+
+		<xmp highlight=markup>
+			<div class="multicol">
+				<p>Column 1</p>
+				<p>Column 2</p>
+				<p>Column 3</p>
+				<p>Overflow column
+					<div class="spanner">Spanner 1</div>
+				</p>
+				<div class="spanner">Spanner 2</div>
+				<p>Following 1</p>
+				<p>Following 2</p>
+				<p>Following 3</p>
+				<div class="spanner">Spanner 3</div>
+				<p>Following 4</p>
+				<p>Following 5</p>
+				<p>Following 6</p>
+			</div>
+		</xmp>
+		<pre><code highlight=css>
+			.multicol {
+			  columns: 3;
+			  border: solid 1px;
+			}
+			.multicol p {
+			  break-after: column;
+			  break-inside: avoid;
+			}
+			.spanner {
+			  column-span: all;
+			  text-align: center;
+			}
+		</code></pre>
+		<!--
+			ommitted because incidental to the example, but needed for an exact rendering:
+			p { margin: 0; }
+			.multicol {
+			  width: 47ch;
+			  font-family: monospace;
+			  gap: 1ch;
+			}
+		-->
+		<figure>
+		<pre id=sample-rendering-overflow-multicolumn-1 style="width: 63ch">
+		<div style="border:solid 1px; width: 47ch;">Column 1        Column 2        Column 3        Overflow column
+						   Spanner 1
+						   Spanner 2
+		Following 1     Following 2     Following 3
+						   Spanner 3
+		Following 4     Following 5     Following 6
+		</div></pre>
+		</figure>
+
+		There is one overflow column,
+		a spanner whose static position is within that overflow column,
+		another spanner whose static position is after the overflow column,
+		inflow content after the spanners and the overflow column,
+		and another spanner whose static position is in this subsequent inflow content.
+
+		If we additionally apply the following style,
+		everything starting from and including the overflow column is discarded.
+
+		<pre><code highlight=css>
+			.multicol {
+			  continue: discard;
+			  block-ellipsis: auto;
+			}
+		</code></pre>
+		<figure>
+		<pre id=sample-rendering-overflow-multicolumn-2>
+		<div style="border:solid 1px; width: 47ch;">Column 1        Column 2        Column 3…</div></pre>
+		</figure>
+	</div>
+
 <h2 id=sbg-ext class=nonum>
 Appendix A: Possible extensions for ''scrollbar-gutter''</h2>