Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-11042

Add right-to-left locale support to QtQuick elements

    XMLWordPrintable

Details

    Description

      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.

      Description Link
      Investigate a way to automatically mirror QML applications for right-to-left locales QTBUG-15883]
      Expose QApplication::layoutDirection property from QML QTBUG-16424]
      Create LayoutDirection attached properties for controlling Qt Quick application layout mirroring QTBUG-17280]
      Support mirroring of QML anchor layouts QTBUG-15879]
      Add right-to-left direction support for Row positioner QTBUG-15874]
      Add right-to-left direction support for Grid positioner QTBUG-15875]
      Add right-to-left direction support for Flow positioner QTBUG-15876]
      Add right-to-left direction support for horizontal ListView element QTBUG-16010]
      Add right-to-left direction support for GridView element QTBUG-15877]
      Add mirror property to Image, BorderImage and AnimatedImage elements QTBUG-15878]
      Verify that QtQuick text elements behave well in bidirectional languages QTBUG-15880]
      Verify that QtQuick key navigation behaves well in right-to-left locales QTBUG-15882]
      Support mirroring of PathView QTBUG-15984]
      Add a way to query the reading direction of text from QML QTBUG-17490]

      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.

      Attachments

        Issue Links

          Activity

            People

              dajansen Damian Jansen (closed Nokia identity) (Inactive)
              zuck Emanuele Bertoldi
              Votes:
              6 Vote for this issue
              Watchers:
              10 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved: