Measure and lay out text without triggering DOM reflow.
npx skills add https://github.com/OpenCoven/coven-cave --skill pretext-opencoven
Please help me install this Agent Skill. Skill: pretext Source: https://github.com/OpenCoven/coven-cave/tree/main/marketplace/plugins/pretext/skills/pretext Command: npx skills add https://github.com/OpenCoven/coven-cave --skill pretext-opencoven
This Skill provides an efficient method to measure and lay out text without triggering DOM reflow, which is crucial for performance in web applications.
Use the pretext skill to prepare and layout text with a given font and max width: pretext prepare 'Text to measure' '16px Arial' | pretext layout --max-width 100.
High-intent search queries and answers about installing and using this skill.
Measuring text layout without DOM reflow requires using Intl.Segmenter and Canvas 2D. This technique calculates text dimensions independently of the browser DOM to prevent performance degradation.
You can calculate line count and height for virtualized lists by applying manual text layout techniques. This ensures accurate rendering measurements for sticky headers and autosize rows without triggering browser reflows.
To prevent layout shifts for late-loading text, you must reserve space accurately beforehand. This text measurement method calculates the required dimensions without DOM interaction, allowing you to allocate space before the text renders.
Yes, performing manual text layout and measuring text without DOM reflow requires Intl.Segmenter and Canvas 2D. These browser APIs provide the necessary text segmentation and rendering context for accurate calculations.
You can validate label overflow without a headless browser by using this manual text measurement approach. It calculates text dimensions directly to check if labels exceed their boundaries without rendering them in a DOM.
The best way to handle rich inline flow with chips, mentions, and code-spans is using manual text layout. This technique measures complex inline elements without DOM reflow to maintain performance optimization.
akillnessMeasure multiline text height and line layout without DOM reflow.
MCERQUAProvides JavaScript/TypeScript text measurement and layout without DOM or CSS reliance.
PTKDrakeMeasure text and calculate layout without DOM reflow using canvas arithmetic.
cxnaiveMeasure and lay out multiline text on canvas without DOM reflows.
