Measure multiline text and compute line breaks with pretext for DOM-free browser demos.
npx skills add https://github.com/Z43L/zeus-agent --skill pretext-z43l
Please help me install this Agent Skill. Skill: pretext Source: https://github.com/Z43L/zeus-agent/tree/main/skills/creative/pretext Command: npx skills add https://github.com/Z43L/zeus-agent --skill pretext-z43l
It solves the problem of building creative, typographic browser demos that need accurate text measurement and reflow without relying on DOM layout tricks or layout-shift-prone workarounds.
Use case example: A user wants a “cool pretext thing” where a paragraph flows around a moving orb—pretext provides the per-row corridor widths so you can draw the text with the right wrapping behavior in real time.
Use the pretext skill to generate a single-file HTML demo that flows a real paragraph around a moving obstacle using pretext’s layoutNextLineRange pattern.
High-intent search queries and answers about installing and using this skill.
You can measure multiline text without the DOM by computing line breaks, widths, and per-grapheme positions directly using a layout engine. This approach avoids expensive DOM reads and provides accurate text measurement for canvas or SVG rendering.
To flow text around moving obstacles in a canvas animation, calculate per-row corridor widths and apply a layout loop using a portable cursor. This dynamically adjusts text wrapping in real time for kinetic typography and interactive web demos without relying on DOM reflow hacks.
Yes, you can build generative ASCII art and kinetic typography games in a single-file HTML demo by measuring text as geometry and rendering it directly through canvas, SVG, or WebGL. This produces lightweight browser demos that bypass DOM layout dependencies entirely.
Yes, DOM-free text layout requires an external runtime import with a pinned version to function correctly. You must match a canvas or CSS font string and implement a layout loop using prepareWithSegments and layoutNextLineRange with a portable cursor for accurate visual output.
Canvas text wrapping fails with variable-width corridors when the layout loop lacks a portable cursor to track position accurately. Using prepareWithSegments alongside layoutNextLineRange ensures the text reflow respects dynamic corridor boundaries and maintains correct per-grapheme positioning across moving obstacles.
jordanhubbardGenerate interactive text-based visual effects using @chenglou/pretext for DOM-free text measurement and layout.
PlaidmustacheMeasure and layout text without a DOM for canvas rendering.
davpatel605-beepGenerate interactive browser typography with measured text layouts and animated compositions.
icyzhMeasure and lay out multiline text without the DOM using the @chenglou/pretext library.
