Pretext 是什么
面向前端排版与测量的工具库：把「测宽 + 断行 + 高度」从 DOM 布局里抽出来，用与浏览器一致的字体测量结果做纯数据层面的布局。
为什么需要它
常见做法是用隐藏节点或 getBoundingClientRect、offsetHeight 等 API 测量文字块高度。这些读取往往会触发布局（reflow），在列表、动画或频繁更新场景下成本很高。
Pretext 在内部使用 Canvas 的文本测量能力与自身的断行逻辑，先把字符串整理成可复用的「已准备」结构，再在任意宽度、行高下用纯算术求高度或逐行结果——无需把文本挂到 DOM 上。
核心流程
- prepare(text, font)：规范化空白、分段、测量各段宽度，返回不透明句柄（一次性较重）。
- layout(prepared, maxWidth, lineHeight)：在给定宽度和行高下计算总行数与总高度（热路径，很轻）。
若需要每一行的字符串（例如画在 Canvas 上），使用 prepareWithSegments 配合 layoutWithLines；若每一行可用宽度不同（例如绕开浮层），使用 layoutNextLine 迭代。
典型场景
- 聊天、信息流虚拟列表：先算出行高再渲染，减少跳动与错误缓存。
- Canvas / WebGL 文字：拿到每行文本与宽度后直接绘制。
- 设计稿或 CI 里校验「按钮文案是否折行」而无需启动完整浏览器布局。
延伸阅读
安装：npm install @chenglou/pretext。官方 README 与源码见 GitHub 仓库；亦可访问作者提供的在线演示（与本站独立）。
社区资源 Cactusinhand/pretext-builder：快速上手、布局模式对照表、以及 document.fonts.ready 等实践说明（第三方整理，非 Pretext 官方仓库）。