Skip to content

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.

brush default: <depends on theme>

The color of the text.

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

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
text font-family

length default: 0px

The font size of the text.

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

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
text font-weight

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
text font-family

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.

enum TextHorizontalAlignment default: the first enum value

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

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
text-horizontal-alignment

enum TextOverflow default: the first enum value

string default: ""

The text rendered.

enum TextVerticalAlignment default: the first enum value

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
wrap

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

length default: 0px

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

enum TextStrokeStyle default: the first enum value

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

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 properties

angle default: 0deg

length default: self.width / 2

length default: self.height / 2

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

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

© 2025 SixtyFPS GmbH