Skip to content
Slint Language Docs

Text

test-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%;
    }
}

A Text element for displaying text.

If the width and height properties are not set, the text will be expand in a single line. If the wrap property is set along with a width and height, the text will be wrapped into multiple lines of text.

Properties

color

type: brush
default: <depends on theme>

The color of the text.

Text {
    text: "Hello";
    color: red;
}

font-family

type: string
default: <???>

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

Text {
    text: "Hello";
    color: black;
    font-family: "Arial";
}

font-size

type: length
default: <???>

The font size of the text.

Text {
    text: "Hello";
    color: black;
    font-size: 2rem;
}

font-weight

type: int
default: <???>

The weight of the font. The values range from 100 (lightest) to 900 (thickest). 400 is the normal weight.

Text {
    text: "Hello";
    color: black;
    font-weight: 800;
}

font-italic

type: bool
default: false

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

Text {
    text: "Hello";
    color: black;
    font-italic: true;
}

font-metrics out (read only)

type: struct
default: <???>

A structure to hold metrics of a font for a specified pixel size.

Fields

  • ascent (length): The distance between the baseline and the top of the tallest glyph in the font.
  • descent (length): The distance between the baseline and the bottom of the tallest glyph in the font. This is usually negative.
  • x_height (length): The distance between the baseline and the horizontal midpoint of the tallest glyph in the font, or zero if not specified by the font.
  • cap_height (length): The distance between the baseline and the top of a regular upper-case glyph in the font, or zero if not specified by the font.

horizontal-alignment

type: enum
default: left

TextHorizontalAlignment

This enum describes the different types of alignment of text along the horizontal axis of the element.

  • left: The text will be aligned with the left edge of the containing box.
  • center: The text will be horizontally centered within the containing box.
  • right: The text will be aligned to the right of the containing box.

letter-spacing

type: length
default: 0

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

overflow

type: enum
default: clip

TextOverflow

How the text appear if it is too wide to fit in the elements width.

  • clip: The text will simply be clipped.
  • elide: The text will be elided with ….

text

type: string
default: ""

The text rendered.

vertical-alignment

type: enum
default: <???>

TextVerticalAlignment

This enum describes the different types of alignment of the element along the elements vertical axis.

  • top: The text will be aligned to the top of the containing box.
  • center: The text will be vertically centered within the containing box.
  • bottom: The text will be aligned to the bottom of the containing box.

wrap

type: enum
default: no-wrap

TextWrap

This enum describes the how the text wrap if it is too wide to fit in the Text width.

  • no-wrap: The text won’t wrap, but instead will overflow.
  • word-wrap: The text will be wrapped at word boundaries if possible, or at any location for very long words.
  • char-wrap: The text will be wrapped at any character. Currently only supported by the Qt and Software renderers. The way the text wraps.
Text {
    text: "This paragraph breaks into multiple lines of text";
    wrap: word-wrap;
    width: 150px;
}

stroke

type: brush
default: transparent

The brush used for the text outline.

stroke-width

type: length
default: <???>

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

stroke-style

type: enum
default: outside

TextStrokeStyle

This enum describes the positioning of a text stroke relative to the border of the glyphs.

  • outside: The inside edge of the stroke is at the outer edge of the text.
  • center: The center line of the stroke is at the outer edge of the text, like in Adobe Illustrator. The style/alignment of the text outline.
Text {
    text: "Hello";
    stroke-style: center;
}

Rotation

Rotates the text by the given angle around the specified origin point. The default origin point is the center of the element. When these properties are set, the Text can’t have children.

Text {
    x: 0;
    y: 0;
    text: "Hello world";
    rotation-angle: 45deg;
    rotation-origin-x: 0;
    rotation-origin-y: 0;
    font-size: 20pt;
}

rotation-angle

type: angle
default: 0deg

rotation-origin-x

type: length
default: <???>

rotation-origin-y

type: length
default: <???>