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

The CSS Working Group just discussed ``[css-text-decor-4] Allow percentages in `text-decoration-inset` ``, and agreed to the following:

* `RESOLVED: add %s, and they resolve on either sum of segments or individual segments depending on b-d-b`

<details><summary>The full IRC log of that discussion</summary>
&lt;TabAtkins> SebastianZ: We already introduced text-decoration-inset, takes a &lt;length><br>
&lt;TabAtkins> SebastianZ: for other use-cases like animating the line from 0 to a length, it should be allowed to add percentages to the proeprty<br>
&lt;TabAtkins> SebastianZ: this discussion was going back and forth on how to do it<br>
&lt;TabAtkins> SebastianZ: especially wrt box-decoration-break<br>
&lt;TabAtkins> SebastianZ: I think we concluded that we can make it so %s either take into account the total width of the decoration, or when you set box-dec-break:clone, it takes the individual widths of the broken boxes<br>
&lt;TabAtkins> SebastianZ: there were also use-cases mentioned regarding the animation itself<br>
&lt;TabAtkins> SebastianZ: sometimes you want it to be animated for each line individually, with different speeds, sometimes you want a constant speed<br>
&lt;TabAtkins> SebastianZ: I think with this proposal you can achieve both<br>
&lt;TabAtkins> SebastianZ: %s give individual speeds, lengths give constant speed<br>
&lt;TabAtkins> astearns: so I understand the area, but what is the specific change to be resolved on?<br>
&lt;TabAtkins> SebastianZ: to add %s to the property<br>
&lt;TabAtkins> SebastianZ: there are many pages that underline a link when you hover it, with the underline growing into place<br>
&lt;kbabbitt> q+<br>
&lt;TabAtkins> SebastianZ: so q was just how %s apply to the deco boxes<br>
&lt;TabAtkins> astearns: so we've already added %s and just need to resolve on how they work?<br>
&lt;TabAtkins> SebastianZ: not added yet, due to this issue<br>
&lt;astearns> ack kbabbitt<br>
&lt;TabAtkins> kbabbitt: if i'm understanding correctly, 50% means you don't get a deco, bc you've taken half the width from each end, right?<br>
&lt;TabAtkins> SebastianZ: yes<br>
&lt;TabAtkins> kbabbitt: what if I'm &lt; 50%?<br>
&lt;astearns> s/&lt; 50%/> 50%/<br>
&lt;dbaron> I think kbabbitt perhaps meant to ask > 50% :-)<br>
&lt;TabAtkins> SebastianZ: so the value cuts the deco on each side, 50% is 50% of each side, so no deco at all<br>
&lt;TabAtkins> kbabbitt: so what about &lt; 50%?<br>
&lt;TabAtkins> SebastianZ: it's based on the width of the deco box, so if the box is 100px and you set 10%, it's 10px chopped off each end<br>
&lt;TabAtkins> kbabbitt: [works thru the math again...]<br>
&lt;TabAtkins> kbabbitt: sorry, >50%<br>
&lt;flackr> q+<br>
&lt;flackr> q-<br>
&lt;TabAtkins> SebastianZ: I interpret that as cutting more than half<br>
&lt;TabAtkins> SebastianZ: you can specify two values, one for the start and one for the end<br>
&lt;TabAtkins> SebastianZ: so you cut from each side<br>
&lt;kizu> Yep, like 70% 10% — will be 20% width, offset by 70% from one side, and 10% from another, so you could animate it moving etc.<br>
&lt;TabAtkins> SebastianZ: so >50% just cuts more<br>
&lt;TabAtkins> florian: so to clarify if the *sum* of both is >100% it's invisible, right?<br>
&lt;TabAtkins> SebastianZ: yes, that's a better way to put it<br>
&lt;dbaron> >=, even :-)<br>
&lt;TabAtkins> TabAtkins: how does it react to box-deco-break, then?<br>
&lt;TabAtkins> SebastianZ: you have slice and clone<br>
&lt;TabAtkins> SebastianZ: with slice, you use the total width of the deco box. if it's split you count the sum width of the fragments<br>
&lt;TabAtkins> SebastianZ: but with clone each fragment is considered individually<br>
&lt;TabAtkins> SebastianZ: (this works the same with length values,, it's not % specific)<br>
&lt;flackr> q+<br>
&lt;astearns> ack flackr<br>
&lt;TabAtkins> flackr: what does the % resolve against when there are multiple breaks?<br>
&lt;TabAtkins> SebastianZ: [re-explains]<br>
&lt;TabAtkins> flackr: so I'm worried that we can't have a computed length for the inset. that's not how most length-percent properties work<br>
&lt;TabAtkins> TabAtkins: a number of layout-related %s are in the same bucket<br>
&lt;TabAtkins> flackr: ok, that's fine then<br>
&lt;dbaron> BTW, some of this also seems interesting in the context of bidi-fragmentation, where bidi reordering splits up an inline<br>
&lt;TabAtkins> flackr: so with slice... you extend from the first break to the last break and it's the total length of all the breaks<br>
&lt;TabAtkins> astearns: so proposed resolution is we add %s, and they resolve on either sum of segments or individual segments depending on b-d-b<br>
&lt;TabAtkins> RESOLVED: add %s, and they resolve on either sum of segments or individual segments depending on b-d-b<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-4178982235 using your GitHub account


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

Received on Thursday, 2 April 2026 16:19:58 UTC