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.

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
Changes from 3 commits
Commits
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
117 changes: 89 additions & 28 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 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.
andreubotella marked this conversation as resolved.
Show resolved Hide resolved

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=],
andreubotella marked this conversation as resolved.
Show resolved Hide resolved
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 +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''
andreubotella marked this conversation as resolved.
Show resolved Hide resolved
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':
andreubotella marked this conversation as resolved.
Show resolved Hide resolved

- If the box is a [=fragmentation container=] that captures [=region breaks=],
a <a>region break</a> or
andreubotella marked this conversation as resolved.
Show resolved Hide resolved
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
andreubotella marked this conversation as resolved.
Show resolved Hide resolved
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
Copy link
Collaborator

Choose a reason for hiding this comment

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

I am not sure I understand what the difference/benefit is of placing a clamp point at the end, instead of saying there's no clamp point. We can define that a clamp point at the end has no effect (which I what I believe the later definition does), but would it not be simpler to just say that there isn't one?

Copy link
Member Author

Choose a reason for hiding this comment

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

I added a clamp point at the end because, for line-clamp: auto, that is enough to explain the lack of visible clamping when the max-height is larger than the box's auto size. The last clamp point that fits is the clamp point at the end, which is visually equivalent to no clamping.

I don't feel strongly about this, though, so we could change this to not have a clamp point at the end, as long as we also say that the last line doesn't have a following clamp point (maybe unless it's followed by non-inline content, depending on whether we allow clamping between lineless blocks).

line-clamp container.
andreubotella marked this conversation as resolved.
Show resolved Hide resolved

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=].
andreubotella marked this conversation as resolved.
Show resolved Hide resolved

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=].
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 +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''.
andreubotella marked this conversation as resolved.
Show resolved Hide resolved

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 +1146,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'' or ''-webkit-collapse''
andreubotella marked this conversation as resolved.
Show resolved Hide resolved
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 +1163,44 @@ 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:
andreubotella marked this conversation as resolved.
Show resolved Hide resolved

- A point immediately after a [=line box=] in the line-clamp container's [=block formatting
context=].
andreubotella marked this conversation as resolved.
Show resolved Hide resolved
- 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=].
Copy link
Collaborator

Choose a reason for hiding this comment

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

As discussed in an earlier comments, I am not sure I understand what the difference/benefit is of placing a clamp point at the end, instead of saying there's no clamp point. We can define that a clamp point at the end has no effect (which I what I believe the definition bellow does), but would it not be simpler to just say that there isn't one?

andreubotella marked this conversation as resolved.
Show resolved Hide resolved

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 clamp points, to the first clamp
point in the block formatting context.
andreubotella marked this conversation as resolved.
Show resolved Hide resolved

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=].
andreubotella marked this conversation as resolved.
Show resolved Hide resolved

NOTE: This differs from the ''display: none''-like behavior of not rendered content with
''continue: discard''.
andreubotella marked this conversation as resolved.
Show resolved Hide resolved

If a [=block container=] contains a [=clamp point=], within itself or in any of its descendants,
andreubotella marked this conversation as resolved.
Show resolved Hide resolved
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.
andreubotella marked this conversation as resolved.
Show resolved Hide resolved

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

Expand Down