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?
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.
You may try;
-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;
Here is the Live Demo;
Are you just trying to use right-to-left writing, or are you trying to mirror the webpage?
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)
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;`
box-shadow: -5px -5px 5px 5px #abc;
text-shadow: 2px 2px #FF0000;
text-shadow: -2px 2px #FF0000;
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:
- Horizontal Positions as Percentages
If you have a style like:
the left property would become
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
This recipe can be found in it's original form on Stack Over Flow.