Getting Started

Your guide on how to use and make the most out of RTLCSS

Time is Priceless, Caffeine is Not! Buy Me a Coffee ☕


Instead of authoring two sets of CSS files, one for each language direction. Now you can author the LTR version and RTLCSS will automatically create the RTL counterpart for you!

.example {
  display: inline-block;
  padding: 5px 10px 15px 20px;
  margin: 5px 10px 15px 20px;
  border-style: dotted dashed double solid;
  border-width: 1px 2px 3px 4px;
  border-color: red green blue black;
  box-shadow: -1em 0 0.4em gray, 3px 3px 30px black;

Will be transformed into:

.example {
  display: inline-block;
  padding: 5px 20px 15px 10px;
  margin: 5px 20px 15px 10px;
  border-style: dotted solid double dashed;
  border-width: 1px 4px 3px 2px;
  border-color: red black blue green;
  box-shadow: 1em 0 0.4em gray, -3px 3px 30px black;

§CSS Level 3

RTLCSS comes comes with FULL Support for all direction sensitive CSS properties, below is the complete list of supported CSS properties:


§Processing Directives

Moreover, When RTLing a CSS document, there are cases where it’s impossible to know whether to mirror a property value, whether to change a rule selector, or whether to update a non-directional property. In such cases, RTLCSS provides processing directives in the form of CSS comments.

Both standard /*rtl:...*/ and special/important /*!rtl:...*/ notations are supported.


.code {
  direction: ltr;

Two sets of directives are available. Control and Value directives.

§Control Directives

Control directives are placed between declarations or statements (rules and at-rules). They can target a single node (self-closing) or a set of nodes (block-syntax).

  • Self-closing
.code {
  direction: ltr;
  text-align: left;
  • Block-syntax
.code {
  direction: ltr;
  text-align: left;

§Supported Control Directives

Ignore/*rtl:ignore*/Ignores processing of the following node (self-closing) or nodes within scope (block-syntax).
Config/*rtl:config:{OBJECT}*/Evaluates the {OBJECT} parameter and updates current RTLCSS config*1.
Options/*rtl:options:{JSON}*/Parses the {JSON} parameter and updates current RTLCSS options*2.
Raw/*rtl:raw:{CSS}*/Parses the {CSS} parameter and inserts it before the comment node that triggered the directive*3.
Remove/*rtl:remove*/Removes the following node (self-closing) or nodes within scope (block-syntax).
Rename/*rtl:rename*/Renames the selector of the following rule (self-closing) or rules within scope (block-syntax) by applying String Maps.
  • 1 Config is evaluated using eval, and it can be disabled by adding it to the blacklist.
  • 2 Options parsing is done via JSON.parse, and requires a valid json. The new options will override the defaults (not the current context). Plugins will be carried over from the current context.
  • 3 Due to the nature of RAW directive, block-syntax is not supported.

§Value Directives:

Value directives are placed any where inside the declaration value. They target the containing declaration node.


body {
  font-family: 'Droid Sans', 'Helvetica Neue', Arial /*rtl:prepend:"Droid Arabic Kufi", */;
  font-size: 16px /*rtl:14px*/;


body {
  font-family: 'Droid Arabic Kufi', 'Droid Sans', 'Helvetica Neue', Arial;
  font-size: 14px;

§Supported Value Directives

Append/*rtl:append:{value}*/Appends {value} to the end of the declaration value.
Ignore/*rtl:ignore*/Ignores processing of this declaration.
Insert/*rtl:insert:{value}*/Inserts {value} to where the directive is located inside the declaration value.
Prepend/*rtl:prepend:{value}*/Prepends {value} to the begining of the declaration value.
Replace/*rtl:{value}*/Replaces the declaration value with {value}.

In case we missed something or you found a bug, please let us know!