modern-text 1.12.0 → 2.0.0

package/README.md

@@ -18,35 +18,296 @@
   </a>
 </p>
 
-## Usage
+`modern-text` measures and renders rich text on Canvas with a layout model that
+mirrors the browser's. It has no React/Vue dependency, ships ESM + CJS, and can
+run **either in the browser (using the DOM as ground truth) or fully DOM-free in
+Node / SSR / Web Workers**.
+
+## Features
+
+- 📐 **DOM-accurate layout** — paragraphs, line wrapping, baselines, alignment.
+- 🧩 **Two interchangeable layout backends**
+  - `DomMeasurer` — measures via a hidden DOM tree + `getBoundingClientRect()`.
+  - `FontMeasurer` — pure-JS, computes layout from font glyph metrics; runs with
+    no `document`, so it works in **Node / SSR / Workers** and is deterministic.
+- ↔️ **Horizontal & vertical** writing modes (`horizontal-tb`, `vertical-rl`).
+- 🅰️ **Rich inline styling** — per-fragment font size/family/weight/style, color,
+  letter-spacing, line-height, text-indent, text-align, vertical-align,
+  text-decoration (underline / line-through / overline), text-transform,
+  text-stroke, padding / margin.
+- 🎨 **Fills & strokes** — solid colors and linear gradients per fragment.
+- 🖍️ **Highlights** — draw an image/SVG behind selected fragments.
+- 🔵 **List markers** — `disc` / `none` / custom image bullets.
+- 🌑 **Effects** — stacked translate / skew / color layers (shadows, offsets).
+- 🌀 **Text deformation** — 34 opt-in presets (arch, bend, wave, trapezoid,
+  ellipse, heart, …).
+- ✏️ **`<text-editor>` web component** — cursor, selection and keyboard editing.
+
+## Install
+
+```bash
+npm i modern-text modern-font
+```
+
+`modern-font` provides the font parsing/loading used for measuring and drawing
+glyphs.
+
+## Quick start
 
 ```ts
 import { fonts } from 'modern-font'
 import { renderText } from 'modern-text'
 
-fonts.loadFallbackFont('/fallback.woff').then(() => {
-  const view = document.createElement('canvas')
-  document.body.append(view)
-
-  renderText({
-    view,
-    style: {
-      width: 100,
-      height: 200,
-      fontSize: 22,
-      textDecoration: 'underline',
+await fonts.loadFallbackFont('/fallback.woff')
+
+const view = document.createElement('canvas')
+document.body.append(view)
+
+renderText({
+  view,
+  fonts,
+  style: { width: 300, fontSize: 22, textDecoration: 'underline' },
+  content: [
+    {
+      letterSpacing: 3,
+      fragments: [
+        { content: 'He', color: 'red', fontSize: 12 },
+        { content: 'llo', color: 'black' },
+      ],
     },
-    content: [
-      {
-        letterSpacing: 3,
-        fragments: [
-          { content: 'He', color: 'red', fontSize: 12 },
-          { content: 'llo', color: 'black' },
+    { content: ', ', color: 'grey' },
+    { content: 'World!', color: 'black' },
+  ],
+})
+```
+
+## Layout backends
+
+By default `modern-text` picks **`'font'`** (the pure-JS `FontMeasurer`) when
+`fonts` are provided, otherwise **`'dom'`** (the browser-based `DomMeasurer`).
+You can force either, or pass a custom `TextMeasurer`:
+
+```ts
+new Text({ fonts, measurer: 'font' }) // pure-JS, DOM-free (default with fonts)
+new Text({ fonts, measurer: 'dom' }) //  browser ground truth
+new Text({ measurer: myCustomMeasurer }) // any object implementing TextMeasurer
+```
+
+### Node / SSR / Workers
+
+`FontMeasurer` needs no `document`, so the whole measure → render pipeline runs
+outside the browser. Register fonts from a buffer with `modern-font`:
+
+```ts
+import { readFileSync } from 'node:fs'
+import { Fonts, parseFont } from 'modern-font'
+import { Text } from 'modern-text'
+
+const buffer = readFileSync('./fonts/NotoSansSC.woff').buffer
+const font = parseFont(buffer)
+const sfnt = font.createSFNT() // .woff → SFNT
+const fonts = new Fonts()
+const entry = { src: '', familySet: new Set(['Noto']), buffer, getFont: () => font, getSFNT: () => sfnt } as any
+fonts.set('Noto', entry)
+fonts.setFallbackFont(entry)
+
+const text = new Text({ fonts, content: '你好世界', style: { fontFamily: 'Noto', fontSize: 32 } })
+const result = text.measure() // → boxes for every paragraph / fragment / character
+```
+
+## Content model
+
+Content is a hierarchy: **Text → Paragraph → Fragment → Character**. Each level
+inherits and merges style downward. `content` accepts several shapes that are
+normalized by [`modern-idoc`](https://github.com/qq15725/modern-idoc):
+
+```ts
+// a plain string (single paragraph)
+content: 'Hello World'
+
+// an array of paragraphs, each a string or { content, ...paragraphStyle }
+content: [
+  { content: 'Title', fontSize: 40, textAlign: 'center' },
+  { content: 'Body text', color: '#333' },
+]
+
+// per-fragment styling inside a paragraph
+content: [
+  {
+    textAlign: 'center',
+    fragments: [
+      { content: 'red ', color: 'red' },
+      { content: 'bold', fontWeight: 'bold' },
+    ],
+  },
+]
+```
+
+A newline (`\n`) splits into a new paragraph.
+
+## Styling
+
+Style can be set at the text (root), paragraph, or fragment level.
+
+```ts
+style: {
+  // box
+  width: 400, height: 200, padding: 16,
+  // font
+  fontSize: 24, fontFamily: 'Arial', fontWeight: 700, fontStyle: 'italic',
+  // text
+  color: '#222', lineHeight: 1.4, letterSpacing: 1, textIndent: 24,
+  textAlign: 'center',          // start | left | center | end | right
+  verticalAlign: 'middle',      // top | middle | bottom
+  writingMode: 'vertical-rl',   // horizontal-tb | vertical-rl
+  textDecoration: 'underline',  // underline | line-through | overline | none
+  textTransform: 'uppercase',   // uppercase | lowercase
+  textStrokeWidth: 2, textStrokeColor: '#000', // outline stroke
+}
+```
+
+### Gradient fills
+
+```ts
+content: [{
+  fragments: [{
+    content: 'Gradient',
+    fill: {
+      linearGradient: {
+        angle: 180,
+        stops: [
+          { color: '#c7f1ff', offset: 0 },
+          { color: '#ffffff', offset: 1 },
         ],
       },
-      { content: ', ', color: 'grey' },
-      { content: 'World!', color: 'black' },
-    ],
-  })
+    },
+  }],
+}]
+```
+
+### Highlights & list markers
+
+```ts
+content: [
+  // image drawn behind the fragment
+  { fragments: [{ content: 'highlighted', highlightImage: '/brush.svg' }] },
+  // list bullet
+  { content: 'a bullet item', listStyleType: 'disc' },
+  { content: 'a custom bullet', listStyleImage: '/dot.svg' },
+]
+```
+
+## Effects
+
+`effects` is an ordered stack of transform/color layers drawn behind the main
+glyphs — useful for shadows, 3D offsets and outlines. `translateX/Y` are
+fractions of the font size; `skewX/Y` are degrees.
+
+```ts
+renderText({
+  view,
+  fonts,
+  content: 'Effect',
+  style: { fontSize: 80, color: '#FEE90C' },
+  effects: [
+    { translateX: 0.05, translateY: 0.05, skewY: -5, color: '#000' }, // shadow
+    { skewY: -5, color: '#FEE90C' }, // face
+  ],
 })
 ```
+
+## Text deformation
+
+Deformation presets are an opt-in subpath. Register them once, then set
+`deformation.type`:
+
+```ts
+import { registerDeformations } from 'modern-text/deformations'
+import { renderText } from 'modern-text'
+
+registerDeformations()
+
+renderText({
+  view,
+  fonts,
+  content: 'Deformation',
+  style: { fontSize: 100 },
+  deformation: { type: 'arch-curve' },
+})
+```
+
+<details>
+<summary>Available presets (34)</summary>
+
+`bend` · `bend-vertical` · `arch-curve` · `concave-curve` · `upper-arch-curve` ·
+`lower-arch-curve` · `bulb-curve` · `skew` · `flag-curve` · `trapezoid` ·
+`lower-trapezoid` · `top-trapezoid` · `horizontal-trapezoid` · `bevel` ·
+`upper-roof` · `lower-roof` · `angled-projection` · `folded-corner` ·
+`lateral-stretching` · `vertical-stretching` · `patchwork-by-word` ·
+`step-by-word` · `arch2-by-word` · `wave-by-word` · `step-far-and-near-by-word` ·
+`arch-far-and-near-by-word` · `horizontal-rotate-by-word` ·
+`arbitrary-offset-rotate-by-word` · `horizontal-curved-rotate-by-word` ·
+`ellipse-by-word` · `triangle-by-word` · `pentagon-by-word` ·
+`rectangular-by-word` · `heart-by-word`
+
+Register your own with `defineDeformation(name, preset)`.
+</details>
+
+## `Text` API
+
+For finer control, drive a `Text` instance directly:
+
+```ts
+import { Text } from 'modern-text'
+
+const text = new Text({ fonts, content: 'Hello', style: { fontSize: 24 } })
+
+text.on('update', () => text.render({ view })) // re-render on any change
+await text.load() // load async resources (fonts, plugin assets)
+text.update() // measure + commit + emit 'update'
+text.render({ view, pixelRatio: 2 })
+
+text.boundingBox // overall box after measuring
+text.characters // flat list of measured Character (inlineBox / lineBox / path)
+
+text.dispose() // release the cached measurer / renderer
+```
+
+- `measure()` returns a non-destructive snapshot of all boxes.
+- `update()` measures and commits the result onto the instance.
+- `render({ view })` updates if needed, then draws.
+- Events: `update`, `measure`, `render`.
+
+### One-shot helpers
+
+```ts
+import { measureText, renderText } from 'modern-text'
+
+const result = measureText(options) // sync
+const result = await measureText(options, true) // load fonts first
+
+renderText({ view, ...options }) // sync
+await renderText({ view, ...options }, true) // load fonts first
+```
+
+## `<text-editor>` web component
+
+```ts
+import { TextEditor } from 'modern-text/web-components'
+
+TextEditor.register()
+```
+
+```html
+<text-editor></text-editor>
+```
+
+```ts
+const editor = document.querySelector('text-editor')
+editor.moveToDom(canvas) // overlay the editor on a rendered canvas
+editor.set(text) // bind a Text instance — provides cursor, selection, typing
+```
+
+## License
+
+[MIT](./LICENSE)

package/dist/deformations/index.d.cts

@@ -1,6 +1,6 @@
-import { c as DeformationPreset } from '../shared/modern-text.d-RdVkZg.cjs';
+import { c as DeformationPreset } from '../shared/modern-text.BD7PBYt7.cjs';
 import 'modern-path2d';
-import '../shared/modern-text.C8g4NZgY.cjs';
+import '../shared/modern-text.D4WopQCu.cjs';
 import 'modern-idoc';
 import 'modern-font';
 

package/dist/deformations/index.d.mts

@@ -1,6 +1,6 @@
-import { c as DeformationPreset } from '../shared/modern-text.w5MRHZDB.mjs';
+import { c as DeformationPreset } from '../shared/modern-text.CYa4lfoG.mjs';
 import 'modern-path2d';
-import '../shared/modern-text.C8g4NZgY.mjs';
+import '../shared/modern-text.D4WopQCu.mjs';
 import 'modern-idoc';
 import 'modern-font';
 

package/dist/deformations/index.d.ts

@@ -1,6 +1,6 @@
-import { c as DeformationPreset } from '../shared/modern-text.Bo2MzSls.js';
+import { c as DeformationPreset } from '../shared/modern-text.BxijkspX.js';
 import 'modern-path2d';
-import '../shared/modern-text.C8g4NZgY.js';
+import '../shared/modern-text.D4WopQCu.js';
 import 'modern-idoc';
 import 'modern-font';
 

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const Text = require('./shared/modern-text.DR1hbjgA.cjs');
+const Text = require('./shared/modern-text.CBgc-cQ1.cjs');
 const deformation = require('./shared/modern-text.B2xfrqDc.cjs');
 const curves = require('./shared/modern-text.MC5bIC9E.cjs');
 require('modern-idoc');
@@ -29,8 +29,9 @@ function renderText(options, load) {
 
 exports.Canvas2DRenderer = Text.Canvas2DRenderer;
 exports.Character = Text.Character;
+exports.DomMeasurer = Text.DomMeasurer;
+exports.FontMeasurer = Text.FontMeasurer;
 exports.Fragment = Text.Fragment;
-exports.Measurer = Text.Measurer;
 exports.Paragraph = Text.Paragraph;
 exports.Text = Text.Text;
 exports.backgroundPlugin = Text.backgroundPlugin;

package/dist/index.d.cts

@@ -1,13 +1,72 @@
-import { h as Plugin, O as Options, b as MeasureResult, R as RenderOptions, T as Text } from './shared/modern-text.C8g4NZgY.cjs';
-export { C as Canvas2DRenderer, a as Character, D as DrawShapePathsOptions, F as Fragment, M as MeasureDomResult, c as MeasuredCharacter, d as MeasuredCharacterRect, e as MeasuredFragment, f as MeasuredParagraph, g as Measurer, P as Paragraph, i as TextEvents, t as textDefaultStyle } from './shared/modern-text.C8g4NZgY.cjs';
-import { c as DeformationPreset } from './shared/modern-text.d-RdVkZg.cjs';
-export { B as BendContext, a as BendPreset, C as CurvePreset, D as DeformationCharInfo, b as DeformationCurve, F as FfdContext, d as FfdPreset, O as OffsetPreset, V as VerbatimContext } from './shared/modern-text.d-RdVkZg.cjs';
-import { NormalizedStyle, NormalizedHighlight, NormalizedEffect } from 'modern-idoc';
-import { Vector2, Path2DSet, Transform2D } from 'modern-path2d';
-import 'modern-font';
+import { i as Plugin, k as TextMeasurer, P as Paragraph, M as MeasureDomResult, a as Character, O as Options, c as MeasureResult, R as RenderOptions, T as Text } from './shared/modern-text.D4WopQCu.cjs';
+export { C as Canvas2DRenderer, D as DomMeasurer, b as DrawShapePathsOptions, F as Fragment, d as MeasuredCharacter, e as MeasuredCharacterRect, f as MeasuredFragment, g as MeasuredParagraph, h as MeasurerKind, j as TextEvents, t as textDefaultStyle } from './shared/modern-text.D4WopQCu.cjs';
+import { Fonts } from 'modern-font';
+import { FullStyle, NormalizedStyle, NormalizedHighlight, NormalizedEffect } from 'modern-idoc';
+import { BoundingBox, Vector2, Path2DSet, Transform2D } from 'modern-path2d';
+import { c as DeformationPreset } from './shared/modern-text.BD7PBYt7.cjs';
+export { B as BendContext, a as BendPreset, C as CurvePreset, D as DeformationCharInfo, b as DeformationCurve, F as FfdContext, d as FfdPreset, O as OffsetPreset, V as VerbatimContext } from './shared/modern-text.BD7PBYt7.cjs';
 
 declare function definePlugin(options: Plugin): Plugin;
 
+/**
+ * Pure-JS, DOM-free text measurer — a drop-in alternative to {@link DomMeasurer}.
+ *
+ * Instead of mounting a `<section>/<ul>/<li>/<span>` tree and reading
+ * `getBoundingClientRect()`, it computes the same four-level boxes
+ * (`character.inlineBox`/`lineBox`, `fragment.inlineBox`, `paragraph.lineBox`)
+ * from `modern-font` glyph advances, so the downstream
+ * measure → glyph → plugin pipeline is unchanged and it runs in Node/SSR/Worker.
+ *
+ * ## Scope
+ * - `horizontal-tb` (LTR) and `vertical-rl` (columns right-to-left, glyphs top↓)
+ * - line breaking: `word-break: break-all` (greedy, break anywhere) + explicit `\n`
+ * - per-line `text-align` (start/left/center/end/right), `text-indent` (first line)
+ * - box model: root + paragraph `padding`/`margin` (horizontal), `letter-spacing`,
+ *   `line-height`; block `vertical-align` (top/middle/bottom) at fixed height
+ *
+ * ## Not yet implemented (TODO)
+ * - UAX#14 `word-break: normal` + 避头尾/kinsoku (`line-break`)
+ * - BiDi, per-fragment inline `vertical-align`, borders
+ * - vertical: per-paragraph margin/padding and block alignment
+ * - kerning/ligatures (GSUB/GPOS) — fine for CJK, diverges for proportional Latin
+ *
+ * Coordinates are relative to the root border-box top-left (matching the DOM
+ * measurer, whose rects are taken relative to `section.getBoundingClientRect()`).
+ */
+declare class FontMeasurer implements TextMeasurer {
+    measure(paragraphs: Paragraph[], rootStyle: FullStyle, _dom?: HTMLElement, fonts?: Fonts): MeasureDomResult;
+    protected _rootPadding(rootStyle: FullStyle): {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    protected _measureHorizontal(paragraphs: Paragraph[], rootStyle: FullStyle): MeasureDomResult;
+    /**
+     * 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.
+     */
+    protected _measureVertical(paragraphs: Paragraph[], rootStyle: FullStyle): MeasureDomResult;
+    /** Advance step including CSS letter-spacing (px). */
+    protected _advance(character: Character): number;
+    /**
+     * 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.
+     */
+    protected _breakLines(paragraph: Paragraph, avail: number): Character[][];
+    protected _unionInto(target: BoundingBox, boxes: BoundingBox[]): void;
+    protected _shiftAll(paragraphs: Paragraph[], dy: number): void;
+    dispose(): void;
+}
+
 declare function measureText(options: Options, load: true): Promise<MeasureResult>;
 declare function measureText(options: Options): MeasureResult;
 
@@ -181,5 +240,5 @@ declare function parseColormap(colormap: 'none' | Record<string, string>): Recor
 declare function isEqualObject(obj1: Record<string, any>, obj2: Record<string, any>): boolean;
 declare function isEqualValue(val1: any, val2: any): boolean;
 
-export { CircleCurve, DeformationPreset, EllipseCurve, HeartCurve, MeasureResult, Options, Plugin, PolygonCurve, RectangularCurve, RenderOptions, Text, backgroundPlugin, createSvgLoader, createSvgParser, defineDeformation, definePlugin, deformationPlugin, getDeformationNames, getEffectTransform2D, getHighlightStyle, highlightPlugin, isEqualObject, isEqualValue, listStylePlugin, measureText, outlinePlugin, parseColormap, parseTransformOrigin, parseValueNumber, removeDeformation, renderPlugin, renderText, textDecorationPlugin };
+export { Character, CircleCurve, DeformationPreset, EllipseCurve, FontMeasurer, HeartCurve, MeasureDomResult, MeasureResult, Options, Paragraph, Plugin, PolygonCurve, RectangularCurve, RenderOptions, Text, TextMeasurer, backgroundPlugin, createSvgLoader, createSvgParser, defineDeformation, definePlugin, deformationPlugin, getDeformationNames, getEffectTransform2D, getHighlightStyle, highlightPlugin, isEqualObject, isEqualValue, listStylePlugin, measureText, outlinePlugin, parseColormap, parseTransformOrigin, parseValueNumber, removeDeformation, renderPlugin, renderText, textDecorationPlugin };
 export type { RenderTextOptions, SvgLoader, SvgParser };

package/dist/index.d.mts

@@ -1,13 +1,72 @@
-import { h as Plugin, O as Options, b as MeasureResult, R as RenderOptions, T as Text } from './shared/modern-text.C8g4NZgY.mjs';
-export { C as Canvas2DRenderer, a as Character, D as DrawShapePathsOptions, F as Fragment, M as MeasureDomResult, c as MeasuredCharacter, d as MeasuredCharacterRect, e as MeasuredFragment, f as MeasuredParagraph, g as Measurer, P as Paragraph, i as TextEvents, t as textDefaultStyle } from './shared/modern-text.C8g4NZgY.mjs';
-import { c as DeformationPreset } from './shared/modern-text.w5MRHZDB.mjs';
-export { B as BendContext, a as BendPreset, C as CurvePreset, D as DeformationCharInfo, b as DeformationCurve, F as FfdContext, d as FfdPreset, O as OffsetPreset, V as VerbatimContext } from './shared/modern-text.w5MRHZDB.mjs';
-import { NormalizedStyle, NormalizedHighlight, NormalizedEffect } from 'modern-idoc';
-import { Vector2, Path2DSet, Transform2D } from 'modern-path2d';
-import 'modern-font';
+import { i as Plugin, k as TextMeasurer, P as Paragraph, M as MeasureDomResult, a as Character, O as Options, c as MeasureResult, R as RenderOptions, T as Text } from './shared/modern-text.D4WopQCu.mjs';
+export { C as Canvas2DRenderer, D as DomMeasurer, b as DrawShapePathsOptions, F as Fragment, d as MeasuredCharacter, e as MeasuredCharacterRect, f as MeasuredFragment, g as MeasuredParagraph, h as MeasurerKind, j as TextEvents, t as textDefaultStyle } from './shared/modern-text.D4WopQCu.mjs';
+import { Fonts } from 'modern-font';
+import { FullStyle, NormalizedStyle, NormalizedHighlight, NormalizedEffect } from 'modern-idoc';
+import { BoundingBox, Vector2, Path2DSet, Transform2D } from 'modern-path2d';
+import { c as DeformationPreset } from './shared/modern-text.CYa4lfoG.mjs';
+export { B as BendContext, a as BendPreset, C as CurvePreset, D as DeformationCharInfo, b as DeformationCurve, F as FfdContext, d as FfdPreset, O as OffsetPreset, V as VerbatimContext } from './shared/modern-text.CYa4lfoG.mjs';
 
 declare function definePlugin(options: Plugin): Plugin;
 
+/**
+ * Pure-JS, DOM-free text measurer — a drop-in alternative to {@link DomMeasurer}.
+ *
+ * Instead of mounting a `<section>/<ul>/<li>/<span>` tree and reading
+ * `getBoundingClientRect()`, it computes the same four-level boxes
+ * (`character.inlineBox`/`lineBox`, `fragment.inlineBox`, `paragraph.lineBox`)
+ * from `modern-font` glyph advances, so the downstream
+ * measure → glyph → plugin pipeline is unchanged and it runs in Node/SSR/Worker.
+ *
+ * ## Scope
+ * - `horizontal-tb` (LTR) and `vertical-rl` (columns right-to-left, glyphs top↓)
+ * - line breaking: `word-break: break-all` (greedy, break anywhere) + explicit `\n`
+ * - per-line `text-align` (start/left/center/end/right), `text-indent` (first line)
+ * - box model: root + paragraph `padding`/`margin` (horizontal), `letter-spacing`,
+ *   `line-height`; block `vertical-align` (top/middle/bottom) at fixed height
+ *
+ * ## Not yet implemented (TODO)
+ * - UAX#14 `word-break: normal` + 避头尾/kinsoku (`line-break`)
+ * - BiDi, per-fragment inline `vertical-align`, borders
+ * - vertical: per-paragraph margin/padding and block alignment
+ * - kerning/ligatures (GSUB/GPOS) — fine for CJK, diverges for proportional Latin
+ *
+ * Coordinates are relative to the root border-box top-left (matching the DOM
+ * measurer, whose rects are taken relative to `section.getBoundingClientRect()`).
+ */
+declare class FontMeasurer implements TextMeasurer {
+    measure(paragraphs: Paragraph[], rootStyle: FullStyle, _dom?: HTMLElement, fonts?: Fonts): MeasureDomResult;
+    protected _rootPadding(rootStyle: FullStyle): {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    protected _measureHorizontal(paragraphs: Paragraph[], rootStyle: FullStyle): MeasureDomResult;
+    /**
+     * 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.
+     */
+    protected _measureVertical(paragraphs: Paragraph[], rootStyle: FullStyle): MeasureDomResult;
+    /** Advance step including CSS letter-spacing (px). */
+    protected _advance(character: Character): number;
+    /**
+     * 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.
+     */
+    protected _breakLines(paragraph: Paragraph, avail: number): Character[][];
+    protected _unionInto(target: BoundingBox, boxes: BoundingBox[]): void;
+    protected _shiftAll(paragraphs: Paragraph[], dy: number): void;
+    dispose(): void;
+}
+
 declare function measureText(options: Options, load: true): Promise<MeasureResult>;
 declare function measureText(options: Options): MeasureResult;
 
@@ -181,5 +240,5 @@ declare function parseColormap(colormap: 'none' | Record<string, string>): Recor
 declare function isEqualObject(obj1: Record<string, any>, obj2: Record<string, any>): boolean;
 declare function isEqualValue(val1: any, val2: any): boolean;
 
-export { CircleCurve, DeformationPreset, EllipseCurve, HeartCurve, MeasureResult, Options, Plugin, PolygonCurve, RectangularCurve, RenderOptions, Text, backgroundPlugin, createSvgLoader, createSvgParser, defineDeformation, definePlugin, deformationPlugin, getDeformationNames, getEffectTransform2D, getHighlightStyle, highlightPlugin, isEqualObject, isEqualValue, listStylePlugin, measureText, outlinePlugin, parseColormap, parseTransformOrigin, parseValueNumber, removeDeformation, renderPlugin, renderText, textDecorationPlugin };
+export { Character, CircleCurve, DeformationPreset, EllipseCurve, FontMeasurer, HeartCurve, MeasureDomResult, MeasureResult, Options, Paragraph, Plugin, PolygonCurve, RectangularCurve, RenderOptions, Text, TextMeasurer, backgroundPlugin, createSvgLoader, createSvgParser, defineDeformation, definePlugin, deformationPlugin, getDeformationNames, getEffectTransform2D, getHighlightStyle, highlightPlugin, isEqualObject, isEqualValue, listStylePlugin, measureText, outlinePlugin, parseColormap, parseTransformOrigin, parseValueNumber, removeDeformation, renderPlugin, renderText, textDecorationPlugin };
 export type { RenderTextOptions, SvgLoader, SvgParser };

package/dist/index.d.ts

@@ -1,13 +1,72 @@
-import { h as Plugin, O as Options, b as MeasureResult, R as RenderOptions, T as Text } from './shared/modern-text.C8g4NZgY.js';
-export { C as Canvas2DRenderer, a as Character, D as DrawShapePathsOptions, F as Fragment, M as MeasureDomResult, c as MeasuredCharacter, d as MeasuredCharacterRect, e as MeasuredFragment, f as MeasuredParagraph, g as Measurer, P as Paragraph, i as TextEvents, t as textDefaultStyle } from './shared/modern-text.C8g4NZgY.js';
-import { c as DeformationPreset } from './shared/modern-text.Bo2MzSls.js';
-export { B as BendContext, a as BendPreset, C as CurvePreset, D as DeformationCharInfo, b as DeformationCurve, F as FfdContext, d as FfdPreset, O as OffsetPreset, V as VerbatimContext } from './shared/modern-text.Bo2MzSls.js';
-import { NormalizedStyle, NormalizedHighlight, NormalizedEffect } from 'modern-idoc';
-import { Vector2, Path2DSet, Transform2D } from 'modern-path2d';
-import 'modern-font';
+import { i as Plugin, k as TextMeasurer, P as Paragraph, M as MeasureDomResult, a as Character, O as Options, c as MeasureResult, R as RenderOptions, T as Text } from './shared/modern-text.D4WopQCu.js';
+export { C as Canvas2DRenderer, D as DomMeasurer, b as DrawShapePathsOptions, F as Fragment, d as MeasuredCharacter, e as MeasuredCharacterRect, f as MeasuredFragment, g as MeasuredParagraph, h as MeasurerKind, j as TextEvents, t as textDefaultStyle } from './shared/modern-text.D4WopQCu.js';
+import { Fonts } from 'modern-font';
+import { FullStyle, NormalizedStyle, NormalizedHighlight, NormalizedEffect } from 'modern-idoc';
+import { BoundingBox, Vector2, Path2DSet, Transform2D } from 'modern-path2d';
+import { c as DeformationPreset } from './shared/modern-text.BxijkspX.js';
+export { B as BendContext, a as BendPreset, C as CurvePreset, D as DeformationCharInfo, b as DeformationCurve, F as FfdContext, d as FfdPreset, O as OffsetPreset, V as VerbatimContext } from './shared/modern-text.BxijkspX.js';
 
 declare function definePlugin(options: Plugin): Plugin;
 
+/**
+ * Pure-JS, DOM-free text measurer — a drop-in alternative to {@link DomMeasurer}.
+ *
+ * Instead of mounting a `<section>/<ul>/<li>/<span>` tree and reading
+ * `getBoundingClientRect()`, it computes the same four-level boxes
+ * (`character.inlineBox`/`lineBox`, `fragment.inlineBox`, `paragraph.lineBox`)
+ * from `modern-font` glyph advances, so the downstream
+ * measure → glyph → plugin pipeline is unchanged and it runs in Node/SSR/Worker.
+ *
+ * ## Scope
+ * - `horizontal-tb` (LTR) and `vertical-rl` (columns right-to-left, glyphs top↓)
+ * - line breaking: `word-break: break-all` (greedy, break anywhere) + explicit `\n`
+ * - per-line `text-align` (start/left/center/end/right), `text-indent` (first line)
+ * - box model: root + paragraph `padding`/`margin` (horizontal), `letter-spacing`,
+ *   `line-height`; block `vertical-align` (top/middle/bottom) at fixed height
+ *
+ * ## Not yet implemented (TODO)
+ * - UAX#14 `word-break: normal` + 避头尾/kinsoku (`line-break`)
+ * - BiDi, per-fragment inline `vertical-align`, borders
+ * - vertical: per-paragraph margin/padding and block alignment
+ * - kerning/ligatures (GSUB/GPOS) — fine for CJK, diverges for proportional Latin
+ *
+ * Coordinates are relative to the root border-box top-left (matching the DOM
+ * measurer, whose rects are taken relative to `section.getBoundingClientRect()`).
+ */
+declare class FontMeasurer implements TextMeasurer {
+    measure(paragraphs: Paragraph[], rootStyle: FullStyle, _dom?: HTMLElement, fonts?: Fonts): MeasureDomResult;
+    protected _rootPadding(rootStyle: FullStyle): {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    protected _measureHorizontal(paragraphs: Paragraph[], rootStyle: FullStyle): MeasureDomResult;
+    /**
+     * 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.
+     */
+    protected _measureVertical(paragraphs: Paragraph[], rootStyle: FullStyle): MeasureDomResult;
+    /** Advance step including CSS letter-spacing (px). */
+    protected _advance(character: Character): number;
+    /**
+     * 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.
+     */
+    protected _breakLines(paragraph: Paragraph, avail: number): Character[][];
+    protected _unionInto(target: BoundingBox, boxes: BoundingBox[]): void;
+    protected _shiftAll(paragraphs: Paragraph[], dy: number): void;
+    dispose(): void;
+}
+
 declare function measureText(options: Options, load: true): Promise<MeasureResult>;
 declare function measureText(options: Options): MeasureResult;
 
@@ -181,5 +240,5 @@ declare function parseColormap(colormap: 'none' | Record<string, string>): Recor
 declare function isEqualObject(obj1: Record<string, any>, obj2: Record<string, any>): boolean;
 declare function isEqualValue(val1: any, val2: any): boolean;
 
-export { CircleCurve, DeformationPreset, EllipseCurve, HeartCurve, MeasureResult, Options, Plugin, PolygonCurve, RectangularCurve, RenderOptions, Text, backgroundPlugin, createSvgLoader, createSvgParser, defineDeformation, definePlugin, deformationPlugin, getDeformationNames, getEffectTransform2D, getHighlightStyle, highlightPlugin, isEqualObject, isEqualValue, listStylePlugin, measureText, outlinePlugin, parseColormap, parseTransformOrigin, parseValueNumber, removeDeformation, renderPlugin, renderText, textDecorationPlugin };
+export { Character, CircleCurve, DeformationPreset, EllipseCurve, FontMeasurer, HeartCurve, MeasureDomResult, MeasureResult, Options, Paragraph, Plugin, PolygonCurve, RectangularCurve, RenderOptions, Text, TextMeasurer, backgroundPlugin, createSvgLoader, createSvgParser, defineDeformation, definePlugin, deformationPlugin, getDeformationNames, getEffectTransform2D, getHighlightStyle, highlightPlugin, isEqualObject, isEqualValue, listStylePlugin, measureText, outlinePlugin, parseColormap, parseTransformOrigin, parseValueNumber, removeDeformation, renderPlugin, renderText, textDecorationPlugin };
 export type { RenderTextOptions, SvgLoader, SvgParser };