CODEWITHSUNDEEP
htmlfluttermultilingualtext-direction
Ahmed Hussein
Ahmed Hussein

Reputation: 1

How to show html code have multi TextDirection in same line in flutter?

I want to show html code in flutter that have English and Arabic words in same line I use flutter_widget_from_html pub to handle with this but when i show code like

<p>ثاني اكسيد الكربون CO<sub>2</sub></p>

The sub text show in left because I put the text direction rtl

and the sub text should to the right like this

how to solve this problem

I try to change code to

<p dir="rtl">ثاني أكسيد الكربون</p> <p dir="ltr">CO<sub>2</sub></p>

but it will show in seperate lines and I want them in same line

Upvotes: 0

Views: 26

Answers (1)

mplungjan
mplungjan

Reputation: 177685

How about using span or inline-block and reverse the actual tag order?

.inline { display: inline-block; }
<span dir="ltr">CO<sub>2</sub></span> <span dir="rtl">ثاني أكسيد الكربون</span>

<hr/>

<p class="inline" dir="ltr">CO<sub>2</sub></p>
<p class="inline" dir="rtl">ثاني أكسيد الكربون</p>

Upvotes: 0

Related Questions