modern-text 1.12.0 → 2.0.1

package/dist/index.mjs

@@ -1,10 +1,10 @@
-import { T as Text } from './shared/modern-text.CrFHIJtB.mjs';
-export { C as Canvas2DRenderer, a as Character, F as Fragment, M as Measurer, P as Paragraph, b as backgroundPlugin, c as createSvgLoader, d as createSvgParser, g as getEffectTransform2D, e as getHighlightStyle, h as highlightPlugin, i as isEqualObject, f as isEqualValue, l as listStylePlugin, o as outlinePlugin, p as parseColormap, j as parseTransformOrigin, k as parseValueNumber, r as renderPlugin, t as textDecorationPlugin, m as textDefaultStyle } from './shared/modern-text.CrFHIJtB.mjs';
+import { T as Text } from './shared/modern-text.EUexrM_5.mjs';
+export { C as Canvas2DRenderer, a as Character, D as DomMeasurer, F as FontMeasurer, b as Fragment, P as Paragraph, c as backgroundPlugin, d as createSvgLoader, e as createSvgParser, g as getEffectTransform2D, f as getHighlightStyle, h as highlightPlugin, i as isEqualObject, j as isEqualValue, l as listStylePlugin, o as outlinePlugin, p as parseColormap, k as parseTransformOrigin, m as parseValueNumber, r as renderPlugin, t as textDecorationPlugin, n as textDefaultStyle } from './shared/modern-text.EUexrM_5.mjs';
 export { d as defineDeformation, a as definePlugin, b as deformationPlugin, g as getDeformationNames, r as removeDeformation } from './shared/modern-text.JF1ny7A-.mjs';
 export { C as CircleCurve, E as EllipseCurve, H as HeartCurve, P as PolygonCurve, R as RectangularCurve } from './shared/modern-text.fT17R5HY.mjs';
+import 'modern-font';
 import 'modern-idoc';
 import 'modern-path2d';
-import 'modern-font';
 
 function measureText(options, load) {
   const text = new Text(options);

package/dist/shared/{modern-text.DR1hbjgA.cjs → modern-text.9z5yZjKR.cjs}

@@ -1,9 +1,9 @@
 'use strict';
 
+const modernFont = require('modern-font');
 const modernIdoc = require('modern-idoc');
 const modernPath2d = require('modern-path2d');
 const deformation = require('./modern-text.B2xfrqDc.cjs');
-const modernFont = require('modern-font');
 
 function createSvgLoader() {
   const loaded = /* @__PURE__ */ new Map();
@@ -531,6 +531,18 @@ class Character {
     this.fontStyle = fsSelectionMap[os2.fsSelection] ?? macStyleMap[head.macStyle];
     return this;
   }
+  /**
+   * Populate glyph metrics only (advance width/height, ascender/descender,
+   * baseline, …) without building the glyph `path` or touching boxes.
+   *
+   * The DOM {@link DomMeasurer} never needs this — it reads positions back from the
+   * browser. A pure-JS measurer (e.g. `FontMeasurer`) must know advances *before*
+   * it can place characters, so it calls this ahead of layout. `update()` later
+   * recomputes the same metrics while building the path, so this is idempotent.
+   */
+  measureGlyph(fonts) {
+    return this.updateGlyph(this._getFontSFNT(fonts));
+  }
   update(fonts) {
     const sfnt = this._getFontSFNT(fonts);
     if (!sfnt) {
@@ -723,7 +735,7 @@ function getSharedContainer() {
   sharedContainer = container;
   return container;
 }
-class Measurer {
+class DomMeasurer {
   static notZeroStyles = /* @__PURE__ */ new Set([
     "width",
     "height"
@@ -758,7 +770,7 @@ class Measurer {
       return cached;
     }
     const domStyle = {};
-    const { notZeroStyles, pxStyles } = Measurer;
+    const { notZeroStyles, pxStyles } = DomMeasurer;
     for (const key in style) {
       const value = style[key];
       if (notZeroStyles.has(key) && value === 0) {
@@ -1067,6 +1079,253 @@ class Measurer {
   }
 }
 
+function side(style, name, edge) {
+  return style[`${name}${edge}`] ?? style[name] ?? 0;
+}
+class FontMeasurer {
+  measure(paragraphs, rootStyle, _dom, fonts) {
+    const _fonts = fonts ?? modernFont.fonts;
+    for (const paragraph of paragraphs) {
+      for (const fragment of paragraph.fragments) {
+        for (const character of fragment.characters) {
+          character.measureGlyph(_fonts);
+        }
+      }
+    }
+    return rootStyle.writingMode.includes("vertical") ? this._measureVertical(paragraphs, rootStyle) : this._measureHorizontal(paragraphs, rootStyle);
+  }
+  _rootPadding(rootStyle) {
+    return {
+      top: side(rootStyle, "padding", "Top"),
+      right: side(rootStyle, "padding", "Right"),
+      bottom: side(rootStyle, "padding", "Bottom"),
+      left: side(rootStyle, "padding", "Left")
+    };
+  }
+  _measureHorizontal(paragraphs, rootStyle) {
+    const rootPad = this._rootPadding(rootStyle);
+    const hasWidth = typeof rootStyle.width === "number";
+    const availWidth = hasWidth ? rootStyle.width - rootPad.left - rootPad.right : Infinity;
+    let y = rootPad.top;
+    let maxRight = rootPad.left;
+    for (const paragraph of paragraphs) {
+      const pStyle = paragraph.computedStyle;
+      const pBox = paragraph.style;
+      const mTop = side(pBox, "margin", "Top");
+      const mBottom = side(pBox, "margin", "Bottom");
+      const mLeft = side(pBox, "margin", "Left");
+      const mRight = side(pBox, "margin", "Right");
+      const pTop = side(pBox, "padding", "Top");
+      const pBottom = side(pBox, "padding", "Bottom");
+      const pLeft = side(pBox, "padding", "Left");
+      const pRight = side(pBox, "padding", "Right");
+      const liLeft = rootPad.left + mLeft + pLeft;
+      const liAvail = availWidth === Infinity ? Infinity : availWidth - mLeft - mRight - pLeft - pRight;
+      y += mTop + pTop;
+      const paraTop = y;
+      let paraRight = liLeft;
+      const lines = this._breakLines(paragraph, liAvail);
+      const align = pStyle.textAlign;
+      const indent = pStyle.textIndent ?? 0;
+      for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        const lineIndent = i === 0 ? indent : 0;
+        let lineHeight = pStyle.fontSize * pStyle.lineHeight;
+        let contentWidth = 0;
+        for (const c of line) {
+          if (c.fontHeight > lineHeight) {
+            lineHeight = c.fontHeight;
+          }
+          contentWidth += this._advance(c);
+        }
+        let x = liLeft + lineIndent;
+        if (liAvail !== Infinity) {
+          const slack = liAvail - lineIndent - contentWidth;
+          if (align === "center") {
+            x += slack / 2;
+          } else if (align === "end" || align === "right") {
+            x += slack;
+          }
+        }
+        for (const c of line) {
+          const adv = c.advanceWidth;
+          const contentHeight = c.advanceHeight;
+          const fontHeight = c.fontHeight;
+          c.inlineBox.left = x;
+          c.inlineBox.top = y + (lineHeight - contentHeight) / 2;
+          c.inlineBox.width = adv;
+          c.inlineBox.height = contentHeight;
+          c.lineBox.left = x;
+          c.lineBox.top = c.inlineBox.top + (contentHeight - fontHeight) / 2;
+          c.lineBox.width = adv;
+          c.lineBox.height = fontHeight;
+          x += this._advance(c);
+        }
+        if (x > paraRight) {
+          paraRight = x;
+        }
+        y += lineHeight;
+      }
+      if (paraRight > maxRight) {
+        maxRight = paraRight;
+      }
+      for (const fragment of paragraph.fragments) {
+        this._unionInto(fragment.inlineBox, fragment.characters.map((c) => c.inlineBox));
+      }
+      paragraph.lineBox.left = liLeft;
+      paragraph.lineBox.top = paraTop;
+      paragraph.lineBox.width = liAvail === Infinity ? paraRight - liLeft : liAvail;
+      paragraph.lineBox.height = y - paraTop;
+      y += pBottom + mBottom;
+    }
+    const contentBottom = y + rootPad.bottom;
+    const totalWidth = hasWidth ? rootStyle.width : maxRight + rootPad.right;
+    const totalHeight = typeof rootStyle.height === "number" ? rootStyle.height : contentBottom;
+    if (typeof rootStyle.height === "number") {
+      const slack = totalHeight - contentBottom;
+      const va = rootStyle.verticalAlign;
+      const dy = va === "middle" ? slack / 2 : va === "bottom" ? slack : 0;
+      if (dy) {
+        this._shiftAll(paragraphs, dy);
+      }
+    }
+    return {
+      paragraphs,
+      boundingBox: new modernPath2d.BoundingBox(0, 0, totalWidth, totalHeight)
+    };
+  }
+  /**
+   * Vertical writing-mode (`vertical-rl`): columns stack right-to-left, glyphs
+   * flow top→bottom. It is the horizontal layout with the inline and block axes
+   * swapped — the inline (down-column) advance is `advanceWidth` (CJK upright = em;
+   * Latin is rotated, so its advance ≈ its width), the cross-axis content box is
+   * `advanceHeight`, and the column thickness is `fontHeight`. The lineBox is
+   * derived exactly as DomMeasurer.measureParagraphDom's vertical branch, so it
+   * stays accurate even though inlineBox carries the content-box rounding residual.
+   *
+   * v1: `vertical-rl` only; no per-paragraph margin/padding or block alignment.
+   */
+  _measureVertical(paragraphs, rootStyle) {
+    const rootPad = this._rootPadding(rootStyle);
+    const hasHeight = typeof rootStyle.height === "number";
+    const availHeight = hasHeight ? rootStyle.height - rootPad.top - rootPad.bottom : Infinity;
+    const columns = [];
+    for (const paragraph of paragraphs) {
+      const strut = paragraph.computedStyle.fontSize * paragraph.computedStyle.lineHeight;
+      for (const line of this._breakLines(paragraph, availHeight)) {
+        let thickness = strut;
+        for (const c of line) {
+          if (c.fontHeight > thickness) {
+            thickness = c.fontHeight;
+          }
+        }
+        columns.push({ chars: line, thickness });
+      }
+    }
+    const totalThickness = columns.reduce((sum, c) => sum + c.thickness, 0);
+    const hasWidth = typeof rootStyle.width === "number";
+    const blockWidth = hasWidth ? Math.max(rootStyle.width - rootPad.left - rootPad.right, totalThickness) : totalThickness;
+    let xRight = rootPad.left + blockWidth;
+    let maxBottom = rootPad.top;
+    for (const column of columns) {
+      xRight -= column.thickness;
+      const colLeft = xRight;
+      let y = rootPad.top;
+      for (const c of column.chars) {
+        const advance = c.advanceWidth;
+        const contentWidth = c.advanceHeight;
+        const fontHeight = c.fontHeight;
+        c.inlineBox.top = y;
+        c.inlineBox.height = advance;
+        c.inlineBox.width = contentWidth;
+        c.inlineBox.left = colLeft + (column.thickness - contentWidth) / 2;
+        c.lineBox.left = c.inlineBox.left + (contentWidth - fontHeight) / 2;
+        c.lineBox.top = y;
+        c.lineBox.width = fontHeight;
+        c.lineBox.height = advance;
+        y += this._advance(c);
+      }
+      if (y > maxBottom) {
+        maxBottom = y;
+      }
+    }
+    for (const paragraph of paragraphs) {
+      for (const fragment of paragraph.fragments) {
+        this._unionInto(fragment.inlineBox, fragment.characters.map((c) => c.inlineBox));
+      }
+      this._unionInto(
+        paragraph.lineBox,
+        paragraph.fragments.flatMap((f) => f.characters.map((c) => c.inlineBox))
+      );
+    }
+    const totalWidth = hasWidth ? rootStyle.width : blockWidth + rootPad.left + rootPad.right;
+    const totalHeight = hasHeight ? rootStyle.height : maxBottom + rootPad.bottom;
+    return {
+      paragraphs,
+      boundingBox: new modernPath2d.BoundingBox(0, 0, totalWidth, totalHeight)
+    };
+  }
+  /** Advance step including CSS letter-spacing (px). */
+  _advance(character) {
+    return character.advanceWidth + (character.computedStyle.letterSpacing ?? 0);
+  }
+  /**
+   * Break a paragraph's characters into visual lines.
+   * v1: `word-break: break-all` (break before any character that would overflow)
+   * plus explicit `\n`/`\r` hard breaks. The newline itself occupies no line box.
+   */
+  _breakLines(paragraph, avail) {
+    const lines = [];
+    let current = [];
+    let width = 0;
+    const flush = () => {
+      lines.push(current);
+      current = [];
+      width = 0;
+    };
+    for (const fragment of paragraph.fragments) {
+      for (const c of fragment.characters) {
+        if (c.content === "\n" || c.content === "\r") {
+          flush();
+          continue;
+        }
+        if (avail !== Infinity && current.length > 0 && width + c.advanceWidth > avail) {
+          flush();
+        }
+        current.push(c);
+        width += this._advance(c);
+      }
+    }
+    flush();
+    return lines;
+  }
+  _unionInto(target, boxes) {
+    const used = boxes.filter((b) => b.width !== 0 || b.height !== 0);
+    if (!used.length) {
+      return;
+    }
+    const u = modernPath2d.BoundingBox.from(...used);
+    target.left = u.left;
+    target.top = u.top;
+    target.width = u.width;
+    target.height = u.height;
+  }
+  _shiftAll(paragraphs, dy) {
+    for (const paragraph of paragraphs) {
+      paragraph.lineBox.top += dy;
+      for (const fragment of paragraph.fragments) {
+        fragment.inlineBox.top += dy;
+        for (const character of fragment.characters) {
+          character.inlineBox.top += dy;
+          character.lineBox.top += dy;
+        }
+      }
+    }
+  }
+  dispose() {
+  }
+}
+
 function backgroundPlugin() {
   const pathSet = new modernPath2d.Path2DSet();
   const loader = createSvgLoader();
@@ -1825,7 +2084,7 @@ class Text extends modernIdoc.Reactivable {
   glyphBox = new modernPath2d.BoundingBox();
   pathBox = new modernPath2d.BoundingBox();
   boundingBox = new modernPath2d.BoundingBox();
-  measurer = new Measurer();
+  measurer = new DomMeasurer();
   plugins = /* @__PURE__ */ new Map();
   pathSets = [];
   _paragraphs = [];
@@ -1883,6 +2142,12 @@ class Text extends modernIdoc.Reactivable {
       outline,
       deformation: deformation$1
     } = modernIdoc.normalizeText(options);
+    if (options.measurer && typeof options.measurer !== "string") {
+      this.measurer = options.measurer;
+    } else {
+      const kind = options.measurer ?? (fonts ? "font" : "dom");
+      this.measurer = kind === "font" ? new FontMeasurer() : new DomMeasurer();
+    }
     this.debug = options.debug ?? false;
     this.content = content;
     this.effects = effects;
@@ -1922,7 +2187,35 @@ class Text extends modernIdoc.Reactivable {
   }
   async load() {
     this._update();
-    await Promise.all(Array.from(this.plugins.values()).map((p) => p.load?.(this)));
+    await Promise.all([
+      this._decodeFonts(),
+      ...Array.from(this.plugins.values()).map((p) => p.load?.(this))
+    ]);
+  }
+  /**
+   * Eagerly decode the fonts this text uses, off the main thread — WOFF tables
+   * are decompressed via modern-font's async `createSFNTAsync` (fflate async).
+   * This warms the SFNT cache so the synchronous `measure()` / `render()` pass
+   * never stalls the main thread inflating WOFF tables on first glyph access.
+   *
+   * No-op for already-decoded fonts and for formats without async decoding.
+   */
+  async _decodeFonts() {
+    const fonts = this.fonts ?? modernFont.fonts;
+    const entries = /* @__PURE__ */ new Set();
+    for (const character of this.characters) {
+      const family = character.computedStyle.fontFamily;
+      if (family) {
+        entries.add(fonts.get(family));
+      }
+    }
+    entries.add(fonts.fallbackFont);
+    await Promise.all(Array.from(entries, async (entry) => {
+      const font = entry?.getFont();
+      if (font && typeof font.createSFNTAsync === "function" && !font._sfnt) {
+        font._sfnt = await font.createSFNTAsync();
+      }
+    }));
   }
   _update() {
     this.computedStyle = { ...textDefaultStyle, ...this.style };
@@ -1957,6 +2250,9 @@ class Text extends modernIdoc.Reactivable {
   }
   createDom() {
     this._update();
+    if (!this.measurer.createDom) {
+      throw new Error("current measurer does not support createDom()");
+    }
     return this.measurer.createDom(this.paragraphs, this.computedStyle);
   }
   measure(dom = this.measureDom) {
@@ -1970,7 +2266,7 @@ class Text extends modernIdoc.Reactivable {
       boundingBox: this.boundingBox
     };
     this._update();
-    const result = this.measurer.measure(this.paragraphs, this.computedStyle, dom);
+    const result = this.measurer.measure(this.paragraphs, this.computedStyle, dom, this.fonts);
     this.paragraphs = result.paragraphs;
     this.lineBox = result.boundingBox;
     const characters = this.characters;
@@ -2102,7 +2398,7 @@ class Text extends modernIdoc.Reactivable {
     options.onContext?.(ctx);
   }
   dispose() {
-    this.measurer.dispose();
+    this.measurer.dispose?.();
     this._renderer = void 0;
     this._rendererCtx = void 0;
   }
@@ -2140,8 +2436,9 @@ __decorateClass([
 
 exports.Canvas2DRenderer = Canvas2DRenderer;
 exports.Character = Character;
+exports.DomMeasurer = DomMeasurer;
+exports.FontMeasurer = FontMeasurer;
 exports.Fragment = Fragment;
-exports.Measurer = Measurer;
 exports.Paragraph = Paragraph;
 exports.Text = Text;
 exports.backgroundPlugin = backgroundPlugin;

package/dist/shared/{modern-text.C8g4NZgY.d.cts → modern-text.C6VOXPvn.d.cts}

@@ -57,6 +57,16 @@ declare class Character {
     constructor(content: string, index: number, parent: Fragment);
     protected _getFontSFNT(fonts?: Fonts): SFNT | undefined;
     updateGlyph(sfnt?: SFNT | undefined): this;
+    /**
+     * Populate glyph metrics only (advance width/height, ascender/descender,
+     * baseline, …) without building the glyph `path` or touching boxes.
+     *
+     * The DOM {@link DomMeasurer} never needs this — it reads positions back from the
+     * browser. A pure-JS measurer (e.g. `FontMeasurer`) must know advances *before*
+     * it can place characters, so it calls this ahead of layout. `update()` later
+     * recomputes the same metrics while building the path, so this is idempotent.
+     */
+    measureGlyph(fonts?: Fonts): this;
     update(fonts?: Fonts): this;
     protected _italic(path: Path2D, startPoint?: Vector2Like): void;
     getGlyphMinMax(min?: Vector2, max?: Vector2, withStyle?: boolean): {
@@ -66,24 +76,6 @@ declare class Character {
     getGlyphBoundingBox(withStyle?: boolean): BoundingBox | undefined;
 }
 
-interface Plugin {
-    name: string;
-    pathSet?: Path2DSet;
-    getBoundingBox?: (text: Text$1) => BoundingBox | undefined;
-    update?: (text: Text$1) => void;
-    updateOrder?: number;
-    render?: (renderer: Canvas2DRenderer) => void;
-    renderOrder?: number;
-    load?: (text: Text$1) => Promise<void>;
-    context?: Record<string, any>;
-}
-interface Options extends TextObject {
-    debug?: boolean;
-    measureDom?: HTMLElement;
-    fonts?: Fonts;
-    plugins?: Plugin[];
-}
-
 interface MeasuredParagraph {
     paragraphIndex: number;
     left: number;
@@ -127,7 +119,7 @@ interface RootDomStyles {
     section: Record<string, any>;
     ul: Record<string, any>;
 }
-declare class Measurer {
+declare class DomMeasurer {
     static notZeroStyles: Set<string>;
     static pxStyles: Set<string>;
     protected _styleCache: WeakMap<object, Record<string, any>>;
@@ -166,6 +158,47 @@ declare class Measurer {
     dispose(): void;
 }
 
+interface Plugin {
+    name: string;
+    pathSet?: Path2DSet;
+    getBoundingBox?: (text: Text$1) => BoundingBox | undefined;
+    update?: (text: Text$1) => void;
+    updateOrder?: number;
+    render?: (renderer: Canvas2DRenderer) => void;
+    renderOrder?: number;
+    load?: (text: Text$1) => Promise<void>;
+    context?: Record<string, any>;
+}
+/**
+ * Pluggable layout backend. Implementations fill the four-level boxes
+ * (`character.inlineBox`/`lineBox`, `fragment.inlineBox`, `paragraph.lineBox`)
+ * in place and return the overall bounding box.
+ *
+ * - `DomMeasurer` — DOM-based, uses the browser as ground truth (default).
+ * - `FontMeasurer` — pure-JS, DOM-free; needs `fonts` to resolve glyph advances.
+ *
+ * `fonts` is passed positionally by `Text.measure()`; DOM-based measurers ignore
+ * it (a method may safely declare fewer parameters than the interface).
+ */
+interface TextMeasurer {
+    measure: (paragraphs: Paragraph[], rootStyle: FullStyle, dom?: HTMLElement, fonts?: Fonts) => MeasureDomResult;
+    createDom?: (paragraphs: Paragraph[], rootStyle: FullStyle) => HTMLElement;
+    dispose?: () => void;
+}
+/** Built-in layout backends. `'font'` → `FontMeasurer`, `'dom'` → `DomMeasurer`. */
+type MeasurerKind = 'dom' | 'font';
+interface Options extends TextObject {
+    debug?: boolean;
+    measureDom?: HTMLElement;
+    fonts?: Fonts;
+    plugins?: Plugin[];
+    /**
+     * Layout backend: `'font'` (pure-JS) or `'dom'` (browser), or a custom
+     * `TextMeasurer`. Defaults to `'font'` when `fonts` are provided, else `'dom'`.
+     */
+    measurer?: MeasurerKind | TextMeasurer;
+}
+
 interface RenderOptions {
     view: HTMLCanvasElement;
     pixelRatio?: number;
@@ -221,7 +254,7 @@ declare class Text$1 extends Reactivable {
     glyphBox: BoundingBox;
     pathBox: BoundingBox;
     boundingBox: BoundingBox;
-    measurer: Measurer;
+    measurer: TextMeasurer;
     plugins: Map<string, Plugin>;
     pathSets: Path2DSet[];
     protected _paragraphs: Paragraph[];
@@ -246,6 +279,15 @@ declare class Text$1 extends Reactivable {
         characterIndex: number;
     }) => void): this;
     load(): Promise<void>;
+    /**
+     * Eagerly decode the fonts this text uses, off the main thread — WOFF tables
+     * are decompressed via modern-font's async `createSFNTAsync` (fflate async).
+     * This warms the SFNT cache so the synchronous `measure()` / `render()` pass
+     * never stalls the main thread inflating WOFF tables on first glyph access.
+     *
+     * No-op for already-decoded fonts and for formats without async decoding.
+     */
+    protected _decodeFonts(): Promise<void>;
     protected _update(): this;
     createDom(): HTMLElement;
     measure(dom?: HTMLElement | undefined): MeasureResult;
@@ -304,5 +346,5 @@ declare class Canvas2DRenderer {
     drawCharacter: (character: Character, effect?: NormalizedEffect) => void;
 }
 
-export { Canvas2DRenderer as C, Fragment as F, Paragraph as P, Text$1 as T, Character as a, Measurer as g, textDefaultStyle as t };
-export type { DrawShapePathsOptions as D, MeasureDomResult as M, Options as O, RenderOptions as R, MeasureResult as b, MeasuredCharacter as c, MeasuredCharacterRect as d, MeasuredFragment as e, MeasuredParagraph as f, Plugin as h, TextEvents as i };
+export { Canvas2DRenderer as C, DomMeasurer as D, Fragment as F, Paragraph as P, Text$1 as T, Character as a, textDefaultStyle as t };
+export type { MeasureDomResult as M, Options as O, RenderOptions as R, DrawShapePathsOptions as b, MeasureResult as c, MeasuredCharacter as d, MeasuredCharacterRect as e, MeasuredFragment as f, MeasuredParagraph as g, MeasurerKind as h, Plugin as i, TextEvents as j, TextMeasurer as k };

package/dist/shared/{modern-text.C8g4NZgY.d.mts → modern-text.C6VOXPvn.d.mts}

@@ -57,6 +57,16 @@ declare class Character {
     constructor(content: string, index: number, parent: Fragment);
     protected _getFontSFNT(fonts?: Fonts): SFNT | undefined;
     updateGlyph(sfnt?: SFNT | undefined): this;
+    /**
+     * Populate glyph metrics only (advance width/height, ascender/descender,
+     * baseline, …) without building the glyph `path` or touching boxes.
+     *
+     * The DOM {@link DomMeasurer} never needs this — it reads positions back from the
+     * browser. A pure-JS measurer (e.g. `FontMeasurer`) must know advances *before*
+     * it can place characters, so it calls this ahead of layout. `update()` later
+     * recomputes the same metrics while building the path, so this is idempotent.
+     */
+    measureGlyph(fonts?: Fonts): this;
     update(fonts?: Fonts): this;
     protected _italic(path: Path2D, startPoint?: Vector2Like): void;
     getGlyphMinMax(min?: Vector2, max?: Vector2, withStyle?: boolean): {
@@ -66,24 +76,6 @@ declare class Character {
     getGlyphBoundingBox(withStyle?: boolean): BoundingBox | undefined;
 }
 
-interface Plugin {
-    name: string;
-    pathSet?: Path2DSet;
-    getBoundingBox?: (text: Text$1) => BoundingBox | undefined;
-    update?: (text: Text$1) => void;
-    updateOrder?: number;
-    render?: (renderer: Canvas2DRenderer) => void;
-    renderOrder?: number;
-    load?: (text: Text$1) => Promise<void>;
-    context?: Record<string, any>;
-}
-interface Options extends TextObject {
-    debug?: boolean;
-    measureDom?: HTMLElement;
-    fonts?: Fonts;
-    plugins?: Plugin[];
-}
-
 interface MeasuredParagraph {
     paragraphIndex: number;
     left: number;
@@ -127,7 +119,7 @@ interface RootDomStyles {
     section: Record<string, any>;
     ul: Record<string, any>;
 }
-declare class Measurer {
+declare class DomMeasurer {
     static notZeroStyles: Set<string>;
     static pxStyles: Set<string>;
     protected _styleCache: WeakMap<object, Record<string, any>>;
@@ -166,6 +158,47 @@ declare class Measurer {
     dispose(): void;
 }
 
+interface Plugin {
+    name: string;
+    pathSet?: Path2DSet;
+    getBoundingBox?: (text: Text$1) => BoundingBox | undefined;
+    update?: (text: Text$1) => void;
+    updateOrder?: number;
+    render?: (renderer: Canvas2DRenderer) => void;
+    renderOrder?: number;
+    load?: (text: Text$1) => Promise<void>;
+    context?: Record<string, any>;
+}
+/**
+ * Pluggable layout backend. Implementations fill the four-level boxes
+ * (`character.inlineBox`/`lineBox`, `fragment.inlineBox`, `paragraph.lineBox`)
+ * in place and return the overall bounding box.
+ *
+ * - `DomMeasurer` — DOM-based, uses the browser as ground truth (default).
+ * - `FontMeasurer` — pure-JS, DOM-free; needs `fonts` to resolve glyph advances.
+ *
+ * `fonts` is passed positionally by `Text.measure()`; DOM-based measurers ignore
+ * it (a method may safely declare fewer parameters than the interface).
+ */
+interface TextMeasurer {
+    measure: (paragraphs: Paragraph[], rootStyle: FullStyle, dom?: HTMLElement, fonts?: Fonts) => MeasureDomResult;
+    createDom?: (paragraphs: Paragraph[], rootStyle: FullStyle) => HTMLElement;
+    dispose?: () => void;
+}
+/** Built-in layout backends. `'font'` → `FontMeasurer`, `'dom'` → `DomMeasurer`. */
+type MeasurerKind = 'dom' | 'font';
+interface Options extends TextObject {
+    debug?: boolean;
+    measureDom?: HTMLElement;
+    fonts?: Fonts;
+    plugins?: Plugin[];
+    /**
+     * Layout backend: `'font'` (pure-JS) or `'dom'` (browser), or a custom
+     * `TextMeasurer`. Defaults to `'font'` when `fonts` are provided, else `'dom'`.
+     */
+    measurer?: MeasurerKind | TextMeasurer;
+}
+
 interface RenderOptions {
     view: HTMLCanvasElement;
     pixelRatio?: number;
@@ -221,7 +254,7 @@ declare class Text$1 extends Reactivable {
     glyphBox: BoundingBox;
     pathBox: BoundingBox;
     boundingBox: BoundingBox;
-    measurer: Measurer;
+    measurer: TextMeasurer;
     plugins: Map<string, Plugin>;
     pathSets: Path2DSet[];
     protected _paragraphs: Paragraph[];
@@ -246,6 +279,15 @@ declare class Text$1 extends Reactivable {
         characterIndex: number;
     }) => void): this;
     load(): Promise<void>;
+    /**
+     * Eagerly decode the fonts this text uses, off the main thread — WOFF tables
+     * are decompressed via modern-font's async `createSFNTAsync` (fflate async).
+     * This warms the SFNT cache so the synchronous `measure()` / `render()` pass
+     * never stalls the main thread inflating WOFF tables on first glyph access.
+     *
+     * No-op for already-decoded fonts and for formats without async decoding.
+     */
+    protected _decodeFonts(): Promise<void>;
     protected _update(): this;
     createDom(): HTMLElement;
     measure(dom?: HTMLElement | undefined): MeasureResult;
@@ -304,5 +346,5 @@ declare class Canvas2DRenderer {
     drawCharacter: (character: Character, effect?: NormalizedEffect) => void;
 }
 
-export { Canvas2DRenderer as C, Fragment as F, Paragraph as P, Text$1 as T, Character as a, Measurer as g, textDefaultStyle as t };
-export type { DrawShapePathsOptions as D, MeasureDomResult as M, Options as O, RenderOptions as R, MeasureResult as b, MeasuredCharacter as c, MeasuredCharacterRect as d, MeasuredFragment as e, MeasuredParagraph as f, Plugin as h, TextEvents as i };
+export { Canvas2DRenderer as C, DomMeasurer as D, Fragment as F, Paragraph as P, Text$1 as T, Character as a, textDefaultStyle as t };
+export type { MeasureDomResult as M, Options as O, RenderOptions as R, DrawShapePathsOptions as b, MeasureResult as c, MeasuredCharacter as d, MeasuredCharacterRect as e, MeasuredFragment as f, MeasuredParagraph as g, MeasurerKind as h, Plugin as i, TextEvents as j, TextMeasurer as k };