Pretext – DOM 없이 텍스트 높이를 측정하는 순수 JS 레이아웃 라이브러리
(github.com/chenglou)브라우저에서 텍스트가 몇 줄을 차지하는지 알아내는 건 생각보다 까다롭다. 보통은 getBoundingClientRect나 offsetHeight를 쓰는데, 이 방법들은 브라우저가 레이아웃을 다시 계산하도록 강제한다. 이른바 레이아웃 리플로우. 브라우저 입장에서는 꽤 무거운 작업이다.
Pretext는 이 문제를 다른 방식으로 푼다. Canvas의 measureText()로 폰트 엔진에서 직접 글자 너비를 가져오고, 이후 줄 계산은 캐싱된 너비값으로 순수 산술 연산만 한다. DOM에 전혀 접근하지 않는다.
const prepared = prepare('AGI 春天到了. بدأت الرحلة 🚀', '16px Inter')
const { height, lineCount } = layout(prepared, textWidth, 20)
성능도 인상적이다. 500개 텍스트 배치 기준으로 prepare()가 약 19ms, 이후 layout()은 0.09ms 수준이다.
두 가지 사용 방식
높이만 필요하다면 prepare() + layout() 조합으로 끝난다. 가상화 리스트 구현, 스크롤 위치 유지, AI가 생성한 텍스트가 버튼 밖으로 넘치는지 확인하는 용도 등에 쓸 수 있다.
직접 줄 단위로 레이아웃을 제어하고 싶다면 layoutWithLines(), walkLineRanges(), layoutNextLine() 같은 API를 활용한다. Canvas, SVG, WebGL, 서버사이드 렌더링에도 붙일 수 있고, 이미지 옆으로 텍스트가 흘러가는 형태처럼 줄마다 너비가 달라지는 레이아웃도 처리된다.
이모지, 한중일, 아랍어 같은 양방향 텍스트까지 지원한다. React와 Relay를 만든 chenglou의 프로젝트. ⭐ 7.1k
https://github.com/chenglou/…