无需触碰 DOM 的文本测量库
Pretext 是一个纯 TypeScript 文本排版库，绕过浏览器的 layout reflow，用纯数学计算文本高度和布局。速度比 DOM 测量快 300-600 倍，支持多语言、emoji、双向文本，专为 Canvas / SVG / WebGL 时代而生。
“文本排版和测量，一直是解锁更有趣 UI 的最后一个大瓶颈——在 AI 时代尤其如此。”
安装与使用
import { prepare, layout } from '@chenglou/pretext';
// 第一步：一次性分析字体（耗时 1-5ms，只跑一次）
const prepared = await prepare('Hello, 世界 🌍', '16px Inter');
// 第二步：按容器宽度计算高度（耗时 0.0002ms，随时调用）
const { height, lineCount } = layout(prepared, 300);
console.log(height); // 精确的像素高度
console.log(lineCount); // 行数
Pretext 同时支持 ESM 和 CJS，可在浏览器、Node.js 和 Web Worker 中使用。
官方演示
查看全部 →Accordion
↗展开/折叠动画，Pretext 实时计算文本高度，无 DOM 测量
Editorial Engine
↗动画球体 + Pretext 驱动的实时文本重排 + 引文多栏流动，全程零 DOM 测量
Dynamic Layout
↗Pretext 的障碍物感知文本路由，文字绕过任意形状 60fps 连续流动
Masonry
↗文本卡片瀑布流，高度由 Pretext 预测而非 DOM 读取
Justification Comparison
↗CSS 对齐 vs 贪婪断字 vs Knuth-Plass 段落排版三方对比
Rich Text
↗内联代码、链接、芯片等富文本元素与 Pretext 的精确混排
Variable Typographic ASCII
↗粒子驱动的 ASCII 艺术，比例测量字形对比等宽版本
Bubbles
↗紧凑多行消息气泡，Pretext 自动计算最优宽度减少空间浪费
社区创意 Showcase
X / Twitter 上病毒式传播的社区作品，展示 Pretext 解锁的新 UI 可能性
Web 又变得有趣起来了
@EsotericCofe"Web 终于又变得有趣起来了。"
发光小龙玩得很开心
@Riyvir"这只发光小龙因为 Pretext 高兴坏了。"
人生中最神奇的时刻
@reathchris"我正活在人生中最神奇的时刻。"
终于能发布我梦想中的文本排版
@rauchg"我终于能把梦想中的文本排版做出来了。"
流体界面太强了
@vamsibatchuk"这太绝了，流体界面万岁。"
你的物理课本再也不无聊了
@stevibe"你的物理课本再也不无聊了。"
离谱的水波纹效果
@dushankas"太离谱了。"
来玩 Pretext Breaker
@singular_prism"来吧，玩玩 Pretext Breaker 🎮"
为什么需要 Pretext？
每次调用 getBoundingClientRect() 或 offsetHeight，浏览器必须暂停所有 JavaScript 执行，重新计算整个页面的几何结构，才能返回一个数字。这是前端性能中最昂贵的操作之一。对于包含 500 个文本块的页面，DOM 测量需要 15-30ms 并触发 500 次 layout reflow；而 Pretext 完成同样的任务只需 0.05ms，零 reflow。
传统方式
创建不可见 DOM 元素 → 设置 CSS 属性 → 插入文档 → 调用 getBoundingClientRect() → 删除元素。每次测量都强制触发完整的页面 layout reflow，500 个文本块就是 500 次 reflow。
Pretext 方式
prepare() 一次性用 Canvas measureText API 分析字体数据并缓存，layout() 之后全部是纯算术计算。不触碰 DOM，不触发 reflow，可在任何时机调用——包括 Web Worker 和服务端。
虚拟滚动
防止 Layout Shift
Canvas / WebGL 渲染
Masonry 瀑布流
障碍物感知排版
SVG / 服务端渲染
工作原理
Pretext 采用两阶段设计，将昂贵的测量与廉价的计算彻底分离
prepare() — 一次性字体分析
Pretext 首先对文本进行 CSS white-space 规范化，再用浏览器内置的 Intl.Segmenter 进行 Unicode 分词——正确处理 CJK 逐字换行、无空格泰语、阿拉伯 RTL 脚本。分词后，Canvas measureText API 测量每个字符段的宽度并缓存。整个 prepare() 阶段耗时 1-5ms，只执行一次。
layout() — 纯算术计算
有了缓存的字体度量数据，每次 Pretext 的 layout() 调用都只是纯数学运算：遍历缓存的字符段宽度，按 maxWidth 决定换行位置，计算出行数和总高度。单次耗时约 0.0002ms，可在每个动画帧中高频调用而不影响性能。
Safari emoji 校准
Safari 的 Canvas 报告的 emoji 宽度与实际 DOM 渲染存在差异。Pretext 在每种字体首次遇到 emoji 时，执行一次隐藏 DOM 测量来建立校正系数并缓存——此后所有 emoji 测量都使用这个校正值，确保跨浏览器像素级精度。
验证机制
Pretext 内置验证逻辑：在调试模式下，可将纯算术计算结果与实际 DOM 渲染高度进行并排对比，确保测量结果与浏览器渲染严格一致。这也是 Pretext 的准确性在代码中有据可查的来源。
支持的文本类型
CJK 中日韩混排
Emoji 完整支持
双向文本 BiDi
无空格语言
软连字符
富文本内联元素
与其他方案的对比
Pretext 不是唯一的文本测量方案，但在速度、精度、语言支持的综合表现上最为均衡
DOM 测量
Canvas.measureText 原始调用
HarfBuzz (WASM)
Pretext
关于作者
Cheng Lou
前 React 核心团队成员，ReasonML（现 Melange）联合创建者，现任 Midjourney 前端工程师。Pretext 的开发过程本身也颇具意思：他向 Claude Code 和 Codex 等 AI 编程助手提供浏览器渲染基准，让 AI 在不同关键容器宽度下反复测试并优化实现，历时数周。在 Midjourney 内部验证了 Pretext 的工业级可靠性后，将其开源。
社区反响
2026 年 3 月发布后，在前端社区迅速引发讨论
“文本排版和测量，一直是解锁更有趣 UI 的最后一个大瓶颈——在 AI 时代尤其如此。”
“Pretext 解决了长期以来非 DOM 环境中文本高度计算无解的难题。”
“这不是炫技 demo，而是替换 CSS 基础设施的底层工具——UI 范式的真正转移。”
已知限制
Pretext 不是银弹，使用前应了解这些边界条件