[css-text-decor] semantics of 'none'

[skynavga]

In CSS Text Decoration Module Level 3 [1] the meaning of 'none' is given as:

Neither produces nor inhibits text decoration.

What is the meaning of inhibits here and how is this different from produces? The text of CSS2.1 [2] merely says:

Produces no text decoration.

[1] https://drafts.csswg.org/css-text-decor-3/#text-decoration-line-property
[2] https://www.w3.org/TR/2011/REC-CSS2-20110607/text.html#decoration

[frivoal]

This is to say that if you have <span>xx <em>yy</em> zz</span> and

span  { text-decoration: underline; }
em { text-decoration: none; }

The text-decoration: underline on the span causes an underline from xx to zz, and the text-decoration: none; on the em neither creates an additional text-decoration nor punches a hole in the one created by the span, which continues to go from xx to zz.

[skynavga]

How would an author "punch a hole" as it were?

[frivoal]

You can't. That's why it says that none does not inhibit the text decoration. Sometimes some people think that using none on the <em> in the example above would mean that only xx and zz are underlined, and not yy. That's not the case, so this sentence says so.

[skynavga]

I was hoping you weren't going to say that. This creates a possible interoperability problem with TTML which adopted the XSL-FO extensions to CSS2.1's text-decorate, namely, no-overline, no-through-line, and no-underline, which do indeed provide a way to "punch through". Indeed, it may be that XSL-FO and TTML assume that text decorations on nested inlines are applied only once (to glyph areas) and not independently to the nested boxes (areas). In any case, you've given me what I need to answer my question (though you might want to add some further explanation or examples in [css-text-decor] to make this point more clear).

[nigelmegitt]

If you happen to know the background colour is white, then it seems to work (in a rather brittle way, I suspect) if you do:

em {
  text-decoration-color: white;
  text-decoration-line: underline;
}

I shudder to think what the impact is on any other coloured decorations that might be present (https://drafts.csswg.org/css-text-decor-3/#painting shows that any shadows will appear to have this white underline drawn on top of them, before the text is drawn on top)

I see that this technique does not work unless the text-decoration-line: underline; property is explicitly set.

[frivoal]

@skynavga I cannot speak about the TTML extensions, but CSS itself doesn't allow hole-punching in that particular way. However (and again, I don't know for sure if it would suit TTML), but hole-punching via different mechanisms is being considered: there is a mechanism in css-text-decor-4 to allow for a variety of things to be skipped. Note that this is not stable yet, and there are open issues on how this works.

@nigelmegitt that's indeed pretty brittle, as the position (or thickness) of the underline can vary, and you may fail to hide it properly with something like that.

[nigelmegitt]

@frivoal if I read that right, you can only skip objects if they are atomic inlines; however if that is the case, then the text-decoration can be overridden anyway.

For example, setting:

em { 
   text-decoration: none; 
   display: inline-block; 
}

causes the underline to be omitted from the em.

[fantasai]

@nigelmegitt There was quite a bit of discussion around inhibiting line decorations in the past. Values like the ones you note were suggested for text-decoration, and values for text-decoration-skip were also suggested: https://www.w3.org/TR/2010/WD-css3-text-20101005/#text-decoration-skip

I unfortunately don't quite remember what all the discussions were that led into these proposals, but they should be kicking around on the www-style archives...

[fantasai]

In any case, I don't think the spec is unclear about what the definition of none means, so I think that means this issue gets closed with no change? And maybe a new issue is opened to address the use case of inhibiting text decorations?

Lmk if you disgree with that.