pretext

Measure text layout without DOM using the @chenglou/pretext library.

Updated Apr 30, 2026
One-click install
npx skills add https://github.com/lxh755818-bot/obsidian-vault --skill pretext-lxh755818-bot
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/lxh755818-bot/obsidian-vault/tree/main/backup/skills/creative/pretext
Command: npx skills add https://github.com/lxh755818-bot/obsidian-vault --skill pretext-lxh755818-bot

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @chenglou/pretext, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps create sophisticated text-based layouts for ASCII art, typography, and interactive games without using DOM elements, providing a new level of creative control.

Core Features & Use Cases

  • Text Measurement and Layout: Measure text layout without DOM reflows.
  • Generative Art: Utilize text for generative art and interactive experiences.
  • Use Case: Visualize a paragraph flowing around a moving orb, using text as a creative element instead of traditional graphics.

Quick Start

Use the pretext skill to create a text layout around a moving orb. Load the template 'hello-orb-flow.html' and customize the orb's movement and appearance.

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 for ASCII art without causing DOM reflows?

You can measure text layout without DOM reflows by using a canvas-based text measurement library. This approach provides layout data for creating complex ASCII art and typography without rendering DOM elements.

Can I create generative art with typography in a DOM-free environment?

Yes, you can create generative art with typography in a DOM-free environment. This Skill measures text layout data to drive interactive text-based visual experiences, such as visualizing paragraphs flowing around moving elements.

Does pretext work for building interactive text-based games?

Pretext works for building interactive text-based games by providing precise text layout measurement. It supplies the necessary data to render complex text layouts without relying on the DOM.

What is the best way to visualize a paragraph flowing around a moving orb?

The best way to visualize a paragraph flowing around a moving orb is using canvas-based text measurement. You can load the 'hello-orb-flow.html' template to customize the orb's movement and text layout.

Do I need the @chenglou/pretext library to measure text for typographic effects?

Yes, you need the @chenglou/pretext library to measure text for typographic effects. It provides the canvas-based measurement capabilities required to generate layout data for this Skill.

Are there limitations to creating text layouts without DOM elements?

Creating text layouts without DOM elements requires canvas-based measurement rather than standard web rendering. This approach is ideal for ASCII art and games but does not utilize native DOM reflows for layout calculations.