Login/Register
HTML Direction rtl issue
Asked Answered
htmlarabicright-to-leftdirection
C

5

14

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>
Cerebral answered 25/11, 2013 at 10:31 Comment(6)
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] – Cerebral
Welcome to Stackoverflow. Please take a moment to check the help section. Please show what you tried – Mansour
hello Ahmad, thanks for your reply , here is the one i tried "<TD><span dir="rtl"><p> آمدم تا رو نهم بر خاک پای یار خود <br/> آمدم تا عذر خواهم ساعتی از کار خود </p></span></TD>" but no luck :( – Cerebral
You should include clarifications into the question itself by editing it. A question should be understandable without reading any comments. – Jumna
Sorry Jukka , I am new to this site registered few minutes ago :) would do that from now on – Cerebral
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. – Jumna
A
10

The code is:

<html dir="rtl">

Updated answer using CSS:

Try this:

<span style="direction:rtl;">Arabic Text</span>
Adrenal answered 25/11, 2013 at 10:32 Comment(4)
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 – Cerebral
@Cerebral Check now... :) – Adrenal
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> ---- – Cerebral
<TD><span style="direction:rtl;"> آمدم تا رو نهم بر خاک پای یار خود <br/> آمدم تا عذر خواهم ساعتی از کار خود </span></TD> – Cerebral
M
6

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">
Mcgruter answered 12/4, 2014 at 13:24 Comment(0)
J
2

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.)

Jumna answered 25/11, 2013 at 10:57 Comment(5)
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 . – Cerebral
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 – Cerebral
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 – Cerebral
@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. – Jumna
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 – Cerebral
P
1

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.

Penniepenniless answered 19/12, 2013 at 11:7 Comment(0)
C
1

the solution is to put the dir="rtl" (direction:rtl) on the table tag not on td tag. it works fine for me

Chapatti answered 23/1, 2018 at 23:51 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.