Manage RTL CSS with Sass and Grunt

Originally published at: http://www.sitepoint.com/manage-rtl-css-sass-grunt/

As a native Arabic speaker I have worked on multilingual websites before, some already existed with LTR (Left to Right) CSS support which I would then have to add support for RTL (Right to Left) and some projects have started from scratch. Before I started using Sass and Grunt, supporting both directions was a nightmare and a time wasting process with much code repetition.

The important thing when working on multilingual projects using both directions is to write CSS that supports both RTL and LTR in an effective, automated and dynamic way so that we don’t have to repeat or override CSS.

The differences between the two directions in general and in most cases is the float direction, text alignment, padding and margin values.

The Problem

Let’s see how supporting RTL and LTR in the same project could be a bit cumbersome in practice and how we can solve this. In some cases, before adding direction support, we would add a new CSS file in the header and start to override and repeat code over and over to change some CSS properties like floats, padding-left or text-align for different components.

Let’s say this is the code for the RTL language template, we have added the lang="ar" attribute for the language support, this attribute value would probably be dynamically changed based on the language detection on the server side.

< !DOCTYPE html>
<html lang="ar">
  <head>
    <link rel="stylesheet" href="css/app.css"/>
    <link rel="stylesheet" href="css/rtl-app.css"/>
  </head>
  <body>
    <main>Main contant</main>
    <aside>Sidebar</aside>
  </body>
</html>

The layout requires that in the normal direction (LTR) the main section should be floated to the left, while aside should be to the right.

// app.css
main  { float: left; }
aside { float: right; }

Now for the RTL direction we should do the same thing above but in the opposite direction or to mirror the layout, this will be the code to override the original style in the same file.

Continue reading this article on SitePoint

An approach to write a css code for once and create two version of it RTL or LTR just with change one variable value: https://github.com/parhumm/sass-direction-controller

Good article!, Thanks for sharing.

Take a look to https://github.com/twbs/grunt-css-flip

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.