Fwd: CSS question: Can you do character level coloring?

So it looks like you can’t do this which is what I was thinking.
So we may want to bring this up in our CSS meeting at TPAC.
Charles.

Begin forwarded message:

From: Dave Cramer <dauwhe@gmail.com<mailto:dauwhe@gmail.com>>
Subject: Re: CSS question: Can you do character level coloring?
Date: September 24, 2018 at 10:37:27 AM PDT
To: charlesl@benetech.org<mailto:charlesl@benetech.org>

Hi Charles,

You're right--there's no easy way. Javascript could wrap a span around
each such character, which could then be styled. But you can't select
all "3"s in an element, and change their style.

It might also be possible to create fonts with such coloring built-in,
using OpenType-SVG fonts. Haven't tried this yet.

Thanks!

Dave
On Mon, Sep 24, 2018 at 11:46 AM Charles LaPierre <charlesl@benetech.org<mailto:charlesl@benetech.org>> wrote:

Hi Dave, I am 99.9% sure CSS can’t do this but thought I would ask.
The idea is in math there are certain characters’s that Dyslexic’s get wrong a lot of the time, but if we can change the color of these characters it helps a lot.

So ie. 3’s and 8’s look similar and having them different colors for these characters would be helpful, same for plus and a division sign, 6’s and 9’s etc.

I assume there is no easy way to do this in CSS at the moment right?
The a11y math Community Group is looking into this idea and we may bring it up as a discussion point with the CSS WG in our Monday’s meeting with them.

Thoughts?

Thanks
EOM

Charles LaPierre
Technical Lead, DIAGRAM and Born Accessible
Twitter: @CLaPierreA11Y
Skype: charles_lapierre
Phone: 650-600-3301