@weasel-js/text

Typography for weasel: styled runs, style resolution, kerned glyph layout, wrap and measurement. Glyphs come from @weasel-js/font; nothing here knows about a scene graph, a renderer or React.

Part of weasel, a domain-agnostic 2D scene-graph canvas kit for React. See the API reference.

Install

npm install @weasel-js/text

Usage

layoutRuns is the glyph walk: it takes fully-resolved runs and returns positioned geometry, grouped so that one group is one draw call.

import { toRuns, resolveTextStyle, resolveRuns, layoutRuns } from '@weasel-js/text';

const style = resolveTextStyle({ fontFamily: 'inter', fontSize: 64 });
const { groups, lines, bounds } = layoutRuns(resolveRuns(toRuns('Hello'), style), {
  maxWidth: 900,
  lineHeight: 1.2,
  align: 'center',
});

A group carries either textured quads (from a baked MSDF atlas) or outline glyphs — em-space SVG path data plus the pen position, baseline and scale to place it — for a consumer that tessellates its own geometry.

Metrics come from whichever tier resolved the family: a baked MSDF atlas, or — for a family registered with registerFontOutlines and no atlas — the parsed face itself, so font bytes alone are enough to lay text out.

The inline grammar runsToMarkdown / markdownToRuns speak is a parameter, defaulting to MARKDOWN_RUN_GRAMMAR (**bold**, *italic*, ***both***). Pass a RunGrammar with different markers to read or write another spelling.