A Complete Guide to RTL CSS from CLI on Windows

Introduction

In this tutorial I will explain framework for converting Left-To-Right (LTR) Cascading Style Sheets (CSS) to Right-To-Left (RTL). as some languages like Arabic, Hebrew, Persian, and Urdu are RTL writing. so in this tutorial will make an example for utopian-io website interface.

What Will I Learn?

• Installing Node.js
• Understand RTLCSS
• Convert Utopian to RTL as example.

Requirements

• Windows 10,8.1,7 (x64)
• Text Editor
• Node.js

Difficulty

• Intermediate

Install Node.js

I recommend installing LTS version.

Download

Animated GIF

Install RTLCSS Package

Open command prompt

Then type npm i rtlcss -g to instally it globally so we can call it later by typing just rtlcss

• You may need to run your command shell as Administrator.

Animated GIF

Understand RTLCSS

To use RTLCSS from command line

Simply Type

rtlcss [option option=parameter ...] [source] [destination]

Example

rtlcss style.css style.rtl.css

• If no destination is specified, output will be written to the same input folder as {source}.rtl.{ext}

Config

Configuration can be set using one of the following methods:

• Specify the configuration file manually via the --config flag.
• Put your config into your projects package.json file under the rtlcssConfig property.
• Use a special file .rtlcssrc or .rtlcssrc.json.

Default .rtlcssrc

{
    "options": {
        "autoRename": false,
        "autoRenameStrict": false,
        "blacklist":{},
        "clean": true,
        "greedy": false,
        "processUrls": false,
        "stringMap":[]
    },
    "plugins": [ ],
    "map": false
}

So that can be used inside your project folder.

For command line options use

rtlcss -h or rtlcss -help

Apply on Utopian-IO

For example I will go to https://utopian.io/faq

Then I will extract the main style.css that is supposed to be LTR

Press Shift + F7

Save it and rename to style.css

Then open command prompt again then type rtlcss style.css style.rtl.css
Hit Enter

Then Edit style.rtl.css by any text editor

Like the following:

Add to body direction: rtl if not exist.

Notes

• You may need to rtl css some divs instead of body as that can result in bad effect
• Also you may need to make some manual edits on the css file to make sure everything in the right place
  then paste it to shift + F7

Now we have RTL interface for Utopian.io.

That's it

---

All images has been taken/created by @Jinzo for an open source project.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---