【GitHub项目推荐--Pretext：浏览器中的“离线”文本测量与布局引擎】

最新推荐文章于 2026-06-15 12:43:58 发布

原创最新推荐文章于 2026-06-15 12:43:58 发布 · 461 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#github

GitHub项目推荐专栏收录该内容

1390 篇文章

订阅专栏

该文章已生成可运行项目，

简介

Pretext 是一个纯 JavaScript/TypeScript 开发的高性能文本测量与布局库。它解决了 Web 开发中一个长期存在的痛点：在不需要将文本实际插入 DOM 的情况下，精准计算多行文本的高度、行数和换行位置。

传统的 Web 文本布局依赖浏览器的布局引擎（Reflow），通过 getBoundingClientRect()或 offsetHeight获取尺寸，这不仅会触发昂贵的重排操作，还必须在 DOM 渲染后才能进行。Pretext 通过实现自己的文本测量逻辑，利用 Canvas 的 measureText作为“真相源”，将文本测量从“渲染后”提前到“渲染前”，实现了纯计算级的文本布局预测。这对于虚拟列表、Canvas 渲染、服务端渲染（SSR）和 AI 驱动的 UI 生成器至关重要。

主要功能

零 DOM 依赖的文本测量：核心功能是 prepare+ layout。只需提供文本内容、字体样式和容器宽度，即可返回 height和 lineCount，全程不接触 DOM，不触发浏览器重排。
多语言与复杂文本支持：原生支持混合双向文本（Bidi，如阿拉伯语+英语）、emoji 表情、以及各种复杂脚本（如中文、日文、阿拉伯文），解决了 Canvas 原生换行对复杂语言支持差的问题。
多后端渲染支持：虽然核心是测量，但其输出的布局数据（行、位置）可直接用于 DOM、Canvas 2D、SVG 甚至未来的 WebGL 和 服务端（Node.js） 渲染。
高性能缓存机制：prepare阶段会缓存文本段（Segment）的宽度测量结果。在频繁调用的场景（如窗口缩放、虚拟列表滚动）中，只需调用极快的 layout函数进行算术计算，无需重复测量字符宽度。

安装与配置

环境要求

运行时：现代浏览器（支持 Canvas API）或 Node.js 环境（需配置 Canvas 环境）。
包管理器：支持 npm、yarn、pnpm、bun。

安装步骤

安装包：
```
npm install @chenglou/pretext
```

导入使用（ES Module）：

import { prepare, layout } from '@chenglou/pretext';

字体配置（关键）：

Pretext 依赖 Canvas 测量，因此必须确保 CSS 中定义的字体与传入的 font字符串完全一致。例如，如果 CSS 中使用了 font-family: Inter, sans-serif;，那么传给 prepare的字体参数必须是 '16px Inter, sans-serif'，否则测量结果会不准确。

如何使用

Pretext 的使用遵循“预计算 + 布局”的两步模式，旨在将昂贵的操作（测量）与频繁的操作（布局）分离。

预计算（Prepare）：在文本或样式不变时，提前调用 prepare函数。它会处理空白符规范化、文本分段（Segment）和字形测量，并返回一个不可变的 PreparedText对象。
布局计算（Layout）：当容器尺寸（maxWidth）或行高（lineHeight）变化时（如窗口缩放），调用 layout函数，传入预计算好的对象和新的参数。这是一个纯数学计算过程，速度极快（微秒级）。
高级布局：对于需要自定义渲染（如 Canvas 逐行绘制、环绕图片排版），可以使用 prepareWithSegments配合 layoutWithLines或 layoutNextLine，获取每一行文本的具体内容和位置坐标。