Skip to content

Commit

Permalink
[css-overflow-4] Draft spec for continue: collapse (#7708)
Browse files Browse the repository at this point in the history
  • Loading branch information
andreubotella committed Sep 2, 2024
1 parent fb926e0 commit dd4fa98
Showing 1 changed file with 93 additions and 30 deletions.
123 changes: 93 additions & 30 deletions css-overflow-4/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -707,12 +707,15 @@ Indicating Block-Axis Overflow: the 'block-ellipsis' property</h3>
</pre>

This property allows inserting content into the last line box
before a (forced <em>or</em> unforced) <a>region break</a>
to indicate the continuity of truncated/interrupted content.
before a (forced <em>or</em> unforced) <a>region break</a> or a [=clamp point=]
to indicate the continuity of truncated / interrupted content.
It only affects line boxes contained directly by the <a>block container</a> itself,
but as it inherits, will have an effect on descendants’ line boxes unless overridden.
If the box contains no line box immediately preceding a <a>region break</a>,
then this property has no effect.

This property only affects a line box if there is eiher a [=region break=] or a [=clamp point=]
after it in the [=block formatting context=], and there are no boxes or line boxes in between.
If the [=clamp point=] is placed at the end of the [=line-clamp container=], then the line will
not be affected.

Note: See [[css-overflow-4#fragmentation]] for a way to generate boxes with such a [=region break=].

Expand Down Expand Up @@ -777,10 +780,12 @@ Indicating Block-Axis Overflow: the 'block-ellipsis' property</h3>
The [=block overflow ellipsis=] must not be included
in either the ''::first-letter'' nor the ''::first-line'' pseudo-elements.

If there is a subsequent <a>fragmentation container</a> in the [=fragmentation context=]
If the [=block overflow ellipsis=] is placed before a [=region break=] and
there is a subsequent <a>fragmentation container</a> in the [=fragmentation context=]
that would receive subsequent content,
then the content displaced by the <a>block overflow ellipsis</a>
must be pushed to that <a>fragmentation container</a>.
must be pushed to that <a>fragmentation container</a>. If it is placed before a [=clamp point=],
then the displaced content must be pushed to the remainder of the [=inline formatting context=].

The UA must treat the <a>block overflow ellipsis</a> as an unbreakable string,
If any part of the [=block overflow ellipsis=] overflows,
Expand Down Expand Up @@ -844,7 +849,7 @@ Limiting Visible Lines: the 'line-clamp' shorthand property</h3>
<dt><dfn><<integer [1,∞]>></dfn>
</dt><dfn><'block-ellipsis'></dfn>
<dd>
Sets 'continue' to ''discard''
Sets 'continue' to ''collapse''
if either or both values ares specified.

Sets 'max-lines' to the specified <<integer>>
Expand Down Expand Up @@ -901,7 +906,7 @@ Legacy compatibility</h4>

For compatibility with legacy content,
UAs that support 'line-clamp' must also support the '-webkit-line-clamp' property
and the additional ''-webkit-discard'' value for the 'continue' property.
and the additional ''-webkit-collapse'' value for the 'continue' property.

<pre class="propdef shorthand">
Name: -webkit-line-clamp
Expand All @@ -912,17 +917,17 @@ Legacy compatibility</h4>

<pre class="propdef partial">
Name: continue
New Values: -webkit-discard
New Values: -webkit-collapse
</pre>

Like 'line-clamp', '-webkit-line-clamp' is a shorthand of 'max-lines', 'continue', and 'block-ellipsis',
except that:

* its syntax is ''line-clamp/none'' | <<integer [1,∞]>>
* it sets 'continue' to ''-webkit-discard'' instead of ''discard''
* it sets 'continue' to ''-webkit-collapse'' instead of ''collapse''
* it unconditionally sets 'block-ellipsis' to ''block-ellipsis/auto''

The <dfn value for=continue>-webkit-discard</dfn> value behaves identically to ''discard'',
The <dfn value for=continue>-webkit-collapse</dfn> value behaves identically to ''collapse'',
except that it only takes effect
if the [=specified value=] of the 'display' property
is ''-webkit-box'' or ''-webkit-inline-box''
Expand All @@ -947,28 +952,33 @@ Forcing a Break After a Set Number of Lines: the 'max-lines' property</h3>
Name: max-lines
Value: ''none'' | <<integer [1,∞]>>
Initial: ''none''
Applies to: <a>block containers</a> which are also [=fragmentation containers=] that capture [=region breaks=]
Applies to: <a>block containers</a> which are also either [=fragmentation containers=] that capture [=region breaks=] or [=line-clamp containers=]
Inherited: no
Percentages: N/A
Computed value: the keyword ''max-lines/none'' or an integer
Animation type: by computed value type
</pre>

This property only has an effect on boxes that are [=fragmentation containers=] that capture [=region breaks=].
If the value of 'max-lines' is not <dfn for=max-lines dfn-type=value>none</dfn>, then, where
<var>N</var> is the computed value of 'max-lines':

- If the box is a [=fragmentation container=] that captures [=region breaks=],
a <a>region break</a> or
is forced after its <var>N</var>th
descendant <a>in-flow</a> <a>line box</a>.
If fewer than <var>N</var> line boxes exist,
then 'max-lines' introduces no <a>region break</a>.
- If the box is a [=line-clamp container=], its [=clamp point=] is set after its <var>N</var>th
descendant <a>in-flow</a> <a>line box</a>.
If fewer than <var>N</var> line boxes exist, then the clamp point is set to the end of the
line-clamp container.

Also, if the value of 'max-lines' is not <dfn for=max-lines dfn-type=value>none</dfn>,
a <a>region break</a>
is forced after its <var>N</var>th
descendant <a>in-flow</a> <a>line box</a>,
where <var>N</var> is the specified value of 'max-lines'.
Only lines boxes in the same <a>Block Formatting Context</a>

Only line boxes in the same <a>Block Formatting Context</a>
are counted:
the contents of descendants that establish <a>independent formatting contexts</a>
are skipped over while counting line boxes.

If fewer than <var>N</var> line boxes exist,
then 'max-lines' introduces no <a>region break</a>.

Note: This implies that 'max-lines' has no effect when applied to [=multi-column containers=],
since any line box they contain are nested into [=independent formatting contexts=].

Expand Down Expand Up @@ -1004,7 +1014,7 @@ Fragmentation of Overflow: the 'continue' property</h3>

<pre class=propdef>
Name: continue
Value: auto | discard
Value: auto | discard | collapse
Initial: ''continue/auto''
Applies to: [=block containers=] and [=multicol containers=]
Inherited: no
Expand All @@ -1014,10 +1024,11 @@ Fragmentation of Overflow: the 'continue' property</h3>
</pre>

The 'continue' property gives authors the ability
to turn a box into a [=fragmentation container=] (see [[!CSS-BREAK-3]])
and to specify that content after the [=fragmentation break=] must be discarded.
to truncate/interrupt the content inside a box, by either visually hiding
the remaining content, or by turning the box into a [=fragmentation container=] (see [[!CSS-BREAK-3]])
and discarding the content after the [=fragmentation break=].

Issue: This property is meant to generalize and replace the <code>region-fragment</code> property from [[CSS-REGIONS-1]].
Issue: ''continue: discard'' is meant to generalize and replace the <code>region-fragment</code> property from [[CSS-REGIONS-1]].
Once it is sufficiently stable in this specification,
<code>region-fragment</code> should be removed from the regions specification in favor of this.

Expand Down Expand Up @@ -1048,6 +1059,15 @@ Fragmentation of Overflow: the 'continue' property</h3>
Breaks applying to other [=fragmentation contexts=]
(such as pagination of this box itself)
do not cause any content to be discarded.

<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=].

This keyword has no effect on [=multicol containers=].
</dl>

<div class=example>
Expand Down Expand Up @@ -1115,6 +1135,9 @@ Fragmentation of Overflow: the 'continue' property</h3>
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,
Expand All @@ -1123,13 +1146,13 @@ Fragmentation of Overflow: the 'continue' property</h3>

Additionaliy,
for compatibility (see [[#webkit-line-clamp]]),
when the [=computed value=] of the 'continue' property is ''discard''
when the [=computed value=] of the 'continue' property is ''collapse'' or ''-webkit-collapse''
and the [=computed value=] of the '-webkit-box-orient' property is ''vertical'':
* If the [=specified value=] of the 'display' property is ''-webkit-box'',
the [=computed value=] is becomes ''flow-root'' and
the [=computed value=] becomes ''flow-root'' and
the box establishes a [=BFC=].
* If the [=specified value=] of the 'display property is ''-webkit-inline-box'',
the [=computed value=] is becomes ''inline-block'' and
* If the [=specified value=] of the 'display' property is ''-webkit-inline-box'',
the [=computed value=] becomes ''inline-block'' and
the box establishes a [=BFC=].

Note: This means that 'line-clamp' will work
Expand All @@ -1140,6 +1163,46 @@ Fragmentation of Overflow: the 'continue' property</h3>
as the box would be a [=flex container=] rather than a [=block container=],
and thus the 'continue' property would not apply.

<h4 id=line-clamp-containers>Line-clamp containers</h4>

A <dfn>line-clamp container</dfn> is an [=independent formatting context|independent=] [=block formatting context=] that
additionally follows the rules in this section. All line-clamp containers contain a
<dfn>clamp point</dfn>, which is one of the following positions inside it:

- The start of the line-clamp container.
- A point between two [=in-flow=] sibling boxes in the line-clamp
container's [=block formatting context=].
- A point between two [=line boxes=] in an in-flow [=inline formatting
context=] inside the line-clamp container's [=block formatting context=].
- The end of the line-clamp container.

Note: The [=clamp point=] can never be before a parent box's first child, or
after a parent box's last child, unless that parent box is the line-clamp
container. Similarly, the clamp point can never be before the first line or
after the first line of an [=inline formatting context=]. It can also never
be in [=out-of-flow=] content, or inside an [=independent formatting
context=].

If the [=line-clamp container=]'s [=block formatting context root=] has a [=computed value=] of
'max-lines' other than ''max-lines/none'', then that property will determine the [=clamp point=].
Otherwise, the clamp point will be set to the last possible clamp point such that, for it and
all previous possible clamp points, the line-clamp container's [=automatic block size=] (as
determined below) is not greater than the [=block size=] the box would have if its automatic
block size were infinite.

Any boxes in a [=line-clamp container=] that follow its [=clamp point=] in the box tree, as well
as any [=line boxes=] that follow it inside an [=inline formatting context=], will be invisible
(behaving like ''visibility: hidden''). This includes [=independent formatting contexts=] as
well as [=out-of-flow=] boxes, and all of their descendants. Any overflow such boxes and line
boxes might have is always counted as [=ink overflow=] rather than [=scrollable overflow=].

NOTE: This differs from the ''display: none''-like behavior of not rendered content with
''continue: discard''.

If a [=block container=] contains a [=clamp point=], within itself or in any of its descendants,
its [=automatic block size=] will not take into account any of its children after the clamp point.
This also applies for the [=line-clamp container=] itself.

<h2 id=sbg-ext class=nonum>
Appendix A: Possible extensions for ''scrollbar-gutter''</h2>

Expand Down

0 comments on commit dd4fa98

Please sign in to comment.