你是否曾为网页中一段文字的自动换行、高度计算而头疼？传统方案依赖 getBoundingClientRect 或 offsetHeight，每次调用都会强制触发浏览器重排（reflow），在复杂页面或高频渲染场景下直接拖垮性能。Pretext 正是为此而生——它不操作 DOM，不触发重排，仅用 TypeScript 就实现了媲美浏览器原生字体引擎的精准文本测量与多行布局，支持中文、阿拉伯文、梵文、emoji 等所有 Unicode 语言，且速度提升数倍。
核心功能
- 零 DOM 干预的纯计算式文本测量：无需挂载元素、不触发重排重绘，彻底规避浏览器最昂贵的布局开销
- 全语言兼容排版：基于 Canvas 字体度量 + Unicode 文本分段算法，准确处理双向文本（RTL）、连字（ligature）、换行断字（line breaking）、空格折叠等复杂规则
- 两阶段高性能架构：
prepare()一次性预处理文本（归一化、分词、缓存字宽），layout()则纯靠算术快速响应不同宽度下的行数、高度、截断位置 - 多端统一渲染支持：输出可直接用于 DOM 元素样式、Canvas 绘图、SVG
<text>布局，未来还将支持 Node.js 服务端预渲染 - 细粒度控制能力：支持自定义字体族、字号、行高、最大行数、省略号策略、字符间距等，满足 UI 框架与设计系统深度集成需求
- 轻量无依赖：仅 8KB（gzip 后），TypeScript 编写，提供完整类型定义，开箱即用，与 React/Vue/Svelte 等任意前端生态无缝协作
适合哪些人用
前端工程师、UI 组件库开发者、富文本编辑器作者、数据可视化工程师，以及所有需要动态计算文本高度却苦于性能瓶颈的 Web 开发者。尤其适合以下场景：消息气泡自动撑开、卡片标题多行截断、表格列宽自适应、弹窗内容高度预估、Canvas 图表中的动态标签定位、SSR/SSG 中服务端文本尺寸推导等。
快速上手
安装非常简单：
npm install @chenglou/pretext
几行代码即可完成精准测量：
import { prepare, layout } from '@chenglou/pretext';
const prepared = prepare('春日加载中… 🌸', '16px PingFang SC, system-ui');
const result = layout(prepared, 320, 3); // 在 320px 宽度内最多显示 3 行
console.log(result.height, result.lineCount, result.truncated);
官方提供多个在线 Demo：访问 chenglou.me/pretext 即可实时体验中英文混排、RTL 文本、emoji 渲染等效果；更多实战案例见 pretext-demos 项目。
项目信息
38.9k
Stars
2.1k
Forks
TypeScript
MIT
TypeScript 编写｜GitHub Star 38936 颗｜MIT 开源协议｜GitHub 项目地址
这是全球范围内备受瞩目的高性能文本底层库，已被多家知名开源 UI 框架评估集成。虽托管于 GitHub，但其对中文、日文、韩文及阿拉伯语等东亚与中东语言的深度支持，充分体现了国际化开源社区对中国开发者实际需求的敏锐响应。
如果你还在用“创建隐藏 div → 强制 reflow → 读取 offsetHeight”这种过时方案，Pretext 就是你该立刻引入的现代文本基础设施。
