[SOLVED] Enabling “elide” property in the QML Text element, but in Right-to-left User Interfaces

Issue

I understand that the “width” property must be set implicitly for elide to work. However, I have a Text element in a Layout. I would like to truncate the text when it gets too long. How can I use elide in a Text type when Right-to-Left user interface is enabled (FYI, I am using LayoutMirroring.enabled : True property)?

Moreover, with this, I see an alignment issue when I set width property to some value implicitly.
The issue is, for Arabic language, it works properly but sometimes there are English texts which has no translation in Arabic and needs to behave same as Arabic(which means they must align from the Right), but still English text are aligning from Left.

If I remove width property everything works fine but elide doesn’t work….

Text {
        id: textId

        text: "Toooooooooooooooooooooooooo Looooooooooooooooonggggg"

        anchors.left: rootId.left
        anchors.leftMargin: 148
        anchors.baseline: headerId.baseline
        anchors.baselineOffset: 40

        width: 360
        elide: Text.ElideRight

        LayoutMirroring.enabled: ifArabicSelected ? True : False

        opacity: visible ? 1 : 0

        color: Colors.text_color_light

        Behavior on opacity { NumberAnimation { duration: Durations.anim_menuDuration }}
    }

Solution

Text elide doesn’t work without explicitly set width. You already know about the paragraph https://doc.qt.io/qt-5/qml-qtquick-text.html#elide-prop :

Set this property to elide parts of the text fit to the Text item’s width. The text will only elide if an explicit width has been set.

So, when using inside layout why do you use anchors? This doesn’t seem correct way for positioning Item inside layout. You should use the attached property Layout https://doc.qt.io/qt-5/qml-qtquick-layouts-layout.html#preferredWidth-attached-prop and also align an Item using this property https://doc.qt.io/qt-5/qml-qtquick-layouts-layout.html#alignment-attached-prop . Also, why not bind width property to parent size? it’s still might work. Text elide will be enabled for any direction, but with width explicitly specified (or at least Layout.width).

Second thing, you mirrored your layout. You should also change the elide direction. See my example:

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Text {
        property bool ifArabicSelected: true
        id: textId
        text: "Toooooooooooooooooooooooooo Looooooooooooooooonggggg"
        anchors.left: root.left
        anchors.right: root.right
        width: parent.width
        height: 32
        anchors.baselineOffset: 40
        elide: Text.ElideLeft
        horizontalAlignment: Text.AlignLeft
        LayoutMirroring.enabled: true
        opacity: visible ? 1 : 0
        color: "black"
    }
}

Is this something you’re trying to achieve? You need to specify conditional binding to elide propty too. This example just shows elide from the other direction, which I think you need in your example.

Answered By – user3417815

Answer Checked By – Mary Flores (BugsFixing Volunteer)