cloudhead/less.js — Issue #642: [Feature Request] Add automatic RTL-ization of output
Author: mushon
Created: 2012-02-20 15:30:51+00:00
State: open

Localization is one of the major headaches facing Middle Eastern Open Source hackers, we write from right to left and need to both translate the language (Arabic, Farsi, Hebrew, Urdu…) and flip the layout. Flipping the layout and the css declarations from LTR (Left-To-Right) to RTL (Right-To-Left) is definitely a major challenge for us. I would even say it has tremendously hindered the success of Open Source software in the region.

Less.js and its preprocessing workflow provides an opportunity to quickly and 'DRY'ly overcome a lot of this hurdle.

Without going into too much details, what's mainly required is a way to parse through the output css and automatically change "left" to "right" in properties (such as "margin-left: 10px" => "margin-right: 10px") and values (such as "float: left" => "float: right") and to flip the declaration positions in 4 valued statements (such as "padding:1px 2px 3px 4px" => "padding:1px 4px 3px 2px").

I am imagining this can elegantly work by extending the @import property:
```css
@import(rtl) "lib.less";
```
This would allow 2-ways direction flipping and a seamless mix of cross-directional libs.

Some reference can be found in previous solutions such as:
* [CSS Janus](http://cssjanus.commoner.com/) ([relevant py code here](http://code.google.com/p/cssjanus/source/browse/trunk/cssjanus.py))
* [Closure StyleSheets's solution](http://code.google.com/p/closure-stylesheets/#RTL_Flipping)
* I don't know of any SASS solutions to this, but I might have not searched enough

What do you guys think, is this something that can find its way into Less.js? Any interest in helping pull this off? Patches anyone?