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.
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 == ' '%}
 
{% 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
La solution
Autres conseils
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.
Try using <pre>
tag in <td>
<pre>
'GCAUCCGGGUUGAGGUAGUAG'
'|| |||||| ||| ||| ||'
'CG.AGGUUC..UUC.AUC.UC'
</pre>