[thelist] Marking up words in colours

[John Allsopp]

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 
colour.

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?

J