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. ~TJ
