Your guide on how to use and make the most out of RTLCSS
String maps is an array of map objects, where each defines a mapping between directional strings. It is used in renaming selectors and URL updates.
The following is the default string map:
[
{
'name' : 'left-right',
'priority': 100,
'search' : ['left', 'Left', 'LEFT'],
'replace' : ['right', 'Right', 'RIGHT'],
'options' : {
'scope' : '*',
'ignoreCase' : false
}
},
{
'name' : 'ltr-rtl',
'priority': 100,
'search' : ['ltr', 'Ltr', 'LTR'],
'replace' : ['rtl', 'Rtl', 'RTL'],
'options' : {
'scope' : '*',
'ignoreCase' : false
}
}
]
To override any of the default maps, just add your own with the same name.
A map object consists of the following:
Property | Type | Description |
---|---|---|
name | string | Name of the map object |
priority | number | Maps are sorted according to prioirity. |
exclusive | boolean | When enabled, prevents applying the remaining maps. |
search | string or Array | The string or list of strings to search for or replace with. |
replace | string or Array | The string or list of strings to search for or replace with. |
options | object | Defines map options. |
The map options
attribute is optional, and consists of the following:
Property | Type | Default | Description |
---|---|---|---|
scope | string | * | Defines the scope in which this map is allowed, 'selector' for selector renaming, 'url' for url updates and '*' for both. |
ignoreCase | boolean | true | Indicates if the search is case-insensitive or not. |
greedy | boolean | options.greedy | When enabled, string replacement will NOT respect word boundaries. i.e. .ultra { ...} will be changed to .urtla {...} |
// a simple map, for swapping "prev" with "next" and vice versa.
{
"name" : "prev-next",
"search" : "prev",
"replace" : "next"
}
// a more detailed version, considering the convention used in the authored CSS document.
{
"name" : "prev-next",
"search" : ["prev", "Prev", "PREV"],
"replace" : ["next", "Next", "NEXT"],
"options" : {"ignoreCase":false}
}
Let’s apply the detailed version to a sample CSS and see what happens:
LTR CSS
/*rtl:begin:options: {
"autoRename": true,
"stringMap":[ {
"name" : "prev-next",
"search" : ["prev", "Prev", "PREV"],
"replace" : ["next", "Next", "NEXT"],
"options" : {"ignoreCase":false}
} ]
} */
.slide-prev, .Slide-Prev, .SLIDE-PREV {
content: '<';
}
.slide-next, .Slide-Next, .SLIDE-NEXT {
content: '>';
}
/*rtl:end:options*/
RTL CSS
.slide-next, .Slide-Next, .SLIDE-NEXT {
content: '<';
}
.slide-prev, .Slide-Prev, .SLIDE-PREV {
content: '>';
}
Each StringMap is bi-directional - it matches both search
and replace
then checks if the match is equal to search
term, if yes its replaced with replace
term, if not it will assume the match was for the replace
term and replace it with search
term.