pixi-silk/text
SilkText: distance-field text with outline, shadow and gradient fill. SdfAtlas, layoutText, caret helpers.
import { SdfAtlas, SilkText, SilkTextGeometry, caretAtPoint } from 'pixi-silk/text';Classes#
| Class | Description |
|---|---|
| SdfAtlas | Glyphs of any CSS font, rasterised with Canvas2D and turned into signed distance fields, in one 8-bit texture every SilkText shares. |
| SilkText | Text from pixi-silk/text, drawn from signed distance fields. Glyphs come from any CSS font. They are baked once at one size into a shared SdfAtlas and drawn scaled, with the same per-pixel anti-aliasing as SilkGraphics. Every glyph is an instance of one mesh. |
| SilkTextGeometry | Geometry behind every SilkText: one unit quad plus one instance of 12 floats per glyph. SilkText owns and fills it. You rarely need it directly. |
Interfaces#
| Interface | Description |
|---|---|
| CaretHit | Where a point lands in a TextLayout: the nearest caret position. |
| CaretRect | A caret position in layout units: a vertical segment from top to bottom at x. |
| FontMetrics | Vertical metrics of a font at the atlas size, measured the way PixiJS Text measures them. |
| FontSpec | The font of a glyph: CSS family list, weight and style. Size does not matter, glyphs are baked at one size. |
| Glyph | A glyph baked into the atlas. Distances are in raster pixels, at SdfAtlas.size. |
| GlyphContext | The slice of a 2D canvas context the atlas needs. Pass your own to SdfAtlasOptions.context to bake glyphs somewhere else (a worker canvas, or a fake one in tests). |
| LayoutLine | One line of a laid-out text. |
| LayoutOptions | What layoutText needs besides the text. Sizes are in local units. |
| PlacedGlyph | A character placed by layoutText. |
| SdfAtlasOptions | Options of an SdfAtlas. |
| SilkTextOptions | Options of a SilkText: the style plus the text, anchor and atlas. |
| SilkTextStyle | The look of a SilkText. Every field can change later through its setter or SilkText.set. |
| TextLayout | Result of layoutText. |
| TextMeasurer | Widths of characters at the size being laid out, in local units. |
| TextOutline | A line drawn around the glyphs, outside their edge. |
| TextRect | A rectangle in layout units, as rangeRects returns them. |
| TextShadow | A soft copy of the glyphs under them: a drop shadow with an offset, a glow without one. |
| WordSegment | A run of text with a kind, as wordSegments returns them. |
Type Aliases#
| Type Alias | Description |
|---|---|
| ResolvedTextStyle | A SilkTextStyle with every field set, as SilkText.defaults holds it. |
| TextAlign | Horizontal alignment of the lines of a text block. |
Functions#
| Function | Description |
|---|---|
| caretAtPoint | The caret position nearest to a point, in the layout’s own units (the top left of the text box is 0, 0). Points above the first line or below the last snap to them. isStop filters the offsets a caret may take, for example grapheme cluster boundaries. |
| caretRect | Where to draw a caret at index, in the layout’s units. |
| caretX | The x of a caret at index on line li: the nearest caret stop at or before it. |
| fontString | pixi-silk/text: SilkText, text drawn from a shared signed distance field atlas, plus the layout and caret helpers it uses. Not part of the root pixi-silk import. |
| graphemeStops | Offsets where a caret can sit: 0, every grapheme cluster boundary, and the text’s length. |
| isMac | True on macOS, iOS and iPadOS, where Option moves by word and Command by line. |
| layoutText | Lays out a block of text. Lines break at \n and, with wordWrap, at spaces. Each character gets its advance, kerning and letter spacing, then the lines are aligned. Widths come from measure, so the same layout works for any renderer. |
| lineOfIndex | The line a caret at index is on. At a wrap, upstream picks the end of the first line over the start of the next. |
| nextWordStop | Where a word jump to the right lands. mac (the default on Apple platforms) stops at the end of the next word, like Option + Right. Otherwise it stops at the start of the word after, like Ctrl + Right. |
| paragraphAt | The paragraph around index: from the newline before it to the newline after, newlines left out. |
| previousWordStop | Where a word jump to the left lands: the start of the word before index. |
| rangeRects | Highlight boxes of the range from to to, one per line, the full height of each line box. A range that runs on past a newline gets a sliver of newline width at that line’s end, so selected empty lines still show. Default newline width a quarter of the font height. |
| sdfFromAlpha | Turns an anti-aliased coverage bitmap into an 8-bit signed distance field. |
| silkLabel | A label factory that makes SilkText labels, for widgets such as ValuePill. The widget’s style comes first, then overrides (any SilkText option but the text). From the Pixi style it keeps the font, letter spacing, line height, left, center or right alignment, and a plain colour fill. Gradients, strokes and drop shadows of the Pixi style are dropped. |
| wordAt | The segment (word, run of spaces or punctuation) that holds the character at index. |
| wordSegments | Splits text into words and the runs between them. |