Surfin' Safari

Introducing Text-Stroke

Posted by Dave Hyatt on Thursday, December 21st, 2006 at 12:10 am

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):

This text has a black 3px stroke and a purple fill.

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:

Red stroked text with a hollow interior and a black stroked shadow.

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!

41 Responses to “Introducing Text-Stroke”

  1. Thinine Says:

    Awesome.

  2. Pingback from soeren says » Blog Archive » text-stroke in WebKit:

    [...] , more Adobe bashing! text-stroke in WebKit Surfin’ Safari: “Introducing text-stroke” Neat. Of course, it won’t be particularly useful until other engines sta [...]

  3. Thinine Says:

    My other comment may not show up since ToT apparently can’t handle the Captcha image. Doesn’t load, even after I refresh the page.

  4. bergamot Says:

    Is there a way to make it stroke outside the text? It looks pretty silly with an internal stroke.

  5. Trackback from guillermoesteves.com:

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

  6. hyatt Says:

    bergamot, the stroke is half outside the text. It’s not a purely internal stroke.

  7. ahruman Says:

    Comparing the text to the outline effect in TextEdit, I noticed that Webkit isn’t doing ligature substitution. With other browsers catching up on the text rendering front, you might want to look at that. :-)

  8. pauld Says:

    That’s pretty neat. Like Ahruman says, it would be nice to see Safari do ligature substitution and other advanced textual features too.

    Speaking of text, the killer addition for me would be CSS3′s vertical text alignment — extremely useful for Japanese, Chinese, and a few other languages. Heck, I believe IE on the Mac can do this — it’s almost shameful.

    And speaking of Japanese, Webkit builds seem to have a lot of bugs when it comes to inputting Japanese in various sites. I hope this sort of thing is being tested. :)

  9. Mark Rowe Says:

    Paul, if you notice bugs when entering Japanese text please follow the instructions at http://webkit.org/quality/reporting.html and report them.

  10. Dimitri Bouniol Says:

    This is a really cool feature.

    Is there any support, or planned support, for line cap styles (rounded, square angle…), and position of the stroke (inside, outside, centered)? (I’m not too sure how the line cap styles can be applied to text, but I’m curious non the less)

  11. Pingback from Ryan Irelan » Text-Stroke in Safari:

    [...] “> Text-Stroke in Safari December 21, 2006 Text-Stroke in Safari – Need the latest nightly of webkit to see the examples. I’m getting a unmountable disk [...]

  12. macnoid Says:

    Ryan Irelan: I’m not a Webkit developer but I can confirm your mounting issue troubles. I have an iMac G5 with 10.4.8 & all security updates and the images are downloaded with the release version of Safari 2.0.4 (419.3) and Firefox for Mac v. 2.0 (so it’s doesn’t appear to be just corruption due to the browser used to download).

    If you just want to see the text effects that Mr. Hyatt is blogging about (rather than report bugs) you can download a previous Webkit image. Webkit-SVN-r18370.dmg works for me. I usually recommend (and personally prefer) to have the latest webkit image so I can report bugs I see.

    What’s wrong with the disk images? You got me. When I try verifying the “Latest-Webkit-SVN” with Disk Utility I’m told first that it has no checksum information, then I’m told Verify Volume failed with error Unrecognized Filesystem. Strangely enough, I don’t get the checksum error when opening WebKit-SVN-r18374.dmg but I do get the Unrecognized Filesystem error. Dunno why the difference.

    I have not yet tried downloading and compiling from source, but that’s next on my agenda. Silly me, I always want the cutting edge :-)

  13. gerv Says:

    Are you planning to change the names of the CSS properties to have a vendor prefix to make it clear they are experimental? (like e.g. -moz-border-radius and -khtml-around-floats)?

  14. adele Says:

    gerv, as you can see from the example code, we use the “-webkit” prefix for these properties.

  15. attaboy Says:

    Text stroking is nifty, but speaking as a designer I think this feature is pretty useless unless you support an outside stroke — most type is just too thin to support being hollowed-out like in the examples.

  16. ddkilzer Says:

    macnoid, the bad disk image is being fixed or has already been fixed.

    http://bugs.webkit.org/show_bug.cgi?id=11906

  17. Julian BH Says:

    Excellent, this looks great. Will this make it into Leopard’s Safari.app?

  18. jamiemcc Says:

    Firstly, good job – it’s a nice feature.

    But I second attaboy’s comment – there’s no point having this feature unless outline stroke is available.
    In fact, I’d go further – outline stroke should be the _default_.

    Some people might not get the distinction – but to anyone with an eye for design, it matters. A good outline will leave an inner “space” which exactly corresponds to the letterform.
    Fancy effects like this must not default to settings that distort the type.

  19. Brower Says:

    Good feature, but…

    It’s easy to see how it can go horribly wrong. Use it on a medium serif font, and substitute yellow for the black outline (in the first example). You’ll see the outline eat away at the characters, almost like a glow effect gone bad.

    Illustrator by default does the it the same way Webkit does it. As Hyatt mentions: half inside, half outside the text. With comparable, horrible results if you use it with the wrong font and/or settings…

    After Effects offers an extra choice: between ‘Stroke over Fill’, or ‘Fill over Stroke’. The first option is the same way Illustrator or Webkit do it, the second one leaves the character shapes intact, rendering the characters OVER the strokes. The result is what most commentators here (myself included) seem to want: undistorted text with an outside outline.

    Long story short: maybe you don’t have to change the way the stroke is created, just render it ‘Fill over Stroke’.

    Just my 2c.

  20. Brower Says:

    Put up a quick (temporary) comparison between ‘Stroke over Fill’ and ‘Fill over Stroke’.

    http://212.203.9.16/Stroke.png

  21. Trackback from The Hard Six:

    Introducing Text-Stroke

    Text stroke is great because it allows text to stand out against a gradated background. The most obvious example would be text on a black-to-white background, because the white text stands out:

    Given that there is now a way to make flexible gradient…

  22. Pingback from Air. Water. UNIX. » text-stroke CSS property added to WebKit:

    [...] t-stroke CSS property added to WebKit

    21
    12
    2006

    http://webkit.org/blog/?p=85 WebKit now supports stroking of text via CSS. In existing Web pages today, the glyphs that are drawn for text are always [...]

  23. Pingback from CSS3 . info - » New text declarations in Webkit - Weblog:

    [...] rations in Webkit
    Peter Gasston, Friday, December 22nd, 2006 at 2:33 pm

    The Webkit project have announced support for a new range of CSS declarations, to be used for putting strokes around tex [...]

  24. jamiemcc Says:

    @Brower

    Thanks for putting up that illustration – it makes the point very clearly.
    I can’t think of a situation where any sane person would want to use “stroke over fill” – so I would suggest that Webkit should default to “fill over stroke”.

    With, of course, the option to have the “fill” render as a transparent knockout effect…

  25. hyatt Says:

    Yeah I agree there should be a way to do a stroke that is entirely outside of the glyphs. I need suggestions for the best way to do that though. I don’t think “fill over stroke” is the right way to think about it, since a partially transparent fill would reveal the stroke behind. I think people really want the stroke to be clipped by the fill (and not overlap the fill at all). In that situation arguably the stroke width should apply to the entire width that is outside the glyphs (and not just half the width)…

  26. hyatt Says:

    I guess the question is if people would *ever* want the behavior of half the stroke being inside the glyphs and overlapping the fill. If the answer is “no”, then I could just change the default behavior.

  27. Pingback from Hazy Notions » Blog Archive » Text stroke in the new Webkit nightly:

    [...] ust learned from the Surfin’ Safari Blog that the latest nightly build of webkit now supports text stroke via a CSS command. Text stroke is such a cool feature–there have been many times when I w [...]

  28. Pingback from a crank’s progress :: links for 2006-12-23:

    [...] 06-12-23 Introducing Text-Stroke “WebKit now supports stroking of text via CSS.” Interesting, especially this: &# [...]

  29. marc nothrop Says:

    I’m not sure it’s safe to assume that internal glyph stoking is *never* desirable, you’d be restricting possible effects where appropriate, say deliberately ‘cutting-into’ a heavy sans serif.

    Indeed in a design sense it could be desirable to control the inner and outer stroke independently, such that you could specify:

    -webkit-text-stroke-inner and -webkit-text-stroke-outer

    It may be a little awkward, but we do more for borders (L/R/T/B), and could be ‘short-handed’ to -webkit-text-stroke: 0px, 2px for a 2px ‘outer-only’ stroke.

    In terms of the *most likely* usage, outer-only, would it be going too far to ‘short-hand’ further to a single unit value that would apply to the outside of the glyphs? e.g.

    -webkit-text-stroke: 3px;

    Flexibility and a desirable default?

  30. Brad Fults Says:

    WebKit has stellar text support and I appreciate that greatly. I do, however, wonder when we’ll see things like better JS and DOM support.

  31. Mark Rowe Says:

    Brad, in what areas would you like to see WebKit’s JavaScript and DOM support improved? It’d be great if you could file bug reports for any specific issues you’d like to see improved — http://webkit.org/quality/reporting.html has instructions on how you can do this.

  32. Pingback from Webkit implementa propietats CSS experimentals no especificades a CSS 3 - a.css, esbudellant estàndards:

    [...] ompetència amb la propietat color. Deixant de banda si són propietats interessants o no, aquestes iniciatives em recorden vells temps i velles guerres que encara fan patir als desenvolupadors [...]

  33. Phrogz Says:

    I created an SVG file illustrating how I think this same feature should be added to the SVG spec. Instead of stroke inside/outside widths separately, have a stroke width property paired with a stroke-location property: http://phrogz.net/svg/stroke-location.svg

  34. attaboy Says:

    I don’t think I’ve ever used or even wanted to use a stroke that cut into type. Illustrator’s behaviour always drives me nuts — I end up pasting the original type over top to achieve the “fill over stroke” look. For type, my vote would be to just make the feature default to an outside stroke and the width measurement refer to how much outside it goes.

    The only argument I can see against this is if this stroke property ever applies to anything other than type. But we already have borders for that, so in theory that’s not an issue.

  35. Pingback from Max Design - standards based web design, development and training » Some links for light reading (9/1/07):

    [...] Interview with founder of Fadtastic – Andrew Faulkner RSS Will Not Make the Mainstream Introducing Text-Stroke Numeric Access Keys Fixed in Firefox Bug: IE7 absolutely positioned italic [...]

  36. Pingback from Michael(tm) Smith » WebKit devs kicking some CSS ass:

    [...] implementing support in WebKit for a couple of very nifty CSS features: first, some custom CSS properties for stroking text (that is, for adding outline effects to character glyphs), followed by support for [...]

  37. Brady J. Frey Says:

    Love it… but why would you use an example that has no semantics? Atleast pop out a paragraph tag, something with relevance; it’s bad enough I have to re-teach every college student I hire who majored in web design, don’t give them bad habits when they’re reading your blog:)

  38. Pingback from shepherdweb.com » Safari Bugs (Bring on OS 10.5 Leopard) » Shane Shepherd: web design and development; music:

    [...] ntinued progress on styleable form controls, and more CSS3 Multi-Column Support Box Shadow Text-Stroke I still use Safari as my main browser despite trying several times to adopt Firefox (which I use when d [...]

  39. Alexander Strange Says:

    I’ve been doing stuff lately that involves drawing a lot of stroked text with ATSUI, and ran into the problem with outer stroke as well. I’d really prefer it if that was the default behavior; there’s a Radar bug about it (#4955880) if you’re interested.

    I notice that semitransparent strokes darken each other if they overlap; that happens to me as well, and I don’t think it’s good behavior. You might not care, though.

    http://astrange.ithinksw.net/textstroke.html

  40. Pingback from colorsimple.com » Blog Archive » Stroke me, stroke me:

    [...] ey’ll ever add additional properties to specify interior, exterior or center stroke. Stroke On! This entry was posted on Tuesday, February 6th, 2007 at 7:06 pm [...]

  41. Pingback from ClearType rendering forthcoming for Safari on Windows? - CSS3 . Info:

    [...] At present the ClearType code path doesn’t support the opacity, text-shadow, -webkit-text-stroke, or -webkit-text-fill CSS properties, amongst other things. Lets hope this development dampens down the recent heated [...]