The measure() API

measure() returns a node's laid-out size without rendering it. Use it to fit a headline into a fixed width, or to place a badge against the measured box.

import { Renderer } from "takumi-js/node";
import { fromJsx } from "takumi-js/helpers/jsx";

const renderer = new Renderer();
const { node, css } = await fromJsx(<span tw="text-xl">I'm a text node</span>);

const { width, height } = await renderer.measure(node, { css }); 
        
const width: number
The measured width of the node.

Returned fields

measure() resolves to a MeasuredNode.

Every length is a device pixel. A 20px box measures 40 under a devicePixelRatio of 2.

Text runs

A node that lays out text reports one MeasuredTextRun per shaped run.

Coordinates

transform is absolute. It places the box on the page, and every node carries one, including the boxes takumi generates to lay out inline content.

A run's x and y are not absolute. They start at the content box of the node that owns the run, so add that node's padding and border to place a run on the page.