HTML Multiple spaces Alignment

Question

I want there rows alignment by col, I write the code:

result.seq_content = 'GCAUCCGGGUUGAGGUAGUAG'
result.vel_bar =     '|| ||||||  ||| ||| ||'
result.seq_match =   'CG.AGGUUC..UUC.AUC.UC'
<table style="font-family:Courier, monospace;">
<td>
    {{ result.seq_content}}
    <br>
    {{ result.vel_bar}}
    <br>
    {{ result.seq_match}}
    </td>
</tr>
</table>

But the result is

Multiple spaces become a space.

I used tag pre, but the size of A, C, G, U is not equal to the size of | or space, so it failed.

I changed the code:

result.seq_content = 'GCAUCCGGGUUGAGGUAGUAG'
result.vel_bar =     '|| ||||||  ||| ||| ||'
result.seq_match =   'CG.AGGUUC..UUC.AUC.UC'
<table style="font-family:Courier, monospace;">
<tr>
    <td>
    {{ result.seq_content}}
    <br>
    {% for e in result.vel_bar %}
        {% if e == ' '%}
            &nbsp
        {% else%}
            {{ e}}
        {% endif%}
    {% endfor%}
    <br>
    {{ result.seq_match}}
    </td>
</tr>
</table>

But the size of {{ e}} is bigger than A, C, G, U.

So how could I align multiple spaces, like this:

GCAUCCGGGUUGAGGUAGUAG
|| ||||||  ||| ||| ||
CG.AGGUUC..UUC.AUC.UC

Thanks! :D

The problem has been solved.

I replaced all ' ' with nbsp;, and cancel the automatic escape, this is my code:

result.vel_bar = result.vel_bal.repalce(' ', ' ')

<td align="left">
{{ result.seq_content }}
{% autoescape false%}
{{ result.vel_bar}}
{% endautoescape %}
{{ result.seq_match }}
</td>

Thank you for help. :D

Answer 1

First of all it was good to use a monospace font. HTML replaces multiple spaces to a single one: but you can replace each space with   result.vel_bar.replaceAll(/\s/, ' ') This way your alignment should be perfect.

Answer 2

You can break those sequence elements using some php/js/python arrays and then build it up using php/js/python using the css classes that make it happen: http://jsfiddle.net/ewR54/5/

So basically you parse your data:

GACU
||||
CUGA ..

^--Parser -->

and for each sequence you take the 3 elements out (ex: G, |, C) and build it using php, js or python using the div construction in that fiddle I posted.

Have fun.

Answer 3

Try using <pre> tag in <td>

    <pre>
    'GCAUCCGGGUUGAGGUAGUAG'
    '|| ||||||  ||| ||| ||'
    'CG.AGGUUC..UUC.AUC.UC'    
    </pre>

Demo