CSS for RTL Languages

When your Language setting in Salesforce is set to a right-to-left (RTL) language, the framework automatically flips property names, such as left and border-left to right and border-right respectively. The framework also rearranges certain values like padding, margin, and border-radius so that the right and left units are swapped.

Flipped CSS Properties

These properties are automatically flipped for RTL languages.

Property	Flipped Property
`left`	`right`
`right`	`left`
`border-left`	`border-right`
`border-left-color`	`border-right-color`
`border-left-style`	`border-right-style`
`border-left-width`	`border-right-width`
`border-right`	`border-left`
`border-right-color`	`border-left-color`
`border-right-style`	`border-left-style`
`border-right-width`	`border-left-width`
`border-top-left-radius`	`border-top-right-radius`
`border-top-right-radius`	`border-top-left-radius`
`border-bottom-left-radius`	`border-bottom-right-radius`
`border-bottom-right-radius`	`border-bottom-left-radius`
`padding-left`	`padding-right`
`padding-right`	`padding-left`
`margin-left`	`margin-right`
`margin-right`	`margin-left`
`nav-left`	`nav-right`
`nav-right`	`nav-left`

Flipped CSS Keywords

These keywords are automatically flipped for RTL languages.

Keyword	Flipped Keyword
`ltr`	`rtl`
`rtl`	`ltr`
`left`	`right`
`right`	`left`
`e-resize`	`w-resize`
`w-resize`	`e-resize`
`ne-resize`	`nw-resize`
`nw-resize`	`ne-resize`
`nesw-resize`	`nwse-resize`
`nwse-resize`	`nesw-resize`
`se-resize`	`sw-resize`
`sw-resize`	`se-resize`

Flipped CSS Percentage Values

If the value is a percentage for these properties, the flipped value is set to 100 minus the value.

background
background-position
background-position-x

Flipped Property Arguments

For these properties that can take four values, the second and fourth values are swapped. For example, property: A B C D becomes property: A D C B.

padding
margin
border-color
border-style
border-width

Flipped border-radius Arguments

The arguments for the border-radius property are flipped with these patterns.

Arguments	Flipped Arguments
`border-radius: A B`	`border-radius: B A`
`border-radius: A B C`	`border-radius: B A C`
`border-radius: A B C D`	`border-radius: B A D C`

Override Flipping With @noflip

To override the automatic flipping, add a /*@noflip*/ annotation in a comment directly before the property. For example:

1.THIS.mycontainer {
2    /*@noflip*/ direction : rtl;
3}

Use Conditional CSS

Use the @if(isRTL) conditional statement to manually provide the appropriately oriented CSS for each direction.

1.THIS {
2    transform: skew(28deg) translate3d(0, 0 , 0);
3}
4
5@if(isRTL) {
6    .THIS {
7        transform: skew(-28deg) translate3d(0, 0 , 0);
8    }
9}

Lightning Aura Components Developer Guide