LayoutSans: Pretext 위에 구축된 전체 2D 레이아웃 엔진 (flex, grid, magazine — zero DOM)

Source: Dev.to

Overview

Pretext는 DOM을 건드리지 않고 텍스트 측정을 해결합니다.

LayoutSans는 Pretext 위에 구축됩니다: Pretext의 측정값을 사용하고 텍스트 노드를 실제 DOM에 그대로 두면서 완전한 flex, grid, 잡지‑스타일 다중‑컬럼 및 절대 레이아웃을 제공합니다.

이 접근 방식은 다음을 제공합니다:

• 정확한 가변‑높이 가상화
• 레이아웃 스러싱 없이 동적 레이아웃 및 복잡한 흐름
• 완전한 접근성, 텍스트 선택 및 페이지 내 검색 지원

Features

• 순수 TypeScript 라이브러리 (~3.7 kB gzipped)
• 브라우저, Node, Bun, Deno, Cloudflare Workers에서 작동
• 평탄한 출력 형식, 가상 리스트 및 캔버스‑기반 UI에 이상적
• 텍스트 노드 처리를 위한 Pretext를 피어 의존성으로 필요

Getting Started

5줄 예제와 성능 벤치마크는 저장소의 README에 있습니다.

Call for Feedback

가상화 UI, 채팅 인터페이스, 혹은 편집 도구를 구축하는 모든 분들의 피드백을 환영합니다.