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 3 commits into
base: main
Choose a base branch
from
Open
Changes from all 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.
Comment on lines +715 to +718
Copy link
Collaborator

Choose a reason for hiding this comment

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

Editorial

Suggested change
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.
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.

Reason: this spec uses semantic line-breaks, and I'd prefer to stay consistent with that. See https://rhodesmill.org/brandon/2012/one-sentence-per-line/


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=],
Copy link
Collaborator

Choose a reason for hiding this comment

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

Editorial:

Suggested change
must be pushed to that <a>fragmentation container</a>. If it is placed before a [=clamp point=],
must be pushed to that <a>fragmentation container</a>.
If it is placed before a [=clamp point=],

Reason: this spec uses semantic line-breaks, and I'd prefer to stay consistent with that. See https://rhodesmill.org/brandon/2012/one-sentence-per-line/

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?


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''
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
Sets 'continue' to ''collapse''
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 +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':
Comment on lines +962 to +963
Copy link
Collaborator

Choose a reason for hiding this comment

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

Editorial:

Suggested change
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 value of 'max-lines' is not <dfn for=max-lines dfn-type=value>none</dfn>,
then, given a [=computed value=] of <var>N</var>:


- If the box is a [=fragmentation container=] that captures [=region breaks=],
a <a>region break</a> or
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
a <a>region break</a> or
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
Copy link
Collaborator

Choose a reason for hiding this comment

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

Editorial:

Suggested change
- If the box is a [=line-clamp container=], its [=clamp point=] is set after its <var>N</var>th
- If the box is a [=line-clamp container=],
its [=clamp point=] is set after its <var>N</var>th

See https://rhodesmill.org/brandon/2012/one-sentence-per-line/

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?

line-clamp container.
Comment on lines +973 to +974
Copy link
Collaborator

Choose a reason for hiding this comment

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

Editorial:

Suggested change
If fewer than <var>N</var> line boxes exist, then the clamp point is set to the end of the
line-clamp container.
If fewer than <var>N</var> line boxes exist,
then the clamp point is set to the end of the line-clamp container.

See https://rhodesmill.org/brandon/2012/one-sentence-per-line/


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=].
Comment on lines +1027 to +1029
Copy link
Collaborator

Choose a reason for hiding this comment

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

Editorial:

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

See https://rhodesmill.org/brandon/2012/one-sentence-per-line/


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?

</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''.
Comment on lines +1138 to +1139
Copy link
Collaborator

Choose a reason for hiding this comment

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

Editorial:

Suggested change
Note: This differs from the ''visibility: hidden''-like behavior of content after the [=clamp
point=] with ''continue: collapse''.
Note: This differs from the ''visibility: hidden''-like behavior
of content after the [=clamp point=] with ''continue: collapse''.

See https://rhodesmill.org/brandon/2012/one-sentence-per-line/


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''
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
when the [=computed value=] of the 'continue' property is ''collapse'' or ''-webkit-collapse''
when the [=computed value=] of the 'continue' property is '''collapse'', ''-webkit-collapse'', or ''discard''

Strictly speaking, I think it is not necessary to list the -webkit- value here, since it is defined "to behaves identically to collapse". But I agree it is clearer to include it anyway.

I suggest including ''discard'' as well. If implementations ever support both, that makes it easier to switch between the two.

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:
Comment on lines +1168 to +1170
Copy link
Collaborator

Choose a reason for hiding this comment

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

Editorial

Suggested change
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 <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:

See https://rhodesmill.org/brandon/2012/one-sentence-per-line/


- A point immediately after a [=line box=] in the line-clamp container's [=block formatting
context=].
Comment on lines +1172 to +1173
Copy link
Collaborator

Choose a reason for hiding this comment

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

Editorial

Suggested change
- A point immediately after a [=line box=] in the line-clamp container's [=block formatting
context=].
- A point immediately after a [=line box=]
in the line-clamp container's [=block formatting context=].

See https://rhodesmill.org/brandon/2012/one-sentence-per-line/

- 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=].
Comment on lines +1169 to +1175
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?

Comment on lines +1174 to +1175
Copy link
Collaborator

Choose a reason for hiding this comment

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

Editorial

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

See https://rhodesmill.org/brandon/2012/one-sentence-per-line/


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.
Comment on lines +1177 to +1183
Copy link
Collaborator

Choose a reason for hiding this comment

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

Editorial:

Suggested change
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.
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.

See https://rhodesmill.org/brandon/2012/one-sentence-per-line/

I also added the word "possible" before "clamp point" in the last two lines.


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=].
Comment on lines +1185 to +1189
Copy link
Collaborator

Choose a reason for hiding this comment

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

Editorial

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

See https://rhodesmill.org/brandon/2012/one-sentence-per-line/


NOTE: This differs from the ''display: none''-like behavior of not rendered content with
''continue: discard''.
Comment on lines +1191 to +1192
Copy link
Collaborator

Choose a reason for hiding this comment

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

Editorial:

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

See https://rhodesmill.org/brandon/2012/one-sentence-per-line/


If a [=block container=] contains a [=clamp point=], within itself or in any of its descendants,
Copy link
Collaborator

Choose a reason for hiding this comment

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

Editorial:

Suggested change
If a [=block container=] contains a [=clamp point=], within itself or in any of its descendants,
If a [=block container=] contains a [=clamp point=],
within itself or in any of its descendants,

See https://rhodesmill.org/brandon/2012/one-sentence-per-line/

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.
Comment on lines +1198 to +1202
Copy link
Collaborator

Choose a reason for hiding this comment

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

Editorial:

Suggested change
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.
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.

See https://rhodesmill.org/brandon/2012/one-sentence-per-line/


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

Expand Down