Re: [csswg-drafts] [css-text-decor-4] Allow percentages in `text-decoration-trim` (#8403)

The CSS Working Group just discussed ``[css-text-decor-4] Allow percentages in `text-decoration-trim` ``.

<details><summary>The full IRC log of that discussion</summary>
&lt;TabAtkins> SebastianZ: plenty of use-cases regarding %s in text-deco-trim. At least animating from "none" to a specific length<br>
&lt;TabAtkins> SebastianZ: which is currently not possible with just length units<br>
&lt;TabAtkins> SebastianZ: there's some discussion about how to resolve %s<br>
&lt;TabAtkins> SebastianZ: my idea was to use the inline size of the box deco<br>
&lt;TabAtkins> TabAtkins: animating from "no decoration at all" to "some deco"?<br>
&lt;TabAtkins> SebastianZ: yes, like animating from 100% to 0%<br>
&lt;TabAtkins> SebastianZ: there was also some discussion about interaction with box-deco-break<br>
&lt;TabAtkins> SebastianZ: my idea was, if box-deco-break:clone, we'd use the inline size of that fragment<br>
&lt;TabAtkins> fantasai: if clone, do each fragment independently, if slice glue them all together and use that length.<br>
&lt;TabAtkins> fantasai: this doesn't seem crazy. one thing to point out, we use %s in several places for these props to mean a % of the font-size<br>
&lt;lea> q?<br>
&lt;TabAtkins> fantasai: is that an interpretation we'll need here instead?<br>
&lt;lea> q+<br>
&lt;TabAtkins> TabAtkins: why do we use %s for that instead of EMS?<br>
&lt;TabAtkins> fantasai: for inheritance<br>
&lt;TabAtkins> fantasai: but that might not be as needed for decors<br>
&lt;astearns> ack lea<br>
&lt;fantasai> https://www.w3.org/TR/css-text-decor-4/#text-decoration-thickness-property<br>
&lt;TabAtkins> schenney: but you might want trim to adjust as the font grows, worth thinking about<br>
&lt;fantasai> Percentages in text-decoration-thickness are relative to 1em<br>
&lt;TabAtkins> lea: not sure %s are the way here for animations. woulddn't it mean the animations would animate at different speed depending on the line?<br>
&lt;TabAtkins> fantasai: good question. this would not allow you to control the speed<br>
&lt;TabAtkins> SebastianZ: if you have 'slice', it would just be one line shared across the fragments<br>
&lt;lea> also specifying `text-decoration-trim: -100%` to mean "no underline" seems _quite_ weird<br>
&lt;TabAtkins> jfkthame: resolving %s for each fragment when 'clone' and the whole deco when 'slice' seems reasonable, but it means an animation would run different speed on different fragments, that's interesting. I might have an idea to address that. but on the whole I think this is reasonable.<br>
&lt;fantasai> It would be -50% but yeah<br>
&lt;lea> q+<br>
&lt;TabAtkins> fantasai: text-deco-thickness takes %s and they're relative to 1em<br>
&lt;jfkthame> s/might have an idea/don't have an idea/<br>
&lt;TabAtkins> fantasai: this might be a case where there are three different things and we can only do one<br>
&lt;TabAtkins> astearns: can you just use EMS?<br>
&lt;astearns> ack lea<br>
&lt;TabAtkins> fantasai: because text decors aren't inherited that might work, yeah<br>
&lt;TabAtkins> lea: an idea. if we're doing %s and it's the length of the underline... could we solve this and the previous to have text-deco-length and initial value is 100%, you can use calc() to make it slightly longer or shorter<br>
&lt;TabAtkins> SebastianZ: I initially proposed that but it was not accepted; don't remember the reasons<br>
&lt;schenney> q+<br>
&lt;TabAtkins> SebastianZ: but some people said doing inset/outset would be better for these cases<br>
&lt;astearns> ack schenney<br>
&lt;TabAtkins> lea: if we were only doing small adjustments, inset/outset makes sense, but combining here...<br>
&lt;TabAtkins> schenney: problem with a length is you can't control what side the adjustment happens on<br>
&lt;lea> and then you can even do fixed speed by animating from `text-decoration-length: 0` to `text-decoration-length: min(100%, 50em /* or whatever long enough */)`<br>
&lt;TabAtkins> schenney: I support line-length because it scales with the font size implicitly, the fragment is longer<br>
&lt;TabAtkins> fantasai: you're usually animating just a few words, and I don't think it's too useful to have the ability to trim 1% of a word...<br>
&lt;TabAtkins> fantasai: whole line underlined, sure<br>
&lt;TabAtkins> schenney: there's just not a great answer for what else to resolve a % against, I think fragment length is least bad<br>
&lt;TabAtkins> astearns: we're at time<br>
&lt;TabAtkins> astearns: interesting discussion, go thru alternatives in the issues<br>
&lt;TabAtkins> astearns: we do have a path of shipping -inset without %s to begin with, we could decide on this later<br>
&lt;TabAtkins> astearns: but given Lea's point, it might be good to get this clarified before shipping<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8403#issuecomment-3462701797 using your GitHub account


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

Received on Wednesday, 29 October 2025 17:01:15 UTC