Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-overflow-4] Draft spec for continue: collapse (#7708) #10816

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

[css-overflow-4] Draft spec for continue: collapse (#7708) #10816

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c2fa930
[css-overflow-4] Draft spec for `continue: collapse` (#7708)
andreubotella Sep 2, 2024
c7df9c9
Clarification about float clearance in the automatic block size
andreubotella Sep 14, 2024
1699d89
Update to only allow clamping after a line
andreubotella Oct 3, 2024
ee8fab9
Apply suggestions from code review
andreubotella Dec 3, 2024
178c050
Update css-overflow-4/Overview.bs
andreubotella Dec 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 106 additions & 27 deletions css-overflow-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -707,12 +707,16 @@ 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 it immediately precedes eiher a [=region break=]
or a [=clamp point=] in the [=block formatting context=].
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 +781,13 @@ 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>.
If it is placed before a [=clamp point=],
then the displaced content must be pushed to the remainder of the [=inline formatting context=].
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm ok with that, but I think this has been controversial, with some advocating that the displaced content be dropped / invisible instead, in order to avoid that inserting the ellipsis would cause an extra layout pass. Should we open a separate issue to discuss that aspect?
Or maybe this is unavoidable due to bidi processing of the ellipsis, which means we have to relayout anyway?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The bidi processing of the ellipsis would make it unavoidable to relayout at least that line, but not necessarily the lines after it. But if we only do that line, then there could be inline elements that end up falling out of the layout if they now don't fit in the line with the ellipsis.


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 +851,10 @@ Limiting Visible Lines: the 'line-clamp' shorthand property</h3>
<dt><dfn><<integer [1,∞]>></dfn>
</dt><dfn><'block-ellipsis'></dfn>
<dd>
Sets 'continue' to ''discard''

Issue(7708): Whether this should imply ''discard'' or ''collapse'' is an unresolved question.

Sets 'continue' to ''collapse''
if either or both values ares specified.

Sets 'max-lines' to the specified <<integer>>
Expand Down Expand Up @@ -901,7 +911,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 +922,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 +957,34 @@ 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, given a [=computed value=] of <var>N</var>:

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>
- If the box is a [=fragmentation container=] that captures [=region breaks=],
a <a>region break</a>
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.


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 +1020,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 +1030,12 @@ 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,
either by 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 +1066,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=].
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Couldn't we make it work on multicols too? Is there any particular difficulty in inserting a clamp point after N lines or after the last line of the last non-overflow column, and hiding overflow columns in any case?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In inserting a clamp point after N lines, no. For adding it in the last line of the last non-overflowing column, at least in my implementation in Chromium it might not be easy, because the machinery to figure out whether a line is the last line that doesn't overflow, including accounting for border/padding/margin, would have to interact with the fragmentation machinery.

</dl>

<div class=example>
Expand Down Expand Up @@ -1115,6 +1142,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,12 +1153,12 @@ 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'', ''-webkit-collapse'', or ''discard''
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=] becomes ''flow-root'' and
the box establishes a [=BFC=].
* If the [=specified value=] of the 'display property is ''-webkit-inline-box'',
* If the [=specified value=] of the 'display' property is ''-webkit-inline-box'',
the [=computed value=] becomes ''inline-block'' and
the box establishes a [=BFC=].

Expand All @@ -1140,6 +1170,55 @@ 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:

- A point immediately after a [=line box=]
in the line-clamp container's [=block formatting context=].
- The end of the line-clamp container,
if there are any boxes after the last [=inline formatting context=]
in the line-clamp container's [=block 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;
or if that is not the case for any possible clamp points,
to the first possible clamp point in the block formatting context.

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.

NOTE: If there are any floats before the [=clamp point=],
the [=line-clamp container=]'s automatic size must grow to encompass the clearance,
just like it would if it were a regular [=block formatting context=] root
that only contained its contents before the [=clamp point=].
This is regardless of whether this would cause any content after the [=clamp point=]
to be within the container's bounds.

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

Expand Down