Fotiman - 1:26 pm on Aug 24, 2012 (gmt 0)

My initial thought is that this can be done but will increase the DOM significantly, because you essentially need to wrap every individual letter with another element. Each wrapper element would also need to use inline styles to ensure that it overrides the styles already used on the page.

Imagine you have the following markup:

<p>This is a sample.</p>

You'd need to parse the DOM, and for each text node (nodeType 3), examine it one letter at a time and generate a replacement string. For example, you'd want the above to turn into something like this:

<p>T<span style="color:#f00;">h</span><span style="color:#f00;">i</span>s <span style="color:#f00;">i</span>s <span style="color:#f00;">a</span> s<span style="color:#f00;">a</span>mpl<span style="color:#f00;">e</span>.</p>

For efficiency, you would want to wrap a series of letters that all fall into the same category, but that adds complexity. Essentially, you'd want something more like this:

<p>T<span style="color:#f00;">hi</span>s <span style="color:#f00;">i</span>s <span style="color:#f00;">a</span> s<span style="color:#f00;">a</span>mpl<span style="color:#f00;">e</span>.</p>

It probably wouldn't be too difficult to whip up a Chrome extension that does this (I've never created a Firefox extension though).