Measure and lay out multiline browser text without DOM reflows.
npx skills add https://github.com/matthew-johnson/hermes-agent --skill pretext-matthew-johnson
Please help me install this Agent Skill. Skill: pretext Source: https://github.com/matthew-johnson/hermes-agent/tree/main/skills/creative/pretext Command: npx skills add https://github.com/matthew-johnson/hermes-agent --skill pretext-matthew-johnson
This skill provides tools to measure and lay out multiline text in the browser without triggering costly DOM reflows, enabling fast, creative typography demos.
Use prepareWithSegments to prepare the text and then layoutNextLineRange / materializeLineRange to render lines.
High-intent search queries and answers about installing and using this skill.
You can measure and lay out multiline text without DOM reflows by using the pretext API, which provides per-line and per-glyph metrics directly for canvas rendering. This avoids costly browser reflows during interactive typography animations.
Yes, canvas text flowing around obstacles is supported by preparing text segments and computing line ranges. The layout engine generates metrics that rendering code consumes to position text around shapes dynamically.
Kinetic typography involves animating text, and DOM-free text layout helps by providing precise per-glyph metrics without triggering reflows. This allows smooth canvas-based rendering for morphing or moving text visuals.
Yes, pretext supports editorial multi-column layouts in interactive canvases by exposing layout functions like layoutWithLines and walkLineRanges. These produce the metrics needed to render text across columns efficiently.
Start by using prepareWithSegments to prepare your text, then call layoutNextLineRange to compute line breaks and materializeLineRange to render. This workflow provides precise measurement for dynamic canvas layouts.
The best way to handle text-as-geometry visuals without reflows is using a DOM-free text layout API that outputs per-glyph metrics. Pretext computes these measurements so rendering code can treat text as geometry directly on canvas.
ghufronbagaskaraMeasure and lay out text on HTML5 Canvas without DOM reflows.
tomada1114Correct transcription errors and optimize line breaks in SRT subtitle files.
sheawinklerMeasure and arrange multiline text without DOM reflows using the pretext library.
wk-jMeasure and layout multiline text without DOM reflow using prepare and layout APIs.
