Implementing Right-To-Left Styling with CSS Logical Properties

Multilingual websites or multiple-language websites are a necessity these days. Most developers are comfortable in building multilingual websites with LTR (Left-To-Right) languages however, there are certain regions across the world that speak RTL (Right-To-Left) languages as well. Converting an LTR website to RTL can be challenging at times. Let's look at the challenges and approaches to convert a Left-to-Right website into a Right-To-Left website with the help of CSS logical properties. 

How to add RTL languages to a multilingual website?

It is not difficult to achieve RTL website implementation while building a multilingual website. We just need to identify the properties which could impact the conversion from LTR to RTL and the traditional techniques being followed vs the new techniques introduced.
While converting the website from LTR to RTL, the properties on the left side of the webpage will be positioned on the right and vice-versa.
For example: 

LTR: padding-left
RTL: padding-right
LTR: float: left
RTL: float: right

The traditional approach for converting LTR to RTL

Developers start with writing the CSS for LTR direction and override the required property using [direction=”rtl”] attribute of HTML tags.
On the other hand, developers who are familiar with SASS/LESS preprocessors create functions that will convert the LTR properties to RTL.

For example, the below-mentioned function will be useful to convert the left property to right in the RTL direction.

$dir: ltr !default;
// Default $dir if not valid
@if $dir != ltr and $dir != rtl {
 $dir: ltr;
}
@function if-ltr($if, $else: null) {
 @if $dir != rtl {
   @return $if;
 }
 @else {
   @return $else;
 }
}
$left: if-ltr(left, right);
$right: if-ltr(right, left);

Limitations of the traditional LTR - RTL conversion method

This method requires the developers to be trained on the function when they start working on a project. They will have to remember this while writing the CSS properties each time. On the contrary, if the CSS itself provides these properties, the directional logic will be handled automatically.

Logical CSS properties that automatically convert RTL to LTR

As mentioned, we need to convert Left and Right to Right and Left respectively in the RTL direction. Below are the important properties that should be used along with the new logical property name to support the RTL direction:

Property name

New Logical Property name

margin-left

margin-inline-start

margin-right

margin-inline-end

padding-left

padding-inline-start

padding-right

padding-inline-right

border-left-{size|colour|style}

border-inline-start-{size|colour|style}

border-right-{size|colour|style}

border-inline-end-{size|colour|style}

left

inset-inline-start

right

inset-inline-end

Demo: https://codesandbox.io/s/css-logical-properties-demo-kgpsc
HTML:

<h3>Direction: LTR</h3> 
<div dir="ltr" class="container">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
</div>

<h3>Direction: RTL</h3>
<div dir="rtl" class="container">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
</div>

CSS: 
‍

.container {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 20px;
 padding-inline-start: 30px;
 margin-inline-start: 20px;
 border-inline-start-width: 2px;
 border-inline-start-style: solid;
 border-inline-start-color: red;
}
.child {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 150px;
 height: 150px;
 border: 2px dashed black;
}

Screenshot:

As per the above demonstration, it is visible that the CSS logical properties are working flawlessly on both LTR and RTL.

Stay tuned to know more about cool frontend features!