The measure() API

measure() lays out a tree and returns each box's size and position without painting it. Use it to fit a headline into a fixed width, or to place a badge next to a measured box.

import { measure } from "takumi-js";

const { width, height } = await measure(<span tw="text-xl">I'm a text node</span>); 
        
const width: any

measure() takes the same input and options as render(): JSX, an HTML string, or a node tree, with css, fonts, and images. It runs on the same default renderer, so fonts loaded for rendering measure the same way. Without width and height, the root sizes to its content.

To measure on a renderer you manage, pass it a node tree:

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 fieldsCopy Anchor Link

measure() resolves to a MeasuredNode.

Lengths are in device pixels. A 20px box measures 40 with a devicePixelRatio of 2.

Text runsCopy Anchor Link

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

CoordinatesCopy Anchor Link

transform is absolute: it places the box in the image. Every node has 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. To place a run in the image, add that node's padding and border to the run's x and y, then apply the node's transform.