Text Stroke: Stuck In The Middle With You

There is a non-standard way to stroke HTML text (SVG has a standard way). It’s not particularly new. There are -webkit- and -moz- prefixes for it. Jen Simmons recently posted about it, with an example:

span {
     -moz-text-fill-color: #fde;
  -webkit-text-fill-color: #fde;
     -moz-text-stroke-color: #666;
  -webkit-text-stroke-color: #666;
     -moz-text-stroke-width: 2px;  
  -webkit-text-stroke-width: 2px;
}

And she’s right:

This CSS isn’t fully-baked or fully-supported. But it’s good enough to be used today, especially since it’s simply offering a visual enhancement. It’s not mission critical to making a website usable.

I’d only perhaps add that if you were going to do something like add a stroke around white text, you could wrap it in a @supports to be extra sure it’ll be OK (just in case a browser exists that supports text-fill-color but not text-stroke-color) :

@supports 
  ((-webkit-text-stroke-color: #666)
  and
  (-webkit-text-fill-color: white))
  or
  ((-moz-text-stroke-color: #666)
  and
  (-moz-text-fill-color: white)) {
  span {
       -moz-text-fill-color: white;
    -webkit-text-fill-color: white;
       -moz-text-stroke-color: #666;
    -webkit-text-stroke-color: #666;
       -moz-text-stroke-width: 2px;  
    -webkit-text-stroke-width: 2px;
  }
}

See the Pen Text stroke in action by Chris Coyier (@chriscoyier) on CodePen.

It Ruins Most Typefaces

That’s the thing that gets me about it. When you set a stroke straddled over the designed edge of a character, you’re losing the integrity of the shape.

And that’s the trouble with text-stroke in CSS: you have no choice. It’s center-aligned stroke only. Either of the other options, arguably, would have been more useful. It’s not the world’s biggest deal. The larger the text and the beefier the characters, the easier it is to get away with.

Set Behind Trick

If you’d like to simulate an outside-aligned stroke, James Nowland shows how you can set psuedo-element text behind the original text and still use text-stroke:

See the Pen CSS3 Stroke and Gradient Text by James Nowland (@jnowland) on CodePen.

Update! `paint-order` helps

As I write this update (February 2018), Tobi Reif tells me Firefox Nightly now has a CSS property called paint-order, which can help control the order of what is painted on top of what, stroke or fill (or “markers”, which I admittedly don’t know what are).

.stroke-behind {
  -webkit-text-stroke: 5px red;
  paint-order: stroke fill;
} 

This doesn’t help us actually set outside strokes, but it fakes it pretty well. No word on inside set strokes.