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-inline-3] text-box-trim accumulation #5426

Closed
fantasai opened this issue Aug 13, 2020 · 11 comments
Closed

[css-inline-3] text-box-trim accumulation #5426

fantasai opened this issue Aug 13, 2020 · 11 comments

Comments

@fantasai
Copy link
Collaborator

We allow ancestors to affect leading trimming on descendants, so that common cases like

<div class=warning style="borders and padding and leading-trim">
  <p>This is just a paragraph. Maybe this line is <p>, or not, it could be anything.
</div>

will work for authors. But we don't specify what happens if various ancestors have different values for leading-trim.

Maybe we should do something similar to break-before and switch to an auto/no/yes model where auto does whatever the ancestor says and otherwise the innermost value wins?

@johannesodland
Copy link

I was just looking into how to solve text-box-trim on the first/last blocks in a section or article, and having the possibility to set text-box-trim: auto would solve that use case, if I understand you correctly.

<section>
  <h2>A title</h2>
  <p>A paragraph</p>
  <p>Another paragraph</p>
</section>
section {
  text-box-trim: both;
  text-box-edge: auto;
}

h2, p {
  text-box-trim: auto;
}

Would auto result in a used value of start for the h2, and end for the last paragraph?

@css-meeting-bot
Copy link
Member

The CSS Working Group just discussed [css-inline-3] leading-trim accumulation.

The full IRC log of that discussion <ntim> fantasai: leading-trim can drill through elements, if you set it on the div, it will affect the paragraph in the div
<ntim> fantasai: however, if the both the paragraph and div say leading-trim: trim with different metrics, then we might want to look at the closest metric
<ntim> fantasai: we might something similar to page-break: auto, where we can break or not break
<ntim> fantasai: we could add an auto value to text-box-trim
<fantasai> where auto means, do whatever your parent says
<astearns> q+
<miriam> ack dbaron
<ntim> dbaron: just to restate the question: the choice between the metric from the closest ancestor, or the metric that is determine the most amount of
<ntim> myles: this reminds me of text-decoration where we can never remove them
<miriam> ack astearns
<dbaron> s/is determine the most amount of/takes the largest amount off/
<ntim> astearns: the proposal sounds ok in theory, but I want to see the proposal fleshed out and try some examples myself before fulling signing off
<ntim> astearns: this kind of sounds like trim collapsing
<ntim> ...and you want to avoid it
<ntim> florian: aren't we narrowing down to collapsing from the closest ancestor?
<florian> s/down to collapsing/down to trimming/
<ntim> astearns: Is this discussion enough to come up with a concrete proposal to evaluate?
<hober> scribe: myles
<myles> florian: it seems to me that we have a clear feeling that the largest metric is not what we want. Between the other options, we didn't discuss clearly.
<myles> astearns: dbaron originally asked "do you have a preference"?
<astearns> s/"/so /
<myles> dbaron: I don't have a preference. I don't understand what the issue is. I think it's closely tied to the syntax which I don't have in my head rn
<astearns> s/"?/?/
<fantasai> The three options were: take the closest metric where metric is available, take metric from closest that asks for trimming, take metric with largets amount of trimming
<fantasai> And I guess another one would be "outermost" metric
<astearns> no to the third
<myles> myles: how do we make progress here?
<myles> fantasai: astearns can help with examples, but we'll write a draft and be more specific
<myles> astearns: that sounds good
<myles> fantasai: ok

@fantasai
Copy link
Collaborator Author

@johannesodland Yes. This is actually the currently-specced behavior, but there's no conflict resolution specified if both of them specify a text-box-trim value. :)

@chrishtr
Copy link
Contributor

I propose that we go with "take metric from closest that asks for trimming" among the three listed from the meeting notes. I don't think we need any new keyword values.

More precise wording: a line is trimmed according to the text-box-trim property of its nearest ancestor that specifies text-box-trim. (Note: if the line is not the one affected--e.g. not the first or last line under that ancestor, depending on the value of text-box-trim--it is unaffected.)

Note: we don't need this spec language for text-box-edge, because it's inherited.

Note: This is different than inheritance, because it only applies to the first line of any descendant of the ancestor, not to all first lines of different paragraphs. The line referred to by text-box-trim is similar to ::first-line (example).

@chrishtr chrishtr changed the title [css-inline-3] leading-trim accumulation [css-inline-3] text-box-trim accumulation Jan 3, 2024
@fantasai
Copy link
Collaborator Author

fantasai commented Jan 9, 2024

Taking the innermost metric probably is pretty easy to understand. I'm just worried we'll have a problem like we do with collapsed table borders, where the obvious thing was to have the innermost (“most specific“) win, but it actually works out to not do the right thing on most tables. :]

(The example is, btw: same-width solid borders applied to the table, row group, and cells, with the cells being gray and the table/row group being black. Similar to this. You end up with all-gray borders, which isn't want you want: it's actually the outer elements that you want to win here, because the borders that coincide with them are the “most special”.)

@chrishtr
Copy link
Contributor

Taking the innermost metric probably is pretty easy to understand. I'm just worried we'll have a problem like we do with collapsed table borders, where the obvious thing was to have the innermost (“most specific“) win, but it actually works out to not do the right thing on most tables. :]

My suggestion is to resolve on this behavior in the spec because it's easy enough to understand, prototype it in a browser engine, and then ask developers to try it and gather their feedback. If they find problems we can reconsider the semantics.

@frivoal
Copy link
Collaborator

frivoal commented Jan 12, 2024

I think that while tentatively implementing "the right thing" even if we're not sure if it's going to be web-compatible and reverting if it isn't can often be a good idea, shipping a thing which may not be the best approach and changing later it if people don't like it is a lot dicier, as we may be trapped by compat by then, even if we do conclude that the alternative behavior would have been better.

Now, if it's about implementing without shipping in order to let people experiment with prototypes, sure. But then I don't think it needs to be in the spec.

@css-meeting-bot
Copy link
Member

The CSS Working Group just discussed [css-inline-3] text-box-trim accumulation, and agreed to the following:

  • RESOLVED: Choosing the innermost for textbox:trim for most requested trim metric.
The full IRC log of that discussion <Frances> fantasai: consider an example with a div where inside there is a p, both asking for text-box:trim. Shared by two elements nested inside each other, which trimming should we perform? Such as different metrics?
<Rossen_> q
<Rossen_> ack florian
<Frances> fantasai: Can choose outer most or inner most or most constrictive one. Inner most is most specific, the alternative would be outermost to match up with something outside.
<Frances> fantasai: Which one would be the most appropriate metric?
<Frances> florian: If a sense of which one is right we can choose it, or we can implement the use case driven one.
<Frances> rossen: if strong use cases come, would be much easier to select.
<dbaron> innermost seems reasonable, at least
<Frances> PROPOSAL: Choosing the innermost for textbox:trim for most requested trim metric.
<Frances> RESOLVED: Choosing the innermost for textbox:trim for most requested trim metric.

chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue May 17, 2024
This patch adds a test for when the element to trim has
different `text-box-edge` value from the `text-box-edge` value
of the element that has `text-box-trim`. Discussed and
resolved at:
w3c/csswg-drafts#5426

Bug: 40254880
Change-Id: I5685fbaebddb8c7429b3b041c5fe0f88b982fc3d
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue May 19, 2024
This patch adds a test for when the element to trim has
different `text-box-edge` value from the `text-box-edge` value
of the element that has `text-box-trim`. Discussed and
resolved at:
w3c/csswg-drafts#5426

Bug: 40254880
Change-Id: I5685fbaebddb8c7429b3b041c5fe0f88b982fc3d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5547563
Auto-Submit: Koji Ishii <[email protected]>
Reviewed-by: Kent Tamura <[email protected]>
Commit-Queue: Kent Tamura <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1303166}
aarongable pushed a commit to chromium/chromium that referenced this issue May 19, 2024
This patch adds a test for when the element to trim has
different `text-box-edge` value from the `text-box-edge` value
of the element that has `text-box-trim`. Discussed and
resolved at:
w3c/csswg-drafts#5426

Bug: 40254880
Change-Id: I5685fbaebddb8c7429b3b041c5fe0f88b982fc3d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5547563
Auto-Submit: Koji Ishii <[email protected]>
Reviewed-by: Kent Tamura <[email protected]>
Commit-Queue: Kent Tamura <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1303166}
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue May 19, 2024
This patch adds a test for when the element to trim has
different `text-box-edge` value from the `text-box-edge` value
of the element that has `text-box-trim`. Discussed and
resolved at:
w3c/csswg-drafts#5426

Bug: 40254880
Change-Id: I5685fbaebddb8c7429b3b041c5fe0f88b982fc3d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5547563
Auto-Submit: Koji Ishii <[email protected]>
Reviewed-by: Kent Tamura <[email protected]>
Commit-Queue: Kent Tamura <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1303166}
@jantimon
Copy link

jantimon commented May 21, 2024

I am not sure if I understood the discussion result correctly.

When nesting different elements with different line-heights, the height of the largest line-height is used for the entire group.

For me as developer it would be most intuitive if text-box-trim would behave in a similar way.

Here are two examples and in both examples the largest font-size should be used for the trim calculation:

<h1><span style="font-size:120%"> (trimmed to the span)

inner element has larger font

<h1><span style="font-size:80%"> (trimmed to the h1)

inner element has smaller font

For the same font size couldn't we do just trim the minimum?

for example ex requires less trimming than text - so we trim only text
the idea behind that would be that the developer defines that it is save to trim to text for h1 so we don't trim more than that:

shot-VkWij3HU@2x

@kojiishi
Copy link
Contributor

Thank you @jantimon for the great feedback. Let me explain my understanding of the resolution.

The #8829 resolved to split the line-box-affecting aspects of text-box-edge to a new property (name TBD, tentatively called text-line-edge). So, this issue is about multiple block ancestors having different text-box-edge properties, as in the examples of the first two comments of this issue. Here's another more artificial example to explain the resolution:

<div style="text-box-trim: both; text-box-edge: text">
  <div style="text-box-edge: leading">
    <div style="text-box-edge: cap text">FIRST</div>
    <div>MIDDLE</div>
    <div style="text-box-edge: text alphabetic">LAST</div>
  </div>
</div>

Since the resolution is "innermost", the top of the "FIRST" should be trimmed at the cap edge, and the bottom of the "LAST" should be trimmed at the alphabetic edge.

The split in #8829 made applying text-box-trim and text-box-edge to <span> in your examples to have no effects, so your examples will not be impacted by the resolution of this issue.

When we start discussing text-line-edge, I think your feedback is one of the most important points to discuss about.

@fantasai Please correct me if any.

@jantimon
Copy link

thanks @kojiishi for your quick response - so it is not inline but about block siblings / children?

in that case "innermost" makes perfect sense for many different scenarios e.g. optical vertical text centering:

center-click-me

moz-v2v-gh pushed a commit to mozilla/gecko-dev that referenced this issue May 23, 2024
…stonly

Automatic update from web-platform-tests
[text-box-trim] Test accumulations

This patch adds a test for when the element to trim has
different `text-box-edge` value from the `text-box-edge` value
of the element that has `text-box-trim`. Discussed and
resolved at:
w3c/csswg-drafts#5426

Bug: 40254880
Change-Id: I5685fbaebddb8c7429b3b041c5fe0f88b982fc3d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5547563
Auto-Submit: Koji Ishii <[email protected]>
Reviewed-by: Kent Tamura <[email protected]>
Commit-Queue: Kent Tamura <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1303166}

--

wpt-commits: 5e6793faa62943090d88eca7fa6390219f06832d
wpt-pr: 46340
jamienicol pushed a commit to jamienicol/gecko that referenced this issue May 24, 2024
…stonly

Automatic update from web-platform-tests
[text-box-trim] Test accumulations

This patch adds a test for when the element to trim has
different `text-box-edge` value from the `text-box-edge` value
of the element that has `text-box-trim`. Discussed and
resolved at:
w3c/csswg-drafts#5426

Bug: 40254880
Change-Id: I5685fbaebddb8c7429b3b041c5fe0f88b982fc3d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5547563
Auto-Submit: Koji Ishii <[email protected]>
Reviewed-by: Kent Tamura <[email protected]>
Commit-Queue: Kent Tamura <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1303166}

--

wpt-commits: 5e6793faa62943090d88eca7fa6390219f06832d
wpt-pr: 46340
@fantasai fantasai closed this as completed Aug 2, 2024
@github-project-automation github-project-automation bot moved this to Friday Morning in TPAC 2023 agenda Aug 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Friday Morning
Development

No branches or pull requests

8 participants