qt - How to set the line spacing for Qml Text Item?

Question

I can't figure this one out. I mean the vertical spacing between lines of text in a Qml Text Item. I can't use Rich Text, and GridLayout seems to destroy my wrapping, horizontal alignment and the ability to check for truncated. This is inside a rectangle.

Text{   
        width:10
        wrapMode: Text.Text.Wrap
        text:"This will be broken into multiple lines. How could I set the vertical spacing between them?"
     }

I mean:

Vs

I'd love to, but an example for what... GridLayout destroying things? But apart from that, is there a way to define line/paragraph spacing without it? — swaggg
Is that I want to see the code that generates the problem, since I think it depends on its implementation, so in the case of the questions of the type: my code does not work the OP must provide a minimal reproducible example, can you share a minimal reproducible example? — eyllanesc
I understand, but this is more of a general question. I'll post some code to make it clearer. I could provide an example of GridLayout destroying things, but it would need some work on my part to trim my existing code etc. — swaggg
So I just mean a generic property I could use here. LineHeight I guess, defines, the height of the lines, not the space between them, and seems to break my layout. I can't find any such property in the documentation. — swaggg

TrebledJ TrebledJ · Accepted Answer · 2018-11-19T01:23:24

A good habit is to check the documentation. Browsing through it, you could see a property called lineHeight. I believe this is what you're looking for. From the documentation:

lineHeight : real

Sets the line height for the text. The value can be in pixels or a multiplier depending on lineHeightMode.

They also tell you how to use it

The default value is a multiplier of 1.0. The line height must be a positive value.

Using lineHeight as a multiplier allows you to mimic the following line-spacing enumerations in MSWord.

Single
1.5 lines
Double
Multiple

Here's an example:

import QtQuick 2.0
import QtQuick.Window 2.0

Window {
    visible: true
    width: 200
    height: 300
    
    Text {
        id: text
        width: 175
        anchors.centerIn: parent
        
        //  text: "HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO"
        text: "Cat ipsum dolor sit amet, sleep nap. You call this cat food. Push your water glass on the floor."
        
        font.family: "Monaco"    // Monaco ❤️
        wrapMode: Text.WordWrap  // Make the text multi-line
        horizontalAlignment: Text.AlignHCenter

        //  lineHeight: 1.0  // single-spacing (default)
        lineHeight: 1.5  // 1.5 line-spacing
        //  lineHeight: 2.0  // double-spacing
        //  lineHeight: 3.0  // triple-spacing
        
    }
}

Here are the results of using different values of lineHeight (on a typical MacOS)

Single-spacing

1.5x, Double (2x), Triple (3x)

However, if you want to mimic the other line-spacing enumerations:

At least
Exactly

you'll need to modify the pixel height. You can do this by setting lineHeightMode to Text.FixedHeight. Like so

Window {
    visible: true
    width: 200
    height: 300
    
    Text {
        id: text
        width: 175
        anchors.centerIn: parent
        
        text: "Cat ipsum dolor sit amet, sleep nap. You call this cat food. Push your water glass on the floor."
        
        font.family: "Monaco"    // Monaco ❤️
        wrapMode: Text.WordWrap  // Make the text multi-line
        
        
        lineHeightMode: Text.FixedHeight
        lineHeight: 6            // exaggerated, text will be scrunched up
        
    }
}

Exactly 6

qt - How to set the line spacing for Qml Text Item?

1 Answers

`lineHeight : real`