用途:在 JavaScript/TypeScript 中快速、准确地进行多行文本测量与排版,无需通过 getBoundingClientRect、offsetHeight 等读取布局,不触发 DOM 重排。
主要能力:计算段落高度与行数;访问逐行内容用于自定义渲染(如文字绕排浮动图片);处理 emoji、CJK 字符、RTL 文本和混合语言内容;将测量结果渲染到 DOM、Canvas 或 SVG;支持软连字符、letter-spacing、按区域设置的断词;适合性能敏感的渲染循环以及 SSR 服务端文本测量。
安装方式: 插件(Claude Code):claude plugin marketplace add chenglou/pretext npm:npm install @chenglou/pretext 技能(任意平台):npx skills add https://github.com/akillness/jeo-skills --skill pretext
必要用法:先调用 prepare() 或 prepareWithSegments()(每个唯一的 text 与 font 组合调用一次,开销较大,建议缓存);随后用 layout() 或 layoutWithLines() 做纯算术计算。示例: import { prepare, layout } from '@chenglou/pretext' const prepared = prepare('AGI 春天到了. بدأت الرحلة 🚀', '16px Inter') const { height, lineCount } = layout(prepared, 320, 20)
可用选项:whiteSpace 取 'normal' 或 'pre-wrap';wordBreak 取 'normal' 或 'keep-all'(避免 CJK 文本在词中断行);letterSpacing 为像素值。另提供 shrinkWrap 计算不换行所需的最小容器宽度。
环境要求:需要 Intl.Segmenter API 与 Canvas 2D measureText,支持现代浏览器与 Node.js 16+(Node 需 canvas 包)。初始化前应先检查 Intl.Segmenter 是否可用。非浏览器 SSR 中可在服务端计算高度、客户端水合位置。
限制:不适合要求完整 CSS 文本引擎保真度的场景(应直接用 DOM 测量);不支持 OpenType 特性(连字、kerning 表,需专用字体整形库);不用于 PDF 文本排版;目标环境缺少 Intl.Segmenter 与 Canvas 2D 支持时不可用。源码为 chenglou/pretext,MIT License。