---
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-color.png" needsBackground="true" imageWidth="200" imageHeight="200" imageAlt='text color'>
```slint "color: #3586f4;"
Text {
    text: "Hello";
    color: #3586f4;
    font-size: 40pt;
}
```
</CodeSnippetMD>
</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-font-family.png" needsBackground="true" imageWidth="200" imageHeight="200" imageAlt='text font-family'>
```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 <Link type="FontHandling" /> for more.
:::
</SlintProperty>


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

<CodeSnippetMD imagePath="/src/assets/generated/text-font-size.png" needsBackground="true" imageWidth="200" imageHeight="200" imageAlt='text font-size'>
```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.

<CodeSnippetMD imagePath="/src/assets/generated/text-font-weight.png" needsBackground="true" imageWidth="200" imageHeight="200" imageAlt='text font-weight'>

```slint 'font-weight: 800;'
Text {
    text: "BOLD";
    color: black;
    font-size: 30pt;
    font-weight: 800;
}
```
</CodeSnippetMD>
</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-font-italic.png" needsBackground="true" imageWidth="200" imageHeight="200" imageAlt='text font-family'>
```slint "font-italic: true;"
Text {
    text: "Italic";
    color: black;
    font-italic: true;
    font-size: 40pt;
}
```
</CodeSnippetMD>
</SlintProperty>

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

### horizontal-alignment
<SlintProperty propName="horizontal-alignment" typeName="enum" enumName='TextHorizontalAlignment' >

<CodeSnippetMD imagePath="/src/assets/generated/text-horizontal-alignment.png" needsBackground="true" imageWidth="200" imageHeight="200"  imageAlt='text-horizontal-alignment'>
```slint "horizontal-alignment: left;"
Text {
    x: 0;
    text: "Hello";
    color: black;
    font-size: 40pt;
    horizontal-alignment: left;
}
```
</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-letter-spacing.png" needsBackground="true"  imageWidth="200" imageHeight="200"  imageAlt='text-horizontal-alignment'>
```slint "letter-spacing: 4px;"
Text {
    text: "Spaced!";
    color: black;
    font-size: 30pt;
    letter-spacing: 4px;
}
```
</CodeSnippetMD>
</SlintProperty>

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

### text
<SlintProperty propName="text" typeName="string" defaultValue='""' >
The text rendered.
</SlintProperty>

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

### wrap
<SlintProperty propName="wrap" typeName="enum" enumName="TextWrap">


<CodeSnippetMD imagePath="/src/assets/generated/text_wrap.png" needsBackground="true" imageWidth="200" imageHeight="200" imageAlt='wrap'>

```slint "wrap: word-wrap;"
Text {
    text: "This paragraph breaks into multiple lines of text";
    font-size: 20pt;
    wrap: word-wrap;
    width: 180px;
}
```
</CodeSnippetMD>
</SlintProperty>

### stroke
<SlintProperty propName="stroke" typeName="brush">
The brush used for the text outline.
<CodeSnippetMD imagePath="/src/assets/generated/text-stroke.png" needsBackground="true" imageWidth="300" imageHeight="200" imageAlt='text stroke'>
```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-stroke-style.png" needsBackground="true" imageWidth="200" imageHeight="200" imageAlt='stroke-style'>

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

## Accessibility

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

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