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.
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:
CSS:
Screenshot:
![Implementing Right-To-Left Styling with CSS Logical Properties](https://cdn.prod.website-files.com/6470768de8327f36a7ae11a5/64ccd7c69ee5ef6a2a1cd314_image1_25.png)
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!