javascripthtmlcssbioinformaticssequence-alignment

html/css, changing each letter of text?

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

enter image description here
(source: clcbio.com)

Solution

  • 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>