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, Nov 18 '18 at 21:48
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 [mcve], can you share a [mcve]? — eyllanesc, Nov 18 '18 at 21:50
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, Nov 18 '18 at 21:52
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, Nov 18 '18 at 21:56
You could show a picture of what you get and what you want to get. — eyllanesc, Nov 18 '18 at 21:57
I've posted some code? Does "Vertical spacing between lines of text" sound unclear to you? — swaggg, Nov 18 '18 at 22:11
@swaggg in both your screenshots, the dialog-boxes refers to it as `line spacing`. Just reuse that language in your question, no harm to it. :-) — TrebledJ, Nov 19 '18 at 01:32
@TrebuchetMS No, my idea was not to solve the problem (today I only do moderation :-)) but to understand what you want, if you check the history you will see that the initial state of the question is unclear. — eyllanesc, Nov 19 '18 at 02:07
Errrr, the title says "line spacing". Then I describe it as "vertical line spacing" — swaggg, Nov 20 '18 at 14:56

score 8 · Accepted Answer · edited Jun 20 '20 at 09:12

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

Thanks for the detailed answer! As I said in my comment: "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." That's probably of how broken the anchors. properties are, but that's okay. — swaggg, Nov 20 '18 at 14:58
Oh dear I must be blind. Well, I guess you _could_ manipulate the space between lines by using `lineHeight` some way or another. — TrebledJ, Nov 20 '18 at 15:05
Actually, I tried setting that to something like 2x before asking my question here and the effect was my label completely fell out of my rectangle, so I assumed the property did something else entirely. I guess that had to do with my anchor setup as I later found out combining anchors with dynamic font resizing based on root item size in my widget also changed label position in relation to the background rectangle. Anyway... It's good to know this normally works. — swaggg, Nov 20 '18 at 15:16

How to set the line spacing for Qml Text Item?

1 Answers1

`lineHeight : real`