> ## Documentation Index
> Fetch the complete documentation index at: https://rive.app/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Text

Shapes and lays out styled runs of text with the runtime's shaper, so
scripts get real line breaking and bidirectional ordering. Append runs,
set the box, then draw it in one call or walk its lines and glyphs to draw
them yourself. Codepoint indices are 1 based like `utf8.offset`.

```lua highlight={8,9,10,11,15} theme={null}
type Label = {
  text: Text,
  paint: Paint,
}

function init(self: Label, context: Context): boolean
  local font = context:font('IBM Plex Sans Arabic')
  self.text:append('مرحبا بالعالم', { font = font, size = 32, paint = self.paint })
  self.text.sizing = 'fixed'
  self.text.maxWidth = 240
  self.text.align = 'start'
  return true
end

function draw(self: Label, renderer: Renderer)
  self.text:draw(renderer)
end
```

## Fields

### `sizing`

### `overflow`

### `align`

### `wrap`

### `wordBreak`

### `origin`

### `direction`

### `maxWidth`

Wrap width when sizing is not 'autoWidth'.

### `maxHeight`

Height the text overflows at when sizing is 'fixed'.

### `paragraphSpacing`

Space between paragraphs separated by a newline.

### `length`

Number of codepoints appended.

### `isEmpty`

### `lineCount`

## Constructors

### `new`

<div class="signature">
  ```lua theme={null}
  new() -> Text
  ```
</div>

Creates an empty text.

## Methods

### `append`

<div class="signature">
  ```lua theme={null}
  append(text: string, style: TextRunStyle) -> ()
  ```
</div>

Appends a styled run. Runs join into one string; a newline starts a paragraph.

### `clear`

<div class="signature">
  ```lua theme={null}
  clear() -> ()
  ```
</div>

Removes every run.

### `draw`

<div class="signature">
  ```lua theme={null}
  draw(renderer: Renderer, paint: Paint?) -> ()
  ```
</div>

Draws every run with its own paint, or all of them with the given paint.

### `bounds`

<div class="signature">
  ```lua theme={null}
  bounds() -> (Vector, Vector)
  ```
</div>

Minimum and maximum corner of the laid out text.

### `line`

<div class="signature">
  ```lua theme={null}
  line(index: number) -> TextLine
  ```
</div>

The line at a 1 based index, top to bottom.

### `lines`

<div class="signature">
  ```lua theme={null}
  lines() -> {TextLine}
  ```
</div>

Every line, top to bottom.

### `hitTest`

<div class="signature">
  ```lua theme={null}
  hitTest(position: Vector) -> number
  ```
</div>

The codepoint index nearest a point in the text's local space.

### `caret`

<div class="signature">
  ```lua theme={null}
  caret(index: number) -> (number, number, number)
  ```
</div>

The caret before the codepoint at index: its x, top and bottom. Nil when the text is empty.

### `selectionRects`

<div class="signature">
  ```lua theme={null}
  selectionRects(from: number, to: number) -> {{min: Vector, max: Vector}}
  ```
</div>

Rectangles covering the codepoints from one index to another, one per glyph.