Question

Word Wrapping Alignment With Javascript/Css?

2

Entering edit mode

12.7 years ago

Goldbear ▴ 130

Hi all, I'd like to display an alignment of two sequences in html format. I'd like to word wrap the text so that the width of the alignment auto adjusts with the window. Does anyone know how to do this? I'm guessing it might involve some css or js?

Thanks

alignment • 2.3k views

ADD COMMENT • link updated 12.7 years ago by Pierre Lindenbaum 161k • written 12.7 years ago by Goldbear ▴ 130

score 5 · Answer 1 · 2011-08-07

I'm not a CSS or JS guru, so here is an 'empirical' solution that seems to work :-)

<html>
<head>
<script type="text/javascript">

var sequences=[
"ATGCAGCAGACCTATGACATGTGGCT-AAAGAAACACAATCCTGGGAAGCCTGGAG-AGGGAACACCACTCACTTCGCGAGAAGGGGAGAAACAGATCCAGATGCCCACTGACTATGCTGACATCATGATGGGCTACCACTGCTGGCTCTGCGGGAAGAACAGCAACAGCAAGAAGCAATGGCAGCAGCACATCCAGTCAGAGAAGCACAAGGAGAAGGTCTTCACCTCAGACAGTGACTCCAGCTGCTGGAGC-TATC-GCTTCCCTATGGGCGAGTTCCAGCTCTGTGAAAGG",
"|||||||||||||||||||||||||| ||| |||||||| || || |||||||||| ||||| | ||| ||| ||| || ||||||||||| ||||||||||||||||| ||||| || ||||||||||||||||||||||||||||||||||| ||||||||||||||||||||||| |||||||||||||||||||| |||||||||||||||||||||||||| || ||||||||| ||||| ||||| || | || ||||||| ||||||||||||| |||||| || |||",
"ATGCAGCAGACCTATGACATGTGGCTGAAA-AAACACAACCCAGGAAAGCCTGGAGAAGGGACCCCCA-TCAGTTCTCGGGAAGGGGAGAAGCAGATCCAGATGCCCACGGACTACGCGGACATCATGATGGGCTACCACTGCTGGCTCTGCGGCAAGAACAGCAACAGCAAGAAGCAGTGGCAGCAGCACATCCAGTCCGAGAAGCACAAGGAGAAGGTCTTCACGTCCGACAGTGACGCCAGCGGCTGG-GCCT-TCCGCTTCCCCATGGGCGAGTTCCGGCTCTGCGACAGG"
];

function text(s)
    {
    return document.createTextNode(s);
    }

function layout()
    {
    var font=18;
    var maf=document.getElementById("maf");
    maf.style.fontSize=""+font+"px";
    while(maf.hasChildNodes())
        {
        maf.removeChild(maf.firstChild);
        }
    var windowWidth=document.body.offsetWidth;
    var left=0;
    while(left<sequences[0].length)
        {
        var len=sequences[0].length-left;
        while((len+20)*font*0.7 >=windowWidth) len--;
        if(len<1) len=1;
        for(var i=0;i< sequences.length;++i)
            {
            maf.appendChild(text(left+1));
            maf.appendChild(text("\t"));
            maf.appendChild(text(sequences[i].substring(left,left+len)));
            maf.appendChild(text("\t"));
            maf.appendChild(text(left+len));
            maf.appendChild(text("\n"));
            }
        maf.appendChild(text("\n"));
        left+=len;
        }
    }

window.addEventListener( "resize", layout, false);
window.addEventListener( "load", layout, false);
</script>
</head>
<body>
<pre id="maf" style="background-color:yellow;font-family:courier;"/>
</body>
</html>

result:

1   ATGCAGCAGACCTATGACATGTGGCT-AAAGAAACACAATCCTGGGAAGCCTGGAG-AGGGAACACCACTCA    72
1   |||||||||||||||||||||||||| ||| |||||||| || || |||||||||| ||||| | ||| |||    72
1   ATGCAGCAGACCTATGACATGTGGCTGAAA-AAACACAACCCAGGAAAGCCTGGAGAAGGGACCCCCA-TCA    72

73  CTTCGCGAGAAGGGGAGAAACAGATCCAGATGCCCACTGACTATGCTGACATCATGATGGGCTACCACTGCT    144
73   ||| || ||||||||||| ||||||||||||||||| ||||| || |||||||||||||||||||||||||    144
73  GTTCTCGGGAAGGGGAGAAGCAGATCCAGATGCCCACGGACTACGCGGACATCATGATGGGCTACCACTGCT    144

145 GGCTCTGCGGGAAGAACAGCAACAGCAAGAAGCAATGGCAGCAGCACATCCAGTCAGAGAAGCACAAGGAGA    216
145 |||||||||| ||||||||||||||||||||||| |||||||||||||||||||| ||||||||||||||||    216
145 GGCTCTGCGGCAAGAACAGCAACAGCAAGAAGCAGTGGCAGCAGCACATCCAGTCCGAGAAGCACAAGGAGA    216

217 AGGTCTTCACCTCAGACAGTGACTCCAGCTGCTGGAGC-TATC-GCTTCCCTATGGGCGAGTTCCAGCTCTG    288
217 |||||||||| || ||||||||| ||||| ||||| || | || ||||||| ||||||||||||| ||||||    288
217 AGGTCTTCACGTCCGACAGTGACGCCAGCGGCTGG-GCCT-TCCGCTTCCCCATGGGCGAGTTCCGGCTCTG    288

289 TGAAAGG 295
289  || ||| 295
289 CGACAGG 295

or

1   ATGCAGCAGACCTATGACATGTGGCT-AAAGAAACACA  38
1   |||||||||||||||||||||||||| ||| |||||||  38
1   ATGCAGCAGACCTATGACATGTGGCTGAAA-AAACACA  38

39  ATCCTGGGAAGCCTGGAG-AGGGAACACCACTCACTTC  76
39  | || || |||||||||| ||||| | ||| ||| |||  76
39  ACCCAGGAAAGCCTGGAGAAGGGACCCCCA-TCAGTTC  76

77  GCGAGAAGGGGAGAAACAGATCCAGATGCCCACTGACT  114
77   || ||||||||||| ||||||||||||||||| ||||  114
77  TCGGGAAGGGGAGAAGCAGATCCAGATGCCCACGGACT  114

115 ATGCTGACATCATGATGGGCTACCACTGCTGGCTCTGC  152
115 | || |||||||||||||||||||||||||||||||||  152
115 ACGCGGACATCATGATGGGCTACCACTGCTGGCTCTGC  152

153 GGGAAGAACAGCAACAGCAAGAAGCAATGGCAGCAGCA  190
153 || ||||||||||||||||||||||| |||||||||||  190
153 GGCAAGAACAGCAACAGCAAGAAGCAGTGGCAGCAGCA  190

191 CATCCAGTCAGAGAAGCACAAGGAGAAGGTCTTCACCT  228
191 ||||||||| |||||||||||||||||||||||||| |  228
191 CATCCAGTCCGAGAAGCACAAGGAGAAGGTCTTCACGT  228

229 CAGACAGTGACTCCAGCTGCTGGAGC-TATC-GCTTCC  266
229 | ||||||||| ||||| ||||| || | || ||||||  266
229 CCGACAGTGACGCCAGCGGCTGG-GCCT-TCCGCTTCC  266

267 CTATGGGCGAGTTCCAGCTCTGTGAAAGG   295
267 | ||||||||||||| |||||| || |||   295
267 CCATGGGCGAGTTCCGGCTCTGCGACAGG   295

I'm sure you would find some better/more elegant answers on stackoverflow.com .

Pierre