# Text API

> BoundedTextbox options, VerticalText options, the shaped text classes, the mobile text input adapter and the text commands that keep letter styles.

Source: https://fabricjs-document-engine.jscrate.dev/docs/api/text-api
Last updated: 2026-10-02

The `fabricjs-document-engine/text` entry holds text classes and helpers. The guides explain when to use each: [Textbox width](https://fabricjs-document-engine.jscrate.dev/docs/guides/textbox-width), [vertical text](https://fabricjs-document-engine.jscrate.dev/docs/guides/vertical-text), [Arabic and RTL text](https://fabricjs-document-engine.jscrate.dev/docs/guides/rtl-text), [typing on phones](https://fabricjs-document-engine.jscrate.dev/docs/guides/mobile-text-input) and [text styles from code](https://fabricjs-document-engine.jscrate.dev/docs/guides/text-styles).

```ts
import {
  BoundedTextbox,
  ShapedIText,
  ShapedTextbox,
  VerticalText,
  attachMobileTextInput,
  textObjects,
} from "fabricjs-document-engine/text";
```

## Register the classes

```ts
const engine = createDocumentEngine({ canvas, customObjects: textObjects });
```

`textObjects` lists `BoundedTextbox`, `ShapedIText`, `ShapedTextbox` and `VerticalText`, so documents that use them save and load. Without an engine, call `registerTextObjects()` before `loadFromJSON`.

```ts
function registerTextObjects(): void
```

Registers `BoundedTextbox`, `ShapedIText`, `ShapedTextbox` and `VerticalText` with Fabric. Engines use `customObjects: textObjects` instead.

## BoundedTextbox options

`BoundedTextbox` takes every Textbox option, plus these BoundedTextbox options:

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `breakWords` (required) | `BreakWords` | `"anywhere"` | Break a word wider than the box between letters. `never` acts like a Textbox. |
| `maxHeight` (required) | `number \| undefined` | `none` | The tallest the box may be. |
| `overflow` (required) | `TextOverflow` | `"visible"` | `clip` cuts at `maxHeight`; `ellipsis` hides lines past it and ends the last one with "…". |
| `fit` (required) | `TextFit` | `"none"` | `shrink` lowers the font size, in half points, until the text fits `maxHeight`. The saved size does not change. |
| `minFontSize` (required) | `number` | `6` | The smallest size `shrink` goes to. |
| `shaping` (required) | `boolean` | `false` | Measure letters as the browser joins them, for Arabic and ligatures. |

`getBaseFontSize()` returns the size you set, before `fit: "shrink"`, and `fitScale` the share drawn.

## VerticalText

`VerticalText` takes every IText option, plus:

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `textOrientation` (required) | `TextOrientation` | `"mixed"` | `mixed` turns Latin text 90°; `upright` stands every character up. |
| `combineUpright` (required) | `CombineUpright` | `"none"` | `digits2` sets one or two digits side by side in one square. |

```ts
function orientationOf(grapheme: string): Orientation
```

How a character stands in vertical text, after Unicode UAX #50.

## ShapedIText and ShapedTextbox

`ShapedIText` and `ShapedTextbox` take the same options as IText and Textbox. They only change how letters are measured.

## attachMobileTextInput

```ts
function attachMobileTextInput(canvas: Canvas, options?: MobileTextInputOptions): MobileTextInput
```

Makes typing with phone keyboards, autocorrect and IME land in the right place on every text object of a canvas.

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `inputMode` | `string` | `"text"` | Which keyboard to show. |
| `enterKeyHint` | `string` | `"enter"` | The label of the Enter key. |
| `autocapitalize` | `string` | `"sentences"` | Capital letters at the start of sentences. |
| `autocorrect` | `boolean` | `true` | Let the keyboard correct words; the adapter applies corrections in the right place. |
| `spellcheck` | `boolean` | `false` | Spell checking in the textarea. |

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `detach` (required) | `(): void` | — | Puts Fabric's own text input back. |

## createTextCommands

These come from the main `fabricjs-document-engine` entry.

```ts
function createTextCommands(engine: DocumentEngine): TextCommands
```

Text edits that keep each letter's style in place, one undo step each.

```ts
function replaceTextRange(target: EditableTextObject, start: number, end: number, insert: string, style?: InsertedStyle): void
```

Replaces graphemes `start` to `end` and moves every style with its letters. Keeps the cursor and the hidden textarea in step, and fires `text:changed`.

```ts
function setTextRangeStyle(target: EditableTextObject, start: number, end: number, style: TextStyleDeclaration): void
```

Merges a style into graphemes `start` to `end`.

```ts
function shiftStyleRuns(runs: readonly StyleRun[], start: number, end: number, insertedLength: number, style?: InsertedStyle): StyleRun[]
```

Moves style runs for one edit. Pure, O(runs).

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `insertText` (required) | `(target: EditableTextObject, index: number, text: string, style?: InsertedStyle): void` | — | Inserts text at a grapheme index. The new text takes the style of the letter before it unless `style` is given. |
| `deleteText` (required) | `(target: EditableTextObject, start: number, end: number): void` | — | Deletes graphemes `start` to `end`. |
| `replaceText` (required) | `(target: EditableTextObject, start: number, end: number, text: string, style?: InsertedStyle): void` | — | Replaces graphemes `start` to `end` with new text. |
| `setTextStyle` (required) | `(target: EditableTextObject, start: number, end: number, style: TextStyleDeclaration): void` | — | Merges a style into graphemes `start` to `end`. |

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `start` (required) | `number` | — | First grapheme of the run. |
| `end` (required) | `number` | — | One past the last grapheme. |
| `style` (required) | `TextStyleDeclaration` | — | The Fabric style declaration. |

All the BoundedTextbox options and the rest are typed in the package, so your editor shows them as you write.