skills.rest
wk-j
wk-jCOMMUNITY
Explore all skills by this author →
GitHub

pretext-reference

Measure and layout multiline text without DOM reflow using prepare and layout APIs.

1|1|Updated Mar 7, 2026
Search Tags:#typography#layout#canvas#text#measure#text-layout
One-click install
npx skills add https://github.com/wk-j/krypton --skill pretext-reference
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pretext-reference
Source: https://github.com/wk-j/krypton/tree/main/.claude/skills/pretext-reference
Command: npx skills add https://github.com/wk-j/krypton --skill pretext-reference

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This library provides accurate, DOM-free measurement and layout of multiline text, enabling consistent rendering on canvas or SVG without triggering reflow.

Core Features & Use Cases

  • High-precision measurement of text height, line counts, and wrapping without relying on the DOM.
  • Layout APIs: prepare, layout, prepareWithSegments, layoutWithLines, and helpers for inline flow.
  • Use Case: perform shrink-wrap layouts, text animation, and obstacle-aware flows across custom render targets.

Quick Start

Install the library and import it in your project, then call prepare(text, font) to begin precise text measurement.

Frequently Asked Questions about pretext-reference

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

FAQPage Schema
How do I measure multiline text height and line wrapping without triggering DOM reflow?▼

Use prepare and layout APIs to measure multiline text height and line wrapping without DOM reflow. Access font metrics in a browser canvas environment to compute accurate line breaks and dimensions for custom rendering.

What is obstacle-aware text layout and how does it work for canvas and SVG?▼

Obstacle-aware text layout computes multiline flow around elements on canvases and SVG. It measures precise boundaries and applies layout APIs to calculate text wrapping that avoids overlapping specific regions.

Can I calculate exact text layout metrics for shrink-wrap layouts in a browser?▼

Yes, calculate exact text layout metrics for shrink-wrap layouts in a browser canvas environment. Font metrics access enables precise measurement of line counts and heights, supporting accurate sizing for custom render targets.

What's the best way to perform precise text measurement for canvas animations?▼

Use prepare(text, font) to begin precise text measurement for canvas animations. This DOM-free approach computes line breaks and height accurately, enabling consistent rendering without visual reflow during animation frames.

Do I need a browser canvas environment to compute multiline text breaks and height?▼

Yes, a browser canvas environment is required to compute multiline text breaks and height. This environment provides the necessary font metrics access to perform accurate layout calculations and line wrapping.

Why does my text layout calculation trigger DOM reflow during rendering?▼

Text layout calculations trigger DOM reflow when relying on DOM elements for measurement. Using DOM-free prepare and layout APIs prevents reflow by computing text height and line wrapping without attaching elements to the document.

Related Skills

Explore More Software Engineering Skills→
GuiGPaPGuiGPaP
1

pretext

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

Community
Intermediate
akillnessakillness
40

pretext

Measure multiline text height and line layout without DOM reflow.

Community
Intermediate
PTKDrakePTKDrake
1

pretext

Measure text and calculate layout without DOM reflow using canvas arithmetic.

Community
Advanced
cxnaivecxnaive

pretext

Measure and lay out multiline text on canvas without DOM reflows.

Community
Advanced