The Best Way to RTL Websites with Sass!

RTL Websites with Sass

Concept

In English, the aligning of the text start at left and ends at right, but in Semitic languages it is opposite, the aligning of the text starts at right and ends at left.

How to Start?

First: Create two config files _direction-ltr.scss and _direction-rtl.scss .

/*** LTR websites ***/
$direction :ltr;
$opposite-direction :rtl;

$start-direction :left;
$end-direction :right;

$transform-direction :1;
/*** RTL websites ***/
$direction :rtl;
$opposite-direction :ltr;

$start-direction :right;
$end-direction :left;

$transform-direction :-1;

How to import the directions files?

Add two new main files in the root directory, main-ltr.scss & main-rtl.scss.

@import "config-directions/_direction-ltr.scss";
@import "_main.scss";
@import "config-directions/_direction-rtl.scss";
@import "_main.scss";

How to use the variables?

CSS Directions & text-align:

body{
direction: $direction;
text-align: $start-direction;
}
position: absolute;
#{$start-direction}: 50%;
margin-#{$end-direction}: 10px;
padding-#{$start-direction}: 10px;
border-#{$end-direction}-width: 2px;
float: $start-direction;
transform: translateX(200px * $transform-direction);

Result

That’s it! We made an easy and convenient method to RTL websites.

body{
direction: $direction;
text-align: $start-direction;
padding-#{$end-direction}: 10px;
}
body{
direction: ltr;
text-align: left;
padding-right: 10px;
}
body{
direction: rtl;
text-align: right;
padding-left: 10px;
}

Summary

That’s all, You now have an easy way to RTL websites.

--

--

CSS & HTML Expert

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store