屏幕上的文字可以计算了

Gary Yang2026 年 3 月

从昨天开始一直到今早，X 上很多人都在说一个叫做 Pretext 的项目。

刚过2000年的时候，我做过几年前端网页设计，写过 html + css + javascript，所以就对这个消息格外留意。但是，我的技术能力不能判断这个项目的价值和意义处在何种水平，又不想只看 X 上的人兴高采烈，于是，就把 Github 的链接和作者 Cheng Lou 的 X 给了 Claude，让它给我写篇文章。

顺便提醒了 Claude 一句：写成可以发表在“纽约时报- 科技版”的那种。

它写了。也正如所料，Pretext 和 Cheng Lou 解决了一个“古老的难题”。

他用一个月，解开了困扰网页开发者三十年的死结

一个 15KB 的小程序，如何让屏幕上的文字第一次变得"可计算"

2026 年 3 月 28 日深夜，Cheng Lou 在 X 上发了一条帖子。开头是一句不像工程师会说的话：

My dear front-end developers: I have crawled through depths of hell to bring you this.

（亲爱的前端开发者们：我从地狱深处爬回来，给你们带了样东西。）

这个东西叫 Pretext。一个纯 TypeScript 写的文本测量库，体积只有 15KB，零依赖。它做的事情听上去不起眼：在完全不触碰浏览器渲染引擎的情况下，精确计算一段文字在屏幕上占多高、在哪里换行。

48 小时内，GitHub 上涌入了超过 6800 颗星。Simon Willison（Django 联合创始人）写了专题介绍。前端社区在 Hacker News 上以"The future of text layout is not CSS"为题展开了激烈讨论。一位从透明 GIF 和表格布局时代就开始做网页的设计师在 Threads 上说："This changes the internet at its core."

为什么一个"测量文字高度"的小工具能引发这么大的反响？

要理解这件事，需要先理解一个大多数人从未注意过的事实：在过去三十年里，网页上的文字从来不属于开发者。

浏览器的独裁

想象你是一家杂志社的排版设计师。你拿到一篇稿件，想知道它放进某一栏之后会占多高，以便决定图片和广告的位置。在印刷时代，设计师可以用尺子量铅字。在桌面出版时代，InDesign 的排版引擎会立刻告诉你精确的行数。

但在网页上，你无法提前知道。

从 1991 年 Tim Berners-Lee 发布第一个网页开始，浏览器就垄断了一切关于文字的计算——在哪里换行、每行多高、阿拉伯文从右到左怎么排、emoji 组合字符怎么处理。这一切都发生在浏览器内部一个叫做"布局引擎"的黑盒里。开发者唯一的办法是：先把文字塞进页面，让浏览器渲染一遍，然后再回头问浏览器："这段文字有多高？"

这个"先画再量"的过程叫做 layout reflow——布局回流。它是浏览器中最昂贵的操作之一。每问一次，浏览器就得重新计算整个页面的布局。在普通网站上，偶尔问一两次无伤大雅。但当你需要频繁测量——比如一个有几万条消息的聊天界面，比如一个实时流式输出的 AI 对话窗口，比如一个需要动态重排的多栏杂志版面——代价就变得不可承受。

用一个不太精确的类比：这相当于每次想知道一段文字的长度，都得把整本书重新排一遍。

一个做了十年"基础设施"的人

Cheng Lou 不是一个追逐热点的开发者。翻看他的 GitHub 主页，你会看到一条异常清晰的职业线索：他反复做的事情，是找到那些大家已经习以为常的"基本前提"，然后质疑它——不是用言辞，而是用代码。

十年前，React 社区里每个人都在用 CSS transition 做动画：先指定起点和终点，再指定一条贝塞尔曲线和一个持续时间。Cheng Lou 问了一个问题：为什么动画需要"持续时间"？他写了 react-motion，用物理弹簧模型取代了硬编码的时间曲线。不需要再设定"300毫秒缓入缓出"，只需要设定弹簧的刚度和阻尼，然后让物理定律接管。中途打断、链式组合、同时叠加——一切自然发生。这个库获得了超过 21,000 颗 GitHub 星，至今仍被广泛使用。

在 Facebook，他主导了 ReasonML 的开发——一种基于 OCaml 的函数式语言，驱动着 messenger.com 的前端。他在 2016 年 ReactEurope 大会上的演讲"On the Spectrum of Abstraction"至今仍被引用，核心观点是：减少表达力，有时反而能获得更大的能力。 不可变性之所以能让"时间旅行调试"成为可能，恰恰是因为它做得更少。

后来他去了 Midjourney，负责整个前端架构。一个服务数百万用户的 AI 图像生成平台，全职前端工程师大约只有五个人，用的是 Bun 运行时、原生 React、不依赖任何框架。每一次用户生成一张图，界面上的布局都是动态的、不可预测的——文字环绕图片、多栏流式排列、实时响应窗口变化。

正是在这里，他撞上了那堵三十年的墙。

一道算术题

Pretext 的核心思路说出来几乎令人难以置信：它把一个一直被当作"渲染问题"的东西，变成了一道纯粹的算术题。

整个过程分两步。

第一步叫 prepare()：把一段文字拆解成"片段"——大致是一个个词，但它能正确处理中文日文韩文的逐字断行、阿拉伯文的从右到左书写、emoji 的组合字符、软连字符——然后用一个离屏的 Canvas 一次性测量每个片段的宽度，缓存起来。这一步仍然借用了浏览器的字体引擎（字体度量本身必须来自浏览器），但关键区别是：它不进入布局树，不触发回流。

第二步叫 layout()：纯数学运算。给定一个容器宽度和行高，用缓存的字符度量直接算出：这段文字会被分成几行、每行在哪里断开、总高度是多少。不碰浏览器。不碰 DOM。不触发任何重排。

根据基准测试，prepare() 对 500 段文字的初始测量大约需要 19 毫秒。之后每次调用 layout() 只需要约 0.09 毫秒——相比传统的 DOM 测量方式快了三百到六百倍。Cheng Lou 自己说这个比较"并不公平"，因为 prepare() 的初始成本被忽略了，而且大多数普通网站根本不需要这种优化。但对于那些需要在一帧之内完成数百次文本测量的场景——聊天界面、虚拟滚动列表、实时排版引擎、AI 流式输出——这个差距决定了界面是丝滑还是卡顿。

人与 AI 的共同创作

这个项目最值得科技行业关注的，或许不是技术本身，而是它的开发方式。

文本排版的难度不在于算法思路，而在于边缘情况的数量。不同语言有不同的断行规则：英文在空格处断行，中文几乎可以在任意两个字之间断行，泰文没有空格也没有明显的词边界，阿拉伯文从右到左书写且字形会因为上下文而变化。还有 emoji 的组合序列——一个"家庭"emoji 实际上是多个 Unicode 码点通过零宽连接符拼在一起的。

要做到所有这些情况下的测量结果与浏览器 100% 一致，必须有一个系统化的验证方法。Cheng Lou 的做法是：让 AI（Claude Code 和 Codex）在各种容器宽度下反复测量浏览器的真实渲染结果，以此作为"标准答案"，然后让 AI 持续迭代代码直到精度收敛。 这个循环跑了好几周。

测试语料库同样令人印象深刻。早期的测试用《了不起的盖茨比》全文在多个浏览器中验证。后来扩展到了泰文、中文、韩文、日文、阿拉伯文等多种语言的长篇公共领域文献。

这不是"AI 写代码人类不过问"的 vibe coding。这是一位拥有十年渲染引擎经验的工程师，精确定义了问题边界和验证标准，然后用 AI 作为一台不知疲倦的测试机器，去碾过人类无法穷举的边缘情况。Cheng Lou 在推特上分享了他在等待 AI 验证循环时的照片——人坐在屏幕前，AI 在各种宽度下自动运行浏览器测试。他说做完 Pretext 那个月瘦了两公斤。

它不能做什么

值得泼一点冷水。

Pretext 不是 CSS 的替代品。它不处理颜色、间距、排版样式——这些仍然是 CSS 的工作。它甚至不做文字渲染；它只告诉你文字"会占多大地方"。它目前不支持富文本的混合排版（比如一段话里同时有粗体、斜体、不同字号），不过 prepareWithSegments API 已经为这种场景提供了入口。

Demo 页面在发布初期也存在问题：桌面端文字被截断，移动端在部分设备上完全无法使用。对于一个刚发布几天的开源项目，这并不意外，但也说明它离"生产就绪"还有距离。

正如 cloudmagazin 的评测所言：Pretext 解决的是一个真实但特定的问题，绝大多数网站完全不需要它。 它的价值在于那些被传统浏览器布局模型卡住的高性能场景——而这些场景正在因为 AI 的普及而迅速增多。

想象力的释放

打开 Pretext 的 demo 页面，你能看到几个此前在纯 Web 技术中几乎不可能实现的效果：

手风琴折叠面板——展开收起时高度变化是精确预计算的，不需要先渲染再量高度；聊天气泡——每条消息的气泡宽度严丝合缝地贴合文字，没有多余空白；杂志式多栏排版引擎——文字绕开图片实时回流，拖动窗口大小时内容像水一样重新分配到各栏，整个过程零 DOM 测量。

有人用它做了一条跟随鼠标的龙，龙在一整页文字中穿行，文字像水流一样从龙身两侧分开，龙过之后又合拢。每秒六十帧。零回流。

这些 demo 本身不是重点。重点是它们指向的可能性：一旦文字从"浏览器黑盒里的副作用"变成了"可编程、可预测、可在任何渲染后端复用的数据"，一整类从前"想都不敢想"的界面就变得可行了。

AI 生成式界面正在让动态文本从边缘场景变成核心场景。LLM 的回复是流式的、长度不可预测的、往往需要在多种视觉容器中同时呈现。Pretext 给这个新世界补上了缺失的那块基础拼图。

一种做工程的方式

Cheng Lou 的 GitHub 上有一个早期项目叫 cards，描述只有一句话："Prototyping the UI of 2030"——为 2030 年的界面做原型。那是好几年前的事了。