Usage Guide

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

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

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

§Ignore

SyntaxDescription
/*rtl:ignore*/Ignores processing of the following node or nodes within scope.

§Example

  • 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*/
}

§Config

SyntaxDescription
/*rtl:config:{OBJECT}*/Evaluates the {OBJECT} parameter and updates current configuration.

The {OBJ} parameter is evaluated using javascript eval, if you with to disable it, simply add it to the blacklist.

§Example

  • Self-closing
/*rtl:config:
{
"options":{
"autoRename": true,
},
"plugins":[...]
}
*/
.example {
...
}
  • Block-syntax
/*rtl:begin:config:
{
"options":{
"autoRename": true,
},
"plugins":[...]
}
*/
.example {
...
}
/*rtl:end:config*/

§Options

SyntaxDescription
/*rtl:options:{JSON}*/parses the {JSON} parameter and updates current RTLCSS options.

Options parsing is done via JSON.parse, and requires a valid json object.
The new options will override the defaults (not the current context). Plugins will be carried over from the current context.

§Example

  • Self-closing
/* empty options forces defaults. */
/*rtl:options:{}*/
.demo-left { content: 'left'; }
.demo-right { content: 'right'; }

Self-closing options will remain active from this point forward.

  • Block-syntax
/*rtl:begin:options:
{
"autoRename": true,
"stringMap":[
{
"name" : "prev-next",
"search" : ["prev", "Prev", "PREV"],
"replace" : ["next", "Next", "NEXT"],
"options" : {"ignoreCase":false}
}
]
}
*/
.demo-prev, .demo-Prev, .demo-PREV { content: '<'; }
.demo-next, .demo-Next, .demo-NEXT { content: '>'; }
/*rtl:end:options*/

§Raw

SyntaxDescription
/*rtl:raw:{CSS}*/parses the {JSON} parameter and updates current RTLCSS options.

§Example

  • Self-closing
/*rtl:raw:
#example {
border-radius: 25px 0 0 25px;
}
*/

Due to the nature of RAW directive, block-syntax is not supported.

§Remove

SyntaxDescription
/*rtl:remove*/Removes the following node (self-closing) or nodes within scope (block-syntax).

§Example

  • Self-closing
div {
/*rtl:remove*/
direction: rtl;
/*rtl:remove*/
text-align: right;
padding: 10px;
}
  • Block-syntax
div {
/*rtl:begin:remove*/
direction: rtl;
text-align: right;
/*rtl:end:remove*/
padding: 10px;
}

§Rename

SyntaxDescription
/*rtl:rename*/Renames the selector of the following rule (self-closing) or rules within scope (block-syntax) by applying String Map.

§Example

  • Self-closing
/*rtl:rename*/
.float-right {
float: right;
}
  • Block-syntax
/*rtl:begin:rename*/
.float-right {
float: right;
}
.float-left {
float: left;
}
/*rtl:end:rename*/

PREVNEXT