Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Pretext: TypeScript library for multiline text measurement and layout

github.com

Post reply on HN
Print view View original

31–40 of 76 posts

Re: Pretext: TypeScript library for multiline text measurement and layout

#31

Post by simonw »

leeoniya wrote: post #30
simonw wrote: post #12

This thing is very impressive. The problem it solves is efficiently calculating the height of some wrapped text on a web page, without actually rendering that text to the page first (very expensive). It does that by pre-calculating the width/height of individual segments - think words - and caching those. Then it implements the full algorithm for how browsers construct text strings by line-wrapping those segments usi…

i wrote something similar for this purpose, but much simpler and in 2kb, without AI, about a year ago. uWrap.js: https://news.ycombinator.com/item?id=43583478 . it did not reach 11k stars overnight, tho :D for ASCII text, mine finishes in 80ms, while pretext takes 2200ms. i haven't yet checked pretext for accuracy (how closely it matches the browser), but will test tonight - i expect it will do well. let's see how cl…

Looks like uWrap only handles latin characters and doesn't deal with things like soft hyphens or emoji correction, plus uWrap only handles white-space: pre-line while Pretext doesn't handle pre-line but does handle both normal and pre-wrap.

Re: Pretext: TypeScript library for multiline text measurement and layout

#32

Post by liuliu »

leeoniya wrote: post #30
simonw wrote: post #12

This thing is very impressive. The problem it solves is efficiently calculating the height of some wrapped text on a web page, without actually rendering that text to the page first (very expensive). It does that by pre-calculating the width/height of individual segments - think words - and caching those. Then it implements the full algorithm for how browsers construct text strings by line-wrapping those segments usi…

i wrote something similar for this purpose, but much simpler and in 2kb, without AI, about a year ago. uWrap.js: https://news.ycombinator.com/item?id=43583478 . it did not reach 11k stars overnight, tho :D for ASCII text, mine finishes in 80ms, while pretext takes 2200ms. i haven't yet checked pretext for accuracy (how closely it matches the browser), but will test tonight - i expect it will do well. let's see how cl…

prepare uses measure text, if it is in a for loop, it won't be fast. This library is meant to do prepare once and then layout many times. layout calls should be sub-1 ms.

Re: Pretext: TypeScript library for multiline text measurement and layout

#33

Post by leeoniya »

simonw wrote: post #31
leeoniya wrote: post #30

Earlier quoted context omitted.

i wrote something similar for this purpose, but much simpler and in 2kb, without AI, about a year ago. uWrap.js: https://news.ycombinator.com/item?id=43583478 . it did not reach 11k stars overnight, tho :D for ASCII text, mine finishes in 80ms, while pretext takes 2200ms. i haven't yet checked pretext for accuracy (how closely it matches the browser), but will test tonight - i expect it will do well. let's see how cl…

Looks like uWrap only handles latin characters and doesn't deal with things like soft hyphens or emoji correction, plus uWrap only handles white-space: pre-line while Pretext doesn't handle pre-line but does handle both normal and pre-wrap.

correct, it was meant for estimating row height for virtualizing a 100k row table with a latin-ish LTR charset (no emoji handling, etc). its scope is much narrower. still, the difference in perf is significant, which i have found to be true in general of AI-generated geenfield code.

Re: Pretext: TypeScript library for multiline text measurement and layout

#34

Post by leeoniya »

liuliu wrote: post #32
leeoniya wrote: post #30

Earlier quoted context omitted.

i wrote something similar for this purpose, but much simpler and in 2kb, without AI, about a year ago. uWrap.js: https://news.ycombinator.com/item?id=43583478 . it did not reach 11k stars overnight, tho :D for ASCII text, mine finishes in 80ms, while pretext takes 2200ms. i haven't yet checked pretext for accuracy (how closely it matches the browser), but will test tonight - i expect it will do well. let's see how cl…

prepare uses measure text, if it is in a for loop, it won't be fast. This library is meant to do prepare once and then layout many times. layout calls should be sub-1 ms.

it is not clear from the API/docs how i would use prepare() once on one text and then use layout() for completely different text.

i think the intended purpose is that your text is maybe large but static and your layout just changes quickly. this is not the case for figuring out the height of 100k rows of different texts in a table, for example.

Re: Pretext: TypeScript library for multiline text measurement and layout

#35

Post by Rohansi »

staminade wrote: post #16
Trufa wrote: post #15

I said it elsewhere but will repeat it here: This is incredibly impressive, many of this things have been missing for forever! I remember the first time I couldn't figure out how do a proper responsive accordion, it was with bootstrap 1, released in 2011 !! Today it's still not properly solved (until now?). Many of thing things belong in css no in js, but this has been the pattern with so many things in the web 1) we…

Responsive accordions are actually solved using CSS nowadays, but plenty of other things aren't, and the web has definitely needed an API or library like this for a long, long time. So it's great that we now have it. Building something like this was certainly possible before, but it was a lot of effort. What's changed is simple: AI. It seems clear this library was mostly built in Cursor using an agent. That's not a c…

> it's a perfect use of AI to build something that we couldn't before.

There's no reason why it couldn't have been built before. This is something that probably should exist as standard functionality, like what the Canvas API already includes. It's pretty basic functionality that every text renderer would include already at a lower level.

Re: Pretext: TypeScript library for multiline text measurement and layout

#36

Post by btown »

Gosh, I wish this had existed a year ago; I spent an absurd amount of time creating a system for print brochure typesetting in HTML, that would iteratively try to find viable break points (keeping in mind that bullets etc. could exist at any time) that would ensure non-orphaned new lines, etc., all by using the Selection API and repeatedly finding bounding boxes of prospective renders.

It works, and still runs quite successfully in production, but there are still off-by-one hacks where I have no idea why they work. The iterative line generation feature here is huge.

Re: Pretext: TypeScript library for multiline text measurement and layout

#37

Post by contrahax »

leeoniya wrote: post #30
simonw wrote: post #12

This thing is very impressive. The problem it solves is efficiently calculating the height of some wrapped text on a web page, without actually rendering that text to the page first (very expensive). It does that by pre-calculating the width/height of individual segments - think words - and caching those. Then it implements the full algorithm for how browsers construct text strings by line-wrapping those segments usi…

i wrote something similar for this purpose, but much simpler and in 2kb, without AI, about a year ago. uWrap.js: https://news.ycombinator.com/item?id=43583478 . it did not reach 11k stars overnight, tho :D for ASCII text, mine finishes in 80ms, while pretext takes 2200ms. i haven't yet checked pretext for accuracy (how closely it matches the browser), but will test tonight - i expect it will do well. let's see how cl…

There's a handful of perf related PRs open already so maybe it will be faster soon. I'm sure with enough focus on it we could have a hyper optimized version in a few hours.

Re: Pretext: TypeScript library for multiline text measurement and layout

#38

Post by liuliu »

leeoniya wrote: post #34
liuliu wrote: post #32

Earlier quoted context omitted.

prepare uses measure text, if it is in a for loop, it won't be fast. This library is meant to do prepare once and then layout many times. layout calls should be sub-1 ms.

it is not clear from the API/docs how i would use prepare() once on one text and then use layout() for completely different text. i think the intended purpose is that your text is maybe large but static and your layout just changes quickly. this is not the case for figuring out the height of 100k rows of different texts in a table, for example.

I think for that to use pretext is to join each row with hard line break and then do prepare once, then walk each line. At least that will put the single layout performance into the best light.

I am skeptical getting row height of many items only once is the intended behavior though. It is probably the intended behavior to get row height of many items and enables you to resizing width many time later (which is pretty useful on desktop).

Re: Pretext: TypeScript library for multiline text measurement and layout

#40

Post by dnlzro »

rpastuszak wrote: post #7

Love this. I especially liked shape based reflow example. This is something I've been thinking for ages and would love to add to Ensō (enso.sonnet.io), purely because it would allow me to apply better caret transitions between the lines of text. (I'm not gonna do that because I'm trying to keep it simple, but it's a strong temptation) Now a CSS tangent: regarding the accordion example from the site ( https://chenglou…

> Regarding the text bubbles problem [...], you can use `text-wrap: balance | pretty` to achieve the same result.

No, neither solves the problem. And even if `balance` did work, it's not a good substitute because you don't usually want your line lengths to all be the same length.

See also, related CSS Working Group issue: https://github.com/w3c/csswg-drafts/issues/191

Post reply on HN