30 Aug Convert LTR website to a RTL
[rev_slider alias=”blog”][/rev_slider]
Implementing RTL is very simple. You just have to add the dir attribute to your top element of the web page.
<body dir="rtl">
content
</body>
dir attribute can take three values: ltr, rtl, auto
Now you will see that most of the content of your website will be right-aligned but still many elements will look weird. That happens because the dir tag aligns content. It can’t change applied CSS. For example:
.box {
left: 10px;
border: 1px solid red;
}
This will still work as is, showing the component on left. Therefore, your CSS should change according to the direction and make it right: 10px;
To do so, you have to write conditional CSS. Add the following CSS after the above CSS so that if dir is rtl, below CSS will be applied.
[dir="rtl"] .box { /*Quote marks are optional*/
right: 10px;
border: 1px solid red;
}
Writing this can be tiresome. If you are using SCSS, you can use mixins to save efforts.
@mixin flipProperty($ltr-property, $rtl-property, $value) {
[dir=ltr] & {
#{$ltr-property}: $value;
}
[dir=rtl] & {
#{$rtl-property}: $value;
}
}@mixin left($value) {
@include flipProperty('left', 'right', $value)
}
@mixin right($value) {
@include flipProperty('right', 'left', $value)
}
Write the above code in the SCSS file and import it in the SCSS file containing the box class.
@import "./rtl-support";.box {
@include left(10px);
border: 1px solid red;
}
This will generate out CSS as follows:
.box {
border: 1px solid red;
}[dir=ltr] .box {
left: 10px;
}
[dir=rtl] .box {
right: 10px;
}
These are some CSS properties that should be handled properly.
background-position
background-position-x
border-bottom-left-radius
border-bottom-right-radius
border-color
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-style
border-top-left-radius
border-top-right-radius
border-width
box-shadow
clear
direction
float
left
margin
margin-left
margin-right
padding
padding-left
padding-right
right
text-align
transition
transition-property
Tip: Use flex whenever possible. It supports rtl direction very well and arranges everything automatically.