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

21–30 of 76 posts

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

#21

Post by TacticalCoder »

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…

> 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).

But in the end, in a browser, the actual text rendering is still done by the browser?

It's a library that allows to "do stuff" before the browser renders the actual text, but by still having the browser render, eventually, the actual text?

Or is this thing actually doing the final rendering of the text too?

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

#22

Post by simonw »

TacticalCoder wrote: post #21
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…

> 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). But in the end, in a browser, the actual text rendering is still done by the browser? It's a library that allows to "do stuff" before the browser renders the actual text, but by still having the browser render, eventually, the actual text? Or is thi…

Yes the browser still renders the text at the end - but you can now do fancy calculations in advance to decide where you're going to ask the browser to draw it.

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

#23

Post by refulgentis »

lewisjoe wrote: post #8

Quick overview of pretext: if you want to layout text on the web, you have to use canvas.measureText API and implement line-breaking / segmentation / RTL yourself. Pretext makes this easier. Just pass the text and text properties (font, color, size, etc) into a pure JS API and it layouts the content into given viewport dimension. Earlier you'll have to either use measureText or ship harbuzz to browser somehow. I gues…

Skia brings in the world. You’re not wrong, and I understand the subtleties in the Q you asked (i.e. we’re talking Flutter; peer comment saying Skia-wasm is wasm comes across as pedantry to us because wasm vs JS is a compile-time option).

When we’re using flutter, we’re asking for there to be a device-agnostic render-the-world API, i.e. Skia / Impeller.

Here, someone took the time to code with AI a pure Typescript version of glyph rendering.

For us, the difference would sort of be like the difference between having ffmpeg in Dart, and abstractly, having an ffmpeg C library.

It’s been technically possible for years to have a WASM/FFI version with a Dart API, but it hasn’t happened because it’s a lot to take on yourself, and “real companies” would just use a server, because once you’re charging for it, people expect things like backup, download links, their computer not to need to be awake for minutes to complete a transcode, etc

Neatly completing the analogy: now, you or I takes on the grunt work of getting this hammered out and tested via AI over the next two weeks, and sticks it on GitHub. It’s not necessarily the language choice or tool itself that’s fascinating, but it legitimately breaks new ground in client-side media FOSS just to have it possible at all

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

#25

Post by Retr0id »

Retr0id wrote: post #24

Hm, the demos all render wrong on my system (Fedora, Firefox). The torus for example is completely distorted. Edit: example: https://files.catbox.moe/4w3um0.png

I think it goes to show, if you try to make something like this you'll be chasing a long tail of edge cases ~forever.

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

#28

Post by tadfisher »

simonw wrote: post #22
TacticalCoder wrote: post #21

Earlier quoted context omitted.

> 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). But in the end, in a browser, the actual text rendering is still done by the browser? It's a library that allows to "do stuff" before the browser renders the actual text, but by still having the browser render, eventually, the actual text? Or is thi…

Yes the browser still renders the text at the end - but you can now do fancy calculations in advance to decide where you're going to ask the browser to draw it.

I suspect exposing the browser's text layout measurer is going to become a Web API in the future, much like exposing the HTML parser via setHTML().

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

#29

Post by smusamashah »

By the author of the library

> This was achieved through showing Claude Code and Codex the browsers ground truth, and have them measure & iterate against those at every significant container width, running over weeks

https://x.com/_chenglou/status/2037715226838343871?s=20

There was another comment about using Autoresearch probably for this but I might be misremembering

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

#30

Post by leeoniya »

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 close pretext can get to 80ms (or better) without adopting the same tricks.

https://github.com/chenglou/pretext/issues/18

there are already significant perf improvement PRs open right now, including one done using autoresearch.

Post reply on HN