Very nice work. Some comments:<p>- "Make sure to set letter-spacing: 0 when working on a multilingual layout" is an advice that's too strong. Letter spacing breaks only with connected scripts, Arabic or Devanagari. (And it's a bug, Arabic script users make use of letter spacing heavily in real life.) Most other scripts - CJK, Cyrillic, Greek, Hebrew, Georgian - will work just fine with letter spacing, and it will have the same meaning as in Latin. But - just as with line height, letter spacing value sometimes needs to be customized.<p>- You probably don't need to flip the "?" icon for Hebrew users, they don't flip it as in Arabic.<p>- Arabic letters being rendered over themselves with custom opacity is an unfortunate bug in Webkit. Firefox doesn't have it. But yes, this means that font opacity has to be used sparingly until it's fixed.
Alas, RTL is not the only direction a truly multilingual application must support… traditional Mongolian script (‘Bichig’) is written in vertical columns, and is now considered an official script of Mongolia alongside Cyrillic. This means that applications and websites localised for Mongolian may need to support vertical writing (e.g. [0]). At least Bichig is still fairly uncommon in practice.<p>[0] <a href="http://mongol.people.com.cn/" rel="nofollow">http://mongol.people.com.cn/</a> (note this only renders correctly in Chrome for me)
One thing I think not mentioned, often times when mixing English and Arabic words you need to use &lrm; and &rlm; html entities to force the words into proper order.<p>Using dir=rtl or any text alignment css doesn't work, you need to go in and adjust the words individually by wrapping them in those entities.
This is a great guide. My language (Hebrew) is also written from Right to Left so nearly all of these issues are present on sites that I maintain as well.<p>By far my largest "tech support" issue is helping people _write_ in RTL properly, especially in applications that do not explicitly support RTL. I've written this guide to help, maybe OP will find it useful:<p><a href="https://dotancohen.com/howto/rtl_right_to_left.html" rel="nofollow">https://dotancohen.com/howto/rtl_right_to_left.html</a><p>Note that I've found it very helpful to have the LRE and RLE characters right on the keyboard. Linux users who want to add them might find my Unix.SE question helpful:<p><a href="https://unix.stackexchange.com/questions/674997/new-keyboard-layout-variant-not-detected-after-reboot" rel="nofollow">https://unix.stackexchange.com/questions/674997/new-keyboard...</a>
Most sites should be able to switch to CSS Logical Properties to remove the need to flip directional properties <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical...</a>
A lot of money is spent in design these days, but most of the times nobody cares about the RTL style. In fact, all designs are draw with LTR in mind. Once you have a fairly medium/big app that's designed solely for LTR, the cost of also implementing a RTL rendering is enormous. Every component should be designed twice and implemented with conditional rendering depending on locale.<p>Isn't there a simpler solution for supporting RTL? Why not render everything LTR and then flip horizontally? Could it work?
Nice, detailed article!<p>I'm the maintainer of BiDi Mail UI, an RTL language support plugin for Mozilla Thunderbird:<p><a href="https://addons.thunderbird.net/en-US/thunderbird/addon/bidi-mail-ui/?src=ss" rel="nofollow">https://addons.thunderbird.net/en-US/thunderbird/addon/bidi-...</a><p>which you may want to check out if you get RTL content in your email (and you're not using webmail).<p>A few things to note:<p>* Additional noteworthy RTL languages besides Arabic: Farsi, Hebrew, Urdu, Suret (Syriac).<p>* The Unicode standard has an official bidirectional algorithm, which is quite involved:<p><a href="https://unicode.org/reports/tr9/" rel="nofollow">https://unicode.org/reports/tr9/</a><p>hopefully, someone else has already implemented this for you (so use libraries for multi-language text layout).<p>* If you have trouble with RTL in any application - browser, mail client, office suite - be sure to _file a bug_ about it! The developers are often unaware of these issues. Specific link for LibreOffice, where I do a lot of RTL QA: <a href="https://bugs.documentfoundation.org/" rel="nofollow">https://bugs.documentfoundation.org/</a>
The issue with the default underlining of links sounds like something that the browser ought to be able to do correctly by default.<p>Does anyone know why it doesn't? Is there a reason for it or is it just one of those backwards compatibility things where changing it would cause more trouble than it is worth?
What a great article, and how valuable to be reminded of the differences in human cultures that we (software developers) so often skip over because so many of us work embedded in anglo-centric contexts. I love being "forced" to realize how my initial response to RTL text ("that's just backwards!") is completely bogus, and there's nothing inherently more or less obvious about LTR or RTL.<p>We have similar issues in the world of music-related software, where so much is created entirely within the assumptions/defaults of western musical culture; it is gratifying to see that at least for page layout, browsers are doing a better (not perfect, but better) job of covering the whole world.
I had never thought about RTL until I started working on a web game with sizeable Arabic user base. It's a bit hard to do right unless you just go transform: scaleX(-1) which is what my predecessor had done.
There's a quite interesting article on the directionality preference of UX elements among different RTL user groups which I can recommend: "Towards the Right Direction in BiDirectional User Interfaces"[0].<p>[0]: <a href="https://arxiv.org/pdf/2101.08070.pdf" rel="nofollow">https://arxiv.org/pdf/2101.08070.pdf</a>
Shameless plug, here's something else you can do with right to left "styling": <a href="https://www.nilsand.re/programming/2021/11/14/title-direction.html" rel="nofollow">https://www.nilsand.re/programming/2021/11/14/title-directio...</a>
Those arabic texts collapsed on smaller screen, I'm viewing it from mobile.
I don't know much about CSS, but floating elements in my opinion, has always been problematic.