The Best Way to RTL Websites with Sass!

There are lots of ways to RTL your website on the internet, but none of them are easy to use.

I developed an easy and convenient method to support multi-language website, which RTL languages ​​are also supported.

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.

Let’s say we need padding at start of <p> tag. In English it needs to be padding-left:10px and in Semitic languages it needs to be padding-right:10px, in both of these cases we need padding in the start of the line of 10px.

And from here we start the method of creating a universal style for start or end.

In a similar way we will use it for position, floats, padding, margin, border and transforms CSS.

How to Start?

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

In the LTR file, enter these variables:

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

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

$transform-direction :1;

In the RTL file, enter these variables:

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

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

$transform-direction :-1;

Second: Create/Update your main SASS file as an inner file, e.g _main.scss.

Notice: The main file doesn’t @import the directions config files!

How to import the directions files?

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

In every main file @import the correct config direction file + the inner _main.scss file.

Example(main-ltr.scss):

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

Example(main-rtl.scss):

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

From this file you will compile the two main files, main-ltr.css & main-rtl.css

How to use the variables?

CSS Directions & text-align:

Just put the variables in the value. $start-direction for LTR languages is left & for Semitic(RTL) languages is right. $direction for English is ltr & for Semitic languages is rtl.

body{
  direction: $direction;
  text-align: $start-direction;
}

CSS Positions:

In Positioning, put the right and left in variables according to your needs.

Example:

position: absolute;
#{$start-direction}: 50%;

CSS Margins/Paddings/Borders:

Example:

margin-#{$end-direction}: 10px;
padding-#{$start-direction}: 10px;
border-#{$end-direction}-width: 2px;

CSS Floats:

float: $start-direction;

CSS Transform: translateX:

When working with transform you need to change number from positive to negative or vice versa.

Let’s say we have box transform:translateX(200px) in English. We multiply it by $transform-direction (=1), in English the result would be 200px (1*200px), but in rtl it would be -200px (-1*200px).

Example:

transform: translateX(200px * $transform-direction);

Result

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

An example of the code in _main.scss:

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

will be compiled to in main-ltr.css:

body{
  direction: ltr;
  text-align: left;
  padding-right: 10px;
}

will be compiled to in main-rtl.scss

body{
  direction: rtl;
  text-align: right;
  padding-left: 10px;
}

Summary

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

I hope you’ve enjoyed this article and learned from my experience.

If you liked this article you may also like :
CSS Architecture for Multiple Websites With SASS

Elad Shechter, Web Developer specializing in CSS & HTML design and architecture, working at Investing.com.

You can contact or follow me:
My Twitter
Facebook
LinkedIn

You Can find me in my Facebook groups:
CSS Masters
CSS Masters Israel