Pretext
DOM 없이 텍스트 높이를 측정하는 순수 JS 레이아웃 라이브러리
About
브라우저에서 텍스트가 몇 줄을 차지하는지 알아내는 건 생각보다 까다롭다. 보통은 getBoundingClientRect나 offsetHeight를 쓰는데, 이 방법들은 브라우저가 레이아웃을 다시 계산하도록 강제한다. 이른바 레이아웃 리플로우. 브라우저 입장에서는 꽤 무거운 작업이다. Pretext는 이 문제를 다른 방식으로 푼다. Canvas의 measureText()로 폰트 엔진에서 직접 글자 너비를 가져오고, 이후 줄 계산은 캐싱된 너비값으로 순수 산술 연산만 한다. DOM에 전혀 접근하지 않는다.
const prepared = prepare('AGI 春天到了. بدأت الرحلة 🚀', '16px Inter')
const { height, lineCount } = layout(prepared, textWidth, 20)