Using Sass to help with multi-lingual websites

In this post I'm going to explain how I used a variety of Sass techniques to help with the building of a large multi-language responsive website.

The two main languages involved in this instance were English and Arabic. The main difference between these two languages are that English is read left to right (LTR) and Arabic is read right to left (RTL), so I needed something that would allow me to write the CSS/Sass once but work across both versions of the site.

I spent a lot of time up-front looking around the web for resources. The Responsive News article from the BBC was very helpful. As was a post by Joe Leech all about Arabic Web Design and UX. And of course my partner in crime Oliver Farrell, he was on hand to test things out, and give me pointers.

All of this was great, but these were not a full solution.

In the end I had to work out what I needed to change between the two languages. These were summed up as.

  • Any right or left value, e.g. float: left;, margin-left
  • Left and right padding
  • Left and right margin

I did find out that things like text-align and flexbox worked out of the box once the direction of the page was changed.

So in the end I had a small helper file named _directions.scss, with these as it's contents.

$direction: ltr !default;

/**
 * Flips any values
 */
@function flip($latin, $arabic) {
  @return if($direction == ltr, #{$latin}, #{$arabic});
}

/**
 * Flips left for right, right for left
 */
$left: flip(left, right);
$right: flip(right, left);

The first function flips the values that you submit, so you could use it like so.

padding: flip(0 20px 0 40px, 0 40px 0 20px);  

This would flip the padding values so your 20px on the left would end up on the right and the 40px on the left would end up on the left.

The second one you can use the variable to flip left and right attributes.

float: $left;  
padding-#{$left}: 20px;  

This would output the same in your latin file, but in the arabic file the two left attributes would swap to right. As if by magic.

I also had two files named arabic.scss and latin.scss.

The latin file had the following:

$latin: true;
$direction: ltr;

@import 'main'; // This is your normal stylesheet

And the arabic this:

$arabic: true;
$direction: rtl;

@import 'main'; // This is your normal stylesheet

The latin and arabic files are what you would serve on the front-end to your languages instead of your main.scss file.

As you can see from the two files I set a variable of latin or arabic and I also swap the direction out. These are used to trigger the functions in the directions file mentioned earlier.

Thats about it. Through trial and error I had more functions to begin with but narrowed them down to the one Sass function and the variable used above.

What do you think? Let me now in the comments.