How to make a RTL stylesheet

If you’re reading this in English now, you’re probably pretty used to LTR (or left-to-right) languages. Your eye travels from left to right to read the text.

However, not all languages are like that. Some, most notably Hebrew and Arabic, are read from right-to-left.

If you run a site that supports a RTL language, or releasing a translation-ready WordPress theme to the public, you’re going to need to create a RTL stylesheet to support these languages.

While this tutorial is written in the context of WordPress theming, the concepts can apply to any website you’d like to add RTL language support to.

The basics of making RTL stylesheets

Making a right-to-left stylesheet can be intimidating at first, but there’s really not much to it. All you have to do is essentially “flip” everything horizontally.

To illustrate, let’s compare Adaline with and without the RTL stylesheet active.

Adaline with the default (LTR) stylesheet active.
Adaline with the default (LTR) stylesheet active.
Adaline with the RTL stylesheet active.
Adaline with the RTL stylesheet active.

Notice how the hamburger menu icon and slide out menu are positioned on the opposite side when a right-to-left language is simulated.

The centered site title, description, and squiggly line thing, remain where they are. Since they’re not leaning to the left or right at all, there is no need to make any adjustments for these.

Other horizontally positioned things

Besides left/right positioned elements, you’ll also want to watch out for the following:

  • Floats: float: left; should become float: right;
  • Text indents: text-indent: -1000em; should become text-indent: 1000em;
  • Text aligns: text-align: right; should become text-align: left;
  • Paddings: padding: 0 2em 0 1em; should become padding: 0 1em 0 2em;
  • Margins: Literally the exact same deal as padding.
  • Directional arrows: Should be flipped horizontally.

And of course, text direction. Every RTL stylesheet should include the following lines to account for that:

body {
	direction: rtl;
	unicode-bidi: embed;
}

The RTL Demo Theme

I’ve made an RTL Demo Theme that accounts for every single thing an RTL theme should account for, with explanations.

Take a moment to see what it looks like with left-to-right, then right-to-left.

Then study the main stylesheet, and then the RTL.css stylesheet, to get a better idea of how exactly RTL techniques are accomplished with CSS.

You can download the source code on GitHub for free.

If you see anything missing, or would like to provide a translation for the explanations, please submit a pull request!

What about automated RTL stylesheet generators?

I didn’t want to mention this before, because I believe it’s an important skill to know how to make an RTL stylesheet manually, but there are automated methods of creating RTL stylesheets.

There are a few problems with them, however.

They ignore RTL-friendliness in the main stylesheet

Sometimes, instead of adding RTL styles, you can adjust your main stylesheet to be more “RTL-friendly.”

For example, let’s say you have something padded 20 pixels on the left and 0 pixels on the right. Instead of flipping these in RTL.css, you can probably just add even padding on both sides in the main stylesheet.

They lack directional arrow detection

Converters typically do not account for directional arrows. It would be nearly impossible with a custom icon font.

Directional arrows need to be flipped on RTL sites to avoid confusion for readers.

They may “convert” the entire stylesheet

As described in this WP Chat thread, converters may spit out an entire stylesheet, even when only a fraction of the styles have to do with left and right positioning.

While the previous two problems could probably be quickly corrected after an automated conversion, this needless bloat requires much more manual attention.

Wrapping Up

It’s certainly possible for RTL stylesheet converters to become more sophisticated to account for the above problems. In their current states, however, I’d rather make RTL stylesheets manually.

This way I can ensure my main stylesheet is as RTL-friendly as it can be, while making sure the RTL stylesheet remains lean and accurate.

Either way, understanding how to make RTL stylesheets is still a valuable skill for not just WordPress themers, but any web developer making a multilingual site that supports RTL languages.

1 comment

  1. Same here. I prefer to create RTL rules manually. There’s a lot of room for errors when it comes to converting the macro layout and absolute positioning rules to RTL.

Leave a Reply

Your email address will not be published. Required fields are marked *