HOW to implement RTL in your website?

3 min readJan 3, 2020

Before getting started, you should know what is RTL? Please read this article.

Now once you know what is RTL, you will understand that it’s not just mirroring everything. There are a few more things to be considered.

The interactions also change direction. Eg: Carousel goes the other way in RTL.
For icons, most icons remain the same but some may need to be flipped for RTL if it makes sense. Take it per icon basis.
Input box cursor should be on the right side in the box.
The whole user experience and web design need to think from the perspective of the user who reads from right to left.

Implementing RTL is very simple. You just have to add dir attribute to you 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 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 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 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 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 above code in SCSS file and import it in SCSS file containing 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;
}

This are some CSS properties which 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.

Link to the Github - https://github.com/vinaymahamuni/vuejs-internationalization-app

HOW to implement RTL in your website?

Written by Vinay Mahamuni