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-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

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.

Text {
    text: "BOLD";
    color: black;
    font-size: 30pt;
    font-weight: 800;
}

slint

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

font-metrics

struct FontMetrics default: a struct with all default values

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

horizontal-alignment

enum TextHorizontalAlignment default: the first enum value

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

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

overflow

enum TextOverflow default: the first enum value

text

string default: ""

The text rendered.

vertical-alignment

enum TextVerticalAlignment default: the first enum value

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

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

Rotation

Rotates the text by the given angle around the specified origin point. The default origin point is the center of the element.

Text {
    text: "I'm dizzy";
    rotation-angle: 45deg;
    rotation-origin-x: self.width / 2;
    rotation-origin-y: self.height / 2;
    font-size: 30pt;
}

slint

rotation-angle

angle default: 0deg

rotation-origin-x

length default: self.width / 2

rotation-origin-y

length default: self.height / 2

Accessibility

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

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