-webkit-text-stroke and emoji
By @edent
· css HTML HTML5 · 6 comments · 250 words · read ~464 times.
The CSS property -webkit-text-stroke is a curious beastie.
MDN gives a big scary warning saying "Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web."
And yet, it works everywhere. All modern browsers support it. Except on Emoji.
Here's how it work. -webkit-text-stroke: pink 1px; draws a pink outline around text.
This has a pink outline!
Nifty! But what happens if you apply to emoji?
Smile 😁, Star ⭐, Melon 🍈
Nothing.
Interestingly any emoji with default text presentation - or using Variation Selector 15 - does get an outline ☺☮⭐︎
Why would this be useful
Here's an emoji which has the same roughly the colour as the background. Can you see it clearly? What if you select the text?
❤️
Having an outline would make it a lot easier to see.
So, what's so special about emoji? I guess that the way browsers render emoji is more similar to images rather than text? For example, their colours don't invert when selected.
Does anyone know a way to make this work? Or whether -webkit-text-stroke will ever be standardised?
Frankie Roberto says:
Emoji are embedded into fonts as bitmaps, except for Windows, which uses vectors (including a black outline). So yeah, would never work…
Afaik, this doesn't work because the extensions to get system font renderers working with colour glyphs initially only supported PNG, at least on Apple OSes. I guess that the emoji glyphs are mostly still PNG, so there's no vector to outline easily. en.m.wikipedia.org/wiki/OpenType#…
Incidentally, I get the pink outline on all of them on Chrome/Windows. But the Windows emoji for a heart means your outline thing isn't relevant — it has a heavy black keyline already on Microsoft. (The heart is not selected in this screenshot.)
Ryan Janzen says:
I also get the outline as shown in the previous screenshot when using Edge.
Canvas2D can’t outline emoji on macOS (tested in Chrome). Might be worth a test on Windows and mainstream Linux distros.
Odd bug in Firefox: Those text-based emoji sometimes become invisible after scrolling them out of view for a second