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

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

  
In my current project, there is the need to have support for English and Arabic. As most of you probably know, Arabic is written from Right To Left (RTL). This can place several challenges when developing an application for both languages.

Some time ago, Pedro Gonçalves wrote a great post that served as a starting point to the development. In the meantime some lessons were learned, and as such, I want to share these lessons with you. The major change is removing the need to have two themes, injecting one or another on runtime. This is now handled in one theme only.


First the basics. OutSystems platform includes native support for multilanguage applications. It’s easy to get multi language support in your application. You can check for more information on multi language support in OutSystems platform help.


We will focus on the specific support for Arabic, that requires some added challenges. The more efficient approach is based on the CSS specificity principle. This CSS rule states that if a element has a style that is defined in two places on the CSS, the more specific “wins”. You can get more information about CSS specificity here.


On the sample provided I’ve used a London based layout, and named it MyLayout_London.


Now that we set some basics, let’s start building the application.


First Step - Adapt the base layout

We need to adapt our base layout to support RTL layout. To do this, we need to add a dynamic class to the layout, depending on the language currently selected. This will add a class for all the screens using this layout. We can easily accomplish this by creating a simple jQuery script that dynamically adds the class. Don’t forget to set the escape option setting to No.



Second Step - Add a Locale

Add a new Locale to the application. To do this, go to the Multilingual Locales, right click it and choose the Add Locale option.


I chose to use base Arabic (AR) which is common to several Arabic speaking countries. If you need a more specific locale, no problem, only a slight change on the CSS styles.



If you have any questions regarding this step, you can find more information on the online help.


Now that we’ve added the Arabic locale, we are ready to start creating some Arabic/English screens based on this new layout.


Third Step - Define CSS rules

Define CSS rules to support Arabic.


The “trick” here is to use the specificity property of the CSS. We know already that we will have a body with a class AR when we change language to Arabic, so all we need to do is being more specific for the AR CSS styles.


The base of the Right to Left support is to add a CSS tag direction: RTL to body when we are in Arabic.



Another trick, if you are using the grid layout of the Outsystems platform that was introduced on the 8.0 version, you have to rewrite some styles to support Arabic. One obvious example is rewriting the gutter space between columns. In english it has a margin-left: 20px, but in Arabic we need to have a margin-left: 0 and a margin-right: 20px.



IMPORTANT: take in consideration that in a LTR and RTL screen you can no longer use the align property in the Outsystems Platform. This is because that property will translate into a style attribute of the container, which is more specific than a class. Instead create a css class that you can override, like the ones shown in the following screenshot, and use them wherever needed.


As you can see, we’ve defined the AlignLeft and AlignRight styles, and then we were more specific for the AR versions. This means that the more specific will be used, whenever applies. So if I have a top container with a class AR, and a container somewhere in our screen with the AlignLeft style, it will align right. If the top container does not have the AR class, it will fall back to the base AlignLeft style, which will align the text to the left.




This of course, applies to mostly anything that has a left or right in css. For example, if we use a float left in English, you have to rewrite it for Arabic to be a float right.


Some examples

Redefine a style from the London theme

Another example of redefining a CSS style is when using the London theme, we have the Actions container, where we placed the change language links.

From the London Theme, this is styled to be aligned to the right. Here is the base style:

We need to rewrite it for Arabic. The width, line-height and font-size can be maintained so we will only change the text-align:



Another thing we need to change for the London Theme is the margin between the links inside the Actions container. It is defined like this in the London theme:

so we will create a more specific style:


Have a base style, with a redefinition in English and another in Arabic

We can also have some base styles, that are redefined in English and/or Arabic. To do this, just prefix the style with .en-US. The ColorOrange style defines a box with a border all around the container, then the english version removes one side of the box, and the arabic removes the other side.


Have a different image on English and Arabic

If we need to have a container with a different background image depending on the locale, we also need to rewrite it.


The outcome of this style can be seen from the following screenshots.



And this is it. Pretty simple right?


Check the attached file with the application used in this post. A live demo is available at http://joaobatista.outsystemscloud.com/arabiannights_v2/


Feel free to ask questions or give suggestions.

Hi,

I need to know how to implement this in Silk UI template Liverpool. I can see it has RTL web block
I don't know that RTL web block, but what are you trying to do exactly?

João Batista wrote:

I don't know that RTL web block, but what are you trying to do exactly?

I try to use a web block that is part of Liverpool theme (SILK UI); Here you find a complete explanation of the block functionality, and the ongoing discussion around it.

http://www.outsystems.com/forums/discussion/18505/rtl-web-block/