Text

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

Read a runCopy Anchor Link

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 },
);

In tree.nodes, 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 glyphsCopy Anchor Link

run.outlines() returns each glyph's outline as SVG path data, in the order of run.glyphs. The paths are relative to the baseline start, and run.outlines().join("") draws the whole run. Drawing them needs no font engine.

An outline is an empty string for a glyph with no contours, such as a space. It is null for a glyph the run's color does not fill. Color font layers arrive as their own drawables, and bitmap glyphs, such as some emoji, are left out.

A native text API reads run.glyphs instead. Each glyph has an id in run.font, its x and y offset from the baseline start, and usually a cluster, which is where its cluster starts in run.text, in UTF-16 code units. run.font.data() returns the font file. Runs in the same face share one Font object.

Lay text out againCopy Anchor Link

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 applied to the glyph positions, so do not add it again when you place glyphs. Under line-height: normal, a fallback face can make run.lineHeight taller.