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

Pixel-align horizontal text alignment

    XMLWordPrintable

    Details

    • Type: Suggestion
    • Status: Open
    • Priority: P3: Somewhat important
    • Resolution: Unresolved
    • Affects Version/s: 6.0
    • Fix Version/s: None
    • Component/s: GUI: Text handling
    • Labels:
      None
    • Platform/s:
      All

      Description

      When centering a text item using anchors.centerIn or anchors.horizontalCenter, it will be aligned to the pixel grid to make rendering sharper.

      There is an anchors.alignWhenCentered property that can be used to disable this, if you are aiming for correctness.

      But horizontalAlignment in the Text element does not align and draws at subpixel positions if requested.

      This means that if you have items that are centered using the anchors along side Text items that are centered, and you resize the containing item, you may see some flinching due to the centering acting differently for the two.

      Ideally, the two algorithms would give the exact same results, but this needs to be investigated properly first. It is also possible the problem is in the anchors itself, which seems to A. assume that the widths of items are integers and B. may be rounding each center individually (round(item1.width / 2) - round(item2.width / 2), which gives a higher error margin than round(item1.width / 2 - item2.width / 2).

      But I haven't dug very deep, so I may be reading it wrong.

      Example:

      import QtQuick 2.12
      import QtQuick.Window 2.12
      
      Window {
          id: window
          visible: true
          width: 640
          height: 480
          title: qsTr("Hello World")
      
          Item {
              id: item
              anchors.top: parent.top
              anchors.bottom: parent.bottom
      
              PropertyAnimation {
                  id: animation
                  target: item
                  property: "width"
                  from: 0
                  to: window.width * 2
                  running: true
                  loops: Animation.Infinite
                  duration: 20000
              }
      
              Text {
                  id: t1
                  y: parent.height / 2 - height / 2
                  anchors.horizontalCenter: parent.horizontalCenter
                  font.pixelSize: 16
                  font.hintingPreference: Font.PreferNoHinting
                  renderType: Text.NativeRendering
                  text: "Foobar"
      
              }
      
              Text {
                  id: t2
                  anchors.top: t1.bottom
                  anchors.left: parent.left
                  anchors.right: parent.right
                  font.pixelSize: 16
                  font.hintingPreference: Font.PreferNoHinting
                  renderType: Text.NativeRendering
                  text: "Foobar"
                  horizontalAlignment: Text.AlignHCenter
      
              }
          }
      
          MouseArea {
              anchors.fill: parent
              onClicked: {
                  if (animation.paused)
                      animation.resume()
                  else
                      animation.pause()
              }
          }
      }
      

        Attachments

          Issue Links

          For Gerrit Dashboard: QTBUG-84021
          # Subject Branch Project Status CR V

            Activity

              People

              Assignee:
              esabraha Eskil Abrahamsen Blomfeldt
              Reporter:
              esabraha Eskil Abrahamsen Blomfeldt
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

                Dates

                Created:
                Updated:

                  Gerrit Reviews

                  There are no open Gerrit changes