HTML Direction rtl issue

html arabic right-to-left direction

20,344

Solution 1

The code is:

<html dir="rtl">

Updated answer using CSS:

Try this:

<span style="direction:rtl;">Arabic Text</span>

Solution 2

Both of these are OK:

<style type="text/css">
        body { direction:rtl; }
</style>

or this:

 <body dir="rtl">

or for HTML5: (but this doesn't work always)

 <body dir="auto">

Solution 3

Set the dir=rtl attribute on the td element: <td dir=rtl>...</td>. The HTML attribute should be used instead of the corresponding CSS property, since the basic writing direction is not just a presentational suggestion but something that depends on the content.

You could also set it on an inner element, e.g. <td><div dir=rtl>...</div></td>. But e.g. code like <TD><span dir="rtl"><p>... won’t work, sice the <p> closes the open span element, so the span element has no content and its attributes have no effect.

Added info: Also make sure that no CSS or HTML setting is overriding the desired effect. For example, align=left on the tr element would set the alignment of all cells to left alignment, and the dir=rtl attribute won’t “win” it on its own. (If there is such an attribute and you can’t remove it, set the cell alignment explicitly, using align=right in HTML.)

Solution 4

I suppose you missing alignment option.

HTML dir="rtl" or CSS direction:rtl is to control BiDi for the language script.

But in most cases where mixing different scripts you need to add HTML align="right" or CSS text-align:right which is used to control visual display alignment.

View more solutions

20,344

Author by

user3030932

Updated on July 13, 2022

Comments

user3030932 almost 2 years
I am working on a Multilanguage website , where in a table one of the td needs to be arabic stuff - which we know need to start from right. I tried it in many ways but couldnt crack it . Would be really appreciated if some one could help me :( .

Here in this text , the content should start from right..
```
 <TD><div dir="rtl">
  خیز ای عشق مجرد مهر را از سر بگیر<br/>
مردم و خالی شدم ز اقرار و از انکار خود
      </div></TD>
```
- user3030932 over 10 years
  
  i need css inside a html table for one td block , please help me with that[ url - gallery.iis.ac.uk/persian_music/qasida_amadam.html]
- Ahmad Alfy over 10 years
  
  Welcome to Stackoverflow. Please take a moment to check the help section. Please show what you tried
- user3030932 over 10 years
  
  hello Ahmad, thanks for your reply , here is the one i tried "<TD><span dir="rtl"><p> آمدم تا رو نهم بر خاک پای یار خود <br/> آمدم تا عذر خواهم ساعتی از کار خود </p></span></TD>" but no luck :(
- Jukka K. Korpela over 10 years
  
  You should include clarifications into the question itself by editing it. A question should be understandable without reading any comments.
- user3030932 over 10 years
  
  Sorry Jukka , I am new to this site registered few minutes ago :) would do that from now on
- Jukka K. Korpela over 10 years
  
  The code now included in the question has the desired effect (tested on Chrome, Firefox, IE). If you observe something different, it must be caused by some external code, like CSS settings that override the effect on text alignment. Please try to check this in a simple test document and to construct a smallest possible document that demonstrates the problem.
user3030932 over 10 years

Hi praveen thanks for your reply , i tried it but no luck :( here is the link of the one i am talking about , the lyrics one - gallery.iis.ac.uk/persian_music/qasida_amadam.html
Praveen Kumar Purushothaman over 10 years

@user3030932 Check now... :)
user3030932 over 10 years

Hello Praveen tried it :( no luck .. Did you had a chance to check the url ? Like i am placing the Arabic text and span css inside <td> ----
user3030932 over 10 years

<TD><span style="direction:rtl;"> آمدم تا رو نهم بر خاک پای یار خود <br/> آمدم تا عذر خواهم ساعتی از کار خود </span></TD>
user3030932 over 10 years

I tried to set the direction inside td element , but it didnt work , the way i am looking out for it to work is , usually a english para starts from left and once we give a <br> it starts freshly in new line - the alignment and consistency on both the lines of starting points would be same . When i give this direction rtl - there isnt a consistency , if the second line is longer , it is pushing the right hand side instead of left hand side .
user3030932 over 10 years

Hello Jukka, thanks for holding up with me and explaining , i havent got any luck :( , what i tried to do is create a new test.html .. and removed all the external css which is acting on it .. here is the link to that page - gallery.iis.ac.uk/persian_music/test.html
user3030932 over 10 years

If you could observe here , the english one's i.e starting from left is absolutely aligned in both the lines of translations , so samething for arabic needs to be repeated from right , but as the first line of lyric is bigger it is pushing the text to right instead of left .Hope you got what i mean
Jukka K. Korpela over 10 years

@user3030932, fine, now the cause of the problem can be seen: it’s the ALIGN="left" attribute in the TR tag. Removing it should fix the problem.
user3030932 over 10 years

Jukka have figured it out just a minute ago :) i am now giving aligh="right" along with direction which is working now . Thanks alot for your help