pretext：前端文本测量终于不用猜了

做前端这么多年，文本测量这件事一直让我头疼。你说用 getBoundingClientRect() 吧，它得等 DOM 渲染完才能拿到结果；你说用 Canvas 的 measureText() 吧，换行和复杂排版又搞不定。每次做自适应布局、文字溢出处理，都像在猜谜。

直到我刷到 pretext，一个由 Cheng Lou（React 团队出来的那位）搞的文本测量库，45K+ stars，直接把我看愣了。这数字在前端工具库里算是顶流级别了。

它到底解决了啥问题

pretext 的核心定位很清晰：在浏览器里精确、快速地测量文本尺寸和布局。不需要等渲染，不需要塞到 DOM 里再读回来，纯计算就能出结果。

我翻了下源码，它主要做三件事：

1. 精确测量单行文本

import { measureText } from 'pretext';

const metrics = measureText({
  text: 'Hello 世界',
  fontSize: 16,
  fontFamily: 'Inter, sans-serif',
  fontWeight: 400,
});

console.log(metrics.width);  // 精确像素宽度
console.log(metrics.height); // 行高

2. 多行文本的换行计算

import { measureLines } from 'pretext';

const lines = measureLines({
  text: '这是一段很长的文字，需要在指定宽度内自动换行',
  width: 200,
  fontSize: 14,
  lineHeight: 1.5,
});

// 返回每行的文本和尺寸
lines.forEach(line => console.log(line.text, line.width));

3. 富文本/混合样式的布局

import { measureRichText } from 'pretext';

const result = measureRichText({
  nodes: [
    { text: '普通文字 ', fontSize: 14 },
    { text: '加粗文字', fontSize: 14, fontWeight: 700 },
  ],
  width: 300,
});

上手体验

安装很简单：

npm install pretext

API 设计得很克制，没有一堆配置项轰炸你。传什么字体、字号、文字内容，它就给你返回精确的尺寸数据。我试了几个场景，跟实际 DOM 渲染出来的结果对比，误差基本在亚像素级别，完全可以接受。

最让我惊喜的是速度。因为不走 DOM，纯数学计算，批量测量几百段文字也是毫秒级。这在需要动态计算布局的场景里（比如自动调整图表标签位置、生成 PDF 预览），简直是救命稻草。

优点和缺点

优点：

• 精度高，跟浏览器实际渲染结果几乎一致
• 速度快，纯计算不走 DOM
• API 简洁，学习成本极低
• TypeScript 类型完整

缺点：

• 对 Web Font 的支持需要额外处理，如果字体还没加载完，测量结果可能不准
• 复杂 CSS 特性（比如 text-transform、letter-spacing 的某些边缘值）覆盖不够全
• 45K+ stars 但 issues 区活跃度一般，有些边缘问题可能没人修
• 不支持 Node.js 环境，纯浏览器端库

适合谁用

如果你在做图表库、富文本编辑器、PDF 生成器、或者任何需要”提前知道文字占多大地方”的场景，pretext 能省你大量功夫。

但如果你只是偶尔测一下文字宽度，原生 API 够用了，没必要多引一个依赖。

推荐指数：⭐⭐⭐⭐⭐