5 Tips To Deal With Right-to-Left Projects
Published on December 11, 2008 (⻠May 31, 2024), filed under Development (RSS feed for all categories).
This and many other posts are also available as a pretty, well-behaved ebook: On Web Development.
This post is partially outdated.
-
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
andunicode-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. -
Indicate directionality by the
dir
attribute on thehtml
element. Almost implied by the former point, set@dir
appropriately so that it covers all elements, not just those within thebody
. To achieve this, make sure to set directionality on thehtml
element. -
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 tofloat
,margin
,padding
,text-align
, and the like), customize those declarations, and use some hook to apply themâlike e.g. settingid="rtl"
on thebody
element (well, you do want to usehtml[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.
-
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.
-
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
Iâm Jens (long: Jens Oliver Meiert), and Iâm a frontend engineering leader and tech author/publisher. Iâve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, Iâm somewhat close to W3C and WHATWG, 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 views and experiences.
If youâd like to do me a favor, interpret charitably (I speak three languages, and they do collide), yet be critical and give feedback, so that I can make improvements. Thank you!
Comments (Closed)
-
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
-
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. -
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 đ
-
On December 30, 2008, 11:57 CET, Jens Oliver Meiert said:
Marat, I understand, and any advice here certainly âdependsââŠ
Yuval, awesome! I will look at Aptana and Notepad++ from this angle, thanks!
-
On May 10, 2012, 15:40 CEST, Jonathan said:
Hi, itâs not perfect either, but causes us the least problems: GEdit, even when used non-natively under Windows (even though we try to stick to Ubuntu wherever possible). Might want to give it a try.
Read More
Maybe of interest to you, too:
- Next: HTML vs. XHTML: Why HTML Wins
- Previous: The Greatest Secret in Web Design
- More under Development
- More from 2008
- Most popular posts
Looking for a way to comment? Comments have been disabled, unfortunately.
Get a good look at web development? Try WebGlossary.infoâand The Web Development Glossary 3K (2023). With explanations and definitions for thousands of terms of web development, web design, and related fields, building on Wikipedia as well as MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.