DesignTutorialWeb Tips and Tricks

Convert LTR website to a RTL

Web Hosting Sale

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.

Show More

Related Articles

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close

Adblock Detected

Please consider supporting us by disabling your ad blocker