[css-text-decor] How to use decoration skipping to turn off underlines?

[litherum]

https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration-skip

During the Sydney F2F, there was an assertion that the text-decoration-skip-* properties can be used to turn off underlining on a particular element. However, I don’t see any value to text-decoration-skip that seems relevant. (The spec hasn’t been updated to break out each of these values into their own properties)

• none skips nothing, which is the opposite of what I want
• objects only skips atomic inlines, but I want to turn off the underline on arbitrary content
• spaces, leading-spaces, and trailing-spaces only skips whitespace, but I want it to skip arbitrary text content
• edges only insets the underline slightly, rather than skipping over entire elements
• box-decoration also isn’t what I want

[fantasai]

Looks like it used to offer that facility, but it was removed: https://www.w3.org/TR/2010/WD-css3-text-20101005/#text-decoration-skip

[fantasai]

The easy way to fix this would be to add back an all value. The problem with this, and I suspect the reason why it was removed, is that the text-decoration-skip properties inherit, and if you specify all on a normal element, and then use text decorations on an element inside it, then they'll get blocked by any descendants of that element, which is not expected.

We'd need to do this using a property that doesn't inherit.

[fantasai]

OK, here's my proposal:

text-decoration-skip-self: auto | skip | no-skip
inherited: no

where

• auto - skip if this element is an atomic inline
• skip - skip this element
• no-skip - don't skip this element, even if it's an atomic inline (draw over/under it just like it's a character)

Questions:

• How does stacking work for line-through on non-replaced atomic inlines (since line-through is supposed to be drawn over content, rather than under)?
• Are the keywords appropriate or do we have better suggestions? :)

Thoughts?

[css-meeting-bot]

The CSS Working Group just discussed using decoration-skipping to turn off underlines, and agreed to the following:

• RESOLVED: Add text-decoration-skip-self as a longhand of text-decoration-skip, for skipping ancestor decorations.

The full IRC log of that discussion

<TabAtkins> Topic: using decoration-skipping to turn off underlines
<TabAtkins> github: https://github.com//issues/2885
<TabAtkins> fantasai: We've had a variety of suggestions for how to turn off ancestor underlines on an element
<TabAtkins> fantasai: We had a suggestion of using text-decoration-skip; it didn't work since it was inheriting
<TabAtkins> fantasai: that doesn't work
<TabAtkins> fantasai: My suggestion is to add text-decoration-skip-self: auto | skip | no-skip
<TabAtkins> fantasai: could add no-skip later if needed
<TabAtkins> fantasai: non-inherited property
<TabAtkins> fantasai: auto skips if it's atomic inline
<TabAtkins> fantasai: skip skips the element regardless
<TabAtkins> fantasai: no-skip avoids skipping even if it's atomic inline; draw it over/under as if it's a character
<TabAtkins> fantasai: useful when images are used as text, like in CJK for rare characters
<TabAtkins> fantasai: not ideal but it happens
<TabAtkins> fantasai: skip would apply to inlines; all ancestor decorations would skip, but its own text decorations would apply
<emilio> q+
<TabAtkins> astearns: This is in addition to the skipping we already have?
<TabAtkins> fantasai: this replaces the existing text-decoration-skip:self
<TabAtkins> fantasai: independent from ink skipping
<TabAtkins> emilio: Is the auto beahvior how browsers behave today?
<TabAtkins> fantasai: yes
<TabAtkins> emilio: sounds reasonable
<astearns> ack emilio
<TabAtkins> astearns: how does it interact with text-decoration-skip?
<TabAtkins> astearns: assume not a shorthand relationship
<TabAtkins> fantasai: We've discussed having a shorthand for both inherited and non
<TabAtkins> fantasai: several places in TExt where it might be useful
<TabAtkins> fantasai: but haven't pulled the trigger yet
<TabAtkins> fantasai: for here it's less critical, but i think it's useful for text-decoration-skip to be a shorthand
<TabAtkins> fantasai: there was also some white space property where we thought about mixing inherited and non
<TabAtkins> emilio: Don't we already ahve one mixed?
<TabAtkins> emilio: border-color? i guess that doesn't inherit
<TabAtkins> fantasai: I think we ahd a proposal for one, but we never solidified it
<TabAtkins> florian: there was something but we changed it to have a special value that mimics non-inheritance
<astearns> s/florian/fremy/
<TabAtkins> fantasai: my suggestion is we make text-decoration-skip a shorthand for all the skip props
<TabAtkins> fantasai: we might need to make the keywords more unique, then
<TabAtkins> jfkthame: do you want to control skipping separately for the different decorations?
<TabAtkins> jfkthame: Like skip underlines on sub elements, but not overlines
<TabAtkins> fantasai: yeah
<TabAtkins> +1
<TabAtkins> astearns: If an author wanted it, would they be able to skip everything and reset the others?
<TabAtkins> jfkthame: No, if you reset on the child they'll move to match the child rather than being continuous
<TabAtkins> emilio: the 'all' trivially does inherited and non-inherited
<TabAtkins> TabAtkins: lol yeah but it's a special case
<dbaron> At least the old Gecko style system (and maybe other engines) had optimizations (in the rule tree) that benefited from shorthands (for many common shorthands) being all-inherited or all-non-inherited.
<TabAtkins> fantasai: so maybe we want skip-all, skip-underline, etc
<TabAtkins> astearns: maybe we could add the specific values when we have use-cases? jonathan, do you know it's something we want to do right now?
<TabAtkins> jfkthame: No haven't been hearing much demand, just seemed like a natural request
<TabAtkins> fantasai: It's good to bring up, as it can affect our naming
<TabAtkins> astearns: maybe goes back to Myles since he brought it up, to see if it's something he wants to design
<dbaron> (Are there people who want text-decoration-skip-ink to apply to line-through decorations?)
<TabAtkins> fantasai: I think we're resolved to add a non-inherited property (a longhand of t-d-skip) that skips t-ds imposed by an ancestor
<TabAtkins> fantasai: open questio is whether we add keywords for the specific types of decorations
<TabAtkins> dbaron: wondering about separate decorations...
<TabAtkins> dbaron: we had people asking for skipping for strike-thrus
<fantasai> s/we had/have we had/
<TabAtkins> fantasai: currently we ink-skip on under and overlines, not linethrus, since it should look like you're striking the text
<fantasai> fantasai: I haven't heard sucha request
<fantasai> ^
<TabAtkins> astearns: OPinions or concerns?
<TabAtkins> astearns: so proposed resolution is to add the new prop as a longhand of t-d-skip
<TabAtkins> astearns: objections?
<TabAtkins> RESOLVED: Add text-decoration-skip-self as a longhand of text-decoration-skip, for skipping ancestor decorations.

[fantasai]

Suggestion from @jfkthame was that the author might want to control the different types of line decorations independently, so we'd have values like skip-all, skip-underlines, skip-overlines, skip-line-throughs.

Another consideration was to make sure the keyword names are unique so that they can be properly combined into the text-decoration-skip shorthand.

[fantasai]

@jfkthame @litherum I've added the new text-decoration-skip-self property to the draft at https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-self-property
I included all the individual skip types that @jfkthame suggested. Have a look and let me know if it seems good!

[Loirooriol]

Seems this could allow combinations:

auto | skip-all | [ skip-underline || skip-overline || skip-line-through] | no-skip

[fantasai]

@Loirooriol Good catch. Fixed, lmk if the computation edits seem appropriate.

[Loirooriol]

spelling-error and grammar-error are "entirely UA-defined".

Does this mean they belong (or may belong if the UA chooses so) to a text decoration category different than underline, overline and line-through? Then they aren't skipped by skip-underline skip-overline skip-line-through, but maybe they are skipped by skip-all? So these wouldn't be equivalent.

[litherum]

It’s a little spooky to create a property for every value of another property. Is this really the right design? What happens when the other property gets a complicated grammar?

[cdoublev]

I am not sure if the intent is to keep or remove text-decoration-skip but if it must stay, would you mind adding none as a valid value of text-decoration-skip-self? When used to declare text-decoration-skip, all its longhand must be set to this value.

It could be treated as an alias of no-skip, or the other way around, so that text-decoration-skip can serialize when text-decoration-skip-self has been declared to no-skip and all other sub-properties are declared to none.