---
title: "Text"
description: "Text element api."
---
import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
import Link from '@slint/common-files/src/components/Link.astro';

```slint playground
// 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%;
    }
}
```

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
<SlintProperty propName="color" typeName="brush" defaultValue="<depends on theme>">
The color of the text.

<CodeSnippetMD imagePath="/src/assets/generated/text-1.png" imageAlt="text color" imageWidth="200" imageHeight="200" needsBackground="true">
```slint "color: #3586f4;"
Text {
    text: "Hello";
    color: #3586f4;
    font-size: 40pt;
}
```
</CodeSnippetMD>
</SlintProperty>

### font-size
<SlintProperty propName="font-size" typeName="length">
The font size of the text.

<CodeSnippetMD imagePath="/src/assets/generated/text-2.png" imageAlt="text font-size" imageWidth="200" imageHeight="200" needsBackground="true">
```slint "font-size: 70pt;"
Text {
    text: "Big";
    color: black;
    font-size: 70pt;
}
```
</CodeSnippetMD>
</SlintProperty>

### font-weight
<SlintProperty propName="font-weight" typeName="int">
The weight of the font. The values range from 100 (lightest) to 900 (thickest). 400 is the normal weight. Use the [FontWeight](/master/docs/slint/reference/global-namespaces/font-weight.md) namespace for predefined constants.

<CodeSnippetMD imagePath="/src/assets/generated/text-3.png" imageAlt="text font-weight" imageWidth="200" imageHeight="200" needsBackground="true">
```slint 'font-weight: FontWeight.extra-bold;'
Text {
    text: "BOLD";
    color: black;
    font-size: 30pt;
    font-weight: FontWeight.extra-bold;
}
```
</CodeSnippetMD>
</SlintProperty>

### horizontal-alignment
<SlintProperty propName="horizontal-alignment" typeName="enum" enumName="TextHorizontalAlignment">
<CodeSnippetMD imagePath="/src/assets/generated/text-4.png" imageAlt="text-horizontal-alignment" imageWidth="200" imageHeight="200" needsBackground="true">
```slint "horizontal-alignment: left;"
Text {
    x: 0;
    text: "Hello";
    color: black;
    font-size: 40pt;
    horizontal-alignment: left;
}
```
</CodeSnippetMD>
</SlintProperty>

### max-lines
<SlintProperty propName="max-lines" typeName="int" defaultValue="0">
The maximum number of lines to display. Wrapped lines count towards the limit, and
with `overflow` set to `elide`, the ellipsis is placed on the last visible line.
Values less than or equal to zero don't limit the number of lines.
</SlintProperty>

### text
<SlintProperty propName="text" typeName="string" defaultValue="&quot;&quot;">
The text rendered.
</SlintProperty>

### vertical-alignment
<SlintProperty propName="vertical-alignment" typeName="enum" enumName="TextVerticalAlignment">
The vertical alignment of the text.
</SlintProperty>

### font-family
<SlintProperty propName="font-family" typeName="string">
The name of the font family selected for rendering the text.

<CodeSnippetMD imagePath="/src/assets/generated/text-5.png" imageAlt="text font-family" imageWidth="200" imageHeight="200" needsBackground="true">
```slint 'font-family: "Comic Sans MS";'
Text {
    text: "CoMiC!";
    color: black;
    font-size: 40pt;
    font-family: "Comic Sans MS";
}
```
</CodeSnippetMD>

:::note[Note]
  Make sure the font is loaded before using it in a `Text` element.
  See [FontHandling](/master/docs/slint/guide/development/fonts.md) for more.
:::
</SlintProperty>

### font-italic
<SlintProperty propName="font-italic" typeName="bool" defaultValue="false">
Whether or not the font face should be drawn italicized or not.

<CodeSnippetMD imagePath="/src/assets/generated/text-6.png" imageAlt="text font-family" imageWidth="200" imageHeight="200" needsBackground="true">
```slint "font-italic: true;"
Text {
    text: "Italic";
    color: black;
    font-italic: true;
    font-size: 40pt;
}
```
</CodeSnippetMD>
</SlintProperty>

### overflow
<SlintProperty propName="overflow" typeName="enum" enumName="TextOverflow">
How the text should behave when it exceeds the available space.
</SlintProperty>

### wrap
<SlintProperty propName="wrap" typeName="enum" enumName="TextWrap">
<CodeSnippetMD imagePath="/src/assets/generated/text-7.png" imageAlt="wrap" imageWidth="200" imageHeight="200" needsBackground="true">
```slint "wrap: word-wrap;"
Text {
    text: "This paragraph breaks into multiple lines of text";
    font-size: 20pt;
    wrap: word-wrap;
    width: 180px;
}
```
</CodeSnippetMD>
</SlintProperty>

### letter-spacing
<SlintProperty propName="letter-spacing" typeName="length">
The letter spacing allows changing the spacing between the glyphs. A positive value increases the spacing and a negative value decreases the distance.
<CodeSnippetMD imagePath="/src/assets/generated/text-8.png" imageAlt="text-horizontal-alignment" imageWidth="200" imageHeight="200" needsBackground="true">
```slint "letter-spacing: 4px;"
Text {
    text: "Spaced!";
    color: black;
    font-size: 30pt;
    letter-spacing: 4px;
}
```
</CodeSnippetMD>
</SlintProperty>

### line-height-factor
<SlintProperty propName="line-height-factor" typeName="float" defaultValue="1">
The line height as a unitless factor (or a percentage: `150%` equals `1.5`) applied to
the font's natural line height (ascent + descent + line gap). The default of `1` keeps
the natural line height; larger values spread the lines apart, smaller values pull them
together, and `0` collapses them onto each other. Negative or non-numeric values behave
like `1`. Unlike CSS `line-height`, the factor is relative to the natural line height,
not the font size, and keyword or length values aren't supported.

<CodeSnippetMD imagePath="/src/assets/generated/text-9.png" imageAlt="text with increased line height" imageWidth="200" imageHeight="200" needsBackground="true">
```slint "line-height-factor: 1.5;"
Text {
    text: "Two lines\nof text";
    color: black;
    font-size: 30pt;
    line-height-factor: 1.5;
}
```
</CodeSnippetMD>
</SlintProperty>

### stroke
<SlintProperty propName="stroke" typeName="brush">
The brush used for the text outline.
<CodeSnippetMD imagePath="/src/assets/generated/text-10.png" imageAlt="text stroke" imageWidth="300" imageHeight="200" needsBackground="true">
```slint "stroke: darkblue;"
Text {
    text: "Stroke";
    stroke-width: 2px;
    stroke: darkblue;
    stroke-style: center;
    font-size: 80px;
    color: lightblue;
}
```
</CodeSnippetMD>
</SlintProperty>

### stroke-width
<SlintProperty propName="stroke-width" typeName="length">
The width of the text outline. If the width is zero, then a hairline stroke (1 physical pixel) will be rendered.
</SlintProperty>

### stroke-style
<SlintProperty propName="stroke-style" typeName="enum" enumName="TextStrokeStyle">
<CodeSnippetMD imagePath="/src/assets/generated/text-11.png" imageAlt="stroke-style" imageWidth="200" imageHeight="200" needsBackground="true">
```slint "stroke-style: center;"
Text {
    text: "Style";
    stroke-width: 2px;
    stroke: #3586f4;
    stroke-style: center;
    font-size: 60px;
    color: white;
}
```
</CodeSnippetMD>
</SlintProperty>

### font-metrics
<SlintProperty propName="font-metrics" typeName="struct" structName="FontMetrics" propertyVisibility="out">
The design metrics of the font scaled to the font pixel size used by the element.
</SlintProperty>

## Accessibility

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

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