Text

A paragraph's text is one TextNode. node.runs holds its runs in visual order. A run is text shaped with one font and size. A <b> starts a new run.

Read a run

Hover a run to see its fields. The dot marks run.x and run.y, where the baseline starts.

import { paint } from "takumi-paint";

export const tree = await paint(
  <p style={{ width: 260, padding: 24, margin: 0, fontSize: 20, lineHeight: "30px" }}>
    Text arrives as <b>shaped runs</b> with their baselines.
  </p>,
  { width: 308 },
);

The text node comes before the inline boxes in its paragraph. Its runs can sit on both sides of those boxes.

run.transform is set when text-fit scales the line. Apply it before placing the run at x, y.

Draw glyphs

run.outline() returns the glyphs as SVG path data. The paths start at the baseline start. Drawing them needs no font engine.

A native text API reads run.glyphs instead. It holds glyph IDs in run.font and their offsets from the baseline start. run.font.data() returns the font file. Runs in the same face share one Font object.

Lay text out again

A slide writer can rebuild a text box from the paragraph box and the run fields.

import { paint } from "takumi-paint";

const tree = await paint(
  <div style={{ width: 240, padding: 12, textAlign: "center", lineHeight: "30px" }}>Title</div>,
  { width: 320 },
);

const paragraphs = tree.nodes.flatMap((node) =>
  node.type === "text"
    ? [
        {
          box: node.parent?.contentBox, 
          matrix: node.transform,
          align: node.textAlign,
          runs: node.runs.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.letterSpacing is already in the glyph positions. Under line-height: normal, a fallback face can make run.lineHeight taller.