Re: [csswg-drafts] [filters] Proposal: color-filter

The Working Group just discussed `color-filter`.

<details><summary>The full IRC log of that discussion</summary>
&lt;fantasai> Topic: color-filter<br>
&lt;fantasai> github:<br>
&lt;shane> Restaurant tonight is Long Chim<br>
&lt;fantasai> dino: Some background...<br>
&lt;fantasai> ScribeNick: fantasai<br>
&lt;shane> address for Long Chim: Corner of Pitt Street &amp;, Angel Pl, Sydney NSW 2000<br>
&lt;fantasai> dino: Same way that Windows has done for decades, Apple's latest OS has a “dark theme”<br>
&lt;fantasai> dino: Where user has a checkbox where they can choose between light or dark mode<br>
&lt;fantasai> dino: You can see my browser is in dark mode atm<br>
&lt;fantasai> dino: System apps have implemented this<br>
&lt;fantasai> dino: Seems pretty popular<br>
&lt;fantasai> dino: This is about how you can apply something like that to the Web<br>
&lt;fantasai> dino: Particularly relevant to us for mail messages<br>
&lt;fantasai> dino: which are web pages<br>
&lt;fantasai> dino: What we wnated to do was automatically ocnvert a page to dark mode<br>
&lt;fantasai> dino: To do that, you want white to go to black, but you want hues to stay the same<br>
&lt;fantasai> dino: e.g. blue shouldn't become orange<br>
&lt;fantasai> dino: We had the idea to use color-filter<br>
&lt;fantasai> dino: This takes filters just like 'filter'<br>
&lt;fantasai> dino: But doesn't have ability to omove pixels<br>
&lt;fantasai> dino: It's a paint-time effect<br>
&lt;fantasai> chris: Is this a straight 255 minus effect?<br>
&lt;fantasai> dino: Yes<br>
&lt;fantasai> dino shows off invert()<br>
&lt;fantasai> dino: It's not like a regular filter. No stacking context. Just applies to colors<br>
&lt;fantasai> dino: colors of gradients, anywhere a &lt;color> appears<br>
&lt;fantasai> dino: DOesn't affect images<br>
&lt;fantasai> dino: Because when you switch to dark theme, you don't want to have images invert<br>
&lt;fantasai> dino: or emoji colors to invert<br>
&lt;fantasai> etc.<br>
&lt;fantasai> dino: We don't actually wantto just invert the colors<br>
&lt;fantasai> dino: Here's an example - invert(0.83) hue-rotate(180deg) saturate(3)<br>
&lt;fantasai> dino: white goes to dark gray, bump saturation to compensate for grayishness, and then hue-rotate gets our colors back to what they would be without inversion<br>
&lt;fantasai> dino: Works nicely. Better on my laptop than on the projector here.<br>
&lt;fantasai> dino: This other column does some additional tweaks using JS, to look a little better.<br>
&lt;fantasai> dino: Anyway, this is what we're using to display mail messages now<br>
&lt;fantasai> dino: We have heuristics, if a marketing mail sets bgcolor, we won't do it<br>
&lt;fantasai> dino: but for plaintext or simple HTML messages, we'll apply the filter<br>
&lt;fantasai> dino: What we've got here is not Web-exposed, just in Mail<br>
&lt;fantasai> dino: We can talk more later about Media Queries and how to interact with the Web<br>
&lt;fantasai> dino: But a Web page could e.g. change colors manually in response to a media query, or they could use color-filter<br>
&lt;fantasai> dino: It's just maths on red/green/blue channels of the colors<br>
&lt;fantasai> dino: images are untouched<br>
&lt;fantasai> dino: No stacking context<br>
&lt;fantasai> dino: It's inherited, so you can undo it in a subtree<br>
&lt;fantasai> chris: Initial value?<br>
&lt;fantasai> dino: none<br>
&lt;fantasai> chris: You say not images, but some parts of CSS are &lt;image>s...<br>
&lt;fantasai> dino: Gradients is a good example. If your bgimage is a gradient, you apply it to the coors in the image<br>
&lt;fantasai> leaverou: What about color variables?<br>
&lt;fantasai> fantasai: Gets applied when you apply the color<br>
&lt;fantasai> TabAtkins: But you don't want to double-apply for typed variables<br>
&lt;fantasai> ...<br>
&lt;leaverou> s/What about color variables?/What about custom properties that have been defined to accept &lt;color>?/<br>
&lt;fantasai> xidorn: Is it applied during cascading or what?<br>
&lt;fantasai> emilio: Computed value is not affected<br>
&lt;fantasai> fantasai: used-value time operation<br>
&lt;fantasai> astearns: currentColor<br>
&lt;fantasai> fantasai: probalby fine<br>
&lt;fantasai> heycam: &lt;canvas> ?<br>
&lt;fantasai> dino: Woudln't apply to canvas<br>
&lt;fantasai> dino: Currently implemented not for Web, in apps ike Mail etc.<br>
&lt;fantasai> dino: We think it makes sense for the Web<br>
&lt;fantasai> dino: as a way to help authors adjust page<br>
&lt;fantasai> leaverou: What about color modification functions?<br>
&lt;fantasai> TabAtkins: Amelia asked that already in the issue. I think having both is useful<br>
&lt;fantasai> leaverou: Are there uses other than dark themes?<br>
&lt;fantasai> dino, chris: high-contrast<br>
&lt;fantasai> dino: One of the greatest benefits we've found, before this people with vision issue sthat didn't like bright content would be constantly swapping between inverted/non-inverted mode<br>
&lt;fantasai> dino: And that's a screen-time effect<br>
&lt;fantasai> dino: And then we had to uninvert the images to make that useful for them<br>
&lt;fantasai> dino: And then also create all these stackign contexts, which aaffects the page<br>
&lt;fantasai> dino: So this is pretty nice.<br>
&lt;fantasai> dino: So this might be a nice forced option<br>
&lt;fantasai> dino: That the user could apply, e.g. "I want to see this web site dark"<br>
&lt;fantasai> leaverou: Does it also apply to colors in inline SVG?<br>
&lt;fantasai> dino: Yes<br>
&lt;dbaron> This seems like a reasonable feature, although I'm skeptical about the readability of the mail in the use case Dean described given the massive differences in perceived luminance between the R, G, and B channels.  (e.g., blue on black is hard to read, as is green on white)<br>
&lt;fantasai> leaverou: Woudn't this be ...<br>
&lt;fantasai> leaverou: You can have bitmaps inside an SVG<br>
&lt;fantasai> leaverou: Seems like it would interact badly<br>
&lt;fantasai> dino: Could have a UA rule that sets it back to none<br>
&lt;fantasai> dino: We've mostly experimented with Mail. Haven't tried to apply to the Web yet<br>
&lt;fantasai> heycam: What if page wants to try handling it themselves?<br>
&lt;fantasai> dino: This is a complicated topic, wanted to deal later, but let's talk about it now<br>
&lt;fantasai> dino: If the browser is being told to apply dark mode automatically, what should we do?<br>
&lt;fantasai> dino: If there's a media query that allows the page to detect if the user wants dark mod<br>
&lt;fantasai> dino: Should the browser automatically flip th epage or not?<br>
&lt;fantasai> dino: It would be very odd for MQ to trigger behavior change<br>
&lt;fantasai> fantasai: We do have precedence<br>
&lt;fantasai> frremy: On Windows 8, if you resize an application to be in phone mode, we would scale the website down, except if it used @viewport<br>
&lt;fantasai> florian: That's not a media query. @viewport is *supposed* to have an effect on the page<br>
&lt;fantasai> florian: Opera did that for projection media type.<br>
&lt;tantek> similarly with full screen<br>
&lt;fantasai> dbaron: Been done before, but not a good idea. Poor API<br>
&lt;fantasai> dino: API I think that would provide it is also bad<br>
&lt;fantasai> dino: it's &lt;meta viewport><br>
&lt;fantasai> ...<br>
&lt;fantasai> florian: MS has an alternative to that, it's a property<br>
&lt;fantasai> florian: can say "for this subtree, I've done it"<br>
&lt;fantasai> emilio: Could say color-filter: noe<br>
&lt;fantasai> florian: *If* the browser is doing this with color-filter and not some other mechanism<br>
&lt;fantasai> dino: So you'd set that property on the body<br>
&lt;fantasai> fantasai: Can we use html , not body?<br>
&lt;fantasai> heycam: Is this about high-contrast?<br>
&lt;fantasai> Rossen: yes<br>
&lt;fantasai> dino: The only thing I dn't like about that is it forces you to resolve style before you decide whta you've got to do<br>
&lt;fantasai> dino: meta tag doesn't have that problem<br>
&lt;fantasai> dino: but then can't exclude part of the page<br>
&lt;fantasai> Rossen: In practice, ppl tend to opt out of things like menus and ...<br>
&lt;fantasai> dino: So that's actually main reason we don't want to do it automatically<br>
&lt;tantek> what about where web devs have matched color related values with colors in images?<br>
&lt;fantasai> dino: form-controls look weird<br>
&lt;fantasai> s/form/built-in form/<br>
&lt;fantasai> dino: but ppl don't use built-in form controls that much, they use boostrap etc.<br>
&lt;tantek> Tab: WAT<br>
&lt;fantasai> TabAtkins: Uhhh,, no???<br>
&lt;fantasai> TabAtkins: The whole point is that built-in form controls work properly on.e.g. apple watch<br>
&lt;fantasai> florian: We've discussed similar model for auto-adjustment of colors for printing<br>
&lt;fantasai> florian: Where authro might want the browser to not make changes to the colors, because they already turned on colors and stuff<br>
&lt;fantasai> florian: “Browser has magic adjustments. I want to opt out on this part of the page.”<br>
&lt;fantasai> dino: It worries me a bit that including any style sheet could override this<br>
&lt;fantasai> florian: meta tag seems the wrong layer to do it<br>
&lt;fantasai> fantasai: That's true of viewport meta in general. SHould be in style sheet<br>
&lt;fantasai> dino: Suppose you include your favorite UI library. It supports dark mode.<br>
&lt;fantasai> dino: Should it put "I support dark mode" property on the html?<br>
&lt;fantasai> frremy: No, you set the property on the elements in your framework. Not on the whole page<br>
&lt;fantasai> dino: So bounding to a tree<br>
&lt;fantasai> florian: It's just a property. You *can* use it on &lt;html>, but could apply only to components.<br>
&lt;fantasai> tantek: Did you talk about use case of matching colors in a JPEG?<br>
&lt;fantasai> dino: Could just set the filter to none<br>
&lt;fantasai> florian: Could use property to express two different things<br>
&lt;fantasai> florian: “Dear Browser, don't do it, because I've done it myself.” vs “Dear Browser, don't do it, because here it's not appropriate”<br>
&lt;fantasai> dino: So property is nice there, can say "Don't use on this color of red, because it has to match the red of these shoes" but rest of page is fine<br>
&lt;fantasai> heycam: Are we considering possibility of meechanisms other than color-filter() being set to handle these cases?<br>
&lt;fantasai> heycam: Because if not, then maybe we don't need a separate filter<br>
&lt;fantasai> dino: So far color-filter has been enough for us, but we've only been looking at mail<br>
&lt;fantasai> dino: Haven't tried browsing the web to see what happens on random content<br>
&lt;fantasai> astearns: It's the exceptions I'm worried about<br>
&lt;fantasai> astearns: In mail, generally the bg is set on the canvas<br>
&lt;fantasai> astearns: but on web pages could be arbitrary div<br>
&lt;fantasai> dino: We found a lot of messages that don't set a bgcolor<br>
&lt;astearns> s/canvas/body/<br>
&lt;fantasai> dino: but content sets bg the white<br>
&lt;fantasai> dino: that's why we couldn't  layer mail over a gray application background<br>
&lt;fantasai> dino: had to put some smarts into analyzing the page<br>
&lt;fantasai> dino: If we can detect that the page wants a white background, because it's set some things to white...<br>
&lt;fantasai> dino: But so far color-filter has been enough<br>
&lt;fantasai> dino: Good news is implementation is quite easy<br>
&lt;fantasai> dino: Just at the point of where you're asking for the color value<br>
&lt;fantasai> dino: It's great, makes it easy to be a render-time effect<br>
&lt;fantasai> dino: math is pretty easy<br>
&lt;fantasai> dino: can also cache the values<br>
&lt;fantasai> heycam: Some properties to control the color space that we interpolate in<br>
&lt;fantasai> heycam: for animations and gradients<br>
&lt;fantasai> heycam: That would happen with origianl color values before transofrming them?<br>
&lt;fantasai> dino: Don't think there's case wher eyou d'want to change colors *and* change interpolation space<br>
&lt;fantasai> dino: No idea why red-blue gradient, why if you invert it you'd want it to be in linear-rg<br>
&lt;fantasai> rgb<br>
&lt;fantasai> dino: If you ask for gradient colors, you get filtered colors, and then interpolate like gradient said to<br>
&lt;astearns> s/wher eyou d'want/where you'd want/<br>
&lt;fantasai> dino: Of course could put property with a media query if you wanted<br>
&lt;fantasai> chris: So this modification happens last, just before rendering<br>
&lt;fantasai> dino: Right.<br>
&lt;fantasai> dino: Computed style is still the original color<br>
&lt;fantasai> dino: While we're talkign about this, maybe talk about MQ<br>
&lt;fantasai> dino: Our current one that we use internally, is prefers-dark-interface<br>
&lt;fantasai> dino: Think it's more prefers-dark-content<br>
&lt;fantasai> TabAtkins: prefers-dark<br>
&lt;fantasai> dino: Lines up with prefers-*<br>
&lt;fantasai> dino: User is requesting that they prefer this type of content<br>
&lt;fantasai> florian: I'm supportive of prefers-type MQs,<br>
&lt;fantasai> florian: Question is what is the other options?<br>
&lt;fantasai> florian: Can you express no preference in addition to expressing preference for light?<br>
&lt;fantasai> ...<br>
&lt;fantasai> dino: prefers-dark: light seems weird<br>
&lt;TabAtkins> `color-pref: goth | prep;`<br>
&lt;fantasai> fantasai: Just rename it to something else, e.g. prefers-colors: light | dark | any<br>
&lt;fantasai> ...<br>
&lt;fantasai> heycam: Say you have a site which is already dark, like DaringFireball, and you turn on the browser option "Please automatically make this dark for me"?<br>
&lt;fantasai> heycam: Are there options to keep it dark?<br>
&lt;fantasai> dino: I think we need to be careful to say that "Please make this dark for me" can't be a universial hammer<br>
&lt;fantasai> dino: It's hard to tell<br>
&lt;fantasai> dino: E.g. we try with scrollbarls, to try to guess whether page is light or dark and make scrollbars match<br>
&lt;fantasai> dino: Because DaringFireball sets bgcolor which is neither white nor back<br>
&lt;fantasai> dino: we probably wouldn't change anything<br>
&lt;fantasai> heycam: Is that a case where the author should indicate they already support dark?<br>
&lt;fantasai> dino: Question is, does anyone want to force bright?<br>
&lt;fantasai> dino: If you set bgcolor to hot pink, might say that you support dark and they'll get hot pink anyway<br>
&lt;fantasai> dino: Also for mail you'd get hot pink<br>
&lt;fantasai> dino: ...<br>
&lt;fantasai> florian: Do ppl anticipate forced-darkening of pages?<br>
&lt;fantasai> dino: There are a lot of users who seem to want that<br>
&lt;fantasai> dino: They've set up shortcuts to invert the page<br>
&lt;fantasai> dino: They toggle this on and off as they browse different pages<br>
&lt;fantasai> florian: If you have prefers-dark and forced-dark on at the same time, what does that mean?<br>
&lt;fantasai> dino: ...<br>
&lt;fantasai> dino: If the page says 'I did dark mode' then we wouldn't force it<br>
&lt;fantasai> dbaron: Did some experiments with this sort of color inversion maybe 8-10 yrs ago<br>
&lt;fantasai> dbaron: One problem I ran into in the end, and dino's example with mail was showing it, is that you can't actually do a good job of preserving both satuaration and lightness contrast at the same time<br>
&lt;fantasai> dbaron: because the contributions of red green and blue channels to luminance is very very different<br>
&lt;fantasai> dbaron: In the difference of white vs black, the luminance perception of that is 70% green 23% red and 7% blue or something like that<br>
&lt;fantasai> dbaron: which means that fully saturated blue is quite readable against white, but unreadable against black<br>
&lt;fantasai> dbaron: and fullysaturated green is quite readable against black and unreadable against white<br>
&lt;fantasai> dino: Which is why my third column was there, it bumped dark blues to lighter blues... blends a light-ish blue over every color ...<br>
&lt;fantasai> astearns: I expect as your designer looks at more and more pages, they would find additional tweaks they'd want to make to the filter<br>
&lt;fantasai> astearns: I can see the usefulness for this feature for browser UI<br>
&lt;fantasai> astearns: as something you can toggle, and you can flip it back if it isn't working<br>
&lt;fantasai> astearns: from a design perspective<br>
&lt;fantasai> astearns: I can't imagine someone wanting to tweak their colors with such a blunt hammer<br>
&lt;chris> for sTGB it is 21.26% red  71.52% green  7.22% blue<br>
&lt;fantasai> astearns: Create a light them and a dark theme as a designer, never going to be a filter that'll get you from one to the other<br>
&lt;chris> s/sTGB/sRGB/<br>
&lt;fantasai> astearns: So from UA perspective I see the usefulness<br>
&lt;fantasai> astearns: But from author perspective I can't see the use case<br>
&lt;chris> zakim, this meeting spans midnight<br>
&lt;Zakim> I don't understand 'this meeting spans midnight', chris<br>
&lt;chris> rrsagent, this meeting spans midnight<br>
&lt;RRSAgent> ok, chris; I will not start a new log at midnight<br>
&lt;astearns> s/see the use case/see the use case for the color-filter property/<br>
&lt;fantasai> Rossen: Thank you for demos and explanations, and that's a wrap for this issue.<br>

GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at using your GitHub account

Received on Wednesday, 4 July 2018 01:31:26 UTC