CSS reverse a whole website (mirror effect)

html css internationalization multilingual right-to-left

14,415

Solution 1

It is possible to flip the entire site exactly as you describe with but a few lines of CSS see here: http://jsbin.com/aduqeq/5/edit

CSS:

body { 
        margin: 0 auto;
        width: 300px;
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
      }

There are a few downsides to this approach however:

1) While it works Fine in Firefox + Chrome, it only sort of works in IE8+ (the text looks very strange to me in IE) expect support to be a bit patchy (this is a new CSS3 feature)

2) There are obvious semantic disadvantages here

3) Some people seem to have a thing about vendor prefixes

Overall using RTL on the body and using a different stylesheet might be a much better alternative here, even thought it's more cumbersome for you, the end user is provided with a better experience (unfortunately the quick fixes we want aren't always available)

Solution 2

A lot of sites consist of a menu bar and a content area. These are usually the main areas of focus for flipping. Should be easy with 3 lines of CSS :

html[dir="rtl"] #menu {
    float: right;
}

This same CSS code can easily be adapted to match other areas that should be moved. There's really no need to maintain 2 sets of templates, unless you hardcoded coordinates (which was a bad idea anyway).

Of course, make sure to set <html dir="rtl">

Solution 3

html {
  direction:rtl;
}

This will reverse everything on page from right to left. You need to adjust this for every element in your page.

Solution 4

You can try:

body {
  direction:rtl;
}

But that would just give you a starting point to start from...

Hope it helps.

Solution 5

The developers of MediaWiki, the software that powers Wikipedia in hundreds of languages, developed a tool called CSSJanus, which can cleverly flip your CSS on the fly for right-to-left languages:

https://github.com/cssjanus

This is successfully used for Wikipedias in right-to-left languages, and as a result they require very little duplicate maintenance of CSS.

View more solutions

14,415

Author by

Nathan H

Soluto #SOreadytohelp

Updated on July 28, 2022

Comments

Nathan H almost 2 years

I am building a multi-lingual website. Some languages (like Hebrew) read from right-to-left. Besides the actual text, those users are used to having navigation and other visual clues reversed.

For example the main menu on top would be aligned to the right. "back" button would point forward, logo on the top right instead of top left, etc.

One solution is of course to create a whole new design, however that would mean I'd have to maintain 2 templates. Not ideal.

I was just thinking, would it be possible to flip the entire design in CSS? Like looking in a mirror?

I'm also opened to better solutions if this seems far fetched.

Technologies used: PHP, Yii, Less.css, jQuery
Amir E. Aharoni over 11 years

Whenever possible, "rtl" should be applied as an HTML attribute and not in CSS: <body dir="rtl">. Also, while this is essential, it's just a starting point.
Amir E. Aharoni over 11 years

As I wrote above, whenever possible, "rtl" should be applied as an HTML attribute and not in CSS: <html dir="rtl">. Also, while this is essential, it's just a starting point. Some projects maintain two sets of CSS files; others use some automatic tools for flipping them. I wrote an example from MediaWiki below as an answer.
albert over 11 years

i'd add classes "rtl" and "ltr" on each as well.
Bas van Stein over 8 years

You can fix the flipped text and other content by applying the same css to p. Provided that you never stack p tags it would work like a charm. (Very hacky though ;) )
user2473779 over 5 years

that link is no longer valid!
Tomer W over 5 years

Very old but this is what i did.
Louie Almeda over 4 years

This needs more love. This should be the accepted answer. A real time saver!