3周46k Star，这个15KB的文本库让创意排版成为可能

你见过那种”文字绕着图片走”的效果吗？就像杂志排版里，文字紧紧贴着不规则图形流动，而不是老老实实卡在矩形框里。

最近 GitHub 上有个库悄悄火了起来，3 周狂揽 46k star——不是 AI 模型，不是框架，就是一个 15KB 的文本测量库，叫 Pretext。作者 Cheng Lou 来头不小：React 核心成员、ReasonML 作者、Midjourney 早期工程师。

一个库，解决一个”隐形性能杀手”

前端开发里有个老问题——想知道一段文字渲染出来有多高、多宽，得靠 getBoundingClientRect()。这一调，浏览器就被迫”重排”一次。循环里调用？主线程直接卡死。

Pretext 的思路很巧妙：用 Canvas 做文本测量，返回精确的换行位置、行宽、每个字形坐标——全程不触发任何 DOM reflow。你拿到数字，自己用 Canvas / SVG / WebGL 画出来。

听着像玄学优化？但就是这一个 API 思路，解锁了一整类创意效果。

文字绕着图片跑、ASCII 艺术、打字成粒子

Pretext 最出圈的应用是”文字环绕任意形状”：拖动一张图片，周围的文字实时跟着走。以前要实现这个，得在每一帧重新读 DOM 尺寸；现在直接算好坐标，画就完了。

社区还玩出了更多花样：

• ASCII 艺术——用真实英文单词替代传统字符，拼出 LOGO 或图案，可拖拽、可动画
• 打字粒子效果——整段文字点击后炸成每个字独立的粒子，有物理模拟
• 字体流动杂志排版——多栏文字绕着圆形、弧形流到底
• 文字构成的游戏关卡——砖块是精确测量过的单词，碰撞检测直接用行宽数据

上手有多简单？

一个函数调用的事情：

import { prepare, layout } from "https://esm.sh/@chenglou/pretext@0.0.6";

const prepared = prepare(text, "16px Inter");
const { height, lineCount } = layout(prepared, 320, 20);

给一段文字 + 字体 + 宽度，返回精确的换行方案。然后你自己画。

适合谁用？

做数据可视化、互动页面、数字艺术作品的设计师和开发者——这类效果用 CSS 根本做不到。纯前端 CRUD 页面可以跳过，但如果你的项目需要”有艺术感的动态文字”，Pretext 值得进工具箱。

作者自己说：这个库”不是水管工，是创意原语”。意思是它不只是性能优化工具，而是解锁了一类新的视觉表达方式。

GitHub：https://github.com/chenglou/pretext
Skill 接入版（Claude Code 专用）：https://github.com/NousResearch/hermes-agent/tree/main/skills/creative/pretext

GitHub: https://github.com/NousResearch/hermes-agent/tree/main/skills/creative/pretext