skills.rest
SriRamkunamsetty
SriRamkunamsettyCOMMUNITY
Explore all skills by this author →
𝕏@SriRam41258GitHub

pretext

Measure text without DOM reflow and return line breaks, widths, and glyph positions.

Updated May 20, 2026
Search Tags:#typography#canvas#generative-art#text-layout#pretext#creative-demos
One-click install
npx skills add https://github.com/SriRamkunamsetty/SITA2.0-HermesAgent --skill pretext-sriramkunamsetty
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/SriRamkunamsetty/SITA2.0-HermesAgent/tree/main/hermes-agent/skills/creative/pretext
Command: npx skills add https://github.com/SriRamkunamsetty/SITA2.0-HermesAgent --skill pretext-sriramkunamsetty

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Pretext enables DOM-free measurement and layout of text for creative browser demos, returning line breaks, per-line widths, and per-glyph positions without DOM reflow.

Core Features & Use Cases

  • Flow around obstacles: flow text around moving shapes with precise line breaks.
  • Text-as-geometry: render text as geometry for artful demos and kinetic typography.
  • Multi-column editorial: support complex column layouts and shared cursor flows.

Quick Start

Create a compact HTML demo that imports pretext via CDN and feeds text through prepareWithSegments and layoutNextLineRange to render flowing text.

Frequently Asked Questions about pretext

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I measure text width and get glyph positions without DOM reflow?▼

DOM-free text layout libraries measure text and return line breaks, per-line widths, and per-glyph positions without triggering DOM reflow, enabling real-time text rendering on canvas.

Can I flow text around moving obstacles in a browser canvas?▼

Yes, DOM-free text layout supports flowing text around moving shapes by calculating precise line breaks and returning glyph positions, enabling dynamic canvas rendering without DOM reflow.

What is DOM-free text layout and when do I need it for generative art?▼

DOM-free text layout measures text and positions glyphs without browser reflow, needed for generative art where text must morph around shapes or update in real-time without performance penalties.

Does pretext support multi-column editorial layouts in the browser?▼

Yes, pretext supports multi-column editorial layouts by calculating complex column arrangements and shared cursor flows, returning line breaks and glyph positions without DOM reflow.

Do I need any dependencies to use DOM-free text layout for creative demos?▼

You need to import the @chenglou/pretext library via CDN to enable DOM-free text measurement, which returns line breaks and glyph positions for rendering creative canvas demos.

What are the limitations of using DOM-free text layout for canvas rendering?▼

DOM-free text layout requires importing an external library via CDN and manually handling canvas rendering, as it only returns computed line breaks and glyph positions rather than rendering text directly.

Related Skills

Explore More Design & Creative Skills→
InverterNetworkInverterNetwork

pretext

Measure and lay out multiline text on HTML5 Canvas without DOM reflow.

Official
Advanced
jleechanorgjleechanorg

pretext

Measure and lay out multiline text around shapes without DOM reflow.

Official
Advanced
hungthinh04hungthinh04

pretext

Route text around obstacles and animate typography as geometry in browser demos.

Community
Advanced
wk-jwk-j
1

pretext-reference

Measure and layout multiline text without DOM reflow using prepare and layout APIs.

Community
Advanced