Right-to-left Support

Introduction

Most right-to-left language speakers expect that the application content is aligned to the right. Therefore they read and scan text and content in the right-to-left order. This page summarizes the right-to-left support - that is, the "mirroring" - implemented in Symbian QML components. It also provides some hints for developing an application that supports right-to-left UI.

QML Right-to-left Support

QML provides the right-to-left support in QtQuick 1.1. For more information, see http://doc.qt.nokia.com/4.7-snapshot/qml-righttoleft.html

Symbian QML Components Right-to-left Support

The right-to-left (RTL) support in Symbian QML components is enabled by setting the LayoutMirroring.enabled property to true. The application needs to enable it to indicate that it supports the RTL user interface.

The context property symbian.rightToLeftDisplayLanguage can be used to enable RTL in the application when the current display language is right-to-left. The following code snippet illustrates this. Because the childrenInherited property is true, the alignment value is inherited to all child elements - except those child elements whose alignment property is explicitly set.

Enabling right-to-left UI in the application's main QML file:

     LayoutMirroring.enabled: symbian.rightToLeftDisplayLanguage
     LayoutMirroring.childrenInherit: true

Other possibility is to bind the LayoutMirroring.enabled property to the value of Qt.application.layoutDirection property, which by default determines the layout direction from the active language translation file. It requires, however, that the dedicated translation string literal QT_LAYOUT_DIRECTION is translated to either "LTR" or "RTL" in the QApplication scope. For more information, see http://doc.qt.nokia.com/4.7-snapshot/qml-righttoleft.html

The Symbian QML components implement RTL as it is specified in the platform style. This means mainly the following:

• The horizontal flow of the content, for example the horizontal position of text and icon inside the component, is mirrored.
• Texts and icons are mirrored.
• In some cases the icon itself, for example an arrow-type icon, is mirrored.

The following components are not mirrored due to their nature:

• ProgressBar
• Slider
• Switch; only the positions of text and graphics on the screen are mirrored but not the switch's graphics
• ToolBar
• Tumbler

Component-specific Notes

To enable the mirroring of the ListItemText component's text alignment, set its width to cover the whole area of the component.

Similarly, to enable the mirroring of the QML's Text component's text alignment, set its width to cover the whole area of the component. When the layout direction is right-to-left, the alignment of the text is handled as follows (this also applies to QML's TextInput and TextEdit elements, see http://doc.qt.nokia.com/4.7-snapshot/qml-righttoleft.html):

• If the horizontalAlignment property is not set (to Text.AlignLeft or Text.AlignRight), the text's natural direction detemines its alignment: to the left edge if the text is left-to-right, and to the right edge if the text is right-to-left.
• If the horizontalAlignment property is set to Text.AlignLeft, the alignment is mirrored in right-to-left layout regardless of the text's natural direction. This applies to most Text elements that are used inside QML components.

Common Things Required for Enabling Application's UI Mirroring

When you implement the RTL support for your application, you should take care of the following things:

• Instead of defining components' x-coordinates use anchors with margins.
• Disable the layout mirroring of UI elements that should not be mirrored by setting their LayoutMirroring.enabled to false. For example, UI elements indicating progress or increment should always flow from left to right.
• Check all Text and ListItemText elements (see Component-specific Notes).
• Mirror icons whose content requires mirroring, for example an arrow icon. QML's Image element has the mirror property for mirroring.