Html direction attribute is not working

Question

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?

You set the rtl for the text, you need to change your floats and margins for it to work. — Patsy Issa, Nov 15 '13 at 09:03
The attribute sets specific features such as layout direction of tables and the basic writing direction of text. It does not magically change things if you e.g. place some element to the left with CSS positioning. Please post a code example that demonstrates what you mean and specify what is the problem (expected/desired rendering vs. actual rendering). — Jukka K. Korpela, Nov 15 '13 at 09:20

score 34 · Answer 1 · answered Sep 19 '16 at 20:49

34

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;

answered Sep 19 '16 at 20:49

Jo Data

349
3
4

4

Thanks, The `unicode-bidi` property solved my problem – Amir Astaneh Oct 10 '19 at 16:26
`unicode-bidi: bidi-override !important;` will mess up your numbers it seems. 10:16:56 becomes 65:61:01 which is nonsense of course or easier 2022 will become 2202. – C.O. Nov 17 '22 at 21:08

score 4 · Answer 2 · edited Sep 04 '17 at 11:42

4

The following code

body {
   direction: rtl;
}

will work like sugar.

edited Sep 04 '17 at 11:42

Alex M

2,756
7
29
35

answered Sep 04 '17 at 09:56

Renil Babu

2,118
1
20
29

score 3 · Answer 3 · answered Dec 19 '13 at 11:48

3

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.

answered Dec 19 '13 at 11:48

user.dz

962
2
19
39

Is this fine? https://stackoverflow.com/questions/50597254/can-i-use-below-code-html-css-to-make-my-website-compatible-with-rtl – Krupal Patel May 30 '18 at 06:12

score 1 · Answer 4 · answered Jun 28 '21 at 08:16

1

Jsut use this style:

direction: ltr; 
unicode-bidi: embed;

answered Jun 28 '21 at 08:16

Ashnet

404
5
5

score 0 · Answer 5 · edited May 23 '23 at 08:51

0

You can use CSS instead:

* {
  direction: rtl;
}

You can use * selector: https://www.w3schools.com/cssref/sel_all.php (See 'More Examples')

edited May 23 '23 at 08:51

Gerrit Bertier

4,101
2
20
36

answered Nov 15 '13 at 09:04

Knelis

6,782
2
34
54

I want that the direction rtl has to work for all elements in the page block level or non block level. – user2871255 Nov 15 '13 at 09:17

score 0 · Answer 6 · answered Oct 16 '21 at 07:04

in my case it was input type text and the value was url appearing like

"/https://test.com" instead of "https://test.com/" even this didn't help

after trying for a while finally following solution worked for me

.align-right-dir-ltr {
    text-align: right;
    direction: ltr;
}

note : in my html is the dir = "rtl"

score 0 · Answer 7 · answered Feb 23 '23 at 23:57

0

I just ran into this issue on an HTML input. This CSS solution worked in Chrome.

    .rtl {
        direction: rtl;
        unicode-bidi: bidi-override !important;
    }

answered Feb 23 '23 at 23:57

Steve11235

2,849
1
17
18

Html direction attribute is not working

7 Answers7

Linked