[thelist] Marking up words in colours

John Allsopp john at johnallsopp.co.uk
Sat Jan 19 06:17:01 CST 2008

Joshua Olson wrote:
>> -----Original Message-----
>> From: John Allsopp

>> I mean <span class='green'>m</span><span class='blue'>u</span> 
>> etc is a real mess and makes a mockery of markup removing style 
>> from content.
> Not only is it a real mess, I'm very much opposed to using class names that
> reflect attributes of the display, as opposed to the elements role within
> the document.  But... That is a whole different conversation...

Aye, agreed

>> Is there a way of just doing less typing? Or should I be forgetting 
>> html and using something else like svg or maybe an image with the 
>> coloured text, with plain text by the side.
> Here's how I'd look at it:
> 1.  Come up with some single word to describe WHY the text is to be
> multi-colored.  For this example, I'll pretend the reason is that the text
> represents a trademark.
> 2.  Wrap the "trademarked" word in <span
> class="trademark">Multicolored</span>
> 3.  Use CSS to style the word so that it's appropriately differentiable,
> though not multi-colored.
> 4.  Use JS to locate the element and apply the multi-coloring transformation
> using spans with inline styles.
> Joshua

Thanks. OK, let me say that every letter or group of letters on the page 
will need to be coloured one way or another. Imagine it's a kiddies 
reading book and we want them to be able to tell the difference between 
an 'h' that sounds like the h in 'hi' from the silent h in "light", and 
for that matter, the silent g. Perhaps silent letters are in a different 

I know, accessibility, but ignore that for a second.

I like your system, but the JS would have to have a dictionary of words 
with all their markup and I'm feeling it might end up a bit slow to process.

And, in fact, all words would end up marked up in some way so we may not 
need steps 1 & 2 because every word needs action.

I was half thinking PHP could deliver marked up text from a dictionary 
at the server end, yet still leaving unmarked up text as source for ease 
of maintenance. For that matter, maybe it could deliver ordinary text 
and a single big marked up lump for JS to replace it with. Then at least 
the search engines would see normal text.

Any other ideas?


More information about the thelist mailing list