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, the color formatting tags used should be as minimal as possible. How do you suggest to perform this task?
4 Answers
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.
answered Sep 22, 2013 at 14:13
Jukka K. Korpela
203k38 gold badges281 silver badges408 bronze badges
Comments
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;
Comments
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.
Comments
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;}
1 Comment
Ariel
He said that he wanted "distinct color for each character of the text" not for the entire word
specify a different color? You want it to have some logic or be totally random?i, this way:<i style="font-color=#AAAAAA">H</i>but this would generate very large files. I would reconsider the entire need and way of action.