New Tool Bypasses Browser Limits for Faster Text Display
A new tool called pretext, created by former React core team member Changlu, is set to change how developers build websites. It promises to make text-heavy applications much faster and smoother by avoiding a slow process that browsers normally use.
The Problem with Browser Text
When a web browser shows text, it often needs to figure out exactly how much space that text will take up. This involves calculating its height and width, which can trigger a process called a “layout reflow.” This reflow is one of the most demanding tasks a browser performs. It forces the browser to recalculate the position and size of almost everything on the page. This makes it very difficult to create complex interfaces like long lists or grids that handle a lot of text efficiently.
Imagine building a chat app with thousands of messages. To make it fast, developers often use a technique called “virtualization.” This means only the messages currently visible on the screen are actually shown to the user. But to know which messages to show, the app first needs to know the exact height of every single message. This measurement step has always been a major performance bottleneck.
Pretext Offers a Smarter Solution
Pretext offers a way around this problem. Instead of asking the browser to do the heavy lifting, it uses different methods. For calculating the width of text, pretext uses the browser’s Canvas API. This API works separately from the main page layout, allowing it to measure text dimensions without causing those slow reflows. Think of it like using a separate calculator that doesn’t interrupt your main work.
The real challenge was measuring text height accurately, especially considering how different browsers and languages handle line breaks. Changlu developed a custom algorithm for this. He reportedly had other engineers (referred to humorously as “clankers”) test and refine the line-breaking logic across various browsers and languages over several weeks. This intensive process aimed to create a highly accurate system.
How Pretext Works
The resulting tool has a surprisingly simple interface for developers. First, you use a function like prepare to break your text into smaller parts and cache the width of each part. Then, you call a function like layout. This function quickly provides the total height and the number of lines for that text, all without forcing the browser to perform expensive layout calculations.
A Demo of its Power
To show pretext’s capabilities, a demonstration was created. This example allows users to read a video’s transcript while simultaneously watching the video’s sponsored segment. The system first processes the transcript using pretext’s prepare function to get the pixel width of each text segment.
Then, it repeatedly calls a function like next line for each row displayed on the screen. This determines exactly which characters should appear in each position. The final result is a grid where each cell knows its character. The video itself is then drawn onto a small, hidden canvas. The system reads the pixel data from this canvas and calculates the brightness of each pixel. This brightness information is used to decide whether to display a character in each cell of the grid. If the video pixel is bright, the character appears bright; if it’s dark, the character is skipped. This creates an image formed by letters, with pretext handling the precise placement of each character.
Why This Matters
Pretext’s innovation means that developers are no longer limited by the browser’s built-in text measurement processes. This can lead to significantly faster and more responsive user interfaces, especially for applications that rely heavily on displaying large amounts of text. Applications like virtual lists, complex text editors, or even creative visual displays can now be built with much better performance.
JetBrains Jiny CLI: Another Development Tool
The article also highlights JetBrains’ new Jiny CLI. This tool brings their AI coding assistant, Jiny, directly into the command line, making it usable outside of their Integrated Development Environments (IDEs). Users can install it with a single command and start assigning coding tasks. The CLI is noted for its ability to handle complex tasks, partly due to JetBrains’ deep understanding of project structures. Jiny also intelligently switches between different AI models to best suit each task. It is available for a free trial.
Source: He just crawled through hell to fix the browser… (YouTube)
