4 ms·

> My approach was to draw an American flag emoji and then look at the pixels to see if any of them contained a non-grayscale color. This works because the Windo

by kccqzy 2y ago

> My approach was to draw an American flag emoji and then look at the pixels to see if any of them contained a non-grayscale color. This works because the Windows fallback emoji is just black/white text Wait. I thought Windows has ClearType which could render black text on white background using colors. And furthermore there is a wizard to allow users to adjust how much ClearType adjustment there is. This feels like a totally incorrect solution. And apparently starting from 2021 Microsoft Edge did in fact begin to use ClearText according to this article https://blogs.windows.com/msedgedev/2021/06/02/improving-font-rendering-in-microsoft-edge/ https://blogs.windows.com/msedgedev/2021/06/02/improving-fon... from Microsoft. So the author's approach would be broken in Microsoft Edge since 2021.

tobr 2y ago
The polyfill mentioned and linked in the article has a cleverer solution. It attempts to render the same flag emoji in two different text colors and checks if they end up being the same color or not (same color = probably a color glyph, ie an emoji). https://github.com/talkjs/country-flag-emoji-polyfill/blob/527a3d121d2e198e733934a8b1007c819244e903/src/emoji.ts#L48 https://github.com/talkjs/country-flag-emoji-polyfill/blob/5...
- skrebbel 2y ago
  (I'm the author of the polyfill, though note that all this code is pieced together from existing other libs with irrelevant parts removed; none of the good ideas are mine) Just randomly sharing, the part of the trick I like the most is that it renders the emojis scaled down to a 1x1 canvas, so it renders just a single pixel. That makes checking stuff like "am i not accidentally reading in the transparent area of the glyph" and stuff like that no problem, because the whole emoji is blurred down to a single pixel. The author's example is a bit weird in this regard, it does the same trick (set the canvas width and height to 1), and then it still loops through all 1 pixels and discards any transparent ones.
MatmaRex 2y ago
You're right, but the author's approach still works by accident, because ClearType is disabled when drawing text to canvas. I am not sure why that's the case, but I would guess it's because the subpixel colors can only be computed correctly when the background color is known (and static), and with a canvas, the background can be drawn later or animated. ClearType is only enabled for normal text on the page, and many CSS properties incidentally disable it presumably for similar reasons (e.g. 'will-change: opacity;').

by kccqzy 2y ago

tobr 2y ago

The polyfill mentioned and linked in the article has a cleverer solution. It attempts to render the same flag emoji in two different text colors and checks if they end up being the same color or not (same color = probably a color glyph, ie an emoji). https://github.com/talkjs/country-flag-emoji-polyfill/blob/527a3d121d2e198e733934a8b1007c819244e903/src/emoji.ts#L48 https://github.com/talkjs/country-flag-emoji-polyfill/blob/5...

skrebbel 2y ago
(I'm the author of the polyfill, though note that all this code is pieced together from existing other libs with irrelevant parts removed; none of the good ideas are mine) Just randomly sharing, the part of the trick I like the most is that it renders the emojis scaled down to a 1x1 canvas, so it renders just a single pixel. That makes checking stuff like "am i not accidentally reading in the transparent area of the glyph" and stuff like that no problem, because the whole emoji is blurred down to a single pixel. The author's example is a bit weird in this regard, it does the same trick (set the canvas width and height to 1), and then it still loops through all 1 pixels and discards any transparent ones.

MatmaRex 2y ago

You're right, but the author's approach still works by accident, because ClearType is disabled when drawing text to canvas. I am not sure why that's the case, but I would guess it's because the subpixel colors can only be computed correctly when the background color is known (and static), and with a canvas, the background can be drawn later or animated. ClearType is only enabled for normal text on the page, and many CSS properties incidentally disable it presumably for similar reasons (e.g. 'will-change: opacity;').