-webkit-text-stroke and emoji

by @edent | , , | 6 comments | Read ~187 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?


6 thoughts on “-webkit-text-stroke and emoji

  1. 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…

  2. Sam says:

    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#…


  3. 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.)
    Highlighted emoji


    1. Ryan Janzen says:

      I also get the outline as shown in the previous screenshot when using Edge.

  4. Sam says:

    Canvas2D can’t outline emoji on macOS (tested in Chrome). Might be worth a test on Windows and mainstream Linux distros.

  5. Odd bug in Firefox: Those text-based emoji sometimes become invisible after scrolling them out of view for a second

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: