The measure() API
Measure the node layout without rendering it.
Measure runs the layout pass and returns box dimensions without rasterizing pixels. Cheap enough to call many times per request.
import { } from "takumi-js/node";
import { } from "takumi-js/helpers/jsx";
const = new ();
const { , } = await (< ="text-xl">I'm a text node</>);
const { , } = await .(, { });When to use Measure
Three concrete cases where measuring before rendering pays for itself.
Text-fitting
Pick a font size so a headline fills its box without overflowing. Binary-search font size, measuring after each guess, and only call render once you've landed on the right value.
import { } from "takumi-js/node";
import { } from "takumi-js/helpers/jsx";
const = new ();
const = 800;
const = "Takumi 1.2 comes with text-fit property support";
let = 16;
let = 200;
while ( - > 1) {
const = ( + ) >> 1;
const { , } = await (
< ={{ : , : "nowrap" }}>{}</>,
);
const { } = await .(, { });
if ( > ) = ;
else = ;
}The CSS text-fit property (see the text-fit example) does this inside the engine. Reach for measure when you need the result in user space — e.g. to pick between alternate copy.
Responsive cards
A product card's height depends on its title length, description length, and image aspect ratio. Measure once with width fixed to learn the natural height, then pass that into render.
import { } from "takumi-js/node";
import { } from "takumi-js/helpers/jsx";
const = new ();
const { , } = await (<ProductCard />);
const { } = await .(, { : 600, });
const = await .(, { : 600, , });Layout-aware truncation
Decide whether to add an ellipsis or drop the third paragraph entirely based on what fits. Measure the full content, compare against the budget, render the trimmed version.
Last updated on