[css-text-decor-4] Consider renaming `text-decoration-trim`

[SebastianZ]

Besides the general discussion in #4557 to introduce a way to modify the length of the decoration, there was also some discussion around how to call the property. As I previously summarized, name suggestions for it so far were:

• text-decoration-trim
• text-decoration-inset
• text-decoration-limit
• text-decoration-clip

As there are also use cases for extending the decorations beyond their normal size. In my opinion, "trim" doesn't express that well enough. Therefore I slightly tend towards "limit".

We have a poll running in comments below:
#8402 (comment)
#8402 (comment)

Sebastian

[jfkthame]

We're in the process of implementing this, so if there's going to be some naming bikeshedding, we'd appreciate it happening sooner rather than later.

(Personally, I'm happy with text-decoration-trim; the idea that "negative trimming" extends the line doesn't bother me. Neither -limit nor -clip seem nearly as clear; -inset would be OK but no better than -trim.)

[SebastianZ]

I'd argue that *-inset is definitely better than *-trim and would also be more conform with other properties like view-timeline-inset or inset-*.

All the other properties that have "trim" in their name like white-space-trim, text-box-trim, margin-trim, etc. are keyword-based. And trim rather indicates cutting off something rather than potentially expanding it. Therefore I am strongly against using *-trim and *-clip and prefer either *-inset or *-limit.

Sebastian

[jfkthame]

Thinking about this again, I'm feeling less in favor of -inset here. Not sure how well I can articulate this, but fwiw....

To my mind, inset properties are about adjusting their target element in relation to another element (a parent or containing box). Given an element that is being sized or placed within an area that has been defined by some external thing, it makes sense to have the ability to "inset" (or expand, by use of negative inset) that area.

But with decoration lines, it's not readily apparent to an author that there is any such "container" to apply insets to. The decoration line seems more like an attribute of a range of text, and its length is determined by the length of that text, not in relation to some containing element, so the idea of "insetting" from such a container is a little odd.

Arguably the inline element (or pseudo, e.g. ::selection) that defines the decorating line could be considered that container, and the spec talks of the "decorating box", so insets can reasonably be applied to that box, but I don't think this is a model that will generally be at the front of an author's mind. To an author, a decorating line is an independent thing that simply appears below (or above) a range of text. The property under discussion here directly adjusts the length of that line, by "trimming" a certain amount from each end, not by "insetting" it from a containing area.

(As for negative values, a negative "trim" extends and a negative "inset" expands; these seem equally reasonable concepts to me.)

[SebastianZ]

Just to throw in some more alternatives:

• text-decoration-adjust
• text-decoration-{size|length}-adjust
• text-decoration-resize

Not necessarily saying that those are any better than the previous options.

To my mind, inset properties are about adjusting their target element in relation to another element (a parent or containing box). Given an element that is being sized or placed within an area that has been defined by some external thing, it makes sense to have the ability to "inset" (or expand, by use of negative inset) that area.

But with decoration lines, it's not readily apparent to an author that there is any such "container" to apply insets to. The decoration line seems more like an attribute of a range of text, and its length is determined by the length of that text, not in relation to some containing element, so the idea of "insetting" from such a container is a little odd.

"Insetting" to me means relative to something, not necessarily a containing element. Though I can see your point. The existing *-inset-* properties we have are also related to some containing element.

Having said that, I still believe "limit", "inset" and possibly also "(length-)adjust" express the meaning better than words in the meaning of cutting off or taking away something.

Though I am not a native speaker. And so far there were only a few opinions expressed. Maybe someone could set up a quick naming poll somewhere to reach a broader audience, maybe @mirisuzanne or @jensimmons? (I'm not on the big messaging/social media platforms, so can't do that myself, unfortunately.)

Sebastian

[mirisuzanne]

I don't have strong feelings here, text-decoration-trim seems ok to me. *-edge might also be an option?

I'm happy to share a poll – but Mastodon only allows 4 options, and Bluesky doesn't have built-in polling at all. We could try an emoji poll here instead, and link from social media posts?

[fantasai]

There's something similar here with the column-rule properties that @kbabbitt has been working to spec in https://www.w3.org/TR/css-gaps-1/#outset ... They're using *-rule-outset. Maybe text-decoration-outset would work here? Keeping them consistent seems like a good plan in any case.

[kbabbitt]

Gap Decorations does use outsets right now, though in #12848 I'm contemplating flipping them to insets.

For the property we're discussing here, which do we expect to be the more common use case - extending or shrinking? Depending on the answer to that, I'd prefer either outset or inset respectively, such that positive values would reflect the more common case. I would prefer either of those over trim for the reasons @SebastianZ gave. I don't like adjust because that's not clear on which is the positive-value direction, or even what's being adjusted - I could see it being confused for adjustment up or down from the text baseline, for example.

[SebastianZ]

For the property we're discussing here, which do we expect to be the more common use case - extending or shrinking?

From my experience, shrinking is much more common than extending. See the examples I linked to in #8403.

I don't like adjust because that's not clear on which is the positive-value direction, or even what's being adjusted - I could see it being confused for adjustment up or down from the text baseline, for example.

Therefore, I also provided a text-decoration-{size|length}-adjust option. But I admit, it's a bit lengthy.

Sebastian

[SebastianZ]

As suggested by @mirisuzanne, here's the poll (options sorted by when they got suggested):

• 👍🏻 text-decoration-trim
• 😄 text-decoration-inset
• 🎉 text-decoration-limit
• ❤️ text-decoration-clip
• 🚀 text-decoration-adjust
• 👀 text-decoration-size-adjust

I'm splitting them into two comments, because there are not enough emojis.

Multiple votes are allowed!

@fantasai noted that the suffix we use for this property should also be used for the {row|column}-rule-* properties for consistence.

Let's see if we can get some results before the call.

Sebastian

PS: I switched around the icons before any votes were casted.