Qml Vertical Text Orientation

Viewed 34

How can I display a text in QML with vertical orientation like below

Text {
    id: name13
    text: qsTr("KITCHEN")
}

enter image description here

2 Answers

Set width to 1, and wrapMode to Text.WrapAnywhere. This forces each letter to appear on its own line.

Text {
    text: "KITCHEN"
    anchors.centerIn: parent
    color: "white"
    width: 1
    wrapMode: Text.WrapAnywhere

    // -- additional parameters for prettiness --
    lineHeight: 0.9
    font.pixelSize: 50
    horizontalAlignment: Text.AlignHCenter
}

QMLOnline KDE Demo

In the following example, I use Frame to allow you to set the background to grey. I used Column with a Repeater and I break up the "KITCHEN" string with split() and render each character in its own Text component:

import QtQuick 2.15
import QtQuick.Controls 2.15

Frame {
    background: Rectangle { color: "grey" }
    Column {
        Repeater {
            model: "KITCHEN".split("")
            Text {
                anchors.horizontalCenter: parent.horizontalCenter
                text: modelData
                font.pointSize: 24
                color: "white"
            }
        }
    }
}

kitchen-vertical-png

Related