闻乐 发自 凹非寺
量子位 | 公众号 QbitAI
新型文本布局库Pretext爆火开源，两天斩获12k星标
请问可以入职《预言家日报》吗？
哈利波特中的魔法报纸，已被开发者成功用前端技术复现。
该技术实现大段文本与喷火龙插画的实时动态环绕混排，效果流畅自然。
Bad Apple更延伸出文字影绘新形式，经典魅力历久弥新。
这一丝滑文本渲染效果源自近日爆火的开源项目Pretext，专为AI时代设计的新型文本测量与布局库。
上线仅两天，项目即获12k星标。
Pretext彻底摒弃传统DOM测量机制，采用纯JavaScript/TypeScript编写，专注文本排版计算。
该库无需调用getBoundingClientRect或offsetHeight等触发页面重排的API，仅通过数学计算完成布局。
精准支持中文、英文、小语种及特殊符号处理，并适配Chrome、Safari、Firefox等浏览器的排版差异。
例如针对阿拉伯语标点合并规则、Emoji宽度差异等问题优化计算，结果可自由输出至DOM、Canvas或SVG。
核心开发者包括前React核心成员、ReasonML及Midjourney前端负责人ChengLou。
卓越性能表现
虚拟列表滚动优化
传统海量文本列表需频繁DOM测量易致卡顿，Pretext可预计算文本精确高度，实现滚动缩放时的超高流畅度虚拟列表效果。
自适应聊天气泡生成
无需DOM测量即可根据文本内容自动计算紧凑宽度，生成贴合文字的气泡样式，适用于微信等IM工具场景。
动态多栏杂志布局
文本在多列间智能流动，窗口尺寸变化时实时响应重排，支持动态排版需求。
智能文本环绕混排
人物动态移动时文本毫秒级自动避让重排，实现如魔法报纸般的交互效果。
技术原理：无DOM测量机制
传统方式瓶颈
常规方案需通过DOM调用getBoundingClientRect()等接口测量文本高度，每触发一次均导致浏览器暂停布局计算（即布局回流）。
处理500条评论时耗时可能超30毫秒，而浏览器每帧渲染预算仅16.67毫秒，极易造成卡顿。
双阶段处理流程
Pretext通过分阶段优化，将重计算集中一次处理。
第一阶段prepare()执行一次性预处理：文本分词后调用Canvas measureText()获取片段宽度数据并缓存，全程不触发布局。
第二阶段layout()为纯数学运算：基于缓存数据在给定容器宽度下计算换行结果，无需DOM读取或字符串操作。
处理500段文本时，prepare()耗时约17毫秒仅执行一次；layout()仅需0.10毫秒可频繁调用。
相比传统方案，速度提升达300-600倍。
该机制使Pretext能专注多语言细节适配与排版优化，同时支持输出至多种渲染环境。
项目接入简洁，通过npm安装：
npm install @chenglou/pretext
核心使用流程仅需两步：
import { prepare, layout } from “@chenglou/pretext”
先调用prepare()生成词宽数据句柄，再通过layout()传入容器宽度获得排版结果。
进阶场景如喷火龙文本环绕，可使用prepareWithSegments()配合layoutNextLine()逐行控制布局。
此外提供setLocale()切换区域语言及clearCache()管理缓存等辅助工具。
