https://github.com/less/less-plugin-rtl
auto converts stylesheets from LTR to RTL
https://github.com/less/less-plugin-rtl
less-plugin
Last synced: 8 months ago
JSON representation
auto converts stylesheets from LTR to RTL
- Host: GitHub
- URL: https://github.com/less/less-plugin-rtl
- Owner: less
- License: apache-2.0
- Created: 2015-02-12T15:51:19.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2023-09-25T06:30:35.000Z (over 2 years ago)
- Last Synced: 2025-09-16T00:29:54.607Z (9 months ago)
- Topics: less-plugin
- Language: JavaScript
- Size: 23.4 KB
- Stars: 13
- Watchers: 8
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](http://badge.fury.io/js/less-plugin-rtl) [](https://david-dm.org/less/less-plugin-rtl) [](https://david-dm.org/less/less-plugin-rtl#info=devDependencies) [](https://david-dm.org/less/less-plugin-rtl#info=optionalDependencies)
less-plugin-rtl
===============
Reverses less from ltr to rtl
```less
.reverse {
float: left;
margin-left: 5px;
margin: 1px 2px 3px 4px;
& when (@rtl) {
color: green;
}
}
```
Becomes...
```css
.reverse {
float: right;
margin-right: 5px;
margin: 1px 4px 3px 2px;
color: green;
}
```
To use with lessc
```bash
$ 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
===========
```bash
$ 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.