Pretext 是由 Cheng Lou 开发的 @chenglou/pretext 文本测量库,用纯数学方式计算精确文本尺寸,内部调用 CanvasRenderingContext2D.measureText,先分段测量并缓存,后续布局仅做算术运算,避免 DOM 回流。包提供 ESM 与子路径导出(核心与 ./rich-inline),sideEffects 为 false,支持摇树优化。
适用场景:渲染前预知文本尺寸(虚拟滚动、瀑布流、卡片高度估算);文字自适应容器(二分搜索最大字号);文字绕排障碍物;Canvas/SVG/WebGL 中精确测量;渲染富内联文本(提及、chip、代码片段);快速测量大量文本。不适用:CSS float/flex 已可处理、内容是 HTML 结构、手风琴高度、TanStack Virtual 高度估算(较脆弱)。
基本用法:安装 npm install @chenglou/pretext;核心 API 为 prepare(text, font, options) 与 layout(prepared, maxWidth, lineHeightPx)。prepare 参数文本在前、字体在后;每个文本与字体组合需各自 prepare。layout 的 lineHeight 必须为绝对像素。需要每行文本、可变宽度或几何数据时用 prepareWithSegments,配 layoutWithLines、layoutNextLine、layoutNextLineRange、measureLineStats、measureNaturalWidth 等;富内联用 @chenglou/pretext/rich-inline 的 prepareRichInline。
主要限制与注意:运行时需 CanvasRenderingContext2D.measureText 与 Intl.Segmenter(现代浏览器 2021+ 与 OffscreenCanvas worker;Node 16+ 有 Intl.Segmenter 但无原生 Canvas 2D,node-canvas 精度不保证,服务端渲染尚未发布)。lineHeight 传乘数会静默产生错误高度;字体需先加载;system-ui 在 macOS 上不可靠;空字符串返回 { lineCount: 0, height: 0 };letterSpacing 为 CSS 像素数值;rich-inline 的参数顺序与核心不同;须测量实际渲染的字符串(如大写转换后再测量);不要用 Pretext 测量再用 CSS 换行。
性能:prepare 为 O(N),每种字体首次调用会测量字符宽度(约 1–5ms);layout 复用后每次约 0.0002ms。应作为渐进增强加载。高级用法可参考随包发布的 demos(accordion、bubbles、masonry、justification-comparison 等),克隆仓库后运行 bun start 查看。