Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Html direction attribute is not working

In my webpage I set the locale to arabic and want to change the direction of the content display from right to left by using <html dir = "rtl">. But it is not displaying all the divisions of webpage from right to left some are getting reflected and some are not.

Is there any suggestion to change all the content display from right to left of a web page?

like image 259
user2871255 Avatar asked Nov 15 '13 09:11

user2871255


People also ask

How do you set directions in HTML?

Add dir="rtl" to the html tag any time the overall document direction is right-to-left (RTL). This sets the default base direction for the whole document.

What is DIR LTR in HTML?

The dir attribute specifies the text direction of the element's content. The dir attribute can have the following values: ltr - means left-to-right text direction. rtl - means right to left text direction.

What is LTR and rtl?

For example, the en-US locale (for US English) specifies left-to-right. Most Western languages, as well as many others around the world, are written LTR. The opposite of LTR, RTL (Right To Left) is used in other common languages, including Arabic ( ar ) and Hebrew ( he ).

What does direction rtl do?

rtl: Specifies the direction as right to left. ltr(default): Specifies the direction as left to right which is also the default direction.


3 Answers

This is old question, but i hope it'll help someone, If direction:rtl; didn't work then try to override bidi in your css

unicode-bidi: bidi-override !important;
direction: unset !important;
text-align:right;
like image 116
Jo Data Avatar answered Oct 20 '22 21:10

Jo Data


The following code

body {
   direction: rtl;
}

will work like sugar.

like image 22
Renil Babu Avatar answered Oct 20 '22 21:10

Renil Babu


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 also HTML align="right" or CSS text-align:right which is used to control visual display alignment.

like image 32
user.dz Avatar answered Oct 20 '22 21:10

user.dz