Skip to main content
PROMPT SPACE
P
FreeUniversal

pretext-layout

High-performance browser-based text layout and measurement for virtualization, canvas, and layout-heavy applications.

skill install https://www.promptspace.in/skills/pretext-layout

Efficient Text Measurement & Layout

The Pretext Layout skill enables AI agents to integrate and debug high-performance multiline text measurement using the @chenglou/pretext library. It solves the common frontend performance bottleneck of "layout thrashing" by replacing slow DOM-based height probes with a fast, browser-native API approach.

What it does

This skill provides developers with a structured methodology for measuring text width and height without repeated DOM reflows. It supports high-level block height calculation for virtualization and low-level line-by-line geometry for custom Canvas or SVG rendering workflows. It handles complex edge cases including web fonts, emoji, and bidirectional text.

Supported Workflows

  • Virtualization: Pre-measure list item heights for smooth scroll anchoring.
  • Custom Rendering: Extract per-line ranges for manual drawing in Canvas or SVG.
  • Responsive Design: Rapidly recalculate layouts during window resize events on the hot path.
  • Debugging: Verify layout accuracy against real-world CSS styles and font loading states.

Why use this skill?

While a general AI can write basic JavaScript, this skill understands the specific lifecycle of the Pretext library—such as partitioning the expensive "prepare" phase from the lightweight "layout" phase. It ensures your agent correctly manages browser-only runtime constraints, font loading promises, and locale-specific white-space behaviors to prevent layout shifts and flickering.

Use cases

  • Measure text dimensions without triggering DOM layout thrashing
  • Calculate multiline text height for smooth dynamic height virtuallization ops
  • Render complex text layouts on HTML canvas with high-performance metrics
  • Audit text overflow and wrapping logic for layout-heavy applications

Example

Prompt

"Use Pretext to calculate the height of this 500-word string at 320px width for a virtual list."

Output

Prepared handle cached for "Hello World".
Height: 48px at 200px width.
Line 1: "Hello " (0-6)
Line 2: "World" (6-11)
Performance: <0.1ms layout time.
Verified against document.fonts.ready status.

Known limitations

• Requires a browser environment or OffscreenCanvas; no native Node.js support. • Does not support complex CSS properties like 'float', 'flex', or 'letter-spacing'.

Frequently asked questions

This skill helps AI agents implement high-performance text measurement using the @chenglou/pretext library, solving "layout thrashing" issues in virtualization and canvas-based applications by avoiding slow DOM-based probes.
pretext-layout — AI Agent Skill | PromptSpace