pretext

Name: pretext
Availability: InStock
Author: cabezno

Measure and lay out multiline text around obstacles without DOM.

Updated May 15, 2026

Search Tags:#ascii-art #kinetic typography #canvas rendering #single-file html #dom-free layout #text reflow #grapheme segmentation

Ready to run

npx skills add https://github.com/cabezno/bmb-encover-agent --skill pretext-cabezno

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/cabezno/bmb-encover-agent/tree/main/skills/creative/pretext
Command: npx skills add https://github.com/cabezno/bmb-encover-agent --skill pretext-cabezno

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

Pretext helps you build creative browser demos where text must wrap and reflow around dynamic obstacles without relying on normal DOM layout, avoiding guesswork and layout shift.

Core Features & Use Cases

DOM-free text measurement and line layout: compute line breaks, per-line widths, and grapheme-aware positioning from (text, font, width).
Variable-width streaming layout around obstacles: flow text row-by-row into corridors whose width changes at every line (e.g., around a moving orb or morphing ASCII mask).
Single-file HTML demo workflow: generate self-contained demos by measuring once and reusing the prepared layout during animation.

Quick Start

Use the pretext skill to generate a single-file HTML demo that flows a short, intentional paragraph around a moving obstacle (like an orb) using DOM-free pre-measured line ranges.

Frequently Asked Questions about pretext

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

FAQPage Schema

How do I flow text around moving obstacles in HTML5 canvas without DOM layout?▼

DOM-free text reflow around moving obstacles is achieved by pre-measuring text metrics and computing variable-width line ranges row-by-row. You provide a text measurement handle and font string, then route lines dynamically around shapes during canvas rendering.

What is obstacle-aware line routing for kinetic typography demos?▼

Obstacle-aware line routing calculates per-line widths that change at every row, allowing text to flow into corridors around moving shapes. This enables kinetic typography and ASCII-word geometry effects without relying on normal DOM layout or experiencing layout shift.

Can I build single-file HTML text animations using per-glyph effects?▼

Yes, you can generate self-contained single-file HTML demos by measuring text once and reusing the prepared layout during animation. This supports per-glyph animated effects and grapheme-safe segmentation for accurate single-file HTML text animations.

Does this approach support grapheme-safe text segmentation for variable-width line layout?▼

Grapheme-safe segmentation is fully supported to ensure accurate per-glyph positioning. The layout functions accept a prepared text measurement handle and font string, providing next-line range layout capabilities where widths can vary per row.

Why does my canvas text reflow cause layout shift instead of wrapping smoothly?▼

Canvas text reflow causes layout shift when relying on DOM measurement instead of pre-computed text metrics. By measuring multiline text upfront and applying obstacle-aware line routing with variable per-row widths, you avoid guesswork and achieve smooth shrink-wrapping.

When do I need DOM-free text measurement for ASCII-word geometry?▼

DOM-free text measurement is needed for ASCII-word geometry when text must wrap around dynamic obstacles like morphing ASCII masks. It provides pre-calculated line breaks and grapheme-aware positioning to render creative typography without browser layout dependencies.