Text
// text-example.slintexport 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.
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
Section titled “Properties” brush default: <depends on theme>
The color of the text.
Text { text: "Hello"; color: #3586f4; font-size: 40pt;}

font-family
Section titled “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";}

font-size
Section titled “font-size” length default: 0px
The font size of the text.
Text { text: "Big"; color: black; font-size: 70pt;}

font-weight
Section titled “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;}

font-italic
Section titled “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;}

font-metrics
Section titled “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
Section titled “horizontal-alignment” enum TextHorizontalAlignment default: the first enum value
Text { x: 0; text: "Hello"; color: black; font-size: 40pt; horizontal-alignment: left;}

letter-spacing
Section titled “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;}

overflow
Section titled “overflow” enum TextOverflow default: the first enum value
string default: ""
The text rendered.
vertical-alignment
Section titled “vertical-alignment” 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;}

stroke
Section titled “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;}

stroke-width
Section titled “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
Section titled “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;}

Rotation
Section titled “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;}

rotation-angle
Section titled “rotation-angle” angle default: 0deg
rotation-origin-x
Section titled “rotation-origin-x” length default: self.width / 2
rotation-origin-y
Section titled “rotation-origin-y” length default: self.height / 2
Accessibility
Section titled “Accessibility”By default, Text
elements have the following accessibility properties set:
accessible-role: text;
accessible-label: text;
© 2025 SixtyFPS GmbH