CSS reverse a whole website (mirror effect)

Asked 7/1, 2013 at 9:47 Answered 13/2, 2022 at 0:48

html css internationalization multilingual right-to-left

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

Contusion answered 7/1, 2013 at 9:47 Comment(0)

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)

Jarlathus answered 7/1, 2013 at 11:0 Comment(1)

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 ;) ) – Victimize 18/1, 2016 at 9:25

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">

Simplicity answered 7/1, 2013 at 9:51 Comment(1)

i'd add classes "rtl" and "ltr" on each as well. – Coordinate 8/1, 2013 at 13:1

html {
  direction:rtl;
}

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

Titfer answered 7/1, 2013 at 11:48 Comment(1)

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. – Edp 7/1, 2013 at 12:18

You can try:

body {
  direction:rtl;
}

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

Hope it helps.

Afterclap answered 7/1, 2013 at 9:50 Comment(1)

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. – Edp 7/1, 2013 at 12:17

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.

Edp answered 7/1, 2013 at 12:16 Comment(2)

that link is no longer valid! – Osmunda 8/1, 2019 at 6:51

This needs more love. This should be the accepted answer. A real time saver! – Chimera 18/11, 2019 at 23:18

You can flip the entire website using Seandunwoody his answer but that would reverse the text and icons and images and such as well. Provided that you place your content in  and <h1> 2 and 3 tags, which you do not put into each other (so no ) you can apply the css like this:

body,p,h1,h2,h3 { 
    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";
  }

What it does is basically the double mirror trick, it mirrors the complete website and then it mirrors all the small paragraph and titles which contain your text and images back to the original orientation but still in the position of the reversed website.

Hacky but it works (not so nice on IE though).

*You also need to add the dir='rtl' to the html or body tag to make sure the text is alligned to the right and hebrew is reversed (english characters will stay left to right but allign right).

Victimize answered 18/1, 2016 at 9:31 Comment(0)

There is a great Magic Tool for that called rtlcss TLDR; long time ago, I got away with doing the following: 1. if an element has a direction:rtl -> remove it 2. if an element have no direction:rtl -> add one in most cases, add direction:rtl to body 4. if element has align:right/left' -> switch left/right 5. if element hasmargin-right/left` -> switch left/right

Limitations which are not handled: 1. Statically placed elements may not be placed right 2. Relative placements may not be placed right 3. Styles in the HTML should be taken care of (if exists, suggest to move into the CSS)

be careful if you plan on using Find & Replace as right & left can be found in mysterious places.
e.g. .copyright { ... } can become .copyleft { ... }

Searching today (Jan '18) i found this great tool that do all the above for you: Take a look at RTLCSS Website

I used it as command line, as i needed to RTL a library CSS i had once, but it can be bundled in your build steps.

Faceplate answered 14/1, 2019 at 9:37 Comment(1)

Very old but this is what i did. – Faceplate 14/1, 2019 at 9:37

I agree to Sean's answer, it actually works! But there's one thing I'd like to mention: he needs to remove the "margin" and the "width" in order to make the page more readable but still flipping.

body { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; }

Rolle answered 13/2, 2022 at 0:48 Comment(0)

Recommended topics

Hot tags