CODEWITHSUNDEEP
htmlcssweb
SaidbakR
SaidbakR

Reputation: 13534

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:

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?

Upvotes: 5

Views: 7232

Answers (4)

Tsubashi
Tsubashi

Reputation: 740

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.

Upvotes: 8

Danield
Danield

Reputation: 125433

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

Upvotes: 3

Alfred
Alfred

Reputation: 21386

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;

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324610

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)

Upvotes: 2

Related Questions