[css-inline-3] text-box accumulation unexpected behavior

[bakura10]

Hello,

I've been playing with text-trim and found a rather unexpected behavior when applying text-trim on a parent, which applies what is apparently called "text-box-trim accumulation" (#5426).

You can reproduce the issue here: https://codepen.io/bakura10/pen/GgKMvqR

Ideally, this is the end result I would like:

This is apparently the expected result but I find it rather surprising and I'm sure other developers will find it surprising.

What we want in most cases is trimming of the first and last elements on content where I don't control the exact order of elements or which elements are being added (think of RTE or builder), independently of what they are (basically, I expected it to work a bit like margin-trim).

I am currently emulating what I want using this:

.prose > :first-child:not(.button) {
  text-trim: trim-start cap alphabetic;
}

.prose > :last-child:not(.button) {
  text-trim: trim-end cap alphabetic;
}

This however won't work if the DOM ended up being nested:

<div class="prose">
  <p>I'm trimed start</p>

  <div clas="max-w-sm">
    <p>I won't be trim end<p>
  </div>
</div>

Thanks.

[fantasai]

What's causing this effect is that the button is an inline-block, which sits inside the line box; and we don't look inside a line box for text-box-trim, we just cut down to its root inline box, as if it only contained plain text.

The options here are:

• a) make the developer work around this situation by using flexbox or grid or some other layout mechanism other than inline blocks.
• b) make a rule that inline blocks prevent text-box from trimming past their margin edge.

[css-meeting-bot]

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

• RESOLVED: text-box-trim does not trim further into the linebox than the outermost margin edge of any atomic inlines in the linebox

The full IRC log of that discussion

<TabAtkins> fantasai: probably helpful to look at the issue examples
<TabAtkins> fantasai: an author was playing with text-box-trim and was surprised when it cut into a button he'd styled
<TabAtkins> fantasai: reason is because, normally if you have padding/etc we dont' trim thru the padding/border. but the button was an inline block, so it sits on a line, and we ignore the contents of lineboxes when trimming. we just trim to the root inline box no matter what's on the line.
<TabAtkins> fantasai: it seems like this is something that people will trip over as well. there are workarounds, but there are reasons the author might have wanted to use inline-block specifically
<TabAtkins> fantasai: so options are we could make authors work around this
<TabAtkins> fantasai: or we could make a rule that says if you have an inline-block on a line, that pushes out the text edge to the margin edge of that block. (rather, any atomic inline, not just inline-blocks)
<TabAtkins> fantasai: so the rule for text trim would introspect into the linebox content, and if it finds an atomic inline it would push the edge out
<TabAtkins> fantasai: so wanted to check the wg's opinion
<TabAtkins> jensimmons: if we made the second change...
<TabAtkins> jensimmons: i could also see this author applying text-box-trim to the button itself to get the text vertically centered
<TabAtkins> jensimmons: will that get screwy?
<TabAtkins> fantasai: no, because it'll push to the amrgin edge fo the box *after* the box's position ahs been computed
<florian> q+
<TabAtkins> fantasai: if they were using text-box-trim on the button itself that'll change the button's sizing. then if it's on the paragraph too, we don't care about *how* the atomic inline figured out its margin box, we'll just use that
<astearns> ack dbaron
<iank_> are you sure you want margin-box and not border-box? e.g. margins on inline-blocks are typically used to pad the line-box.
<TabAtkins> dbaron: i think from a high level persepctive the result you want makes sense.
<fantasai> iank_, yes I'm sure
<TabAtkins> dbaron: tryign to remember how text-box-edge works, waiting for the spec to load
<fantasai> iank_, I think if the author asked for that extra space, we should give it to them
<astearns> ack florian
<TabAtkins> florian: maybe a silly question
<TabAtkins> florian: would it be an option to go with border edge rather than margin edge? or am i missing something?
<fantasai> iank_, ... although I suppose maybe it's similar to margin collapsing
<fantasai> iank_, hmmm
<kizu> q+
<TabAtkins> dbaron: i think we're reasonably consistent that waht matters for atomic inlines is their margin edge
<TabAtkins> iank_: i ahd the same question. margins are typically used to simulate the same metrics as the text around it. so if margins are used that way it makes sense to trim to the border box, i think
<TabAtkins> iank_: becuase if they're being used to simulate a descent, and you're trying to trim the descent
<astearns> ack kizu
<TabAtkins> kizu: if we want this behavior, we need a way for an element to opt out, if it *wants* to hang from the line you're trimming to
<TabAtkins> kizu: if we use margin box you could use negative margin to bring it back down (unless we do something magic there to not consider negative margin for text-trim)
<TabAtkins> astearns: similar question. first option was make the author fix it. if we change the default behavior, can they fix our choice?
<TabAtkins> fantasai: i think roman's point is correct. if we use the margin edge, author can use negative margin to shift that edge inward
<TabAtkins> fantasai: but if we use the border edge, author has no control
<TabAtkins> fantasai: so proposed reoslution is text-box-trim does not trim further into the linebox than the outermost margin edge of any atomic inlines in the linebox
<TabAtkins> astearns: and that's sufficient to solve this author's issue?
<TabAtkins> fantasai: i believe so
<TabAtkins> astearns: objections?
<TabAtkins> RESOLVED: text-box-trim does not trim further into the linebox than the outermost margin edge of any atomic inlines in the linebox
<dbaron> (I presume this affects how text-box-trim affects block containers.)