CODEWITHSUNDEEP
htmlcss
morteza mortezaie
morteza mortezaie

Reputation: 1564

how to style block of text so that rtl text to be aligned in right and ltr text aligned left?

I have a block of content contains both left-to-right and right-to-left text and I want to display both correctly.

  1. if the user started with ltr text , the direction to be ltr and text-align left
  2. and if the user started with rtl text , the direction to be rtl and text-align to be right

I wanna do that with only CSS .

I think we should have something like this , But direction Auto is not exist

.content {
direction : auto // rtl for rtl text and vice versa
text-align : auto 
}

Upvotes: 0

Views: 241

Answers (1)

Cédric
Cédric

Reputation: 2639

You can use dir="auto" in HTML, from MDN :

<p dir="rtl">This paragraph is in English but incorrectly goes right to left.</p>
<p dir="ltr">This paragraph is in English and correctly goes left to right.</p>
<p dir="auto">This paragraph is in English and correctly goes left to right.</p>

<hr>

<p>هذه الفقرة باللغة العربية ولكن بشكل خاطئ من اليسار إلى اليمين.</p>
<p dir="auto">هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>

Upvotes: 2

Related Questions