Your guide on how to use and make the most out of 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!
Will be transformed into:
RTLCSS comes comes with FULL Support for all direction sensitive CSS properties, below is the complete list of supported CSS properties:
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.
/*!rtl:...*/notations are supported.
Two sets of directives are available. Control and Value 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).
|Ignore||Ignores processing of the following node (self-closing) or nodes within scope (block-syntax).|
|Config||Evaluates the |
|Options||Parses the |
|Raw||Parses the |
|Remove||Removes the following node (self-closing) or nodes within scope (block-syntax).|
|Rename||Renames the selector of the following rule (self-closing) or rules within scope (block-syntax) by applying String Maps.|
Value directives are placed any where inside the declaration value. They target the containing declaration node.
|Ignore||Ignores processing of this declaration.|
|Replace||Replaces the declaration value with |
In case we missed something or you found a bug, please let us know!