rtl-generator

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 = require('rtl-generator');
const result = await rtlGenerator({
    returnOutputOnly: true,
    inputFiles: ['./ltr/style.css']
});

Append rtl css to the same file

var rtlGenerator = require('rtl-generator');
const result = await rtlGenerator({
    inputFiles: ['./ltr/style.css']
});

Write rtl to a new css file

var rtlGenerator = require('rtl-generator');
const result = await rtlGenerator({
    inputFiles: ['./ltr/style.css', './ltr/style-more.css'],
    outputFile: './ltr/style-rtl-combined.css'
});

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:

p {
  /*skip-rtl-conversion-below-line*/ 
  float: left;
  text-direction: left;
}

Output:

.rtl p {
  text-direction: right;
}

Options

• inputFiles: array[string] (required)
• 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:

.margin-of-four {
  margin: 0 10px 40px 20px;
}
.margin-both {
  margin-left: 5px;
  margin-right: 10px;
}  
@media (min-width: 576px) {
    .header_top .col-sm-6:first-child {
        display: inline-block;
        float: left;
      }
      .header_top .col-sm-6:last-child {
        display: inline-block;
        float: right;
      }
}
@media all and (min-width: 992px) and (max-width: 1199px) and (max-width: 480px) {
    .list-group-horizontal-sm {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .list-group-horizontal-sm .list-group-item+.list-group-item.active {
        margin-left: -1px;
        border-left-width: 1px;
    }
    
}

Output:

.rtl .margin-of-four {
    margin: 0 20px 40px 10px;
}
.rtl .margin-both {
    margin-right: 5px;
    margin-left: 10px;
}
@media (min-width: 576px) {
    .rtl .header_top .col-sm-6:first-child {
        float: right;
    }

    .rtl .header_top .col-sm-6:last-child {
        float: left;
    }
}
@media all and (min-width: 992px) and (max-width: 1199px) and (max-width: 480px) {
    .rtl .list-group-horizontal-sm .list-group-item+.list-group-item.active {
        margin-right: -1px;
        margin-left: unset;
        border-right-width: 1px;
        border-left-width: unset;
    }
}

@author Hasan Hameed