skills.rest
samlaggz
samlaggzCOMMUNITY
Explore all skills by this author →
GitHub

pretext

Measure browser text layout without DOM access using pretext.

Updated May 21, 2026
Search Tags:#typography#creative-coding#generative-art#ascii-art#kinetic-typography#text-layout#pretext
One-click install
npx skills add https://github.com/samlaggz/hermes-agent-sam --skill pretext-samlaggz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/samlaggz/hermes-agent-sam/tree/main/backup/skills/creative/pretext
Command: npx skills add https://github.com/samlaggz/hermes-agent-sam --skill pretext-samlaggz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Measures text layout in the browser without touching the DOM, enabling precise, geometry-aware text flows for creative coding and demos.

Core Features & Use Cases

  • DOM-free measurement and layout: compute line breaks, per-line widths, and per-glyph positions to render text around obstacles or shapes.
  • Two primary use patterns: measure-only layouts (for height) and full render-by-code layouts (text flowing around sprites or irregular regions).
  • Use Case: build kinetic typography, editorial layouts, or text-driven visuals where lines adapt to dynamic geometry without DOM reflows.

Quick Start

Open a prepared demo HTML file that loads a pretext stream and renders a DOM-free text flow around an obstacle.

Frequently Asked Questions about pretext

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

FAQPage Schema
How do I measure text layout in the browser without touching the DOM?▼

You can measure text layout without the DOM by using functions like prepareWithSegments, layoutNextLineRange, and materializeLineRange to compute line breaks, per-line widths, and per-glyph positions independently, avoiding DOM reflows entirely.

Can I render kinetic typography that flows around dynamic shapes or sprites?▼

Yes, you can render kinetic typography around dynamic shapes by using a full render-by-code layout pattern. This computes text flows that adapt to irregular regions, allowing lines to dynamically wrap around obstacles or sprites seamlessly.

Does pretext work outside of a browser environment for generative art?▼

No, pretext requires a browser environment to function. It is specifically designed to measure text layout and render text-driven visuals within the browser, leveraging browser capabilities for geometry-aware text flows in generative art.

What is the best way to build editorial layouts with text wrapping around obstacles?▼

The best way to build editorial layouts with obstacle wrapping is to use DOM-free measurement to compute line data. By calculating per-glyph positions and applying them via render-by-code layouts, text flows precisely around irregular regions.

Why avoid DOM reflows when creating text-driven visuals and ASCII art?▼

Avoiding DOM reflows when creating text-driven visuals prevents layout thrashing and performance bottlenecks during animation. By computing text geometry independently, you maintain smooth rendering for kinetic typography without triggering continuous browser recalculations.

Related Skills

Explore More Design & Creative Skills→
richardnguyen0715richardnguyen0715

pretext

Measure and layout text without a DOM using the @chenglou/pretext library.

Community
Advanced
tomada1114tomada1114
4

fixing-srt-subtitles

Correct transcription errors and optimize line breaks in SRT subtitle files.

Community
Basic
hungthinh04hungthinh04

pretext

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

Community
Advanced
MCERQUAMCERQUA
1

pretext

Provides JavaScript/TypeScript text measurement and layout without DOM or CSS reliance.

Community
Advanced