Text

node.textRuns holds shaped runs in visual order. A run's x and y mark the start of its baseline in the node's border-box space.

Place runs

Use node.matrix for the box. Apply run.transform after it when present; the walker adds that transform when text-fit scales a line.

import { paint } from "takumi-paint";

const tree = await paint("<p>Hello <b>world</b></p>", { width: 320 });

for (const { node, run } of tree.textRuns()) {
  console.log(node.matrix, run.x, run.y, run.text, run.font.family);
}

run.font is the font instance selected during shaping. run.fontIndex refers to the same instance in tree.fonts. Runs shaped with the same instance share the same font object.

Draw glyphs

run.glyphs contains font glyph IDs and positions relative to the run origin. Native drawing APIs can use those values with run.fontIndex. run.width is the run's advance. run.letterSpacing is already reflected in glyph positions.

run.decorations contains placed underline, overline, or line-through rectangles. run.stroke records visible -webkit-text-stroke. node.textShadows applies under the node's runs.

Lay text out again

A presentation writer can build a text box from node.contentBox and node.textAlign. The box is relative to the node's border box; transform it through node.matrix when needed.

import { paint } from "takumi-paint";

const tree = await paint(
  '<div style="width: 240px; padding: 12px; text-align: center; line-height: 30px">Title</div>',
  { width: 320 },
);

const paragraphs = [...tree]
  .filter((node) => node.textRuns.length > 0)
  .map((node) => ({
    box: node.contentBox,
    matrix: node.matrix,
    align: node.textAlign,
    runs: node.textRuns.map((run) => ({
      text: run.text,
      font: run.font,
      fontSize: run.fontSize,
      lineHeight: run.lineHeight,
      letterSpacing: run.letterSpacing,
      baseline: [run.x, run.y],
    })),
  }));

console.log(paragraphs);

run.ascent and run.descent are typographic distances from the baseline. run.top equals run.y - run.ascent; run.bottom equals run.y + run.descent. Under line-height: normal, a fallback face can grow run.lineHeight to its own height.

Trace source text

run.textByteRange identifies the UTF-8 byte range within the node's inline text. run.spanId identifies the source inline span when available.