Transcription
All right. Why is everybody freaking out about pretext? Chango, React Core contributor, super smart guy, engineer at Midjourney, came out with this new library called pretext. And everyone's freaking out. These demos are amazing that we're seeing. People are pronouncing CSS dead, which I think is kind of stupid. And all while people are saying like, I don't I don't get the point. What's it for? And all the demos are these like kind of silly text layout effects. And and I'm here to explain to you what this library is actually for, why it is probably more impressive than you think, and why I think this is a big deal.
So, this library really just does two things. It pre-calculates the width and height of every single word. So, you give it a whole bunch of text and it measures out how big each of those words are. Then, it also has an algorithm to implement a layout engine similar to how the browser does. So, if you have something like a 500 pixel wide thing, you know that your text just wraps onto the next line. That is not an easy thing to actually implement. And if you look at canvas or things like that, we don't even have line wrapping. Then you get into um different types of line wrapping, different types of languages, emojis. There's all these different rules and it's actually a very hard problem to solve. So this guy woke up and says, you know what I want to do? I want to reimplement how the browsers do text layout in the browser.
Now the interesting thing about this library is that they're not actually touching the DOM when they do it. So the the way that you typically measure text right now is you take the text, you put it into the DOM, and then you run like a method on that DOM element like get bounding w to figure out how big it's going to be. This is a very common thing that we do in something like fit text. The way that fit text typically works is you put some text, you set a font size on it, you then use get bounding w to measure the size of that text. And if it is not overflowing the element, then you just increase the font size. And you just keep going and keep going, keep going, keep going until you are eventually, here we go, at 92 px, we are overflowing the element. So we realize we overshot it. We rolled it back to the last known good configuration. And then finally, we have our final fit. That works really well. And here I've slowown it down to just show you what's happening. But if I were to just do it as fast as possible, you still see would see a little bit of jitter.
Now, when you want to do something that is real time, you first you do not want page jank like that. And second, you want it like as fast as possible, which is why a lot of these demos are doing them in real time to just show that this thing is so fast. So the way that this library works is it uses HTML canvas to measure each of the lines. So here I've given it B movie, the entire B movie script, and I've said I want it to be, I don't know, something like 500 pixels wide or 800 pixels wide. And what it does is it will measure every single word, cache those. That takes about 44 milliseconds to measure every word in BMOV. And then you do a layout of that so it knows exactly where to put the the word wraps. Then once you have that information, you have this like layout result inside of there you are going to be getting every single line and every single word along with the information about the width and the height of each of those words. And at that point it's up to you to do what you want. And that's where a lot of these kind of creative demos are coming in where you can tell it, okay, I only have 40 pixels of space on this line. What words can I now fit into that? And then the next line has 50 pixels. What can I do? And you that's a kind of a cool way that you can wrap text around it.
Now, in in what world is this useful? In what world would we want to absolutely position every single word on our website? That that looks like hell to me, right? And I I don't think that that's the actual use case for this type of thing. I think the idea here is that you can measure out the text, do the layout with pre-text and then the alternative view layers are sort of the move here. So you could write it to the DOM, but you could also write it to canvas, right? Line wrapping in canvas has always been a very hard thing. Now it's a very easy thing with pretext. You can simply just have line wrapping in canvas. But what are other things, right? Like like WebGL, car infotainment screens. Um there is already something called what textura which is react native. If you are working with react native you have JavaScript for all of your logic but the actual view layer is is native right and they have reimplemented a lot of CSS in this thing called yoga and it's it works pretty good and pretty close to CSS but it's it's not CSS and now someone has taken this and implemented it to work with yoga which is really cool. Now you have a very powerful text engine that can be measured in JavaScript, but you can use alternative view layers like a React Native to actually display it. Other use cases, server rendering, uh virtualized DOM. You want to if you ever to scroll very far back in a chat GPT app, you can tell it gets a little bit laggy, right? Uh being able to server render and measure things on the server before they're coming in, you're streaming in an AI response. That's not entirely possible to fix the sort of jumpiness that AI has as it's streaming it in, but you can get a much better experience if you know how big the text is going to be before you do that initial render.
Which brings me to my next point. So the author of this thing, Cheng Lao, works for Midjourney. You got to think like like why is an engineer at Midjourney creating a text sizer when Midjourney themselves didn't have a UI for the first like four years of of their existence. So, if you go to their website, you see a couple things here, right? What is this? TBA software. TBA software hardware lips. I'm not quite sure about what the hell that is yet, but I think that they are building a Figma competitor that is AI driven. So, we're seeing a lot of like Figma killers coming out right now, right? There's uh Paper and Pencil are two separate apps. And the commonality between all of these new Figma killers that are coming out is that they all render in HTML and CSS. And they do this because it is way easier to go from a design app that is rendered in HTML and CSS to actual code when it is the same primitives. And it's much easier to go the other way, which is you have an existing website and you want to bring that into your design app. it is much easier to recreate that existing app, put it into the new Figma killer. And then finally, of course, the big one is that AI is very good at writing HTML, CSS, and JavaScript. So why if you're building like what the next Figma is going to be, it's definitely going to be something that has AI in every little nook and cranny whether you like it or not. And I bet Midjourney is working on a Figma killer where they can use all of their cool like uh image generation and asset generation stuff along with like some you give a designer an interactive tool that's allow allows you to to work with that and then of course out the other end kick it out to HTML CSS when it's an actual app.
The other thing that I was like kind of like gnawing on it. What else could this be? Maybe, I don't know if this is true. I kind of don't want it to be true, but he might be building an entire new layer. This might be imagine that he was like, "You know what? No DOM. No DOM at all. We're just going to render everything in canvas." And he's you what would you start with if you were building an entirely new UI layer that is rendered out to canvas? You probably would start with the very basic primitive of wrapping text, right? And then like like what's next? Is he going to come out with like layouts and and gooies and cards and and things like that moving his way all the way up? Um like think of like a swift kit for the web, something like that. Uh that would be a huge huge undertaking, but people are taking on some pretty crazy stuff in this AI age that we have right now.
A lot of other people were looking at this type of thing being like, "Yeah, I don't I don't get it. This is awful readability. These demos are not what this the endgame of this library actually is." is a lot of people said like we've been able to do this with with CSS forever, right? Look at this. This is text wrapping around a girl, right? But I I even worked on a video with this and I had to end up scrapping it because these are cool demos, but they don't actually work for like real web development because in this case, you have to perfectly figure out the two columns of text. Pretext is great at you say, I have two columns of text. I got to I want to balance them between the two. That's that's a great use case, right? So what what they do here is you split it into two columns and then they had to split this poor girl in half because you can either float the girl left or float the girl right, but you can't float the girl in the middle. You can't have text go around both sides of it with the CSS shape outside API.
So one other cool thing about this is the way that he actually built it, which is hula hooping in front of his monitor while AI did all of the work. and and that's not entirely true, but text wrapping and and browser rendering and this stuff is edge cases all the way down, right? Like what happens if you have some Chinese characters that are mixed in with a weird text wrapping and it's it's pain all the way down, which is why nobody has ever built a library like this before. However, what he was able to do with this type of thing is is once he got sort of like the loop and everything in place, he went through every single browser at every single pixel and sort of just loop through it seeing if there were any issues at it. And AI is a fantastic this whole soul crushing work for a human to do. But if you can just hula hoop with your little banana thing while AI does all the measuring and decrements the browser by one pixel every single time. Absolute cracked engineer using the new tools for stuff that we previously would not have even thought was possible because of all the edge cases all the way down.
Will this replace CSS? Not a chance. Text wrap balance text wrap pretty have been added to the language. We have a lot of new the box trim stuff has been added to CSS in the last little while. um when you want to get super custom, when you want to write lower level stuff, that's when you're going to want to reach for a library like this. CSS Houdini was supposed to be this way where we could write some JavaScript, we could write a custom implementation or layout and then just reference that in our CSS files. It didn't entirely pan out that way, but we did get a lot of the things like text wrap balance make its way into CSS. The way that this is going to work is that if people start using this library over and over again and they say this is absolute a huge use case I have for this type of stuff. Then we go through the standards process in CSS and we figure out how do we add this to the the engines because I as as fast as this pretext is, you know what's even faster at knowing how big the text is going to be? The browser layout engines already know how big these words are. And if they can figure out how to either surface that information to us or be able to just give us the common use cases for using this library, that's probably what I see is going to happen. Super cool library. Love seeing all the demos. I've been cooking up a few things myself. Leave a comment down below what you think about.