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.

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:

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

What about automated RTL stylesheet generators?

There are a few problems with them:

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.”

They lack directional arrow detection — Converters typically do not account for directional arrows.

They may “convert” the entire stylesheet — Converters may spit out an entire stylesheet, even when only a fraction of the styles have to do with left and right positioning.

Wrapping Up

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