html/css, changing each letter of text?

Question

Is it possible to change color of each letter of a text, for example, I print on screen in tags text, and i want to iterate to every letter, check its value and change its color accordingly, is that possible in using html/css or javascript to add the tags (or if js has a library that already does that), something like the image below, as you notice, each letter has its own color

_{(source: clcbio.com)}

there are lots of different possible ways to do this - what have you tried? — Mike Corcoran, Jul 11 '14 at 18:56
Would this be data that someone would be entering or is it something hard-coded? If it's hard-coded, then @Diodeus has the perfect example. If it's being entered as input, then you probably need to parse through it. — BuddhistBeast, Jul 11 '14 at 18:58
well i did a similar thing for android, using spannable text, going through each letter and adding a span tag, but I can't find a guide on how to do a similar thing for html file (I'll check now how to parse through it) — tan, Jul 11 '14 at 19:01
Javascript is the easiest way to get a handle on the DOM for HTML to add formatting like this dynamically. Other langs have equivalents, for example PHP. — Synchro, Jul 12 '14 at 07:46

score 1 · Answer 1 · answered Jul 11 '14 at 18:57

1

Each letter will need to be wrapped in a SPAN and CSS class names applied to each in order to style them they way you want.

answered Jul 11 '14 at 18:57

Diodeus - James MacFarlane

112,730
33
157
176

well, is there a way to do that automatically, because I can't do that manually because the text changes with each user – tan Jul 11 '14 at 18:58
You can, using JavaScript, but how would depend on how your markup is organized. – Diodeus - James MacFarlane Jul 11 '14 at 19:03

well, the current layout is that the text is between

 tags and that is about it, what do you think would be the best approach to this? and if you can give me a guide to it I would appreciate that

– tan Jul 11 '14 at 19:07

Ricard · Answer 2 · 2014-07-14T18:32:13.883

1

Use id and iterate in javascript with document.getElementById('yourId') or document.getElementsByTagName('HTMLTag'). You can take random colors and set the color with conditionals.

edited Jul 14 '14 at 18:32

answered Jul 11 '14 at 19:02

Ricard

17
3

score 1 · Accepted Answer · answered Jul 11 '14 at 19:14

create the spans with javascript and style the spans with css: http://codepen.io/bhlaird/pen/Jdiye

Javascript

$('document').ready(function() {
    $('.protein').each(function() {
        var target = $(this).html();
        target = target.split("");
        var result = "";
        for (var i = 0, len = target.length; i < len; i++) {
            result += '<span class="' + target[i] + '">' + target[i] + '</span>';
        }
        $(this).html(result);
    });
});

CSS

.V, .L { background-color:green;}
.H {background-color:purple;}
.T {background-color:orange;}
.E {background-color:red;}
.A {background-color:lightgrey;}

HTML (for example)

<div class="protein">VHLTA</div>
<div class="protein">AVTAL</div>
<div class="protein">GGEAG</div>
<div class="protein">VHLTA</div>
<div class="protein">PWTQ</div>

score 1 · Answer 4 · answered Jul 11 '14 at 19:20

You should consider using this JS plugin: Lettering.js It does exactly what you are looking for. You can split any text block by letter, word, line or any combination of the above. It automatically generates class names for each span which makes it easy to target them using CSS or JS and then apply specific styles.

score 1 · Answer 5 · answered Jul 11 '14 at 19:52

I think what you want should be possible. It will require a bit of hard coding to pre-define the different colors. Using values defined during a loop as a class to the newly generated span you can use modulus to apply a desired colored class. I have no information on how your text relates to a value that determines the desired color so this is the best I could come up with:

var colors = ['red','blue','green','orange'];
var text = document.querySelector('.text').innerHTML;
var length = text.length;
for ( i = 0; i < length; i++ ) {
    var span = document.createElement('span');
    span.className = 'coloredText '+(i + 1);
    span.innerHTML = text[i];
    document.body.appendChild(span);
}

var list = Array.prototype.slice.call(document.querySelectorAll('.coloredText'));
var listLength = list.length;

for ( j = 0; j < listLength; j++ ) {
    var number = list[j].className.split(" ")[1] % 4;
    console.log(number);
    console.log(colors[number]);
    list[j].className = list[j].className += ' ' + colors[number];
}

Working example of dynamically generating spans with different colors simply from a string of text: http://jsfiddle.net/Kxgbb/

html/css, changing each letter of text?

5 Answers5