用途
Pretext 是一套用于生成浏览器文本特效页面的技能。它面向需要在网页中实现 CSS 无法单独完成的排版效果：动态排版、文字绕动画障碍流动、图形诗、紧密包裹的聊天气泡等。生成结果始终是单个自包含 HTML 文件，不需要构建步骤，也不依赖框架，可在任何现代浏览器中运行。
主要能力
Pretext 基于纯算术文本测量库 @chenglou/pretext，使用 canvas measureText 做比例字体精确测量，避开 DOM 布局重排。其可覆盖的效果类别包括：
- 高度预测：用于手风琴、瀑布流、虚拟列表等，无需 DOM 读取即可获知文本高度。
- 紧密包裹：通过 walkLineRanges 与二分查找，为多行文本找到最紧宽度，用于聊天气泡、提示、标签。
- 障碍绕排：使用可变宽度的 layoutNextLine，让文本环绕图片、徽标、可拖动圆球，形成编辑式版面。
- 动画障碍：结合 layoutNextLine 与 carveTextLineSlots，让移动的物体以 60fps 推开文字，且能填充障碍两侧。
- 排版 ASCII：以 prepareWithSegments 做字符测量，将流体模拟、3D 线框、粒子系统渲染为比例字符。
- 图形诗：使用 prepareWithSegments 与 SDF，用文字自身的字母拼成心形、星形、螺旋等形状。
- 字形遮罩图形诗：用 canvas measureText 与 getImageData 像素遮罩，把任意字体字形当作图形诗形状，无需 SDF 或 opentype.js。
- 信箱画廊：把字符串中每个字符放入独立 canvas，配文字填充、光标位移与独立交互。
- 多栏编辑：组合丰富 API，实现杂志式版面，包括标题适配、引文、首字下沉、分栏流动。
与 opentype.js 搭配后还可实现：字形路径艺术（SVG 字形与描边动画）、沿路径文字（贝塞尔曲线逐字形放置与切线旋转）、变量字体动画（逐字符字重/字宽波动）、字形变形（轮廓感知插值）、轮廓图形诗（用文字填充大字形的真实轮廓），以及手抄本效果（湿墨、藤蔓回流、首字母膨胀、老化、擦除诗）。
使用方式
描述想要的效果，即可选择对应的 Pretext 模式并生成完整 HTML 文件。例如：流动烟雾 ASCII 艺术、比 CSS 更紧的聊天气泡、图形诗、文字绕可拖动圆圈流动、即时高度预测的瀑布流、字形路径艺术、会推开文字的动画龙形光标、活藤蔓回流的手抄本、变量字体波浪、字形变形、字母画廊、字形遮罩图形诗等。
从概念到效果的 API 选择层级：
- 只需要静态高度 → prepare() + layout()（最快，不透明）。
- 需要行文本/位置 → prepareWithSegments() + layoutWithLines()。
- 需要每行宽度变化 → layoutNextLine()（迭代器，每行可变宽）。
- 需要几何信息而不需要字符串 → walkLineRanges()（不物化字符串）。
- 需要单字符宽度 → 对单个字符使用 prepareWithSegments()。
渲染目标按输出类型选择：DOM 元素用于编辑式版面、手风琴、瀑布流；Canvas 2D（ctx.fillText）用于图形诗与部分 ASCII 艺术；带内联样式的 HTML span 用于排版 ASCII（逐字符字重/样式/透明度）。
架构上，Pretext 决定文字放在哪里（断行、障碍绕排），opentype.js 决定每个字形长什么样（SVG 路径、贝塞尔曲线、轮廓数据）。只用 DOM 定位文字时仅需 Pretext；需要逐字形 SVG 渲染、路径动画或字形轮廓访问时再加入 opentype.js。
适用场景
适合需要突破 CSS 文本能力边界的排版与视觉呈现：编辑式版面、动态排版、ASCII 艺术、图形诗、字形动画、变量字体实验、互动文字装置等。
限制与注意事项
- 不使用 React/Vue 等框架，只用原生 JS 与 HTML。
- 字体不可使用 system-ui，因 canvas 与 DOM 在 macOS 上可能解析出不同字体；也不使用纯黑 #000000，而用富偏黑。
- 动画必须使用 requestAnimationFrame，不可用 setInterval；必须处理 resize；必须在 document.fonts.ready 之后测量；prepare() 不可放在动画循环内。
- 只做几何时用 walkLineRanges 而非 layoutWithLines；文字定位用 position: absolute 而非 CSS 流。
- opentype.js 不能解析 .woff2，只能用 .woff 或 .ttf；不要用 opentype.load()，而用 fetch + arrayBuffer + opentype.parse；不要用 Google Fonts TTF CDN 程序化 URL（会 404），改用 @fontsource 经 jsdelivr。
资料未提供收费、价格及官方发布平台信息。