Text

// text-example.slint
export component TextExample inherits Window {
    // Text colored red.
    Text {
        x:0; y:0;
        text: "Hello World";
        color: red;
    }

    // This paragraph breaks into multiple lines of text.
    Text {
        x:0; y: 30px;
        text: "This paragraph breaks into multiple lines of text";
        wrap: word-wrap;
        width: 150px;
        height: 100%;
    }
}

slint

A Text element for displaying text.

By default, the min-width, min-height, preferred-width, and preferred-height of a Text element are set to fit the full text as if it were displayed on a single line (unless the text contains explicit line breaks). However, if the wrap property is set to word-wrap, and/or if the overflow property is set to elide, the min-width is reduced to zero, allowing the text to wrap or be elided, while the preferred-width and preferred-height remain unchanged.

Properties

color

brush default: <depends on theme>

The color of the text.

Text {
    text: "Hello";
    color: #3586f4;
    font-size: 40pt;
}

slint

font-size

length default: 0px

The font size of the text.

Text {
    text: "Big";
    color: black;
    font-size: 70pt;
}

slint

font-weight

int default: 0

The weight of the font. The values range from 100 (lightest) to 900 (thickest). 400 is the normal weight. Use the FontWeight namespace for predefined constants.

Text {
    text: "BOLD";
    color: black;
    font-size: 30pt;
    font-weight: FontWeight.extra-bold;
}

slint

horizontal-alignment

enum TextHorizontalAlignment default: the first enum value

Text {
    x: 0;
    text: "Hello";
    color: black;
    font-size: 40pt;
    horizontal-alignment: left;
}

slint

text

string default: ""

The text rendered.

vertical-alignment

enum TextVerticalAlignment default: the first enum value

The vertical alignment of the text.

font-family

string default: ""

The name of the font family selected for rendering the text.

Text {
    text: "CoMiC!";
    color: black;
    font-size: 40pt;
    font-family: "Comic Sans MS";
}

slint

Note

Make sure the font is loaded before using it in a Text element. See FontHandling for more.

font-italic

bool default: false

Whether or not the font face should be drawn italicized or not.

Text {
    text: "Italic";
    color: black;
    font-italic: true;
    font-size: 40pt;
}

slint

overflow

enum TextOverflow default: the first enum value

How the text should behave when it exceeds the available space.

wrap

enum TextWrap default: the first enum value

Text {
    text: "This paragraph breaks into multiple lines of text";
    font-size: 20pt;
    wrap: word-wrap;
    width: 180px;
}

slint

letter-spacing

length default: 0px

The letter spacing allows changing the spacing between the glyphs. A positive value increases the spacing and a negative value decreases the distance.

Text {
    text: "Spaced!";
    color: black;
    font-size: 30pt;
    letter-spacing: 4px;
}

slint

stroke

brush default: a transparent brush

The brush used for the text outline.

Text {
    text: "Stroke";
    stroke-width: 2px;
    stroke: darkblue;
    stroke-style: center;
    font-size: 80px;
    color: lightblue;
}

slint

stroke-width

length default: 0px

The width of the text outline. If the width is zero, then a hairline stroke (1 physical pixel) will be rendered.

stroke-style

enum TextStrokeStyle default: the first enum value

Text {
    text: "Style";
    stroke-width: 2px;
    stroke: #3586f4;
    stroke-style: center;
    font-size: 60px;
    color: white;
}

slint

font-metrics

struct FontMetrics (out) default: a struct with all default values

The design metrics of the font scaled to the font pixel size used by the element.

Accessibility

By default, Text elements have the following accessibility properties set:

• accessible-role: text;
• accessible-label: text;