LayoutSans：基于 Pretext 构建的完整 2D 布局引擎（flex、grid、magazine — 零 DOM）

Source: Dev.to

概述

Pretext 在不触碰 DOM 的情况下解决文本测量问题。

LayoutSans 基于 Pretext 构建：它使用 Pretext 的测量结果，并提供完整的弹性布局、网格布局、杂志式多列以及绝对定位布局，同时保持文本节点在真实的 DOM 中。

这种方法带来：

• 准确的可变高度虚拟化
• 动态布局和复杂流动，避免布局抖动
• 完整的可访问性、文本选择和页面内查找支持

特性

• 纯 TypeScript 库（约 3.7 kB gzipped）
• 可在浏览器、Node、Bun、Deno 和 Cloudflare Workers 中运行
• 扁平化输出格式，适用于虚拟列表和基于 Canvas 的 UI
• 需要 Pretext 作为同行依赖来处理文本节点

入门指南

仓库的 README 中提供了一个 5 行示例以及性能基准。

征求反馈

欢迎任何构建虚拟化 UI、聊天界面或编辑工具的开发者提供反馈。