TL;DR

Pretext는 브라우저 캔버스 측정을 캐시해 DOM 리플로우 없이 다중행 텍스트의 높이와 라인 레이아웃을 계산하는 TypeScript 라이브러리입니다. prepare()는 텍스트를 세그먼트화하고 캔버스 기반 너비를 측정해 불변 핸들을 반환하며 layout()은 캐시된 너비로 순수 산술만 수행해 빠른 재계산을 제공합니다. 수동 레이아웃 API는 라인별 그라페메 커서와 비동기적 흐름 제어를 가능하게 하며 rich-inline 모듈은 칩·멘션 같은 원자 단위 인라인 항목을 다루는 보조 도구를 제공합니다. 단, 런타임에 Intl.Segmenter와 Canvas 2D가 필요하고 일부 CSS 폰트 기능·자동 하이픈화는 지원되지 않아 대상 환경과 폰트 사용법을 먼저 확인해야 합니다.

핵심 포인트

• 이 레포는 TypeScript로 작성된 라이브러리-SDK이며 브라우저(특히 Canvas 2D) 환경을 주된 생태계로 삼고 있습니다. 패키지 이름은 @chenglou/pretext로 npm 설치가 가능하며 README에 데모와 개발 안내가 포함되어 있습니다. 소스 메타데이터상 스타 수는 49705로 공개 관심이 높은 편입니다.
• 핵심 동작은 prepare()로 텍스트를 한 번 전처리하고 캔버스 측정 결과를 캐시한 뒤 layout()이 캐시된 세그먼트 너비로 순수 산술 연산만 수행해 높이와 줄 수를 계산하는 흐름입니다. prepare() 단계에서 공백 정규화, 세그먼트 분해, 캔버스 기반 너비 측정이 이루어지고 prepareWithSegments를 쓰면 세부 라인 레이아웃(라인 커서, 그라페메 인덱스)을 직접 제어할 수 있습니다. 이 구조는 DOM의 getBoundingClientRect 같은 레이아웃 리플로우를 회피하므로 반복적인 크기 재계산에서 비용을 크게 줄이는 설계적 이점을 제공합니다.
• 라이브러리는 두 가지 실무용 케이스를 명확히 제공합니다: (1) DOM을 건드리지 않고 단번에 문단 높이만 계산하는 핫패스용 API와 (2) prepareWithSegments / layoutWithLines / layoutNextLineRange처럼 사용자 주도의 수동 레이아웃을 지원하는 저수준 API들입니다. 후자는 캔버스, SVG, WebGL 같은 렌더링 표면에 줄 단위로 텍스트를 배치하거나 이미지에 둘러싼 유동 레이아웃을 구현할 때 유용하며 rich-inline 헬퍼는 칩·멘션 같은 원자 단위 항목의 좁은 범위 처리를 돕습니다. 소프트 하이픈을 선택적 줄바꿈 지점으로 처리하고 자동 하이픈화는 내장하지 않아 혼합 언어 텍스트에는 보수적인 삽입을 권장합니다.
• 주요 제약과 플랫폼 요구사항은 README에 분명하게 나와 있습니다. 런타임에 Intl.Segmenter와 Canvas 2D 텍스트 측정이 반드시 필요하고 일부 CSS 텍스트 기능(font-optical-sizing, font-feature-settings 등)은 별도로 모델링하지 않으며 variable-font 축은 canvas font 문자열에 반영된 경우에만 효과가 있습니다. macOS에서 system-ui 폰트 사용은 layout() 정확도에 문제를 일으킬 수 있고 플랫폼별 버그는 PLATFORM_BUGS.md에 기록되어 있어 실제 도입 전 환경 호환성을 확인해야 합니다.