Why RTLCSS ?

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.

Example

.code {
  /*rtl:ignore*/
  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 {
  /*rtl:ignore*/
  direction: ltr;
  /*rtl:ignore*/
  text-align: left;
}

• Block-syntax

.code {
  /*rtl:begin:ignore*/
  direction: ltr;
  text-align: left;
  /*rtl:end:ignore*/
}

§Supported Control Directives

§Remarks

• ¹ Config is evaluated using eval, and it can be disabled by adding it to the blacklist.
• ² 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.
• ³ 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.

Example

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

Output

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

§Supported Value Directives

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