skills.rest
john-data-chen
john-data-chenCOMMUNITY
Explore all skills by this author →
GitHub

pretext

Measure text in the browser without touching the DOM.

2|Updated Apr 25, 2026
Search Tags:#typography#canvas#creative-coding#text-layout#pretext#text-measurement
One-click install
npx skills add https://github.com/john-data-chen/hermes-agent-backup --skill pretext-john-data-chen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/john-data-chen/hermes-agent-backup/tree/main/skills/creative/pretext
Command: npx skills add https://github.com/john-data-chen/hermes-agent-backup --skill pretext-john-data-chen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Pretext solves the problem of measuring text in the browser without touching the DOM, returning line breaks, per-line widths, and per-grapheme positions to drive custom rendering.

Core Features & Use Cases

  • DOM-free text measurement: compute line breaks, per-line widths, and grapheme positions for creative layouts.
  • Text-around-obstacle flow: drive flows where paragraphs wrap around moving shapes or non-rectangular regions.
  • Text-as-geometry demos: build ascii-art, kinetic typography, and language-agnostic typography experiments in a single-file HTML demo.

Quick Start

Create a single-file HTML demo that uses pretext to measure and layout text 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 width and line breaks in the browser without touching the DOM?▼

DOM-free text measurement computes line breaks, per-line widths, and per-grapheme positions directly in the browser environment. This approach returns precise layout data to drive custom rendering without inserting hidden elements.

Can I flow text around non-rectangular shapes or moving obstacles on a canvas?▼

Yes, text-around-obstacle flow is a core use case. You can drive flows where paragraphs wrap around moving shapes or non-rectangular regions by using the computed line ranges and grapheme positions for your custom canvas rendering.

How do I create kinetic typography or text-as-geometry art in a single-file HTML demo?▼

You can build text-as-geometry demos by loading the pretext library via esm.sh in a single-file HTML demo. Using layout functions like prepareWithSegments and materializeLineRange, you extract grapheme positions to render custom kinetic typography art.

Does this text layout approach support multiple languages and different writing scripts?▼

Yes, the text measurement and layout process is language-agnostic and supports editorial layouts across languages and scripts. It returns accurate per-grapheme positions to handle various typographic requirements for creative coding.

What browser environment setup do I need to use the pretext text measurement library?▼

You need a browser environment and the @chenglou/pretext library loaded via esm.sh. Implementation requires calling specific functions like prepareWithSegments, layoutNextLineRange, materializeLineRange, layoutWithLines, and walkLineRanges.

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
RheasilviaRheasilvia

pretext

Measure and layout multiline text on HTML5 Canvas without DOM reflows.

Community
Advanced