Minimal HTML/CSS To Specify Distinct Color For Each Character Of The Text

I need to specify a different color for each character of the text in an HTML page. The text is long and the generated HTML file size should be as small as possible. In other words

Solution 1:

You need to wrap each character in an element, so it seems that the minimal code is like

<a style=color:#123456>x</a>

or alternatively

<font color=#123456>x</font>

for each character x. The codes are of equal length, but in the latter, the number sign '#' can in practice be omitted (it is an error to omit it, but by browser practice and HTML5 drafts, there is error handling that effectively implies the # provided that the value does not constitute a color name known to the browser. This is risky, so I would go for the first alternatively.

If the colors are not in fact all different but may repeat, then the use of

<a class=¿>x</a>

together with CSS definitions like

.¿{color:#123456}

could result in shorter code. You would then need a class name generator; you could keep the class names to single characters, but care would be needed to make sure that the class selectors will conform to CSS syntax.

Solution 2:

I can't realy tell if there is a way to do it into CSS but here is my code in JavaScript

    var textID = document.getElementById("text"); // go and take the Text from the ID
var text = textID.innerHTML; // Take the text from the
var toChange = text.split(""); // Separrate each letter into array
var newText = ""; // buffer text
var aClassName = ["red", "green", "blue"]; // class name that you want
var colorNumber = 0; // counter to loop into your class

for (var i=0, ii=toChange.length; i<ii; i++){
        if(colorNumber == aClassName.length){ // if you reach the end of your class array
        colorNumber = 0; //Set it back to 0
    }
    // Add between each letter the span with your class
    newText += "<span class="+aClassName[colorNumber]+">"+toChange[i]+"<\/span>";
    colorNumber++
}
// Output your text into the web
textID.innerHTML = newText;

http://jsfiddle.net/WPSrX/

Solution 3:

I am taking the chance of attempting to answer this. This is admittedly not a direct answer, but another way of looking at it that would keep your code to an absolute minimum: If what you want is a sort of non-intrusive watermark; I would suggest the simplest solution to set opacity on the text, and a text-shadow in the css. You could try something like this:

.myText
{
color: white; (or whatever)
opacity:0.5;
text-shadow:....
}

There is a massive amount of options for text shadow; but here is a generator you can play with.

I suppose you could also generate the two colours via javascript, should you wish to alter the colours depending on the image.

Solution 4:

You shared no code so there is nothing I can improve upon so the best that can be done is to show you some shorthand CSS and minimal length CSS classes...

HTML

<span class="r">red</span>

CSS

.r {color: #f00;}