Getting Started

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

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:

backgroundborder-right-colormargin
background-imageborder-right-stylemargin-left
background-positionborder-right-widthmargin-right
background-position-xborder-stylepadding
border-bottom-left-radiusborder-top-left-radiuspadding-left
border-bottom-right-radiusborder-top-right-radiuspadding-right
border-colorborder-widthright
border-leftbox-shadowtext-align
border-left-colorcleartext-shadow
border-left-stylecursortransform
border-left-widthdirectiontransform-origin
border-radiusfloattransition
border-rightlefttransition-property

§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

NameSyntaxDescription
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.

§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

NameSyntaxDescription
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!


PREVNEXT