skills.rest
sheawinkler
sheawinklerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

pretext

Measure and arrange multiline text without DOM reflows using the pretext library.

78|16|Updated Apr 23, 2026
Search Tags:#typography#generative-art#ascii-art#text-layout#pretext
One-click install
npx skills add https://github.com/sheawinkler/hermes-agent-ultra --skill pretext-sheawinkler
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/sheawinkler/hermes-agent-ultra/tree/main/skills/creative/pretext
Command: npx skills add https://github.com/sheawinkler/hermes-agent-ultra --skill pretext-sheawinkler

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Pretext enables DOM-free measurement and layout of multiline text to power expressive, text-driven demos in the browser, freeing you from DOM reflows while keeping precise line metrics and per-glyph positioning.

Core Features & Use Cases

  • DOM-free measurement of lines, widths, and per-glyph positions to feed custom renderers (canvas/WebGL) and interactive typography.
  • Text-around-obstacle layouts: drive text flow around moving sprites or shapes for kinetic typography and editorial effects.
  • Flexible demo templates: produce single-file HTML demos that showcase creative typography with real prose and ASCII-like visuals.
  • Use Case: build a dynamic title card where lines wrap around a floating orb or logo, with exact glyph coordinates for effects.
  • See templates and references for patterns and ready-made demos.

Quick Start

Create a single-file HTML demo by importing pretext from esm.sh, calling prepareWithSegments on your text and font, then using layoutNextLineRange or layoutWithLines to render onto a canvas.

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 without triggering DOM reflows in the browser?▼

DOM-free text measurement is achieved by using the pretext library to calculate precise line metrics and per-glyph positions. This approach feeds custom renderers like canvas or WebGL, freeing interactive typography demos from browser reflow performance penalties.

Can I wrap text around moving shapes or sprites for kinetic typography?▼

Text-around-obstacle layouts are supported by pretext to drive text flow around moving sprites or shapes. You can build dynamic title cards where lines wrap around floating objects, extracting exact glyph coordinates for interactive visual effects.

What is the best way to get per-glyph coordinates for custom canvas rendering?▼

The best way to get per-glyph coordinates is using pretext functions like prepareWithSegments and layoutWithLines. These provide precise typography metrics and per-glyph positioning data needed to render text-driven visuals directly onto a canvas or WebGL context.

Does pretext work in a browser environment, and do I need any dependencies?▼

Pretext requires a browser environment and the pretext library, which can be imported from esm.sh. There are no other dependencies, allowing you to produce single-file HTML demos that showcase creative typography with real prose and ASCII-like visuals.

How do I render multiline text on canvas using layoutNextLineRange?▼

To render multiline text on canvas, import pretext from esm.sh, call prepareWithSegments on your text and font, then use layoutNextLineRange or layoutWithLines to calculate the layout. Finally, use the returned metrics to draw the text onto your canvas element.

When should I avoid DOM-based text layout for interactive demos?▼

You should avoid DOM-based text layout when building expressive, text-driven demos that require wrapping around moving obstacles or rendering with canvas. Pretext provides precise line metrics and per-glyph positioning without DOM reflows, ensuring smooth interactive performance.

Related Skills

Explore More Design & Creative Skills→
john-data-chenjohn-data-chen
2

pretext

Measure text in the browser without touching the DOM.

Community
Advanced
MarbleSodasMarbleSodas

pretext

Measure and lay out multiline text in the browser without DOM geometry.

Community
Intermediate
AlvaroBianoAlvaroBiano

pretext

Measure text without DOM and expose line breaks and per-glyph positions.

Community
Intermediate
wk-jwk-j
1

pretext-reference

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

Community
Advanced