Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

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