5

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?

1
  • Why do you think images should be inverted? Some images may postulate left to right directionality somehow, but that’s a special case. Sep 5, 2012 at 16:29

4 Answers 4

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.

1
  • 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, 2013 at 9:36
3

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)

3

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;`

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:

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

1

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;

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.