Menu
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
855
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)
84
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">
4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
