[WORK IN PROGRESS]
Table of Contents | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Introduction
What was the challenge?
...
What was the idea behind the RTL Support?
The goal behind implementing RTL support was to identify CSS properties that do not naturally adapt to Right-to-Left layouts and provide a solution to make them direction-aware. To achieve this, we either rewrote styles to ensure native RTL support or dynamically adjusted the direction based on the dir
attribute of the document. For this reason, we created a set of mixins that can be used in place of standard CSS properties. These mixins allow for seamless support of both LTR and RTL layouts, ensuring that the same styles can be applied consistently across different text directions without the need for duplicated code.
How does the App automatically adjust layouts based on language?
...
This documentation provides a detailed explanation of various SCSS mixins designed for padding, margin, border, direction handling, and more. Which are basically properties that do not support RTL.
These mixins help ensure consistency across both Left-to-Right (LTR) and Right-to-Left (RTL) layouts.
Mixins description
@mixin direction
This mixin handles text direction based on the dir
attribute. It applies ltr
(Left-to-Right) or rtl
(Right-to-Left) based on the document direction. It is applied to all elements in the application. Thanks to that for example the date picker component is changing it’s direction.
...
Translates an element along the X-axis, respecting the dir
attribute. If in rtl
mode, the translation direction is reversed.
Code Block |
---|
@mixin translate-x($value) {
[dir="ltr"] & {
transform: translateX($value);
}
[dir="rtl"] & {
transform: translateX(-$value);
}
}
|
@mixin translate-xy($valueX, $valueY)
Translates an element along both the X and Y axes, reversing the X-axis translation for RTL layouts.
Code Block |
---|
@mixin translate-xy($valueX, $valueY) {
[dir="ltr"] & {
transform: translateX($valueX) translateY($valueY);
}
[dir="rtl"] & {
transform: translateX(-$valueX) translateY($valueY);
}
}
|
@mixin padding-right($value)
Applies padding to the right side in LTR layouts, and to the left side in RTL layouts.
Code Block |
---|
@mixin padding-right($value) {
[dir="ltr"] & {
padding-right: $value;
}
[dir="rtl"] & {
padding-left: $value;
}
} |
@mixin padding-left($value)
Applies padding to the left side in LTR layouts, and to the right side in RTL layouts.
Code Block |
---|
@mixin padding-left($value) {
[dir="ltr"] & {
padding-left: $value;
}
[dir="rtl"] & {
padding-right: $value;
}
} |
@mixin padding-x($value)
Applies equal padding on both left and right sides, irrespective of the layout direction.
Code Block |
---|
@mixin padding-x($value) {
[dir="ltr"] & {
padding-left: $value;
padding-right: $value;
}
[dir="rtl"] & {
padding-left: $value;
padding-right: $value;
}
} |
@mixin padding($padding-top, $padding-right, $padding-bottom, $padding-left)
Sets padding for all four sides, automatically adjusting left/right padding based on the layout direction.
Code Block |
---|
@mixin padding($padding-top, $padding-right, $padding-bottom, $padding-left) {
padding-top: $padding-top;
padding-bottom: $padding-bottom;
[dir="ltr"] & {
padding-left: $padding-left;
padding-right: $padding-right;
}
[dir="rtl"] & {
padding-left: $padding-right;
padding-right: $padding-left;
}
} |
@mixin margin-right($value)
Applies margin to the right in LTR layouts and to the left in RTL layouts.
Code Block |
---|
@mixin margin-right($value) {
[dir="ltr"] & {
margin-right: $value;
}
[dir="rtl"] & {
margin-left: $value;
}
} |
@mixin margin-left($value)
Applies margin to the left in LTR layouts and to the right in RTL layouts.
Code Block |
---|
@mixin margin-left($value) {
[dir="ltr"] & {
margin-left: $value;
}
[dir="rtl"] & {
margin-right: $value;
}
} |
@mixin margin($margin-top, $margin-right, $margin-bottom, $margin-left)
Applies margin to all four sides, adjusting left/right margins based on the layout direction.
Code Block |
---|
@mixin margin($margin-top, $margin-right, $margin-bottom, $margin-left) {
margin-top: $margin-top;
margin-bottom: $margin-bottom;
[dir="ltr"] & {
margin-left: $margin-left;
margin-right: $margin-right;
}
[dir="rtl"] & {
margin-left: $margin-right;
margin-right: $margin-left;
}
} |
@mixin border-right($value)
Applies a border to the right in LTR layouts and to the left in RTL layouts.
Code Block |
---|
@mixin border-right($value) {
[dir="ltr"] & {
border-right: $value;
}
[dir="rtl"] & {
border-left: $value;
}
}
|
@mixin border-left($value)
Applies a border to the left in LTR layouts and to the right in RTL layouts.
Code Block |
---|
@mixin border-left($value) {
[dir="ltr"] & {
border-left: $value;
}
[dir="rtl"] & {
border-right: $value;
}
} |
@mixin border($border-top, $border-right, $border-bottom, $border-left)
Sets borders on all four sides, adjusting left/right borders based on layout direction.
Code Block |
---|
@mixin border($border-top, $border-right, $border-bottom, $border-left) {
border-top: $border-top;
border-bottom: $border-bottom;
[dir="ltr"] & {
border-left: $border-left;
border-right: $border-right;
}
[dir="rtl"] & {
border-left: $border-right;
border-right: $border-left;
}
} |
@mixin float($float)
Applies floating behavior, adjusting for rtl
by swapping left and right floats.
Code Block |
---|
@mixin float($float) {
$float-ltr: $float;
$float-rtl: if($float == left, right, if($float == right, left, none));
[dir="ltr"] & {
float: $float-ltr;
}
[dir="rtl"] & {
float: $float-rtl;
}
} |
@mixin right($value)
Positions an element to the right in LTR layouts and to the left in RTL layouts.
Code Block |
---|
@mixin right($value) {
[dir="ltr"] & {
right: $value;
}
[dir="rtl"] & {
left: $value;
}
} |
@mixin left($value)
Positions an element to the left in LTR layouts and to the right in RTL layouts.
Code Block |
---|
@mixin left($value) {
[dir="ltr"] & {
left: $value;
}
[dir="rtl"] & {
right: $value;
}
} |
@mixin text-align($alignment)
Aligns text, swapping left and right for RTL layouts.
Code Block |
---|
@mixin text-align($alignment) {
$alignment-ltr: $alignment;
$alignment-rtl: if($alignment == left, right, if($alignment == right, left, $alignment));
[dir="ltr"] & {
text-align: $alignment-ltr;
}
[dir="rtl"] & {
text-align: $alignment-rtl;
}
} |
@mixin background-position($position)
Sets background position, swapping left and right for RTL layouts.
Code Block |
---|
@mixin background-position($position) {
$position-ltr: $position;
$position-rtl: if($position == left, right, if($position == right, left, $position));
[dir="ltr"] & {
background-position: $position-ltr;
}
[dir="rtl"] & {
background-position: $position-rtl;
}
} |
Guidelines
In this section, there will be information. How the css/scss should be written in order to make the whole app RTL friendly.
1. If possible use flex or grid layouts
Both of the have native support for the RTL direction. So it does not require any adjustments.
If you have for example layout like this:
Code Block |
---|
.element {
display: flex;
flex-direction: row;
justify-items:flex-start;
} |
In LTR environment first item will be on the left and last on the right. When dir will change to RTL.
Order of the items will switch automatically without touching the element styles.
Same thing applies to the grid layout.
2. Use Mixins Instead of Direct CSS Properties
To maintain RTL support, avoid using hard-coded values for properties that affect layout direction, such as margin
, padding
, border
, float
, etc. Instead, use the corresponding mixins provided in this documentation to ensure your styles adapt to both LTR and RTL layouts seamlessly.
For Example:
Instead of this:
Code Block .element { margin-left: 10px; float: left; }
Use this:
Code Block .element { @include margin-left(10px); @include float(left); }
CSS Property | Use Instead |
---|
|
|
|
|
|
|
|
|
|
|
3. Be Cautious with Positioning
For properties like left
, right
, and transform
, it's crucial to use the appropriate mixins to ensure consistent behavior in RTL and LTR contexts.
Instead of this:
Code Block .element { left: 20px; transform: translateX(100px); }
Use this:
Code Block .element { @include left(20px); @include translate-x(100px); }
Summary
To sum up, use grid and flex if possible. Otherwise instead of the fixed direction css properties use appropriate mixins described in the docs above.