How we built interface in Arabic without knowing Arabic

Published in

Travelpayouts

7 min readJun 5, 2019

Disclaimer: By Arabic language, we mean all the RTL languages. Apart from Arabic, we translated interface into other RTL languages.

Travelpayouts is an affiliate network in the travel niche, but not in the classic sense. Normally, such networks are mediators between webmasters and advertisers. We are a product-focused organization, and our main advantage is product development. One example is the White Label solution (WL) for airline ticket and hotel searches.

Even though we are an almost autonomous team within Aviasales (Russian brand of JetRadar), we are fully responsible for running the affiliate-channel of Aviasales. In the case of WL, we offer an opportunity to anyone willing to build their own research engine for airline tickets and hotels to generate income.

In 2017 we happened to receive an inflow of localization requests for Middle Eastern countries. Clearly, we needed the RTL language support ourselves to test the waters in the new market. This task had been postponed before, but finally, its time had come, and we initiated work in that regard.

The first problem — nobody on our team had any knowledge of Arabic

We thought Arabic symbols represented a kind of a ligature which is impossible to understand. In the case of LTR languages (using left to right scripts), especially european ones, you can guess the meaning of a word in the context, more or less close to accurate. In particular, when you perfectly know the interface. RTL languages are harder to understand. Your brain just starts to overheat.

Interface texts were translated by affiliate-volunteers (they used the Crowdin platform) and then proofread by translators to the best possible extent, without having the interface itself.

We started looking for a person who’d help us do the design part. We didn’t know anyone personally for this job, so I resorted to UpWork services. In 2017, we were already developing design solutions on Figma, so having experience of working with it was an important point, but not a requirement. Most applicants for the job had never used Figma, and their “yes I can” didn’t inspire my confidence. As for their experience with RTL languages, it consisted of translating a few small context projects into Arabic. And on top of that, the communication process wouldn’t be flawless and smooth, because we’d have to speak English only, which would definitely hamper the process of development (all our software engineers are Russian speakers).

The second problem — we wrote texts for the layouts in Russian

We almost immediately rejected an idea to hire a native Arabic speaker and delegate this design task to our own team member, because it would definitely give our designer a hard time and hamper the communication process.

However, we got lucky and found Vladislav who was living in Belarus at that time. He knew Arabic and had experience localizing interfaces into RTL languages. Even though he never dealt with Figma, it wouldn’t be a problem to switch from Sketch to Firma. Match.

And other problems

Figma isn’t compatible with RTL languages, so we’d need hacks.
Astonishingly enough, RTL is not always RTL. Arabic languages are bidirectional languages. Arabic numerals are the ones that we use in English and other languages, they are written from left to right. Although, it is possible to write them according to Arabic language rules which implies a right-to-left script. Moreover, even when you stumble upon English words or numbers in an RTL language, they are written as is, not backwards.
We used the UAE Arabic language as a basis because of its popularity. By the way, Arabic comprises six dialects. Native speakers of other dialects still write to us saying “our” Arabic texts are not correct.

What the designer contributed to the project

Lines were already translated on Crowdin, and there was no need to translate everything from the beginning, only double-check the translation. As soon as the first couple of screens were finished, we realized that the working process was actually smooth.

In the end, we happened to have about 70 hours of paid work of our designer, including both RTL layouts of WL and widgets, as well as consultations during the working process. As you can see, the layout preparation itself didn’t take much time.

Development process

After the development had started, we conducted research on its technical side and decided to translate texts into RTL with the help of CSS styles. Finally, the development team chose the RTLCSS framework which makes it possible to integrate with the PostCSS plugin in the build process.

We used the following framework features:

Direction in the CSS selector through the command direction LTR. In the build process, two alternatives of CSS markings are generated, and the framework automatically changes the text direction and the work of the indicated direction selectors. However, we didn’t manage to change all the page making, so we had to use comments.
comments in CSS. Markings reflect changes necessary for displaying the RTL style. For CSS parsing, the framework applies changes according to comments. These changes are implemented in the build process (re-building is possible only when the version is being altered). You can find the full description of the framework commands in the RTLCSS paperwork.

Advantages of using RTL CSS as comments:

Doesn’t change the main CSS-marking.
It’s possible to erase comments at any given time.
No need for specific changes for a special text recording.

Naturally, CSS is not omnipotent, so we had to insert some kludges in cases of JS use.

Difficulties

No uppercase

Arabic doesn’t have the notion of uppercase, so we had to change the font size to make the style of the text diverse.

The “Hamza” symbol broke down the search logic

If you are not familiar with oriental languages, it is hard to imagine writing the same letter in different ways. It’s about the “Hamza” symbol, which you can use either independently or with a holder.

These differences in writing hampered the air tickets search process. The system would choose a wrong country or would not show a hint for airports.

In the end, we had to bring changes to our autosuggest service, so it could understand all the variations of “hamza” writing. However, this problem popped up only at the end of the development process.

Translation issues

We spent hours trying to understand why massive in YAML-file (we use this version in our translation) turned out to be invalid in the build process, but at the same time valid on Crowdin. It appeared that translators used Arabic commas which are a different symbol and caused an error in the build process.

Working on feedback

We created a group on groups.google.com and invited everyone who had helped us with translations on Crowdin

We didn’t receive too many comments, but the ones that we got helped us find mistakes. Our designer was checking on them as well. The most important suggestion was to change the font which we did. In the end, we opted for Cairo from Google Fonts. We were choosing between Cairo and Droid Kufi, but Cairo had all the necessary symbols and even more (Extra Light, Light, Regular, Semibold, Bold, Black), while Droid included only Regular and Bold.

After choosing Cairo, we realized that Figma didn’t support some symbols of the Cairo font in layouts. However, the working project didn’t show any mistakes.

Results and statistics

Compare English and Arabic version of White Label.

Flights, English version

Flights, Arabic version

Hotels, English version

Hotels, Arabic version

We sent a letter notifying the release to all the users who have ever requested the Arabic version. After that, we saw an increased number of views of search forms for air tickets and hotels in Arabic. The percentage of active affiliates from Middle East countries continues to grow, as well as the number of bookings made by users from Middle East.