Introducing Text-Stroke

WebKit now supports stroking of text via CSS. In existing Web pages today, the glyphs that are drawn for text are always filled with a single color, specified by the color CSS property. Sometimes authors may want to stroke the edges of the glyphs with one color, and fill with a different color. By stroking text and not filling the interior at all, you can achieve an outline effect (this option exists in TextEdit for example and in OS X text field context menus).

I have introduced four new properties to CSS to support the stroking of text:

text-fill-color – This property allows you to specify a fill color for text. If it is not set, then the color property will be used to do the fill.
text-stroke-color – This property allows you to specify a stroke color for text. If it is not set, then the color property will be used to do the stroke.
text-stroke-width – This property allows you to specify the width of the stroke. It defaults to 0, meaning that only a fill is performed. You can specify a length for this value, and in addition the values thin, medium and thick can be used (with ‘thin’ being most like the outline behavior of OS X).
text-stroke – This property is a shorthand for the two stroke properties.

Here’s an example (download the latest WebKit nightly to see it):

The code for this example is as follows:

<div style="font-size:64px; -webkit-text-stroke: 3px black; color: purple;">
This text has a black 3px stroke and a purple fill.
</div>

These new properties can be used with the ::selection pseudo-element, so you can apply different strokes and fills to selected text.

Text-decorations like underlines and overlines will prefer the stroke color if set (unless it’s transparent). Otherwise they’ll use the fill color.

Text-shadow shadows both the stroke and the fill of the text, so you can get nifty effects like shadowed outlines, as in the following example:

Here is the code for the second example:

<div style="font-size:64px; text-shadow: 5px 5px 5px black; -webkit-text-fill-color: transparent; -webkit-text-stroke:3px red">
Red stroked text with a hollow interior and a black stroked shadow.
</div>

This effect works with the ::first-letter and ::first-line pseudo-elements as well.

As usual, report any bugs you find with this feature at bugs.webkit.org. Enjoy!