pretext

Compute DOM-free text layouts with pretext for canvas-based browser demos.

Updated Jun 15, 2026

Search Tags:#typography #canvas #creative-coding #generative-art #ascii-art #text-layout #pretext

Ready to run

npx skills add https://github.com/faramirezs/talking_printer --skill pretext-faramirezs

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables DOM-free, measurement-driven text layouts for creative browser demos by leveraging the pretext library to compute line breaks and glyph positions without reflow.

Core Features & Use Cases

DOM-free text measurement for precise line layout and text-around-obstacle demos.
Grapheme-aware measurement with Intl.Segmenter for emoji/CJK correctness.
Ready-made demo templates and patterns (hello-orb-flow.html, donut-orbit.html) to accelerate ideas.

Quick Start

Open templates/hello-orb-flow.html to see text flow around a moving orb.

Frequently Asked Questions about pretext

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

FAQPage Schema

How do I render canvas-based text layouts without relying on the DOM?▼

DOM-free text measurement computes precise line breaks and glyph positions without triggering browser reflow. It uses the pretext library to calculate layout coordinates directly on the canvas for creative typography experiments.

How do I make text flow around obstacles in a creative browser demo?▼

Text-around-obstacle layouts are created by computing glyph positions and dynamically adjusting line breaks around moving elements. The included hello-orb-flow.html template demonstrates text flowing dynamically around a moving orb.

Does this text measurement approach support emoji and CJK characters correctly?▼

Text measurement handles emoji and CJK characters correctly through grapheme-aware segmentation using Intl.Segmenter. This ensures accurate visual width calculations and proper line breaking for international text layouts.

What's the best way to start building kinetic typography demos in the browser?▼

The best way to start building kinetic typography demos is by opening the provided HTML templates like donut-orbit.html. These ready-made patterns accelerate initial ideas and provide structural references for complex animated text scenes.

Are there limitations to using DOM-free text layout for generative ASCII art scenes?▼

DOM-free text layout for generative ASCII art scenes relies entirely on canvas rendering, limiting native HTML text selection and accessibility features. Complex text-around-obstacle interactions require manual coordinate mapping and measurement.