On Mon, Jan 24, 2011 at 6:54 PM, Tab Atkins Jr. <[email protected]>wrote:
> On Mon, Jan 24, 2011 at 3:45 PM, Glenn Maynard <[email protected]> wrote: > > As an aside: the font stroke (the outline around each letter) in the > above > > clip helps readability substantially. A solid font color always tends to > > blend into the background in places, where a two-color stroked font > provides > > its own contrast. I've used the same thing in game UIs rendered on top > of a > > moving background. Tangental, but I figured I'd point it out. > > Right now, the WebVTT spec handles this by writing the text in white > on top of a partially-transparent black background. The text thus > never has contrast troubles, at the cost of a dark block covering up > part of the display. > > Stroking text is easy, though. Webkit has an experimental property > for doing it directly. Using existing CSS, it's easy to adapt > text-shadow to produce a good outline - just make four shadows, offset > by 1px in each direction, and you're good. > That's a good one to know. Note that using only four shadows works poorly for some glyphs, whether cardinals or diagonals are used; 8 shadows are needed in practice. For anyone stumbling here from a search, the following seems to work well with various fonts at any font size, at least in Firefox: text-shadow: +0.02em 0.00em 0.02em #4495a9, -0.02em 0.00em 0.02em #4495a9, 0.00em +0.02em 0.02em #4495a9, 0.00em -0.02em 0.02em #4495a9, +0.02em +0.02em 0.02em #4495a9, +0.02em -0.02em 0.02em #4495a9, -0.02em +0.02em 0.02em #4495a9, -0.02em -0.02em 0.02em #4495a9; -- Glenn Maynard
