Inverted CSS properties to change to RTL

Question

To change a web page CSS to be RTL from LTR I have to set or invert the following CSS properties:

body{direction:rtl}

any float:left should be float:right and Vice versa

any padding or margin regarding left or right should be reversed

In addition any images should be inverted horizontally.

My question is: are there any more CSS properties should be changed?

Why do you think images should be inverted? *Some* images may postulate left to right directionality somehow, but that’s a special case. — Jukka K. Korpela, Sep 05 '12 at 16:29

score 8 · Accepted Answer · edited Oct 29 '20 at 17:29

8

text-align, background-position, border positions, left and right positions, basically anything and everything that has a horizontal property.

If you would like to do it by hand, you may go through a list of css properties such as this one, but personally I would look at using one of the online tools to get started.

CSSJanus is usually pretty good, though I am sure there are more out there if you google it.

Best of luck.

edited Oct 29 '20 at 17:29

vsync

118,978
58
307
400

answered Sep 05 '12 at 15:27

Tsubashi

730
11
26

Although CSSJanus is good, it is not good if you plan on using it for the following purpose: you have a CSS file with the original LTR layout and you try to create a new CSS file with RTL layout which should be included after the original CSS when the user's lang is RTL. CSSJanus will not overwrite `margin-left: 10px` with `margin-left: auto; margin-right: 10px` but instead just add the `margin-right` property and you end up with both `margin-left` and `margin-right` equal to 10px. – Dzhuneyt Sep 23 '13 at 09:36

score 3 · Answer 2 · answered Sep 05 '12 at 15:27

Are you just trying to use right-to-left writing, or are you trying to mirror the webpage?

body {
    transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
}

This will produce a mirror image of the webpage, but everything still works as it should (links are clickable in their new positions, for instance)

Danield · Answer 3 · 2012-09-06T09:14:53.743

Another few properties...

box-shadow and text-shadow

/* multiply the first value ( horizontal offset of the shadow) by -1 */

`box-shadow: 5px -5px 5px 5px #abc;`

becomes

box-shadow: -5px -5px 5px 5px #abc;

and

text-shadow: 2px 2px #FF0000;

becomes

text-shadow: -2px 2px #FF0000;

2: border-radius

You need to be careful with this one as changing the values to achieve rtl works differently here

 border-radius:25px 0px 0 25px;


becomes

border-radius:0 25px 25px 0; (not border-radius:25px 25px 0 0;)

Also, here are a couple of tips:

Horizontal Positions as Percentages

If you have a style like:

.style
{
position: absolute;
top: 22%;
left: 32%;
...
}

the left property would become 100-32=68%

2. background-position: Horzontal Value in pixels - eg:

background-position: -34px -85px;

In such cases you will have to work this out manually. (See this article)

As a reference:

Here's a great article about about converting a website to rtl

actually, the entire website http://rtl-this.com deals with rtl issues so can find lots of useful stuff there

Alfred · Answer 4 · 2012-09-05T16:34:48.267

You may try;

body {
  -ms-transform: scaleX(-1);
  -moz-transform: scaleX(-1); /* Gecko */
  -o-transform: scaleX(-1); /* Operah */
  -webkit-transform: scaleX(-1); /* webkit */
  transform: scaleX(-1); /* standard */
  filter: FlipH; /* IE 6/7/8 */
}

This will make a mirror effect. Here is a Live Demo.

You may try rtl if you want to flow letters from right to left and may use just text-align: right if you want to float items to right.

If you want text to begin from the right, you may try;

body{
    unicode-bidi:bidi-override;
    direction:rtl;
    float: right;
}

Here is the Live Demo;

Inverted CSS properties to change to RTL

4 Answers4