Inverted CSS properties to change to RTL


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


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?

Problem courtesy of: SaidbakR


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.

Solution courtesy of: Tsubashi


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;

    float: right;

Here is the Live Demo;

Discussion courtesy of: blasteralfred Ψ

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)

Discussion courtesy of: Niet the Dark Absol

Another few properties...

  1. box-shadow and text-shadow

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

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


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


text-shadow: 2px 2px #FF0000;


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;


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

Also, here are a couple of tips:

  1. Horizontal Positions as Percentages

If you have a style like:

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 deals with rtl issues so can find lots of useful stuff there

Discussion courtesy of: Danield

This recipe can be found in it's original form on Stack Over Flow.