skills.rest
AlvaroBiano
AlvaroBianoCOMMUNITY
Explore all skills by this author →
GitHub

pretext

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

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

Core Features & Use Cases

  • Flow around obstacles in creative demos
  • Text-as-geometry and kinetic typography
  • Single-file HTML demos using canvas rendering

Quick Start

Import the module and call prepareWithSegments with your text and font, then layout lines with layoutNextLineRange and render with materializeLineRange.

Frequently Asked Questions about pretext

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

FAQPage Schema
How do I measure text and get per-glyph positions for canvas rendering without using DOM?▼

You can measure text without DOM by using the pretext API to calculate line breaks and per-glyph positions. This provides deterministic rendering metrics suitable for creative demos and text-driven visuals.

Can I flow text around obstacles in a single-file HTML canvas demo?▼

Yes, you can flow text around obstacles in a canvas demo by calling prepareWithSegments with your text and font, then using layoutNextLineRange to calculate the layout and materializeLineRange to render it.

Does pretext work for kinetic typography and text-as-geometry animations?▼

Yes, pretext is designed for kinetic typography and text-as-geometry. It exposes stable line metrics and per-glyph positions, enabling deterministic text animation in creative coding environments.

What is the best way to achieve deterministic text layout for editorial canvas visuals?▼

The best way to achieve deterministic text layout is using a DOM-free measurement API that outputs a stable set of lines and metrics. This ensures text flows consistently across renders for editorial layouts.

Do I need any external dependencies to use pretext for text layout?▼

No, pretext has zero external dependencies. It relies solely on its internal API (prepareWithSegments, layoutNextLineRange, materializeLineRange) to output line metrics for rendering.

Related Skills

Explore More Design & Creative Skills→
GuiGPaPGuiGPaP
1

pretext

Measure text metrics and line breaks using Canvas measureText and Intl.Segmenter.

Community
Intermediate
samlaggzsamlaggz

pretext

Measure browser text layout without DOM access using pretext.

Community
Intermediate
tomada1114tomada1114
4

fixing-srt-subtitles

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

Community
Basic
cxnaivecxnaive

pretext

Measure and lay out multiline text on canvas without DOM reflows.

Community
Advanced