Last month @necolas tweeted a thread about localization & RTL support in web apps. It's a very nice thread, you should check it!
Does your team work on a localized app? One that needs GUI translations, needs RTL layout, and has user content in multiple languages. What localisation-related challenges are you aware of and struggling with?
— Nicolas (@necolas) February 17, 2018
And since I am a native Arabic speaker & also a developer who had his own share of working on multi-lingual websites I replied to him & we had some discussion which actually made think about RTL support in general but more specifically in the context of the Web, Web related tool & maybe even some media tools around that.
As a Native Arabic speaker I find the latter more legible, the one you mention as legible is using Tahoma Arabic font which IMO very bad in Arabic. Feels like Comic Sans but Arabic version.
— Ahmed El Gabri (@AhmedElGabri) February 17, 2018
I'll start with some known issues with Regards to Arabic support & then more general problems when working on multi-lingual apps/sites & some solutions for some of these issues:
So let's start...
This is in my opinion the cause of most of the issues, because people uses these tools trusting that they are doing the right thing. But the reality is they don't, did you know that Photoshop used to have two versions? one that supports mainly Latin languages & one that was supporting RTL languages like Arabic & Hebrew. It was called (Photoshop CC me) the "me" part I think referred to the "Middle East" version. It used be released later than the normal version too.
They changed this now, but you need to turn a setting on if you want to right Arabic for example
To understand the problem a bit, you need to understand how the script works. Written Arabic is a script, so letters are connected to each other & letters have different shapes depends on the position that they are in. As you can see in this image from Wikipedia
This says "The Arabic"
Compare this to the next image
This exactly the same as above, but in a software that doesn't support Arabic
This is one of the most common issues with media tools & people who just trust the tools without doing much research. Funny fact thought, even multi-billion dollar companies & blockbuster Hollywood movies make this mistake.
My only criticism of Black Panther is the reuse of this shot. You make a movie empowering non-white people, it'd be nice to just spend 0.002% of your VFX budget on fixing your fake Arabic to actually be Arabic.
Black Panther remains an incredible, I'd daresay must-see, movie. https://t.co/G1EmC1eFh6
— Rami Ismail (@tha_rami) February 17, 2018
It's very simple, not that good at all. The default system fonts are very limited & the most used font (Tahoma Arabic) for lots of people including me feels like the Comic Sans equivalent but for Arabic. The sad part is Arabic typography is actually very very rich!
So, in order to have nice Arabic typography on the web you need to use a custom font, but not all Arabic custom fonts are good (there are some exceptions like AlAmiri font by @khaledghetas, also & the good Arabic fonts are mostly not free & very expensive. Hopefully one day some of @arabictype & @khaledghetas work can be installed by default on operating systems so we can have better defaults.
And Khaled summed it up better than me:
Almost all system fonts were designed decades ago and they were only passable because of the lowres rendering back in the day. Newer ones like Noto and
Segoe UI are better, with the exception of Apple new Arabic UI font which is worse than its predecessor.
— Khaled Hosny (@KhaledGhetas) February 17, 2018
There are lots of assumptions here that I read across the web, some of it seems very logical but in fact wrong.
IMO, one of the things that CSS got wrong was using the words "left" & "right"
floats, etc... better names would have been
end. Because most developers when they start writing CSS they think in LTR
only (even if they are working on a website that needs to support both) & then
afterwards they slap a stylesheet to "flip everything".
But sometimes you fall in the trap of having your classes named something like:
Then you override these in your RTL stylesheet as follows, which is very counter intuitive, confusing & hard to maintain.
Compare that to this, which IMO is easier to understand & maintain
In LTR stylesheet
In RTL stylesheet
This would have been even better if CSS had these values the same too
Yes it makes sense & very logical to do so. But do you know that this will flip the scrollbars to the other side of the screen? Some will say yes this is the right behavior & since we are "flipping" from LTR to RTL scrollbars should be flipped too.
If the web started with good RTL support I would have said yes, do it. But because the web started with mainly English support (LTR) everyone I know in the Middle East is already accustomed to the scrollbars on the right as they are in LTR & when flip this it becomes very disorienting & confusing experience.
I can't remember how many times my mom complained to me about this while she was browsing some Arabic website & finds the scrollbars are on the opposite side of the screen.
dir="rtl" on the
<body> instead, this will flip the text as intended but
will keep the scrollbars in the same place.
Please don't. Like really, don't. It's a terrible terrible idea! These things are universal, don't confuse the users. Unless you know for sure, like 99.9% sure that your target users will want this.
Yes, we write from Right-to-Left but with numbers we do it from Left-to-Right,
make sure to handle this properly whether you use
<bdo> or wrap
your numbers in
<span dir="ltr"> just make sure they are LTR & not RTL.
And one more point regarding numbers, what is considered Latin numbers now are actually the original Arabic numbers & what are considered Arabic numbers now are actually Hindi numbers. So you don't need to change this too.
These seem to be very simple rules & even very logical to do, but you would be amazed how many designers & developers don't follow these rules when working on a website/app that supports multiple languages.
I can go on & on in RTL development, but these are good enough to get you started.
I have had my share working on multi-lingual websites/apps, I built apps & websites for more than 20+ languages including projects that had to support English, Arabic & Russian for a single website (that was fun!)
Supporting different languages which shares the same alphabets is already hard enough, so I understand how hard it is to support different language with different alphabets, direction & rules. So if you plan to support Arabic & RTL in your app/site please do your homework & don't just add it as an afterthought or at the end. Because it doesn't work this way, it will hurt your brand & will also show that you don't care enough about this group of people.
The least thing you can do is to show your app/site/ad/etc... to an Arabic speaking person before you go live. I'm sure you can find at least one person in your city who speaks Arabic
© 2024 Ahmed El Gabri