开源推荐
morning
GitHub 热门项目：借口
摘要
GitHub项目：pretext 仓库地址：https://github。
the
layout
pretext
prepare
text
2026-05-10
1 阅读
GitHub Trending
GitHub项目：借口
仓库地址：https://github.com/ Chenglou/pretext
星级：46535 | 作者：城楼
项目描述：快速、准确、全面的文本测量和排版
===================================================
自述文件内容：
# 借口
用于多行文本测量和布局的纯 JavaScript/TypeScript 库。快速、准确并支持所有您甚至不知道的语言。允许渲染到 DOM、Canvas、SVG 以及很快的服务器端。
Pretext 回避了 DOM 测量的需要（例如 `getBoundingClientRect`、`offsetHeight`），这会触发布局重排，这是浏览器中最昂贵的操作之一。它实现了自己的文本测量逻辑，使用浏览器自己的字体引擎作为基本事实（非常适合人工智能的迭代方法）。
## 安装
````嘘
npm install @henglou/pretext
````
## 演示
克隆存储库，运行“bun install”，然后运行“bun start”，然后在浏览器中打开“/demos/index”。在 Windows 上，使用“bun run start:windows”。
或者，您也可以在 [henglou.me/pretext](https:// Chenglou.me/pretext/) 上观看他们的直播。更多内容请参见 [somnai-dreams.github.io/pretext-demos](https://somnai-dreams.github.io/pretext-demos/)
## API
Pretext 有 2 个用例：
### 1. 测量段落的高度_无需接触 DOM_
````ts
从 '@ Chenglou/pretext' 导入 { 准备，布局 }
const prepared = 准备('AGI春天到了。 ?????? ?', '16px Inter')
const { height, lineCount } = 布局(prepared, 320, 20) // 纯算术。没有 DOM 布局和回流！
````
`prepare()` 执行一次性工作：规范化空白、对文本进行分段、应用粘合规则、使用画布测量分段并返回不透明句柄。 `layout()` 是之后的廉价热路径：对缓存宽度的纯算术。不要为相同的文本和配置重新运行`prepare()`；这会破坏它的预计算。例如，在调整大小时，仅重新运行“layout()”。
如果您想要类似文本区域的文本，其中普通空格、“\t”制表符和“\n”硬分隔符保持可见，请将“{whiteSpace: 'pre-wrap'}”传递给“prepare()”：
````ts
const准备=准备（textareaValue，'16px Inter'，{whiteSpace：'预换行'}）
const { height } = 布局（准备好，textareaWidth，20）
````
其他 `prepare()` 选项包括 `{ wordBreak: 'keep-all' }` 用于类似 CSS 的 `word-break: keep-all`，以及 `{ letterSpacing: n }` 来匹配 CSS `letter-spacing`（`n` 被视为 px 值）。
返回的高度是解锁 Web UI 的最后一个关键部分：
- 正确的虚拟化/遮挡，无需猜测和缓存
- 精美的用户区布局：砖石结构、JS 驱动的类似 Flexbox 的实现、无需 CSS hack 的情况下微调一些布局值（想象一下）等。
- _开发时间_验证（尤其是现在使用人工智能），例如标签按钮不会溢出到下一行，无需浏览器
- 当新文本加载并且您想重新定位滚动位置时防止布局发生变化
### 2. 自己手动布置段落行
用“prepareWithSegments”切换“prepare”，然后：
- `layoutWithLines()` 为您提供固定宽度的所有线条：
````ts
从“@henglou/pretext”导入{prepareWithSegments，layoutWithLines}
const prepared =prepareWithSegments('AGI春天到了。 ?, '18px "Helvetica Neue"')
const { 行 } =layoutWithLines(准备