rtl-generator
A utility to convert any existing left-to-right written css files into right-to-left css.
Suppose you have a website in English (left-to-right) and now you want a way to save manual work and use this utility to automatically generating a right-to-left css which will allow your users to switch.
This utility generates only the code which is modified for rtl. Unlike the css-flip
from Twitter which generates css files containing all the untouched css.
Features
- Generate only converted rtl code required for proper right-to-left UI.
- Handles and preserves css inside media queries for responsiveness.
- Can Handle minified css files as well
- Provide multiple input files or Folder path to convert all css and scss within the path
- Output, Append or Write to a new file
How it works
- Install the npm utility
- Require it in your nodejs project or create a new index.html for conversion
- Provide input ltr css files
- Thats it! The rtl css code will be appended to the input source files with a parent .rtl class. In order to allow a user switch from ltr to rtl provide him a button which will add a .rtl class on the body.
Installation
npm install rtl-generator -g
Usage
Output the rtl css
var rtlGenerator = ;const result = await ;
Append rtl css to the same file
var rtlGenerator = ;const result = await ;
Write rtl to a new css file
var rtlGenerator = ;const result = await ;
Supported CSS Properties
- float
- text-align
- margin
- margin-left
- margin-right
- padding
- padding-left
- padding-right
- left
- right
- border-left
- border-right
- border-left-color
- border-right-color
- border-left-style
- border-right-style
- border-left-width
- border-right-width
Skip properties declaration
You can skip the lines which you do not want to be converted by placing a special directive above the desired property.
Source:
Output:
Options
- inputFiles: arraystring
- outputFile: string (optional)
- rtlParentClass: string (default: .rtl)
- returnOutputOnly: boolean (default: false) // do not write to any file instead return the output
- folderPath: string (optional; if provided, all the css and scss within the folder path will be converted)
Examples
Source:
{}{ }
Output:
{ }{}
@author Hasan Hameed