4 ms·
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 t
by 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.