Developing mobile and web applications for English and Arabic

Why?/Introduction

Through our long term partnership with VOX Cinemas in the Middle East, Can Factory has been developing both web and mobile applications in English and Arabic for years now. In this article we will use our expertise to outline some of the hurdles that must be overcome to effectively develop and test a robust application in these disparate languages. We spoke with our senior development and testing teams to bring together some aspects you may want to consider. No, I’m afraid a ‘flip the site’ stylesheet won’t quite suffice here!

Some of the subjects we will consider include:

  • Developing in Left-to-Right (LTR) and Right-to-Left (RTL) layouts.
  • Working with mainstream IDE’s in Arabic.
  • Architecture: How to approach integrating a pre-existing app with Arabic.
  • Testing: How to thoroughly test web and mobile applications in two dissimilar languages. The obstacles of testing both mobile and web.
  • Data issues: Developing with frameworks that don’t support the Arabic language.
Arabic Fact image

Architecture

One of the first things to consider when either integrating Arabic localisation into an existing app, or even starting from scratch, is the overall architecture.

Data Handling

This next sub-section is a bit more specific to the backend of cinema apps, but some of the issues we faced are applicable more generally.

Inevitably, some back-office systems may not have multi-language support. One of the ways that the team dealt with this was to duplicate the data and create another version on import, storing it in the cache by locale which would then be pulled for each respective region when a request was made.

Font Size

In Arabic you often need to increase font size by about 4 points, as the characters are a lot smaller, and due to the elaborate nature of the characters. The tails and loops that are present on many Arabic letters are hard to read at the level you would have had for a Western character set. This can make text completely illegible on smaller screens. Play around with different font sizes and figure out what works for you.

Roman vs. Arabic Characters

Other quirks that the team noticed were things such as trying to show Western text in a RTL environment, eg. money values in Western characters. You have to make several exceptions sometimes within the same line of code to make everything display correctly. A veritable juggling act. 

Directional Targeting

Targeting dir”rtl” directional pages, not targeting Arabic, or the other way around. Sometimes just target Arabic for font sizes. lang=ar attribute would be targeted for example. As you always include the language in the html tag/doctype. W3 schools. Text direction is always assumed on web pages unless you state otherwise. dir=ltr/rtl.

Development

Now down to the really good bits, the actual development! This next section is not meant to be exhaustive (at all!) but hopefully can give you a good idea of the sort of things you will need to consider during development.

Localised Property Files

When you’re managing localised property files, having a RTL language in an editor and LTR at the same time – Most editors are LTR, they have modes to switch the BIDI (bidirectional text) direction and also a Mix. Is challenging writing in that direction, the most challenging is when you have to look at message resources that have HTML inside of them in Arabic. The text wants to go RTL, but the programming language wants to go LTR – is interesting fun and games.

User Interface

With CSS you can change the direction of text within a document and the majority of stuff will work. Problems start to arise when you have layout adjustments to do.

For example, right-hand margins are used often in developing LTR. When suddenly the site is switched to RTL, you need to ask yourself if you still need that margin, or do you actually need to put it on the left hand side when you flip the text. If you have preempted this and built your stylesheet accordingly the elements will flow correctly. All of your directional layout adjustments will need to be flipped to the other direction.

Another approach is to have a new stylesheet that inherits from a core stylesheet, or even an additional one that edits your styles specifically. This is all dependent on the site architecture as a whole.

IDE Quirks

HTML written backwards in terms of elements. IDE quirks that look and feel jarring, with text direction etc. dir”rtl” directional pages, not targeting Arabic. You will sometimes find yourself typing in two different directions on the same code line in IntelliJ… at least you know it’s working!

Database Encoding

Had to change database encoding to support Arabic characters. Similar to a Mandarin character set, not something you often end up supporting, most programming is done LTR in Roman characters.

Is This Arabic?!

One of our senior developers pointed out a website that came in handy, isthisarabic.com, which consists of one simple page. The author, Rami Ismail, provides some basic and useful pointers for things to look out for when delivering a project that involves Arabic script. He even includes a recording of a talk he gave at XOXO Festival in Portland, Oregon in 2015 where he teaches the audience some of the basics of Arabic script. Worth a watch!

Arab Academy has an introduction to Arabic script and writing for those interested with an overview of Arabic letters and techniques that will need to be learnt and mastered. They say that the Arabic alphabet is a lot easier to learn than you might think!

Testing

When it comes to testing, a lot of the work will focus around translations. However, you will also need to consider if the RTL nature of Arabic writing has altered the layout of your site. At times in testing we would find that Arabic text would be misaligned, or outside of the intended element completely.

A practical tip when testing: This will come as a surprise to absolutely no-one, but having the English version of your app open (web platform) next to the Arabic version will help with navigating through your site. It is shocking how hard it can be to navigate through an app that you’ve used 1,000 times in English when everything has been mirrored. It just feels wrong!

As you can see in our Arabic Script infographic, the written form can be quite confusing to the untrained eye. The characters change in form according to what other characters are surrounding them. You may want to get a magnifying glass out!

You should keep an eye out for issues such as padding, where in LTR a margin may have put in place, this may not look the same when the stylesheet is flipped.

If you don’t have a dedicated resource or someone who is fluent in Arabic working with you, Google Translate is both your closest friend, and deadliest enemy. We would certainly recommend a thorough process to check and double check that the Arabic script you are displaying is as intended, oriented correctly and conveys what it is meant to.

Conclusion

We hope that this has been a helpful insight into some of the challenges that you may face with developing for Arabic localisation. Stay tuned for more technical articles from Can Factory.

Looking to develop something similar? Get in touch.

Read more articles from the Can Factory blog.

Recent Posts

Start typing and press Enter to search