Jens Oliver Meiert

5 Tips To Deal With Right-to-Left Projects

Published on Dec 11, 2008 (updated May 31, 2024), filed under (feed). (Share this on Mastodon or Bluesky?)

This and many other posts are also available as a pretty, well-behaved ebook: On Web Development.

This post is partially outdated.

  1. Know what goes into your markup and what goes into your style sheets. It’s actually simple: When available, you should always use dedicated bidi markup to describe your content. CSS may not be available, and the specs say that conforming user agents may ignore the direction and unicode-bidi properties. The only exception is XML which does not offer specific bidi markup, in which case you should use CSS. This is the short version, W3C’s Internationalization Activity provides more detail.

  2. Indicate directionality by the dir attribute on the html element. Almost implied by the former point, set @dir appropriately so that it covers all elements, not just those within the body. To achieve this, make sure to set directionality on the html element.

  3. Avoid a separate RTL style sheet; better customize styling by means of an ID or class on the body element. Usually it’s just a small percentage of declarations that differs between a LTR and its RTL sister style sheet. Some small overhead may well be acceptable, meaning that having a few differing and overwriting declarations can be okay. To go for that (manually, in this case, not automatically), make sure you find all declarations that define anything specific to the left or right (typically referring to float, margin, padding, text-align, and the like), customize those declarations, and use some hook to apply them—like e.g. setting id="rtl" on the body element (well, you do want to use html[dir=rtl]).

    The best solution would mean to automatically transform a style sheet into its LTR or RTL counterpart. You should also assume a project to benefit from having all rules in the same style sheet for maintenance and ease-of-use. The arguably presentational ID name in the example is not a problem as the contents are presentationally fundamentally different.

  4. Expect RTL issues with your favorite source editor. Yes. This doesn’t need to mean much yet, however my experience with bidirectional projects does know of a fine mess when it comes to appropriate source editors. My favorite one, IntelliJ, can’t fully handle RTL yet. vi improved support with version 7, as far as I know, but it’s far from being good. Textmate and Coda and stuff have problems with RTL contents. And others do, too, politely skipping at least 20 editors that I either tested myself or learned to screw up in one way or the other, too.

    Since I cannot operate software written in Arabic or Hebrew I usually try to use IntelliJ or vi regardless, or, as a last resort, FCKeditor. If you know a free tool with an English (or German) UI that can deal with both LTR and RTL, please ping me or leave a comment.

  5. Don’t give up; enjoy. Working with international, LTR/RTL projects is a nice challenge that can twist your brain in fascinating ways. It’s also a great topic if you don’t have anything else to talk about. Just kidding. What was that all about.

Update (November 11, 2018)

A late note, work with RTL gets easier with CSS Logical Properties; these avoid directionality inherent on the CSS side and with that make it possible to write style sheets that work with both LTR and RTL without modifications. (Logical properties are not necessary in unidirectional projects and therefore most useful in bi-directional projects.)

Update (July 27, 2021)

Interesting and relevant, too, is the :dir() pseudo-class. Barely supported at the moment, it will likewise make work on bi-directional projects significantly easier.

About Me

Jens Oliver Meiert, on November 9, 2024.

I’m Jens (long: Jens Oliver Meiert), and I’m a web developer, manager, and author. I’ve worked as a technical lead and engineering manager for small and large enterprises, I’m an occasional contributor to web standards (like HTML, CSS, WCAG), and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development and engineering management, but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (I value you being critical, interpreting charitably, and giving feedback.)