Re: [csswg-drafts] [css-pseudo] questions about text decorations on highlight pseudos (#6022)

The CSS Working Group just discussed `questions about text decorations on highlight pseudos`, and agreed to the following:

* `RESOLVED: Text decos of highlight pseudos sort *outermost* by deco category (per CSS2) then by highlight type. ::selection has an out to allow it to paint on top of everything else.`

<details><summary>The full IRC log of that discussion</summary>
&lt;Rossen_> Topic: questions about text decorations on highlight pseudos<br>
&lt;Rossen_> github: https://github.com/w3c/csswg-drafts/issues/6022<br>
&lt;TabAtkins> fantasai: This is about painting order of text decorations on ::highlight pseudos<br>
&lt;TabAtkins> fantasai: There is a stacking order fo the highlights<br>
&lt;TabAtkins> fantasai: Original text is bottom layer, and things stacked above that: spellcheck, grammar check, target text, selection, something like that<br>
&lt;TabAtkins> fantasai: defined in spec<br>
&lt;TabAtkins> fantasai: When you draw text, text and decorations are also layered spearately: overline, underline, text, strikethru, so over/under are below text and strikethru is above<br>
&lt;TabAtkins> fantasai: so what's the interaction between these two stacking orders<br>
&lt;TabAtkins> fantasai: the proposal is that you maintain the same order between over/under, text, and strikethrus<br>
&lt;TabAtkins> fantasai: highlight pseudos are defined by only the topmost pseudo painting the text, so it's not painted multiple times; in that topmost layer's color<br>
&lt;TabAtkins> fantasai: but over/under/etc stack<br>
&lt;TabAtkins> fantasai: If you have spelling, grammar error and are highlighting, you'll see all the different underlines<br>
&lt;TabAtkins> fantasai: Suggestion is that we do all the underlines in z-index order, then overlines, then the topmost text, then all the strikethrus<br>
&lt;TabAtkins> fantasai: So CSS2 ordering is the "outer" ordering<br>
&lt;TabAtkins> fantasai: This makes strikethru always on top, regardless of where it's from.<br>
&lt;TabAtkins> fantasai: thoughts?<br>
&lt;Rossen_> q?<br>
&lt;TabAtkins> TabAtkins: sounds reasonable to me, ignoring implementation<br>
&lt;TabAtkins> dholbert: Do you know how browsers currently do?<br>
&lt;TabAtkins> fantasai: i haven't tested who supports the various new highlight pseudos yet.<br>
&lt;TabAtkins> fantasai: I know there is some weird behavior wrt text decorations...<br>
&lt;TabAtkins> smfr: can you give the ordering again?<br>
&lt;TabAtkins> fantasai: custom highlights are between text and built-in higlights, with selection on top<br>
&lt;TabAtkins> fantasai: under/overlines defined by non-selection highlights will interleave<br>
&lt;TabAtkins> fantasai: So proposal is all the underlines, then all underlines, then the text (only once), then all the strikethrus on top.<br>
&lt;TabAtkins> fantasai: I think this generally makes sense; selection has some trickiness on some platforms that i'm not sure about<br>
&lt;TabAtkins> TabAtkins: I know iOS has a special ordering for ::selection, but not sure if they do text decorations there<br>
&lt;TabAtkins> smfr: No, ::selection is drawn on top of the text, and doesn't allow text deco<br>
&lt;TabAtkins> fantasai: [gives example, i missed some early bits]<br>
&lt;TabAtkins> i dm'd tantek the ur4l<br>
&lt;TabAtkins> smfr: So is is true that custom highlights can contribue text decos? And they're sorted in that order with the built-ins?<br>
&lt;TabAtkins> fantasai: yes<br>
&lt;TabAtkins> smfr: Okay, now I understand<br>
&lt;TabAtkins> fantasai: So we could draw the text decors for the lower layers below the text, and draw the text decos for higher layers above the text<br>
&lt;TabAtkins> fantasai: problem is that strikethru on lower layers would be below the text<br>
&lt;TabAtkins> fantasai: maybe that's what we want, i dunno<br>
&lt;chrishtr> q+<br>
&lt;TabAtkins> TabAtkins: I think the fact taht any arbitrary layer can co-opt the text painting role means that having the underlayers draw their strikethrus under the text when necessary is a bad thing; it's not easy to predict what layer will actually draw the text. So we should do the full grouping instead<br>
&lt;Rossen_> ack chrishtr<br>
&lt;TabAtkins> smfr: Okay, as long as ::selection is on top, it's fine for us - the rest can sort their decorations together<br>
&lt;TabAtkins> chrishtr: before we resolve, i'd like to have the proposed resolution be written down and tested on impls, so i can double check that there aren't issues<br>
&lt;TabAtkins> chrishtr: no interop or complexity issues<br>
&lt;TabAtkins> fantasai: The person who raise dthe issue is implementing in Chrome<br>
&lt;Rossen_> ack fantasai<br>
&lt;TabAtkins> fantasai: I wanna be clear, smfr, that the strikethrus of a custom highlight can paint atop a selection<br>
&lt;TabAtkins> fantasai: What we could do is special-case ::selection and say that, *aside* from that, everything sorts as described, but ::selection text/etc can paint in a single layer on top of everything else<br>
&lt;TabAtkins> fantasai: The point that Tab brought up - that the existence of another custom highligh shouldn't cause a previous custom highlight to have its strikethru go below - is correct, but due to the nature of ::selection, that's probably fine.<br>
&lt;TabAtkins> fantasai: So like if spelling error used a strikethru, that shoudl paint over the text<br>
&lt;TabAtkins> fantasai: If you have ::text-target as well, we don't want this to cause the spellcheck strikethru to go under the text<br>
&lt;TabAtkins> fantasai: But if you select the text, and we say that it causes the text to come to the forefront and paint over the decos, I think taht's reasonable behavior and would solve your concerns on iOS.<br>
&lt;TabAtkins> smfr: We don't paint the text itslef on that top layer, but just the 'blue wash' the highlights it. I'm fine with reordering the decos, as long as the user selection is atop everything else<br>
&lt;TabAtkins> fantasai: So if you specify ::selection { color: yellow; background: blue; }, waht happens?<br>
&lt;TabAtkins> smfr: Text will be yellow, don't know if we support the background<br>
&lt;TabAtkins> GameMaker: Let me check...<br>
&lt;Rossen_> q?<br>
&lt;TabAtkins> florian: So you'e proposing we *allow* ::selection to be on top, or *require* it?<br>
&lt;TabAtkins> fantasai: I can go either way. I think ::selection overpainting isn't unreasonable.<br>
&lt;fantasai> s/overpainting/overpainting all lower-level text decorations/<br>
&lt;TabAtkins> florian: The iOS thing doesn't seem to be *only* on top, it just works differently than the other highlight pseudos. Background isn't 'background', it's a magic transluscent thing, etc.<br>
&lt;TabAtkins> smfr: Yes, it's special<br>
&lt;TabAtkins> GameMaker: We already do something special with making even user colors slightly transluscent<br>
&lt;TabAtkins> GameMaker: It doesnt' affect text, but if you ahve a red background and yellow selection, it'll be a little transluscent [and look a little orange] - it's not solid color<br>
&lt;TabAtkins> fantasai: Cool, we have another issue on that. So do you paint that transluscent bg over the text?<br>
&lt;TabAtkins> GameMaker: Yes.<br>
&lt;TabAtkins> fantasai: So you can't have yellow text if you have a blue bg, it'll always be a little green?<br>
&lt;TabAtkins> GameMaker: Yes, but it's a subtle effect, not as green an effect as you think.<br>
&lt;TabAtkins> florian: So based on this I suggest we *allow* ::selection to be painted atop - don't need to clone iOS.<br>
&lt;TabAtkins> fantasai: I'm fine with that.<br>
&lt;TabAtkins> fantasai: Proposal is that the "outer" ordering is CSS2 ordering - what type of deco it is.<br>
&lt;TabAtkins> fantasai: "Inner" sort is what type of highlight you hae.<br>
&lt;TabAtkins> fantasai: And as an option, the impl *may* paint all the aspects of the ::selection as a topmost layer above the rest.<br>
&lt;TabAtkins> Rossen_: Objections?<br>
&lt;fantasai> fantasai: let's handle background in a separate issue though<br>
&lt;TabAtkins> chrishtr: I'd just like to have some time to review<br>
&lt;TabAtkins> [chatter about this being provisional for review or what]<br>
&lt;TabAtkins> RESOLVED: Text decos of highlight pseudos sort *outermost* by deco category (per CSS2) then by highlight type. ::selection has an out to allow it to paint on top of everything else.<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6022#issuecomment-816224154 using your GitHub account


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

Received on Thursday, 8 April 2021 21:30:53 UTC