다른 개발자들이 만든 것들
커뮤니티의 창의적인 Pretext 데모 프로젝트 — 애니메이션, 타이포그래피 실험, 실시간 텍스트 조작.
Pretext 플레이그라운드란?
Pretext 플레이그라운드는 모든 Pretext API를 실시간으로 실험할 수 있는 인터랙티브 샌드박스입니다. 텍스트를 입력하거나 붙여넣고, 폰트 설정을 조정하고, 컨테이너 크기를 변경하면서 Pretext가 줄 바꿈, 높이, 줄 수를 계산하는 것을 확인하세요 — DOM 측정 없이. 플레이그라운드는 완전히 브라우저에서 실행되며, Pretext가 웹에서 멀티라인 텍스트를 측정하는 가장 빠른 방법인 이유를 보여줍니다.
탐색할 수 있는 세 가지 레이아웃 모드
균일 레이아웃
가장 일반적인 사용 사례. Pretext는 layoutWithLines()를 호출하여 고정 컨테이너 너비에서 모든 줄 바꿈을 계산합니다. 정확한 줄 수, 총 높이, 각 줄의 텍스트 내용을 얻을 수 있습니다 — 가상 스크롤, 채팅 인터페이스, 텍스트 높이가 중요한 모든 UI에서 렌더링할 준비가 됩니다.
가변 너비 레이아웃
고급 모드. Pretext는 layoutNextLine()을 사용하여 각 줄마다 다른 너비로 한 줄씩 레이아웃합니다. 장애물을 드래그하여 실시간으로 텍스트가 재배치되는 것을 확인하세요. 에디토리얼 엔진 데모에서 사용하는 것과 동일한 기법입니다 — 구간 산술이 각 줄의 사용 가능한 너비에서 차단된 영역을 뺍니다.
라인 범위
경량 모드. Pretext는 walkLineRanges()를 호출하여 텍스트 문자열을 생성하지 않고 줄 경계를 순회합니다. 줄 너비와 커서 위치만 필요할 때 유용합니다 — 예를 들어, 주어진 줄 수를 유지하는 가장 타이트한 컨테이너 너비를 이진 검색할 때.
Pretext 내부 작동 원리
Pretext는 텍스트 측정을 두 단계로 나눕니다. 준비 단계는 한 번 실행됩니다: 유니코드 규칙을 사용하여 입력 텍스트를 분할하고, Canvas measureText() API를 통해 각 세그먼트의 글리프 너비를 측정하고, 결과를 캐시합니다. 텍스트 길이에 따라 일반적으로 0.1–1ms가 소요됩니다.
레이아웃 단계는 순수 산술 연산입니다. 컨테이너 너비와 줄 높이가 주어지면, Pretext는 캐시된 세그먼트 너비를 순회하고, 실행 중인 줄 합계를 추적하고, 너비를 초과하면 줄 바꿈을 삽입합니다. DOM 접근 없음, 강제 리플로우 없음, 레이아웃 스래싱 없음. 단일 레이아웃 호출은 ~0.001ms — 프레임당 수천 번 실행할 수 있을 만큼 빠릅니다.
준비된 핸들은 어떤 수의 컨테이너 너비에서도 재사용할 수 있습니다. 동일한 핸들에서 세 번의 산술 연산으로 모바일, 태블릿, 데스크톱 높이를 계산하세요. 이것이 Pretext가 반응형 레이아웃, 가상 스크롤링, 실시간 텍스트 리플로우에 이상적인 이유입니다.
Pretext API 참조
| 함수 | 용도 | 반환값 |
|---|---|---|
| prepare(text, font) | 텍스트를 분할하고 측정합니다. layout()용 핸들. | PreparedText |
| prepareWithSegments(text, font) | prepare()와 동일하지만 고급 API용 세그먼트 데이터를 노출합니다. | PreparedTextWithSegments |
| layout(prepared, width, lineHeight) | 줄 수와 총 높이를 계산합니다. 순수 산술 연산. | { lineCount, height } |
| layoutWithLines(prepared, width, lineHeight) | layout()과 동일하지만 각 줄의 텍스트와 너비도 반환합니다. | { lines, lineCount, height } |
| layoutNextLine(prepared, cursor, width) | 한 줄씩 레이아웃합니다. 줄마다 가변 너비. | LayoutLine | null |
| walkLineRanges(prepared, width, callback) | 문자열 생성 없이 줄 경계를 순회합니다. | lineCount |
| profilePrepare(text, font) | 준비 타이밍을 측정합니다 (분석 + 측정). | PrepareProfile |
| clearCache() | 내부 글리프 너비 캐시를 지웁니다. | void |
Pretext를 사용해야 할 때
가상 스크롤링
DOM 요소를 생성하지 않고 수천 개의 가변 높이 항목의 높이를 미리 계산합니다. React Virtuoso, TanStack Virtual 및 모든 가상화 라이브러리와 호환됩니다.
채팅 인터페이스
렌더링 전에 메시지 버블 높이를 예측합니다. 스트리밍 AI 응답 중 레이아웃 시프트를 제거합니다. 타이트 래핑으로 낭비되는 여백을 최소화합니다.
코드 에디터
혼합 폰트(주석, 문자열, 키워드)가 있는 코드의 줄 높이를 측정합니다. 정확한 탭과 줄바꿈 처리를 위한 pre-wrap white-space 모드를 지원합니다.
반응형 레이아웃
하나의 prepare() 호출에서 여러 브레이크포인트의 텍스트 높이를 계산합니다. 모바일, 태블릿, 데스크톱 — 세 번의 산술 연산, 리플로우 제로.
텍스트 중심 대시보드
강제 동기 레이아웃 없이 차트 툴팁, 데이터 테이블 셀, 카드 레이아웃의 크기를 조정합니다. 수백 개의 텍스트 요소가 표시되어도 60fps를 유지합니다.
다국어 콘텐츠
동일한 API로 CJK, 아랍어, 히브리어, 태국어, 한국어, 혼합 스크립트 텍스트를 측정합니다. 유니코드 분할과 양방향 텍스트가 자동으로 처리됩니다.
자주 묻는 질문
Pretext는 실제 브라우저 렌더링과 비교하여 얼마나 정확한가요?
Pretext는 브라우저가 내부적으로 글리프 측정에 사용하는 것과 동일한 Canvas measureText() API를 사용합니다. 결과는 normal 및 pre-wrap white-space 모드에서 브라우저가 렌더링하는 것과 일치합니다. 합자 및 복잡한 셰이핑과 같은 엣지 케이스는 브라우저 자체의 폰트 엔진이 처리합니다.
Pretext는 커스텀 웹 폰트와 호환되나요?
네. 모든 CSS 폰트 문자열을 prepare()에 전달하세요 — 예: "16px Inter" 또는 "bold 18px 'My Custom Font'". prepare()를 호출하기 전에 폰트가 로드되었는지 확인하세요. document.fonts.ready를 사용하여 폰트 사용 가능 여부를 확인할 수 있습니다.
Pretext는 CJK 및 RTL 텍스트를 어떻게 처리하나요?
Pretext는 유니코드 인식 텍스트 분할을 위해 Intl.Segmenter를 사용합니다. CJK 문자는 모든 문자 경계에서 줄 바꿈이 가능합니다. 아랍어와 히브리어 텍스트는 올바른 양방향 규칙으로 처리됩니다. 동일한 prepare() + layout() API가 모든 스크립트에 작동합니다.
prepare()의 성능 오버헤드는 얼마인가요?
prepare() 호출은 Canvas를 통해 글리프 너비를 측정하며 텍스트 길이에 따라 0.1–1ms가 소요됩니다. 이것은 텍스트+폰트 쌍당 일회성 비용입니다. 준비 후 각 layout() 호출은 순수 산술 연산이며 ~0.001ms가 소요됩니다 — 프레임당 수천 번 호출할 수 있을 만큼 빠릅니다.
React, Vue, Svelte와 함께 Pretext를 사용할 수 있나요?
네. Pretext는 프레임워크에 구애받지 않는 순수 JavaScript 라이브러리이며 의존성이 없습니다. prepare()와 layout()을 import하고, 모든 컴포넌트나 훅에서 호출하고, 결과를 사용하여 높이를 설정하거나, 줄을 렌더링하거나, 가상화를 구동하세요.