Pretext：无需访问DOM即可快速计算文本高度
Simon Willison··作者 Simon Willison
关键信息
该库支持软连字符、表情符号和多语言脚本（如泰语、中文、阿拉伯语）等复杂文本特性。测试包括使用《了不起的盖茨比》全文及多种语言的公共领域文档进行验证。
资讯摘要
由程娄开发的 Pretext 是一个突破性的 JavaScript 库，可以在不接触 DOM 的情况下计算多行换行文本的高度——这是过去通过高成本渲染完成的任务。该库首先运行一个“准备”步骤，将文本分割成段落并使用离屏画布测量，然后缓存结果；之后，“布局”函数可快速估算在任意宽度下文本会占据多少行，从而实现实时调整。
演示展示了其在动态布局、折叠面板和紧致宽度文本适配中的应用——这些功能是 CSS 单独无法实现的。该项目还包含跨国际文本的全面测试，确保全球使用场景下的准确性。
资讯正文
<p><strong><a href="https://github.com/chenglou/pretext">Pretext</a></strong></p>
<p>由前 React 核心开发人员、<a href="https://github.com/chenglou/react-motion">react-motion</a> 动画库创始人 Cheng Lou 推出的令人兴奋的新浏览器库。</p>
<p>Pretext 解决了在不接触 DOM 的情况下计算一段折行文本高度的问题。通常的做法是渲染文本并测量其尺寸，但这非常耗时。Pretext 使用一系列巧妙技巧使这一过程快得多，从而让浏览器应用中实现各种全新的文本渲染效果成为可能。</p>
<p>这里有一个<a href="https://chenglou.me/pretext/dynamic-layout/">演示</a>，展示了这种技术可以实现的效果：</p>
<video loop="loop" poster="https://static.simonwillison.net/static/2026/pretex.jpg">
<source src="https://static.simonwillison.net/static/2026/pretex.mp4" type="video/mp4" />
</video>
<p>其工作原理的关键在于将计算分为两个步骤：先调用一个 <code>prepare()</code> 函数，然后多次调用 <code>layout()</code> 函数。</p>
<p><code>prepare()</code> 函数会将输入文本分割成段落（本质上是单词，但也能处理软连字符、非拉丁字符序列和表情符号等），并在离屏画布上测量这些段落，随后缓存结果。这一步虽然相对昂贵，但只执行一次。</p>
<p><code>layout()</code> 函数则可以模拟浏览器中的换行逻辑，确定在指定宽度下文本占据多少行，并计算整体高度。</p>
<p>我请 <a href="https://claude.ai/share/7859cbe1-1350-4341-bb40-6aa241d6a1fe">Claude</a> 帮我构建了一个<a href="https://tools.simonwillison.net/pretext-explainer">交互式工具</a>，基于 Pretext 的简化版本来帮助我直观理解其中的机制。</p>
<p>这项技术的测试方式尤其出色。早期的测试通过在多个浏览器中渲染《了不起的盖茨比》全文，验证估算的高度是否准确。后来又加入了 <a href="https://github.com/chenglou/pretext/tree/main/corpora">corpora/ 文件夹</a>，使用相同方法对泰语、中文、韩语、日语、阿拉伯语等多种语言的长篇公共领域文档进行了测试。</p>
来源与参考
收录于 2026-03-30