auto converts stylesheets from LTR to RTL
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib More tests, fixes, documentation and new version Jul 24, 2015
test
.gitignore
LICENSE Initial commit Feb 12, 2015
README.md
package.json More tests, fixes, documentation and new version Jul 24, 2015

README.md

NPM version Dependencies devDependency Status optionalDependency Status

less-plugin-rtl

Reverses less from ltr to rtl

.reverse {
  float: left;
  margin-left: 5px;
  margin: 1px 2px 3px 4px;
  & when (@rtl) {
    color: green;
  }
}

Becomes...

.reverse {
  float: right;
  margin-right: 5px;
  margin: 1px 4px 3px 2px;
  color: green;
}

To use with lessc

$ npm install -g less-plugin-rtl
$ lessc --rtl file.less out.css

Variables

Three variables are injected ltr and rtl which will be set to true or false and dir which will be set to rtl or ltr.

Property Reversing

To be more in control of properties that get reversed, you can specify property directives

.test {
    -ltr-padding: 0; // rule only appears in LTR
    -rtl-margin: 3px; // rule only appears in RTL
    -ltr-rtl-float: left; // rule does not get reversed in either direction if autoReverse is on
    -rtl-ltr-float: left; // rule does not get reversed in either direction if autoReverse is on
    -ltr-reverse-text-align: left; // rule gets reversed for LTR, so in this case RTL = left, LTR = right
    -rtl-reverse-text-align: left; // rule gets reversed for RTL, so in this case RTL = right, LTR = left
}

Note: The reverse rules only make sense if autoreverse is off.

And this produces in RTL..

.test {
    margin: 3px;
    float: left;
    float: left;
    text-align: left;
    text-align: right;
}

and in LTR...

.test {
    padding: 0;
    float: left;
    float: left;
    text-align: right;
    text-align: left;
}

CLI Options

$ lessc --rtl="dir=LTR auto-reverse=false vars=false" file.less out.css

auto-reverse

Whether rules should be auto reversed or require property directives as above. Defaults to true.

vars

Whether the variables should be available. Defaults to true.

dir

The intended direction. Defaults to RTL.

Programmatic Options

As above, but use dir, vars and autoReverse on the options object.