BoundedTextbox options

The fabricjs-document-engine/text entry holds text classes and helpers. The guides explain when to use each: Textbox width, vertical text, Arabic and RTL text, typing on phones and text styles from code.

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

Register the classes

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.

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*	BreakWords	"anywhere"	Break a word wider than the box between letters. `never` acts like a Textbox.
maxHeight*	number \| undefined	none	The tallest the box may be.
overflow*	TextOverflow	"visible"	`clip` cuts at `maxHeight`; `ellipsis` hides lines past it and ends the last one with "…".
fit*	TextFit	"none"	`shrink` lowers the font size, in half points, until the text fits `maxHeight`. The saved size does not change.
minFontSize*	number	6	The smallest size `shrink` goes to.
shaping*	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*	TextOrientation	"mixed"	`mixed` turns Latin text 90°; `upright` stands every character up.
combineUpright*	CombineUpright	"none"	`digits2` sets one or two digits side by side in one square.

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

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*	(): void	—	Puts Fabric's own text input back.

createTextCommands

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

function createTextCommands(engine: DocumentEngine): TextCommands

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

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.

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

Merges a style into graphemes start to end.

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*	(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*	(target: EditableTextObject, start: number, end: number): void	—	Deletes graphemes `start` to `end`.
replaceText*	(target: EditableTextObject, start: number, end: number, text: string, style?: InsertedStyle): void	—	Replaces graphemes `start` to `end` with new text.
setTextStyle*	(target: EditableTextObject, start: number, end: number, style: TextStyleDeclaration): void	—	Merges a style into graphemes `start` to `end`.

Name	Type	Default	Description
start*	number	—	First grapheme of the run.
end*	number	—	One past the last grapheme.
style*	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.

Text API

Register the classes

BoundedTextbox options

VerticalText

ShapedIText and ShapedTextbox

attachMobileTextInput

createTextCommands