Pretext: Text That Flows Around Shapes
Text flows around moving shapes without repeatedly measuring the page’s DOM layout.
Pretext is a JavaScript/TypeScript text measurement and layout library by Cheng Lou and the Pretext contributors. prepare() measures segments once using the browser’s font engine; layout() calculates line breaks and height from those cached widths. Applications can then build shape-aware layouts, fitted chat bubbles and multilingual typography.
Benchmark scope: our Chrome test used 1,000 paragraphs in 16px Georgia across 40 widths. Repeated layout took about 0.13 ms per width versus about 5.0 ms for DOM height reads, or 36–41× across six runs. The initial prepare() pass (about 16 ms total) was excluded. This is not a universal speed guarantee. Heights matched in 39,985 of 40,000 comparisons; the remaining 15 differed by one line.
Repository demos and library outputs are shown alongside our own benchmark and explanatory scenes. Some repository demo designs are credited to @somnai_dreams / Maxwell Ingham.
Source: chenglou/pretext
Demos: chenglou.me
Pretext: Cheng Lou and Pretext contributors · MIT
Benchmark, additional scenes and video: index.opensource
움직이는 도형 둘레로 글이 흐릅니다. 페이지의 DOM 레이아웃을 반복해서 재는 대신, 글 조각의 너비를 재사용합니다.
Pretext는 Cheng Lou와 기여자들이 만든 JavaScript/TypeScript 글 측정·배치 라이브러리입니다. prepare()에서 브라우저 글꼴 엔진으로 조각 너비를 한 번 재고, layout()에서 그 값으로 줄바꿈과 높이를 계산합니다. 앱은 이를 활용해 도형을 피하는 레이아웃, 꼭 맞는 채팅 말풍선, 다국어 타이포그래피를 만들 수 있습니다.
측정 범위: 이 PC의 Chrome에서 16px Georgia 문단 1,000개와 폭 40가지를 시험했습니다. 폭당 반복 배치는 약 0.13 ms, DOM 높이 읽기는 약 5.0 ms로, 6회 측정에서 36–41배 차이가 났습니다. 최초 prepare() 비용 약 16 ms는 비교에서 제외했습니다. 모든 환경에서 같은 속도를 보장하는 수치가 아닙니다. 높이는 40,000번 중 39,985번 일치했고, 나머지 15번은 한 줄 차이가 있었습니다.
저장소 데모·라이브러리 출력과 직접 만든 측정·설명 장면을 함께 보여 줍니다. 저장소 데모 일부의 디자인 크레디트는 @somnai_dreams / Maxwell Ingham입니다.
출처: chenglou/pretext
데모: chenglou.me
Pretext: Cheng Lou and Pretext contributors · MIT
측정·추가 장면·영상: index.opensource
#Shorts #OpenSource #Pretext #Typography
55 likes · 1,376 views
Mentions
@voceses Oh, it's based on chenglou/pretext. I heard of that a while back. Seems like it has matured quite a bit.
Show HN: Calm Web – Print magazine style reader Wanted to have a better reading experience. Curated feeds to avoid bumping into paywalls. Used: chenglou/pretext and: lyallcooper/justif for layout and justification with 2-column pages. Simplified navigation with shortcuts (in Settings) to move through things more quickly. Mainly focused on desktop experience.
Pretext: Text That Flows Around Shapes Text flows around moving shapes without repeatedly measuring the page’s DOM layout. Pretext is a JavaScript/TypeScript text measurement and layout library by Cheng Lou and the Pretext contributors. prepare() measures segments once using the browser’s font engine; layout() calculates line breaks and height from those cached widths. Applications can then build shape-aware layouts, fitted chat bubbles and multilingual typography. Benchmark scope: our Chrome test used 1,000 paragraphs in 16px Georgia across 40 widths. Repeated layout took about 0.13 ms per width versus about 5.0 ms for DOM height reads, or 36–41× across six runs. The initial prepare() pass (about 16 ms total) was excluded. This is not a universal speed guarantee. Heights matched in 39,985 of 40,000 comparisons; the remaining 15 differed by one line. Repository demos and library outputs are shown alongside our own benchmark and explanatory scenes. Some repository demo designs are credited to @somnai_dreams / Maxwell Ingham. Source: chenglou/pretext Demos: chenglou.me Pretext: Cheng Lou and Pretext contributors · MIT Benchmark, additional scenes and video: index.opensource 움직이는 도형 둘레로 글이 흐릅니다. 페이지의 DOM 레이아웃을 반복해서 재는 대신, 글 조각의 너비를 재사용합니다. Pretext는 Cheng Lou와 기여자들이 만든 JavaScript/TypeScript 글 측정·배치 라이브러리입니다. prepare()에서 브라우저 글꼴 엔진으로 조각 너비를 한 번 재고, layout()에서 그 값으로 줄바꿈과 높이를 계산합니다. 앱은 이를 활용해 도형을 피하는 레이아웃, 꼭 맞는 채팅 말풍선, 다국어 타이포그래피를 만들 수 있습니다. 측정 범위: 이 PC의 Chrome에서 16px Georgia 문단 1,000개와 폭 40가지를 시험했습니다. 폭당 반복 배치는 약 0.13 ms, DOM 높이 읽기는 약 5.0 ms로, 6회 측정에서 36–41배 차이가 났습니다. 최초 prepare() 비용 약 16 ms는 비교에서 제외했습니다. 모든 환경에서 같은 속도를 보장하는 수치가 아닙니다. 높이는 40,000번 중 39,985번 일치했고, 나머지 15번은 한 줄 차이가 있었습니다. 저장소 데모·라이브러리 출력과 직접 만든 측정·설명 장면을 함께 보여 줍니다. 저장소 데모 일부의 디자인 크레디트는 @somnai_dreams / Maxwell Ingham입니다. 출처: chenglou/pretext 데모: chenglou.me Pretext: Cheng Lou and Pretext contributors · MIT 측정·추가 장면·영상: index.opensource #Shorts #OpenSource #Pretext #Typography
I’m having real fun with @_chenglou’s pretext on building my biography In case anyone needs: chenglou/pretext t.co
@manwon_man 我相信这个文字重排的开源库（ 51K Star） 可以完美实现视频中的效果，而且使用起来非常简单，产品官网有足够多的展示案例了。 chenglou/pretext