Measure text line breaks, widths, and glyph positions without the DOM.
npx skills add https://github.com/anilcan-kara/nozich-agent --skill pretext-anilcan-kara
Please help me install this Agent Skill. Skill: pretext Source: https://github.com/anilcan-kara/nozich-agent/tree/main/skills/creative/pretext Command: npx skills add https://github.com/anilcan-kara/nozich-agent --skill pretext-anilcan-kara
Pretext enables DOM-free text measurement and layout in the browser, letting creators generate complex text layouts and typography-driven demos without DOM reflows or heavy frameworks.
Open a demo HTML file, import the pretext API from esm.sh, and feed it your text to generate a flow around an obstacle.
High-intent search queries and answers about installing and using this skill.
DOM-free text measurement is handled by the pretext API, which calculates precise line breaks, per-line widths, and per-grapheme positions without triggering DOM reflows, enabling complex text layouts without heavy frameworks.
To flow text around shapes in interactive canvas demos, you feed real prose content into the pretext API to generate layout data. The API measures the text and returns the precise positions needed to render typography hugging moving obstacles in dynamic scenes.
DOM-free text measurement is the process of calculating line breaks and glyph positions independently of the browser DOM. You need it for generative art and kinetic typography where text must wrap around shapes or flow in multiple columns without causing layout reflows.
Yes, you can build multi-column editorial layouts without heavy frameworks by importing the pretext API from esm.sh. It provides the layout data needed to position text precisely across columns in single-file deployable HTML demos.
A key limitation is that canvas-based text layout via pretext requires the browser-based API and real prose content to function. It focuses on generating layout data for graphics and demos, meaning it operates independently of standard DOM layout engines.
rickyanandaCreate single-file browser demos for measured text layout without DOM reflow.
InverterNetworkMeasure and lay out multiline text on HTML5 Canvas without DOM reflow.
eliottbusinessGenerate interactive text-based visual effects using canvas measurement and layout.
ToqsickMeasure and layout text without the DOM using the pretext library.
