技能介绍

要解决什么问题

虚拟滚动、聊天列表、手风琴或 Masonry 布局里，常见痛点是：在真正插入 DOM 之前，不知道一段文字在固定宽度下占多高、会不会换行、一共几行。用 getBoundingClientRect 可以量，但会触发重排；纯字符数估算又和浏览器换行规则对不上，中英文混排、Emoji、pre-wrap 时误差更大。

本技能封装开源库 @chenglou/pretext，用与 Canvas measureText 一致的思路做布局算术，把「给定 text、font、width（及可选 lineHeight、whiteSpace、wordBreak）→ 高度、行数、逐行内容与宽度」变成可脚本调用的结果，而不是靠猜或反复渲染。

技能如何工作

按意图选用不同入口，Agent 或本地脚本都能对接：

measure.js：最常用，返回总高度、lineCount 等，适合「会不会换行」「容器要多高」
layout-lines.js：返回每行的 text、width 以及 startCursor / endCursor，适合 Canvas 逐行绘制
batch.js：同一字体与宽度下批量测多条文案，适合消息列表预计算
富文本内联：带 @提及、标签、代码片段等内联节点时做组合布局
浏览器模式：在已有 DOM 的环境可加载 UMD / npm 包，调用 pretext.layout、measureNaturalWidth、prepare 等 API，精度与原版一致

典型流程是：从用户描述里抽出文本与排版参数 → 调用对应脚本 → 把 JSON 结果翻译成「几行、多高、每行是什么」的工程结论。文档中还覆盖了收缩包裹宽度、文字绕排浮动区域、换字体时清缓存，以及用逐字宽度做 Canvas 粒子动画等进阶场景。

适用边界与注意点

白空间与断词：仅支持 white-space 的 normal / pre-wrap，word-break 为 normal / keep-all；不支持 pre、nowrap 等。
字体与平台：prepare() 依赖字体已可用；macOS 下泛用 system-ui 时精度可能不稳，建议具名字体（如 Inter、-apple-system、PingFang SC）。
RTL：阿拉伯文、希伯来文等暂不支持。
空字符串：技能返回 { lineCount: 0, height: 0 }，与部分浏览器仍保留一行行高的行为可能不一致，布局要严格对齐时需自行校验。
精度声明：Node 侧可选 canvas 提升测量；未安装时走纯 JS Unicode 估算，功能完整但可能有偏差；极高像素级 UI 仍应以浏览器实渲为准。