Discussion

• @tobi Tobi Lutke on x

  The best thing about tech is that whenever something amazing new gets invented, it always leads to shenanigans

• @lucas__crespo Lucas Crespo on x

  Pinch-to-zoom on mobile text has been broken until now. You want bigger text, not a bigger page. So I built a fix that intercepts pinch-to-zoom and resizes text instead of the page. Only two lines of code built on top of @_chenglou's pretext. Try the demo at [image]

• @valcoholics1 @valcoholics1 on x

  Gonna play with this more when I wake up, but I wanted to see if I could get the text layout to respond to image data in a cool way, moving my mouse over parts of the selfie [video]

• @riyvir River Marchand on x

  This little illuminated dragon is very happy about Pretext. He's too busy having fun to care about people's “hot takes” on how “it's not that special.” (This little dragon also only works on desktop right now but maybe I'll do mobile later) https://illustrated-manuscript.vercel.a…

• @_chenglou Cheng Lou on x

  My dear front-end developers (and anyone who's interested in the future of interfaces): I have crawled through depths of hell to bring you, for the foreseeable years, one of the more important foundational pieces of UI engineering (if not in implementation then certainly at [vide…

• @ahmedshahnab Shahnab Ahmed on x

  Nothing Fancy... just experimenting and exploring with the available ones before exploring the new trending ones.. The core trick here: ctx.measureText() pre-computes every word into a data object with a baseX, current x, and targetX. Each frame, a 120-segment dragon emits [video…

• @_chenglou Cheng Lou on x

  @birdabo They also re-did it on https://www.icloud.com/pages a long time ago, using just SVG. That one's actually very undersold; I've read through the dev's method of porting the native alg to web but can't find it back anymore But the core value prop is different here. Pages is…

• @ukint_vs Vadim on x

  Messed around with pretext and literally couldn't stop. Turned my basic static page into something you actually wanna touch. Particle text, scroll trails, scramble transitions. Pure canvas, 60fps, smooth af. https://ukint-vs.github.io/ [video]

• @its_bvisness Ben Visness on x

  Apparently it is “foundational UI engineering” to call the browser's ‘measureText’ API? The library is literally just calling the canvas ‘measureText’ API that has been there since 2009, or alternatively using a wasm build of Harfbuzz. Obviously there's some extra work to handle

• @kevinleeus Kevin Lee on x

  @Riyvir @Scobleizer The problem was solved 30 years ago; it's been there in the word processor algorithms. We can look ahead if things are simple. But what if the paragraph is composed of multiple fonts and sizes? Then we need something like a DOM structure. This little cute tric…

• @solarise_webdev Robin on x

  I know you're all getting mighty tired of seeing typography on your timeline today! But here's a pretext.js demo that (hopefully) isn't a crime against justification and indentation. [video]

• @vladartym Vlad on x

  Okay I think I finally found a good use for @_chenglou 's Pretext. A resume builder that always fits on one page with realtime rendering. [video]

• @gkurttech @gkurttech on x

  Streaming text is rendered with handwriting animation. The layout is calculated with Pretext. Has kerning logic and accurate glyph positions. Text is selectable. [video]

• @samjb1234 Sam B on x

  @_chenglou Yep this works wildly well in @threejs - both via direct DOM embedding and natively within the canvas. Nice. [video]

• @baconbrix Evan Bacon on x

  ok but now combine it with Apple vision models and Expo Agent [video]

• @davederiso Dave Deriso on x

  @_chenglou I wonder if it's possible to do this deterministically using the font definition (sort of like latex). If we have the width of each character in the woff, then you might not even need off-screen canvas rendering

• @steren @steren on x

  I am impressed by this demo, not because the text can have a shape outline, this has been possible already in pure CSS for a while (see https://x.com/...), but because it gives direct control on individual text characters. Demos further down in the thread are more

• @neogoose_btw Dmitriy Kovalenko on x

  I like Cheng, he's extremely smart guy. But the amount of hype this got... I'm sorry you could've done that very easily all this time. There is even a canvas api for that existing for years. Or you could've gone even further and parse ttfs to get the underlying font data and

• @lucas__crespo Lucas Crespo on x

  Started playing with pretext over breakfast, and I can confirm, this is really cool [video]

• @_chenglou Cheng Lou on x

  @davederiso I wish... but on front-end, not currently. For server-rendering in the future: possible yes Web specs have this bad tendencies of being “so close, yet so far” where an API that works 95% of the way breaks for the last 5% when you needed it to always work https://x.com…

• @domenic Domenic Denicola on x

  So many slop influences hailing this as a revolution when it's just a wrapper around the canvas element's existing measureText() function. This is not some new paradigm. Canvas-based text measurement is many years old!

• @birdabo Sui on x

  apple did this on an iPad 15 years ago btw. [video]

• @0xmrtn Maarten on x

  so funny seeing the divide between designers and engineers reacting to @_chenglou 's pretext library. frontend folk are like; “look at this whimsical demo I made full of play”, while engineers are like “the text is unreadable, and we could already do this 15 years ago”

• @_chenglou Cheng Lou on x

  Actually I haven't seen such divide! The divide has been more along the axis of folks who see possibilities beyond bouncing balls, and folks who don't (either due to lack of domain experience, or too much exp that made them overfit. Overfitting can cause cynicism during shifts)

• @charliegreenman Charlie Greenman on x

  Pretext x Yoga = Textura DOM-free layout engine for the web https://github.com/... npm install textura Try it yourself [image]

• @kho Kevin Ho on x

  Had to jump in and experiment with @_chenglou's Pretext. BioMap is a 52 biomarker blocks that expand as you explore, reflowing text across every block every frame. 0.04ms for all 52 layouts only possible with Pretext turning text measurement into pure math. No DOM reads, no [vide…

• @stevibe @stevibe on x

  your physics textbook is not boring anymore Hooke's Law with live text reflow around an actual bouncing simulation. 60fps. zero layout thrashing. @_chenglou what have you unleashed [video]