pretext: 다중 행 텍스트 측정 및 레이아웃을 위한 순수 JavaScript/TypeScript 라이브러리
Pretext는 JavaScript/TypeScript 기반의 멀티라인 텍스트 측정 및 레이아웃 라이브러리로, DOM 측정을 우회하여 브라우저의 폰트 엔진을 활용해 빠르고 정확한 텍스트 높이 계산과 레이아웃을 지원합니다.
주요 기능으로는 DOM의 레이아웃 리플로우 없이 텍스트의 높이와 줄 수를 산출하는 prepare()와 layout() 함수, 그리고 수동으로 줄 단위 레이아웃을 제어할 수 있는 prepareWithSegments(), layoutWithLines(), walkLineRanges(), layoutNextLine() API를 제공합니다.
이 라이브러리는 다양한 언어, 이모지, 혼합 방향 텍스트를 지원하며, 웹 UI에서 정확한 가상화, 사용자 정의 레이아웃, 레이아웃 시프트 방지 등에 실용적 가치를 제공합니다.
또한, whiteSpace: 'pre-wrap' 옵션을 통해 공백, 탭, 줄바꿈을 유지하는 텍스트 처리도 가능하며, 서버 사이드 렌더링과 Canvas, SVG, WebGL 렌더링에도 활용할 수 있습니다.
개발자는 npm install @chenglou/pretext로 설치 후, 텍스트 측정과 레이아웃을 효율적으로 구현할 수 있습니다.
