skills.rest
faramirezs
faramirezsCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/faramirezs/talking_printer --skill pretext-faramirezs
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
tomada1114tomada1114
4

fixing-srt-subtitles

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

Community
Basic
projectedanxprojectedanx
1

pretext

Measure text and calculate line breaks on canvas without DOM reflow.

Community
Advanced
JuanMS20JuanMS20

pretext

Generate DOM-free text measurement and layout for browser demos.

Community
Advanced
MCERQUAMCERQUA
1

pretext

Provides JavaScript/TypeScript text measurement and layout without DOM or CSS reliance.

Community
Advanced