Jens Meiert

5 Tips To Deal with Right-to-Left Projects

1. Know what goes into your markup and what goes into your style sheets. It’s actually quite simple: When available, you should always use dedicated bidi markup to describe your content. CSS may not be available, and its spec actually suggests that conforming user agents may ignore the direction and unicode-bidi properties. The only exception is XML that 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. That is almost implied by the former point, however 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. Try to 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 might thus be very well acceptable, meaning that having a few differing and actually overwriting declarations can be okay. To go for that (manually, in this case, not automatically), make sure you find all declarations that specify 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.

   Please note that the best solution would mean to automatically transform a style sheet into its LTR or RTL counterpart. However, proposed solution assumes a small to medium size project to benefit from having all rules in the same style sheet when it comes to both maintenance and ease-of-use. The arguably presentational ID name in the example is not a problem as the contents are “presentationally 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 huge mess when it comes to appropriate source editors. My favorite one, IntelliJ, can’t really 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 additional editors that I either tested myself or learned to screw up in one way or the other too.

   Since I cannot really operate software written in Hebrew or Arabic I usually try using IntelliJ or vi nonetheless, or, as a last resort, use 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 it. Working with international, LTR/RTL projects is a nice challenge that can twist your brain in fascinating ways (personally, I like it very much to learn about more exotic implementation problems). It’s also a great topic if you don’t have anything else to talk about, or if you just want to impress people who barely know to use their mother tongue. Kidding, of course. What was this point about.

Read More

Enjoy the most popular posts, probably including:

• Re: The IE 6 Equation
• HTML vs. XHTML: Why HTML Wins

Comments

1. On December 12, 2008, 17:52 CET, Jabz said:

   Hi Jens,

   I tried to find the name editor a friend recommended to me a while ago…I failed badly. However, I remember I got it from the W3C Internationalization Website at http://www.w3.org/International/

   Please update the post if you find a better editor than FCK. Thanks & Regards - Jonas

2. On December 17, 2008, 11:51 CET, Jens Meiert said:

   Jonas, I will, most likely.

3. On December 23, 2008, 9:00 CET, Marat said:

   Hi, Jens!
   A few month ago my team was developing an arabic version of one of the sites of our customers. I can tell that the third rule (”Try to avoid a separate RTL style sheet”) wouldn’t work on this project because of its huge size. In our case the most comfortable, simple and quick way to make RTL were to make new (not actually new, but kind of exemplair like in OOP) templates and new CSS. Quiete dirty but very quick, stable and effective. It lowers cost a lot.

4. On December 23, 2008, 9:26 CET, yuval raz said:

   Hi Jens,
   i think this is the first time i see someone (who is not an israeli or an arab) pointing out the problems with rtl documents and editors.

   as a webdeveloper based in israel i get a lot of headaches dealing with support for rtl code and rendering.

   the best editor for rtl i use is aptana, though in the osx version there are some problems (none in the windows version).
   also notepad++ works quite well too.

   notice that some browsers (notably opera) have box-model quirks when working in rtl, especially the padding calculation.

   i’m glad i can tip in my 2NIS worth

5. On December 30, 2008, 11:57 CET, Jens Meiert said:

   Marat, I understand, and the advice here certainly “depends” …

   Yuval, awesome feedback! I will check out Aptana (though on Mac OS …) and Notepad++, thanks!

Leave a Comment

Leave a Comment

Name: Website: Comment:

Respect the comment guidelines. XHTML allowed: <a href=""> <abbr title=""> <blockquote> <code> <em> <strong>