Pretext 文本布局

不触碰 DOM 的精确文本测量与多行布局

简介

Pretext 是由 chenglou（ReScript 作者）开发的一个纯 JavaScript/TypeScript 库，专注于多行文本的精确测量与布局。

核心解决的问题：传统 DOM 测量（如 getBoundingClientRect、offsetHeight）会触发布局回流（layout reflow），这是浏览器中最昂贵的操作之一。

学习路径

介绍

• 使用方法 — 快速上手、核心 API 使用
• 原理 — Canvas 测量、Knuth-Plass 算法、Unicode 处理

Demo 演示

Demo	名称	说明
1	The Editorial Engine	多栏布局 + 可拖拽障碍物，60fps 实时重排
2	Fluid Smoke	粒子系统映射为 ASCII 艺术
3	Justification Compared	三种对齐算法对比：CSS、贪心、Knuth-Plass
4	Variable Typographic ASCII	多字重比例字体宽度测量
5	Shrinkwrap Showdown	CSS fit-content vs Pretext 精确 shrinkwrap

在线演示

在线 Demo 说明

Demo 来自 somnai-dreams/pretext-demos

Demo 1：The Editorial Engine

Demo 2：Fluid Smoke

Demo 3：Justification Compared

Demo 4：Variable Typographic ASCII

Demo 5：Shrinkwrap Showdown

相关资源

• Pretext 官方仓库
• 在线 Demo
• 社区 Demo 集合