Any clean css method to make each letter in a word a different color?

Question

I need a way to allow each letter of a word to rotate through 3 different colors. I know of some not so clean ways I can do this with asp.net but I'm wondering if there might be a cleaner CSS/javascript solution that is more search engine friendly.

The designer is includes a file like this: http://stlartworks.efficionconsulting.com/Portals/6/Skins/ArtWorks/img/ProgramsHeading.png, for each page. I'd rather not have to manually generate an image for every page as that makes it hard for the non-technical site editors to add pages and change page names.

Answer 1

On the server-side you can do this easily enough without annoying search engines AFAIK.

// This server-side code example is in JavaScript because that's
// what I know best.
var words = split(message, " ");
var c = 1;
for(var i = 0; i < words.length; i++) {
   print("<span class=\"color" + c + "\">" + words[i] + "</span> ");
   c = c + 1; if (c > 3) c = 1;
}

If you really want dead simple inline HTML code, write client-side Javascript to retrieve the message out of a given P or DIV or whatever based on its ID, split it, recode it as above, and replace the P or DIV's 'innerHTML' attribute.

Answer 2

There’s definitely no solution using just CSS, as CSS selectors give you no access to individual letters (apart from :first-letter).

Answer 3

I'd rather not have to manually generate an image for every page

Then generate the image automatically.

You don't specify which server-side technology you're using, but any good one will allow you to manipulate images (or at least call an external image utility)

So the non-technical users would just need to do something like this:

<img src="images/redblueyellow.cfm/programs.png" alt="programs"/>

And the redblueyellow.cfm script would then either use an existing programs.png or generate a new image with the multiple colours as desired.

I can provide sample CFML or pseudo-code to do this, if you'd like?

Answer 4

Here is some JavaScript.

<script type="text/javascript">
   var message = "The quick brown fox.";
   var colors = new Array("#ff0000","#00ff00","#0000ff"); // red, green, blue
   for (var i = 0; i < message.length; i++)
      document.write("<span style=\"color:" + colors[(i % colors.length)] + ";\">" + message[i] + "</span>");
</script>