开源项目推荐：Pretext – 纯JS/TS的多行文本测量与布局库，让AI和前端开发更高效-壹联网络

今天推荐一个前端开发者会爱不释手的开源库——Pretext。这是一个纯JavaScript/TypeScript实现的多行文本测量与布局库，不需要DOM就能精确测量文本高度和行数，而且对所有语言都支持得很好，包括你可能都没听说过的那些。

为什么需要Pretext？

在前端开发中，测量文本高度是个老大难问题。传统方案用getBoundingClientRect或offsetHeight，触发浏览器布局重排（reflow），这是浏览器里最昂贵的操作之一。特别是在需要精确控制的场景，比如虚拟列表、动态高度textarea、大量文本渲染，频繁的reflow会严重拖累性能。

Pretext的核心思路是：利用浏览器自身的字体引擎作为真实参考，用Canvas测量字形宽度，然后通过纯算法计算文本布局。整个过程零DOM操作，不触发任何重排。

核心能力

1. 零DOM测量文本高度

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

const prepared = prepare('AGI 春天到了. بدأت الرحلة emoji', '16px Inter')
const { height, lineCount } = layout(prepared, textWidth, 20)
// 纯算术运算，没有DOM布局和重排！

2. 精确的行数、行宽、游标位置

import { measureLineStats, walkLineRanges } from '@chenglou/pretext'

const { lineCount, maxLineWidth } = measureLineStats(prepared, 320)
// 获取精确的行数和最大行宽

3. 手动布局：精确控制每一行

import { layoutWithLines } from '@chenglou/pretext'

const prepared = prepareWithSegments(text, '18px Helvetica')
const { lines } = layoutWithLines(prepared, 320, 26)
for (let i = 0; i < lines.length; i++)
  ctx.fillText(lines[i].text, 0, i * 26)

4. 流式文本布局（文字绕图）
可以随高度变化动态调整行宽，比如文字绕着浮动图片流动，图片旁边的行更窄，图片下方恢复全宽。

5. 富文本内联支持
通过@chenglou/pretext/rich-inline，可以处理代码高亮、@提及、Chip标签等富文本内联元素的布局。

应用场景

虚拟列表/无限滚动：精确知道每条内容的高度，无需猜测或缓存
动态高度Textarea：实时显示剩余字符数，精确计算高度变化
AI生成内容验证：AI生成文本时预判会不会溢出按钮容器
布局稳定性：防止CLS（Cumulative Layout Shift），文字加载时不产生跳屏
Canvas/SVG/WebGL渲染：在Canvas上精确排版多行文字，支持服务端渲染