Pretext：用 15KB 零依赖库，解锁创意文本排版的前端新可能

文本排版的前端痛点

想做一个「文字环绕图片」的效果，一调用 getBoundingClientRect，浏览器 reflow 直接卡到 30fps。想做多行文本 shrink-wrap 宽度计算，最后只能暴力塞 DOM、读一遍高度。

Pretext 就是来解决这个问题的。

它是什么

一个 15KB zero-dependency 的 TypeScript 库，用 canvas 测量文本的宽度、行数、每行高度——不需要任何 DOM 操作，纯数学计算，60fps 稳如狗。

核心 API 就两步：

• prepare()：文本 + 字体喂进去，返回测量对象
• layout()：给定容器宽度和行高，返回行数、总高度

没有初始化，没有虚拟 DOM，就是一个函数，给你结果。

创意场景才是它的主场

Pretext 的作者 Cheng Lou（React 核心成员）设计这个库的初衷，是做创意编程的底层原语，不是普通布局工具。

• 文字环绕移动物体：60fps 实时 reflow，鼠标拖个球，文字自动绕开
• ASCII 艺术 + 真实文本：真实英文段落做 ASCII 输出，不是 monospace 像素拼图
• 文字粒子爆炸：拿到每个 grapheme 坐标，粒子特效随便炸
• 文字 Tetris：游戏场地是真实字母，不是砖块

社区里的 demo 经常被发到 X，单文件 HTML，拖进浏览器就能跑。

实用细节

即使只用来解决具体前端问题，Pretext 也值得装：

• 防止 layout shift：远程文本加载前算好高度，避免 CLS 惩罚
• 多语言文本测量：内置 Intl.Segmenter，阿拉伯语、emoji、CJK 全支持

结尾

Pretext 不是一个「每天都会用到」的库，但它是那种——当你需要的时候，会发现原来有人已经帮你解决了。15KB，零依赖，单 HTML 文件就能跑出惊艳效果。

GitHub: https://github.com/chenglou/pretext

—

**GitHub:** https://github.com/chenglou/pretext