Docs

Right to left

Dana handles RTL in its abstract layer, therefore every renderer are impacted and few configuration is needed in the codebase.

Configuration

First you need to enable RTL in your profile in order to load specific code during build time:

// app.config.json
"myRTLProfile": {
    "mixins": [
        "myProfile"
    ],
    "locales": [
        "ar-MA"
    ],
    "flags": {
        "rtl": true
    }
}

Then, based on the locale loaded at boot, the UI will know in which direction it should be displayed. In your JSON language file, make sure the rtl flag is enabled too:

// i18n/LocaleStringArMA.json
{
    "id": "ar-MA",
    "rtl": true,
    "strings": [
        // ...
    ]
}

Visual effects

  • For Positionable
    • a new x position is computed
    • x position is updated whenever the width property changes (even for transitions)
    • isAuto_width property is still handled
  • For TextPrimitive
    • align property is reversed (left becomes right and vice versa)
  • For RectanglePrimitive
    • gradientDirection is reversed (toLeft becomes toRight and vice versa)
  • For ImagePrimitive
    • images are not reversed natively, they remain identical whether RTL is enabled or not.

Caution

Getting or setting a property value does not take RTL mode into consideration. RTL values are computed at rendering time only but the properties values remains the same.

For instance, getting this.text.x always return the same value whether RTL mode is enabled or not. Only its rendering value is updated.

In addition, of the visual components that are reversed automatically, the screen navigation need to be reversed also. It can be globally defined in the AppScreen.js:

onKeypressLEFT: function (key) {
    return this.rightToLeft ? this.right(key) : this.left(key);
},

onKeypressRIGHT: function (key) {
    return this.rightToLeft ? this.left(key) : this.right(key);
},

Exceptions

For some UX reasons, some components may not be reversed (progress bars for instance). Exceptions can be handled on every positionable (primitives, views, screens) with the rightToLeft property.

children: {
    progressBar: {
        class: $ProgressBarView,
        rightToLeft: false // this view and all its children won't be reversed
    }
}

Native components

Most of the time, RTL mode is handled by the native components themselves mainly based on the device system language. No specific configuration is needed so enquires on each native component behaviour.
For instance native keyboards layout and navigation depends on system language and keyboard language.

Edit this page on GitHub
Prev
Input Events Management
Next
Screen resolution