2026年3月底，一个名为 Pretext 的开源项目在JavaScript社区引发了一场不小的震动。它的作者是 Cheng Lou —— 前端领域的传奇人物，React Motion 的创建者、ReasonML 的联合创造者、Facebook Messenger 前端的核心贡献者，目前就职于 Midjourney。Pretext 要解决的问题，听上去枯燥至极：浏览器里的文本排版。但正是这个看似"已解决"的基础设施级问题，成了卡死无数创新场景的最后一块瓶颈。
浏览器排版的天花板在哪里？
任何一个前端开发者都熟悉这个循环：把文本塞进 DOM，调用 getBoundingClientRect() 或 offsetHeight 拿到尺寸，然后调整布局。每一次这样的调用，浏览器都要执行一次完整的布局重排（Layout Reflow）—— 重新计算整个文档树中所有受影响元素的几何位置。这是浏览器渲染管线中最昂贵的操作，没有之一。
在500个文本块同时测量的场景下，每帧30ms以上的性能损失是常态。对于虚拟列表、响应式多栏布局、实时文本流动这类高频重排场景，DOM 测量几乎不可用。CSS Flexbox 和 Grid 解决了大部分静态布局问题，但一旦你需要"知道文本有多高"来做决策 —— 比如虚拟列表的高度预测、聊天气泡的收缩包裹、多栏文本的平衡断行 —— 你就只能回到 DOM 测量的老路。
这就是 Pretext 要消灭的东西。
两阶段架构：测量与布局彻底分离
Pretext 的核心设计极其简洁：将昂贵的文本测量和廉价的布局计算分为两个阶段。
阶段一：prepare() —— 文本首次出现时运行一次。执行文本规范化、区域感知分词、断行规则应用，并通过 Canvas 的 measureText() 直接查询浏览器字体引擎获取每个文本片段的宽度。整个过程返回一个不透明的 PreparedText 句柄，耗时约17-19ms（500段文本批次）。关键点是：这一步完全绕过了 DOM 布局引擎，Canvas 的 measureText() 只访问字体引擎，不触发重排。
阶段二：layout() —— 每次窗口缩放或宽度变化时运行。纯算术运算，基于缓存的宽度数据计算行数、高度和布局坐标。无 DOM 读取、无 Canvas 调用、无字符串分配。500段文本批次的耗时约0.09ms，比传统DOM交错方案快1500倍。
// 基本用法
import { prepare, layout } from '@chenglou/pretext'
const prepared = prepare('这是一段需要排版的中文文本', '16px Inter')
const { height, lineCount } = layout(prepared, containerWidth, lineHeight)
// 高级API：手动逐行排版（适用于Canvas/SVG/WebGL）
import { prepareWithSegments, layoutWithLines } from '@chenglou/pretext'
const p = prepareWithSegments('Hello, World!', '18px "Helvetica Neue"')
const { lines } = layoutWithLines(p, 320, 26)
for (let i = 0; i < lines.length; i++) {
ctx.fillText(lines[i].text, x, y + i * 26)
}
不只是"更快"：重新定义文本布局的可能性
性能提升是 Pretext 的表面价值。它真正的意义在于打开了之前被 DOM 测量锁死的可能性空间。
Pretext 官方演示站点列出了9个交互式 Demo，每一个都展示了传统 CSS 无法或极难实现的排版效果：
编辑引擎（Editorial Engine）：动画球体在多栏文本中实时移动，文字像水流一样环绕球体流动、重排，全程120fps零DOM测量。这就是杂志编辑版面级别的文本环绕效果，但完全动态化、可交互化。
动态障碍物排版（Dynamic Layout）：固定高度的编辑版面中，标题和文本在有障碍物的空间中智能排列，实现连续流动布局。文本自动感知障碍物边界，在不规则形状间找到最佳排版路径。
两端对齐对比（Justification Comparison）：并排展示CSS原生两端对齐、贪婪断字算法和Knuth-Plass段落排版算法的效果差异。Knuth-Plass是TeX使用的经典排版算法，能消除文本中的"河流"现象（垂直方向上的不合理空白对齐），但之前在浏览器中几乎无人实现。Pretext让它变得可行。
瀑布流遮挡剔除（Masonry）：数十万个高度各异的文本卡片虚拟列表，通过 Pretext 预测高度实现线性遍历和丝滑滚动，无需任何DOM测量。
可变字体ASCII艺术（Variable Typographic ASCII）：基于粒子的ASCII艺术，利用像素级字宽控制生成动态图案，对比等比例字体与等宽字体的显示效果。
工程细节：为真实世界而生
Pretext 不是实验室里的玩具。Cheng Lou 在 Midjourney 内部开发了这个库，并通过一种"AI友好的迭代方法"进行验证—— 用文本测量数据训练模型来优化库的准确性。这种将机器学习工程思维应用于Web基础设施问题的方式，本身就是一种值得关注的范式。
国际化支持覆盖了大多数真实场景：使用 Intl.Segmenter 进行区域感知的文本分割，区分五种断点类型（普通文本、可折叠空格、非断行粘合、零宽度断点、软连字符），专门处理了CJK（中日韩）字素分割和禁则处理、阿拉伯语无空格标点簇合并、双向文本元数据、Emoji宽度校正等边缘情况。
浏览器兼容性经过了严格验证。通过自动化准确性扫描对Chrome、Safari、Firefox进行验证，对比库预测结果与DOM基准真值。还维护了一个基于HarfBuzz的服务器端测量后端，用于无头环境中的100%单词求和准确性验证。测试语料库包括日文（羅生門、蜘蛛の糸）、中文（祝福、故鄉）、阿拉伯语、缅甸语等多种语言的真实文本。
整个库零第三方依赖，TypeScript编写，体积仅几KB。支持 DOM、Canvas、SVG 三种渲染目标，服务端渲染已在路线图上。
应用场景评价：展览交互、视觉设计与互动媒体
展览交互与数字艺术装置
Pretext 对展览交互领域的影响可能是最直接的。当代数字艺术装置和博物馆互动展陈大量使用文本作为叙事媒介，但传统的浏览器排版在处理动态、响应式、非标准布局时力不从心。
Pretext 的文本环绕能力（文字动态围绕移动对象流动）直接解决了展陈中"文字与视觉元素共舞"的需求。想象一个大型触摸屏装置，参观者的手势轨迹形成动态障碍物，文字实时在障碍物之间流动重排 —— 这种效果在 Pretext 之前要么不可能实现，要么需要昂贵的原生应用开发。现在一个Web技术栈就能搞定。
多栏动态排版也是展陈的刚需。展览空间的屏幕尺寸千差万别，从竖屏信息柱到超宽横幅投影，文本需要在各种宽高比下自动重排并保持视觉美感。Pretext 的 layout() 亚毫秒级响应意味着即使是实时交互场景（如参观者拖拽调整布局参数），文本也能即时跟随。
视觉设计与编辑排版
在视觉设计领域，Pretext 实现了一个长期以来的梦想：让Web排版追平印刷品质量。
Knuth-Plass段落排版算法的实现是关键突破。CSS的两端对齐（text-align: justify）使用简单的贪婪算法，经常产生明显的"河流"—— 垂直方向上不自然的空白通道。Knuth-Plass通过全局优化断点选择，消除了这一问题。在此之前，要在浏览器中实现Knuth-Plass几乎不可能，因为算法需要在排版前知道所有行的宽度信息，而传统DOM测量每次只能测一行。Pretext的缓存机制让全局优化成为可能。
对于在线杂志、电子书阅读器、品牌官网等追求印刷级排版的场景，Pretext 提供了从底层重新定义文本布局的能力。设计系统可以基于 Pretext 构建自己的排版引擎，实现品牌独有的文字流动规则、断行策略和视觉节奏。
互动媒体与创意编程
创意编程领域可能是 Pretext 最令人兴奋的应用方向。
Pretext 原生支持 Canvas 和 SVG 渲染目标，这意味着文本可以与 p5.js、Three.js、WebGL 等创意编码工具无缝集成。之前在 Canvas 中渲染多行文本是一件痛苦的事—— 没有自动换行、没有文字环绕、没有多栏排版，一切都得手动计算。Pretext 的 layoutWithLines() API 直接返回每一行的文本和坐标，让 Canvas 文本排版变得和 DOM 一样简单。
ASCII艺术演示展示了另一个维度：当文本的每一个字符宽度都可以精确控制时，文字本身就成了一种视觉媒介。结合粒子系统或生成式算法，可以创造出文字与图形无缝融合的动态视觉作品。
对于互动叙事、数据新闻、生成式设计等需要"文字作为视觉元素"的领域，Pretext 提供了前所未有的控制精度。
AI驱动的设计工具
Pretext 的"AI友好"属性值得特别关注。Cheng Lou 在Midjourney的工作经历直接影响了他对这个库的设计。Pretext 的布局逻辑是纯函数式的、可预测的、无副作用的 —— 这正是AI代理能够理解和操作的理想接口。
当AI需要生成或修改一个包含文本的UI布局时，传统DOM测量的不确定性（读写交错、异步重排、浏览器差异）是巨大的障碍。Pretext 消除了这些不确定性：给定相同的输入，layout() 永远返回相同的结果，在任何浏览器上都如此。这使得AI代理可以可靠地预测文本布局、验证设计是否溢出、甚至自动优化排版参数。
结合当前Figma开放画布给AI代理、Google Stitch推出AI设计助手等趋势，Pretext 可以成为AI设计工具链中的关键基础设施：AI代理在Pretext上计算布局，然后将结果渲染到任何目标（DOM、Canvas、Figma插件、PDF）。
局限性与挑战
Pretext 目前仍是一个聚焦的底层库，有其明确的边界。它不处理图片嵌入、颜色渲染或整体页面组合 —— 这些需要上层库基于Pretext构建。不支持垂直书写模式，不处理单次运行中不同字重的可变字体。在macOS上使用 system-ui 字体可能导致精度问题，建议使用具名字体。
作为一个新发布的开源项目（2026年3月底，GitHub上241次提交），其生态和工具链还在建设中。npm包名和安装方式的信息在不同来源中略有出入，社区最佳实践尚未形成。但对于一个解决如此底层问题的库来说，这些都是可以预期的早期状态。
写在最后
Pretext 的出现提醒了我们一个经常被忽视的事实：Web平台的基础设施仍有大量未被充分解决的硬问题。文本排版看似是CSS已经"管好了"的领域，实际上浏览器只是把复杂性藏在了黑盒里。当你需要突破黑盒的边界时，才发现天花板就在头顶。
Cheng Lou 用一种典型的一性原理思维处理了这个问题：不从CSS层面修补，而是回到文本测量的根本，用纯数学运算替代DOM交互。这种思路与他之前在React Motion（用物理弹簧替代CSS过渡）和ReasonML（用类型安全的函数式语言替代JavaScript的弱类型系统）中的工作一脉相承。
对于展览设计师、创意开发者、视觉排版工程师以及正在构建下一代AI设计工具的团队来说，Pretext 是一个值得关注的基础设施级项目。它可能不会立刻改变你的日常工作流，但它打开的可能性空间 —— 零DOM测量的动态文本排版 —— 将在未来的互动体验中变得越来越重要。
项目地址：github.com/chenglou/pretext ｜ 在线演示：chenglou.me/pretext
