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!