skills.rest
GuiGPaP
GuiGPaPCOMMUNITY
Explore all skills by this author →
GitHub

pretext

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

1|Updated Mar 18, 2026
Search Tags:#typography#performance#layout#canvas#segmentation#pretext#text-measurement
One-click install
npx skills add https://github.com/GuiGPaP/TD_starter_pack --skill pretext-guigpap
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/GuiGPaP/TD_starter_pack/tree/main/.agents/skills/pretext
Command: npx skills add https://github.com/GuiGPaP/TD_starter_pack --skill pretext-guigpap

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Precise measurement of text metrics and line breaks without DOM access enables deterministic layout, virtualized rendering, and dependable typography in web UIs.

Core Features & Use Cases

  • Accurate metrics via prepare() and prepareWithSegments() for given text and font
  • Layout APIs like layout(), layoutWithLines(), and layoutNextLine() for flexible wrapping and per-line data
  • Obstacle-aware text flow and auto-fit font sizing for responsive typography

Quick Start

Install and import Pretext, run prepare with your text and font, then call layout with a container width and line height to obtain the height and line count.

Frequently Asked Questions about pretext

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

FAQPage Schema
How do I measure text metrics precisely without causing DOM reflows?▼

Measure text metrics precisely without DOM reflows by using Canvas measureText and Intl.Segmenter. Pretext caches initial measurements to enable deterministic layout and fast subsequent renders for web UIs.

What is the best way to handle obstacle-aware text wrapping in an HTML5 canvas?▼

Obstacle-aware text wrapping in canvas is handled using layout APIs that flow text around defined boundaries. Pretext provides layout and layoutWithLines functions to compute per-line data for complex rendering.

How do I calculate line breaks for virtualized lists using a specific font?▼

Calculate line breaks for virtualized lists by passing your text and font to prepare or prepareWithSegments. Pretext then uses the layout API with a container width to return exact height and line count.

Does Pretext require Intl.Segmenter and Canvas measureText to perform text segmentation?▼

Yes, Pretext requires Canvas measureText and Intl.Segmenter to perform accurate text segmentation. These browser APIs provide the exact glyph measurements and linguistic boundaries needed for deterministic layout.

Can I auto-fit font sizing for responsive typography without accessing the DOM?▼

Auto-fit font sizing for responsive typography is achievable without DOM access by measuring text dimensions programmatically. Pretext computes exact metrics for given fonts to determine optimal sizes dynamically.

Why does my virtualized list layout break when rendering long text strings?▼

Virtualized list layout breaks when text measurement is inaccurate or uncached. Pretext solves this by caching initial text metrics via prepare APIs, ensuring deterministic dimensions and preventing layout shifts.

Related Skills

Explore More Software Engineering Skills→
sitapixsitapix

apple-text-core-text

Expose Core Text APIs for glyph-level rendering and hit-testing on iOS and macOS.

Community
Advanced
MCERQUAMCERQUA
1

pretext

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

Community
Advanced
carterwayneskhizeinecarterwayneskhizeine
19

pretext

Generate browser demos with DOM-free multiline text measurement and obstacle reflow.

Community
Intermediate
VIDLGVIDLG
4

webf-async-rendering

Measure WebF element dimensions using onscreen events and the useFlutterAttached hook.

Official
Intermediate