Repository navigation
[css-text-decor] How to use decoration skipping to turn off underlines? #2885
Description
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)
noneskips nothing, which is the opposite of what I wantobjectsonly skips atomic inlines, but I want to turn off the underline on arbitrary contentspaces,leading-spaces, andtrailing-spacesonly skips whitespace, but I want it to skip arbitrary text contentedgesonly insets the underline slightly, rather than skipping over entire elementsbox-decorationalso isn’t what I want
Activity
fantasai commentedon Jan 1, 2020
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 commentedon Jan 1, 2020
The easy way to fix this would be to add back an
allvalue. The problem with this, and I suspect the reason why it was removed, is that thetext-decoration-skipproperties inherit, and if you specifyallon 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 commentedon May 4, 2022
OK, here's my proposal:
where
auto- skip if this element is an atomic inlineskip- skip this elementno-skip- don't skip this element, even if it's an atomic inline (draw over/under it just like it's a character)Questions:
Thoughts?
css-meeting-bot commentedon Aug 1, 2022
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 commentedon Aug 1, 2022
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-skipshorthand.[css-text-decor-4] Redesign text-decoration-skip-self as non-inherite…
fantasai commentedon Sep 2, 2022
@jfkthame @litherum I've added the new
text-decoration-skip-selfproperty to the draft at https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-self-propertyI included all the individual skip types that @jfkthame suggested. Have a look and let me know if it seems good!
Loirooriol commentedon Sep 2, 2022
Seems this could allow combinations:
[css-text-decor-4] Allow text-decoration-skip-self combinations. #2885
fantasai commentedon Sep 2, 2022
@Loirooriol Good catch. Fixed, lmk if the computation edits seem appropriate.
Loirooriol commentedon Sep 2, 2022
spelling-errorandgrammar-errorare "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 byskip-all? So these wouldn't be equivalent.litherum commentedon Sep 3, 2022
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?