draw-an-owlDeveloping an app is a lot like learning how to draw an owl. Somewhere in between step 1 and step 2 is a lot of hard work, including things you might not have originally envisioned you’d be required to do.

For many, localizing their app in other languages is an afterthought. But what if there’s a large market for your app overseas?

If your app was originally developed in English, localizing it in a language that reads right-to-left (RTL), such as Arabic or Hebrew, isn’t quite as simple as adding the translations, enabling the language, and assuming everything’s going to be fine.

For us, localizing our app in a right-to-left language was challenging to upgrade our existing app to handle it (instead of designing for it from scratch). This became especially apparent while we tried to support and be compatible with older versions of the operating systems. However, if you already have an app that’s universally using auto layout, this process is much easier.

Here are some of our lessons learned and tips to remember as we reflect back on the the process we went through ourselves.

Lesson 1: Use auto layout for iOS

Use naturally justified text whenever possible (as opposed to strictly “left” justified)

Lesson 2: XML layouts for Android are more RTL friendly

XML layouts seem generally better at handling RTL. Also, it’s much more similar to the iOS auto layout system. In fact, Android Studio actually gives nice little warnings in your XML if you do something that will be handled inherently poorly in an RTL language.

dev-blog-image

Lesson 3: Don’t forget about dates and numbers

They often get overlooked. For example, 03/07/16 is March 7th in the US, but it’s July 3rd in European countries. Or numbers like 8,645 which is over 8 thousand in some localizations and just over 8.6 in others.

Lesson 4: Have a real human review

Having a native speaker on tap is immensely helpful to confirm everything is still correct after changing the code around strings and modifiers. Editing translations in a language you’re unfamiliar with can backfire. Manually translating words and phrases yourself could be tedious and stressful unless you really have some proficiency with the specific RTL language.

If you’re on a budget, consider reaching out to local universities for students who speak the language. Students will be cheaper than an official service.

Lesson 5: Test, test, test, and then test again

Here are some common localization issues to look out for when testing:

  • Clipped text or text that overlaps the edge of UI elements on the screen
  • Poor line wrapping
  • Incorrect word breaks or punctuation
  • Incorrect alphabetical sorting
  • Incorrect layout direction or text direction
  • Untranslated text. If your strings display in the source language instead of translation, you may have overlooked those strings for translation or marked the resources directory with an incorrect language qualifier.
  • For cases where your strings’ translations have expanded and no longer fit your layouts, adjust your default layouts. If this doesn’t resolve the issue, create a custom layout for the language.

Closing thoughts

It would be great for iOS to support some kind of “unnatural” text justification. Right now you can choose Left, Center, Right, and Natural alignment. However, in the event that you want something to be right-justified in a left-justified language and vice-versa, you currently have to do that manually.

All too often we had to do a runtime check of the default justification and then flip it for right-justified things like this:

if(RTL_LANGUAGE())groupName.textAlignment = NSTextAlignmentLeft;
else groupName.textAlignment = NSTextAlignmentRight;

Which falls back into Lesson 5 … testing.