W3C home > Mailing lists > Public > whatwg@whatwg.org > January 2011

[whatwg] Google Feedback on the HTML5 media a11y specifications

From: Glenn Maynard <glenn@zewt.org>
Date: Mon, 24 Jan 2011 20:31:09 -0500
Message-ID: <AANLkTinNY+5ggoKMfsYQJ6P5s-uA129tmv0qjjn_5zRV@mail.gmail.com>
On Mon, Jan 24, 2011 at 6:54 PM, Tab Atkins Jr. <jackalmage at gmail.com>wrote:

> On Mon, Jan 24, 2011 at 3:45 PM, Glenn Maynard <glenn at zewt.org> 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
Received on Monday, 24 January 2011 17:31:09 UTC

This archive was generated by hypermail 2.4.0 : Wednesday, 22 January 2020 16:59:30 UTC