How to translate Arabic (or any right-to-left script) in OutSystems Apps?

How to translate Arabic (or any right-to-left script) in OutSystems Apps?

In a recent project I had the need of translating English to Arabic (and vice versa). This post summarizes the pitfalls and suggested approaches to develop such an application - special thanks to Luís Lopes and João Portela for the extensive investigation work. A sample app can be found in attach and live at 

Please excuse my lazy Arabic translation - Google Translate is the one to blame :)

Arabic script (and many others as well) is written from the right of the page to the left (RTL), top-to-bottom fashion. This means that other resources inserted in the text (e.g. images) as well as alignments and positioning should be treated the same way. Most of this work is done thanks to CSS direction property (see also W3C Internationalization), but there is still some work to be done elsewhere:
1. Set direction of the document Body to RTL
As said above, this is basically setting the CSS property of your document (web page) body with direction: rtl;
This can be achieved in several ways - a very lazy one is to just dump unescaped code in the top of your pages or frequently used webblocks (e.g. Menu/Header).

2. Convert Your Theme CSS to RTL
Because the CSS properties themselves need to be "mirrored" an external tool can help you out during design time. Check out 

Once you have your Left-to-Right stylesheet converted to RTL, in order to support locales with different directions in your app, you're probably best with a dynamic stylesheet loading. This can be achieved with the creation of a web page whose purpose is only to download LTR or RTL stylesheets.

This download call be defined in your web page's Preparation action, with the help of some HTTPRequestHandler functions, in order to fetch the necessary stylesheet and add it to your document's head.

If your eSpace has a default Theme (which might be handy to improve your Web Editor experience) then you'll also need to remove that default stylesheet, with the help of HTTPRequestHandler function AddPostProcessingFilter.

3. Convert Javascript and Extended properties to RTL
Because we may also have application text coexisting with Javascript code and specific inline styles we should also review any such scripts to RTL (with the help of a tool such as the above). It's definitely a good approach to avoid or reduce as best as possible the amount of inline style scripts in your app. Also, for the same reason, you should try to separate Javascript logic from text literals in your client-side logic.

4. Translate text to a RTL script
There are also some pitfalls that need to be carefully avoided with translations: according to W3C, text itself has also specific characters with weak/neutral direction (e.g. numbers, exclamation marks, etc.) So be sure you get proper and skilled help for the translations (...which was not the case with the sample app in my post :)

5. Verify need of flipping images
Because there is a "mirroring" of the document, images that are closely related to the layout may need to be mirrored as well: sprites, for example (although that's not the case in the sample app). This basically means duplication of resources. At the time of writing this post, I'm not aware of any runtime feature that allows for this...

6. Check Service Studio Container and Table widgets alignment properties
It seems that Service Studio widget properties override CSS. Make sure you keep these values clean and available in your CSS classes.
Great post, Pedro.
One question, though: why are you mirroring the image in the sample?
Is it meant to be an example for images supporting the layout?
Maybe this particular image is not the best example, but I got it now. :)
Hi Paulo,

Thank you for your question. You're absolutely right. The mirroring of images is only necessary for those that are closely related to the layout. A better example would be sprite images - those would certainly need mirroring. Just edited the main post.


Paulo Ramos wrote:
Is it meant to be an example for images supporting the layout?
Maybe this particular image is not the best example, but I got it now. :)