-webkit-text-stroke and emoji
css HTML HTML5 · 6 comments · 250 words · Viewed ~487 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:
Ryan Janzen says: