pretext은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

pretext은(는) Other 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

pretext은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. pretext의 마지막 커밋은 2026년 10월 15일입니다.

pretext은(는) 어디에 사용할 수 있나요?

렌더링 전에 각 항목의 높이를 파악해 긴 목록을 가상화합니다. 가장 긴 줄에 맞춰 채팅 말풍선 크기를 조정합니다. 줄마다 너비가 다른 영역에서 떠 있는 이미지 주위로 텍스트를 흐르게 합니다. 개발 중 버튼 라벨이 두 번째 줄로 넘어가지 않는지 확인합니다.

pretext는 어떻게 설치하나요?

npm에서 패키지를 설치합니다: npm install @chenglou/pretext prepare와 layout을 가져온 다음 DOM을 건드리지 않고 단락의 높이를 측정합니다

pretext은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/chenglou/pretext

chenglou/pretext

DOM 리플로우를 일으키지 않고 여러 줄 텍스트를 측정하고 배치해 DOM, Canvas 또는 SVG로 렌더링하는 순수 JavaScript/TypeScript 라이브러리입니다.

GitHub에서 보기 웹사이트

스타: 50,839
포크: 2,761
열린 이슈: 65
마지막 커밋: 5일 전

어떤 프로젝트인가요?

Pretext는 순수 JavaScript 또는 TypeScript로 여러 줄 텍스트를 측정하고 줄바꿈을 계산합니다. 따라서 레이아웃 코드에서 `getBoundingClientRect`나 `offsetHeight`를 읽지 않고도 문단의 높이나 각 줄을 구할 수 있습니다. 이런 DOM 읽기는 브라우저의 페이지 리플로우를 유발해 비용이 큽니다. Pretext는 브라우저 Canvas의 텍스트 측정 결과를 너비 계산의 기준으로 사용하고, 그 위에 자체 줄바꿈 로직을 적용합니다.

기본 사용법은 두 단계입니다. `prepare()`가 지정한 폰트에 대해 텍스트를 한 번 분석하고 측정하며, `layout()`은 캐시된 너비만으로 산술 계산해 최대 너비와 줄 높이에 따른 `height`와 `lineCount`를 반환합니다. 더 낮은 수준의 API로는 수동 레이아웃에 쓸 개별 줄, 줄 너비 또는 커서를 가져올 수 있습니다. 예를 들어 내용에 맞춰 크기가 조정되는 말풍선, 이미지 주위로 흐르는 텍스트, 말줄임표를 적용한 텍스트 클램핑 등에 사용할 수 있습니다. 리치 인라인 API는 여러 폰트, 코드 구간, 이미지나 칩 같은 인라인 박스도 처리합니다.

이 라이브러리는 `normal` 및 `pre-wrap` 공백 모드, `keep-all` 단어 단위 줄바꿈, 자간을 지원합니다. 사용하려면 Canvas 2D 텍스트 측정, Unicode property escapes, `Intl.Segmenter`를 지원하는 브라우저가 필요합니다. 브라우저 밖에서 사용하려면 사용자 지정 `OffscreenCanvas` 측정기를 제공해야 합니다.

핵심 기능

01`prepare()`와 `layout()`을 사용해 DOM 리플로우 없이 문단의 높이와 줄 수를 계산합니다.
02수동 레이아웃을 위해 개별 줄, 줄 너비, 커서를 반환합니다.
03여러 폰트, 코드 구간, 인라인 박스를 처리하는 리치 인라인 API를 제공합니다.
04`pre-wrap`, `keep-all` 단어 단위 줄바꿈, 자간을 지원합니다.
05결과를 DOM, Canvas 또는 SVG로 렌더링합니다.

활용 사례

렌더링 전에 각 항목의 높이를 파악해 긴 목록을 가상화합니다.
가장 긴 줄에 맞춰 채팅 말풍선 크기를 조정합니다.
줄마다 너비가 다른 영역에서 떠 있는 이미지 주위로 텍스트를 흐르게 합니다.
개발 중 버튼 라벨이 두 번째 줄로 넘어가지 않는지 확인합니다.

빠른 시작

1
npm에서 패키지를 설치합니다
npm install @chenglou/pretext
2
prepare와 layout을 가져온 다음 DOM을 건드리지 않고 단락의 높이를 측정합니다

사용 전 알아둘 점

라이선스가 NOASSERTION으로 표시되어 있어 사용 조건이 명확하지 않습니다. 도입하기 전에 확인해야 합니다.
측정 시 브라우저의 폰트 엔진을 사용하므로 정확한 결과는 사용 가능한 폰트에 따라 달라집니다.

토픽

#text-layout #text-measurement #typescript #canvas #reflow #typography

자주 묻는 질문

pretext은(는) 무엇인가요?: DOM 리플로우를 일으키지 않고 여러 줄 텍스트를 측정하고 배치해 DOM, Canvas 또는 SVG로 렌더링하는 순수 JavaScript/TypeScript 라이브러리입니다. Pretext는 순수 JavaScript 또는 TypeScript로 여러 줄 텍스트를 측정하고 줄바꿈을 계산합니다. 따라서 레이아웃 코드에서 `getBoundingClientRect`나 `offsetHeight`를 읽지 않고도 문단의 높이나 각 줄을 구할 수 있습니다. 이런 DOM 읽기는 브라우저의 페이지 리플로우를 유발해 비용이 큽니다. Pretext는 브라우저 Canvas의 텍스트 측정 결과를 너비 계산의 기준으로 사용하고, 그 위에 자체 줄바꿈 로직을 적용합니다.
pretext은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?: pretext은(는) Other 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
pretext은(는) 아직 유지보수되고 있나요?: 활발히 유지보수 중. pretext의 마지막 커밋은 2026년 10월 15일입니다.
pretext은(는) 어디에 사용할 수 있나요?: 렌더링 전에 각 항목의 높이를 파악해 긴 목록을 가상화합니다. 가장 긴 줄에 맞춰 채팅 말풍선 크기를 조정합니다. 줄마다 너비가 다른 영역에서 떠 있는 이미지 주위로 텍스트를 흐르게 합니다. 개발 중 버튼 라벨이 두 번째 줄로 넘어가지 않는지 확인합니다.
pretext는 어떻게 설치하나요?: npm에서 패키지를 설치합니다: npm install @chenglou/pretext prepare와 layout을 가져온 다음 DOM을 건드리지 않고 단락의 높이를 측정합니다
pretext은(는) 어디서 받을 수 있나요?: 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/chenglou/pretext

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.