User:Artoria2e5/css-math-sandbox

This is a page for testing some filter effects on MW math. Since filter: is not allowed by the MW style sanitizer, the data is encoded in an alternate fashion. Run the code below in the browser console first to enable the styles:

document.querySelectorAll('[data-style]').forEach(el => el.setAttribute("style", el.getAttribute("data-style")))

background: white

$$x_{1,2}={\frac {{\color {Blue}-b}\pm {\sqrt {\color {Red}b^{2}-4ac}}}{\color {Green}2a}}$$

Snapping a white background on is the obvious choice. And it's obviously a bad idea since it doesn't blend with text.

filter: invert(1)

$$x_{1,2}={\frac {{\color {Blue}-b}\pm {\sqrt {\color {Red}b^{2}-4ac}}}{\color {Green}2a}}$$

Destroys colors. Makes PNG text thinner due to gamma.

filter: hue-rotate(180deg) invert(1)

$$x_{1,2}={\frac {{\color {Blue}-b}\pm {\sqrt {\color {Red}b^{2}-4ac}}}{\color {Green}2a}}$$

Vaguely preserves hue; probably good enough for stylizing and identification. Still thins text.

More sophiscated filter?

It is possible to write a gamma-respecting invert with an SVG custom filter. But I think it's not worth it because the gamma issue basically only messes with PNG, and nobody would be using PNG if the browser already supports SVG. (Support for filter: implies SVG support, but the inverse is not true. Lacking support for either is pretty rare anyways; see caniuse.)

As for using a better color space than HSV to keep the hue more constant... This is math, not photography or art.