Question

i write a program to show arabic text.
i use two type of font:

1:a font with out Arabs

2:a font with out text

i can change each color separately with this method.i used two span tag with the same id for showing text with arab and text with out arab on each other.
result:

every thins is ok.
but when i change text-align to justify it dont work good and the text goes out.
result:

a part of code:

<span class=ThuithQA id=1-0> <font  size=5>بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ (١)</font></span><span class=ThuithE> 
<font color=Red size=5>بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ (١)</font></span><span class=ThuithQA id=1-1> <font  size=5>الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ (٢)</font></span>

i wnt to show text justify.

Answer 1

I could Solve my problem with this code:
i put arab and text in a seperate div
and set div

posation:absolute

and set body

text-align:justify;

a part of code

<div style=" position:absolute;"> 
<span class=ThuithQA id=1-0> 
<font  size=5>بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ (١)</font> 
</span > 
<span class=ThuithQA id=1-1> 
<font  size=5>الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ (٢)</font> 
</span >  
</div> 

<div style=" position:absolute;"> 
<span class=ThuithE> 
<font color=Red size=5>بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ (١)</font> 
</span > 
<span class=ThuithE> 
<font color=Red size=5>الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ (٢)</font> 
</span > 
</div>

result: