A look at -webkit-text-stroke

In a previous article, I talked about a gradient wipe with CSS. Turns out that isn't the only cool graphical feature available in Safari CSS. In fact, there appears to be a whole suite of these features. One of these is text-stroke.

The -webkit-text-stroke: and -moz-text-stroke: properties draw a border around text. This is the same property seen in the Traditional Meme Format, which uses the white Impact or Anton font and adds a text stroke.

Unfortunately, as the names might suggest, cross-browser support for this feature is very limited. Most browser engines, including WebKit and Chrome, only have support for a center-aligned stroke, which can look quite ugly, as Chris Coyier of CSS Tricks explained. TL;DR - most characters vary their width and spacing, but strokes don't, and they end up ruining that spacing.

In Firefox and Safari (Webkit) only, you can use the paint-order: property for this. By setting paint-order: stroke fill you can make the text appear "above" the stroke, thus creating what looks like an outside-aligned stroke. But an inside-aligned stroke is still impossible.

But hey, at least you can make memes in which the text is actually text! (linked here, shown below)