[csswg-drafts] [css-inline-3] text-box accumulation unexpected behavior (#11472)

bakura10 has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-inline-3] text-box accumulation unexpected behavior ==
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

![image](https://github.com/user-attachments/assets/1cfc7a50-b36c-42b4-a611-437b0c878a2d)

Ideally, this is the end result I would like:

![image](https://github.com/user-attachments/assets/5bc17bf6-48d4-426b-9b97-a45a6be671cd)

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.



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11472 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 10 January 2025 01:08:33 UTC