Add right-to-left locale support to QtQuick elements

In Arabic and Hebrew cultures, people scan and read graphic elements and text from right to left. General rule of thumb is that content (photos, maps, videos, etc.) is not mirrored, but location of the content is (=application layouts, positioning of visual elements). Known use cases of these are photos shown in a chronological order should flow from right-to-left, the low end of the range on horizontal sliders starts from the right and text lines are aligned to the right side of the available area. There are some special cases where people in right-to-left (RTL) cultures are used to left-to-right positioning, for example when using number dialers in phones and media play, pause, rewind and forward buttons in music players.

The location of visual elements should not be mirrored when the position is related to (non-mirrored) content, for example when a position marker or an information bubble is shown to indicate a location on a map. Also, there may be cases where item is positioned to the right side of the screen for better access in one-handed use, because most people are right-handed, and not because of the reading direction, though it's not clear how common these situations are. QtQuick is designed for making highly interactive, fluid and animated user interfaces, which creates additional challenges for the right-to-left support. For example, when it can be avoided, layout mirroring shouldn't break application transitions and animations. While QtQuick is style independent UI technology, it doesn't currently provide enough enablers for writing RTL applications. Read a list below for the break down of various RTL issues.

1. New property Qt.application.layoutDirection added to Qt global object

Row { 
    layoutDirection: Qt.application.layoutDirection
    Child {} // child elements flow according the default layout direction
    Child {}
    Child {}
}

2. New attached property LayoutMirroring

New attached property LayoutMirroring can be used to easily mirror whole application layouts.

You can mirror a particular Item by writing

Item {
    LayoutMirroring.enabled: true
    anchors.left: parent.left // actually mirrored to right
    Row { // flows from left to right
        ...
    }
}

or make all children elements also inherit the mirroring

Item {
    LayoutMirroring.enabled: true
    LayoutMirroring.childrenInherit: true
    anchors.left: parent.left // actually mirrored to right
    Row { // flows from right to left
        ...
    }
}

3. Mirroring anchors

Item anchors are already symmetric (support for both anchors.left and anchors.right), but with LayoutMirroring attached property it is possible to easily mirroring the direction of the defined anchors.

Item {
    LayoutMirroring.enabled: true
    anchors.left: parent.left // left becomes right
    anchors.leftMargin: 3
}

4. Positioners and views that position elements from right to left

Horizontal positioners, PathView, horizontal ListView and GridView are missing a way to changing the horizontal direction of the layouts. For this a new property called layout direction is needed that can have values LeftToRight and RightToLeft.

Row {
    layoutDirection: Qt.RightToLeft
    Child {}
    Child {}
}

Grid {
    layoutDirection: Qt.RightToLeft
    flow: Grid.TopToBottom // after each column filled, move to direction of layoutDirection
    Child {}
    Child {}
}
 
Flow {
    layoutDirection: Qt.RightToLeft
    flow: Flow.LeftToRight // reverse flow (ideally we could rename LeftToRight to just mean "horizontal")
    Child {}
    Child {}
}

ListView {
    layoutDirection: Qt.RightToLeft
    orientation: ListView.Horizontal
    model: Photos {}
}

GridView {
    layoutDirection: Qt.RightToLeft
    flow: GridView.TopToBottom // after each column filled, move to direction of layoutDirection
    model: Photos {}
}

PathView {
    layoutDirection: Qt.RightToLeft
    model: myModel
    delegate: delegate
    path: Path {
        startX: 120; startY: 100
        PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }
        PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
    }
}

5. Mirroring icons

Most images are not mirrored, but some directional icons should be. QtQuick comes with three image elements: Image, AnimatedImage and BorderImage.

Image {
    id: image
    source: "image.png"
    mirror: Qt.application.layoutDirection == LayoutDirection.RightToLeft
}

6. Bi-directional text

Text elements should already support RTL use cases, but they should still be tested by writing an RTL example applications and ironing out the bugs.

Text: horizontalAlignment, wrapMode, elide
TextInput: horizontalAlignment, cursor scroll, autoScroll, text selection
TextEdit: horizontalAlignment, wrapMode, elide, text selection

By default the text alignment follows the reading direction of the text. If no text content is available, the alignment follows the system locale, i.e. value returned by QApplication::keyboardInputDirection().

Text {
    text: "Phone"
    width: 200 // aligned to the left
}
Text {
    text: "خامل"
    width: 200 // aligned to the right
}
Text {
    text: "خامل"
    horizontalAlignment: Text.AlignLeft
    width: 200 // aligned to the left
}
Text {
    text: "خامل"
    horizontalAlignment: Text.AlignLeft
    LayoutMirroring.enabled: true
    width: 200 // aligned to the right
}

7. Mirroring key navigation

Qt Quick provides attached property element called KeyNavigation for implementing key navigation support (see http://doc.qt.nokia.com/4.7/qml-keynavigation.html). While the navigation direction normally stays intact when changing the layout direction, in some cases like overflow situations (grid row n -> row n+1) the key navigation behavior may differ between LTR and RTL locales, and should be tested. Also, GridView element provides implicit key navigation that needs to take the flow of the elements into account.