New Tool Smashes Browser Text Measurement Limits

New Tool Smashes Browser Text Measurement Limits

A former React core team member and engineer at Midjourney has released a new tool called pretext. This tool promises to make building text-heavy web applications much faster and more efficient. It’s a big deal for web developers who have long struggled with how browsers handle text.

The Problem with Browser Text

When a web browser shows text, it needs to figure out how much space that text will take up. This includes its height and width, and where to break lines. To do this, the browser often has to perform a process called a “layout reflow.” This reflow is one of the most demanding operations a browser can do. It can force the browser to recalculate the position and size of almost every item on a web page. This can make apps that show a lot of text, like long lists or complex layouts, slow and difficult to build.

Pretext Offers a New Solution

The engineer, Changlu, claims pretext can bypass this slow browser process. “Pretext is a fast, secure, accurate, and comprehensive text measurement library written in pure Typescript,” the announcement states. The tool uses the Canvas API, which is separate from the main web page display. This allows it to calculate the exact pixel width of text in any font without triggering those costly reflows. This means developers can get text measurements without slowing down the user’s browser.

Calculating Text Height Was Tricky

Figuring out the width was only half the battle. Getting the height of text involved more complex challenges. Different browsers and languages handle line breaks in unique ways. Changlu developed a custom algorithm to account for these differences. He reportedly had other engineers help test and refine this logic across various browsers and languages. This intensive process aimed to create a highly accurate system for measuring text height.

How Pretext Works

The pretext library offers a simple way for developers to use its features. First, developers use a “prepare” function. This breaks the text into smaller pieces and saves the width of each piece. Then, they call a “layout” function. This function quickly provides the total height and the number of lines for the text. Crucially, this all happens without needing to interact with the browser’s main display elements, thus avoiding reflows.

A Creative Application: Video Sculpted by Text

To show the power of pretext, a demonstration was created. This app allows users to watch a video while simultaneously reading its transcript. The system uses pretext to figure out exactly where each character of the transcript should appear on the screen. It then draws the video onto a small, hidden area. By analyzing the brightness of each pixel in the video, it determines whether to display a character in that spot. Bright areas of the video result in visible characters, while dark areas leave the space blank. The result is an image that appears to be formed by the text itself, sculpted by the video’s content.

Why This Matters

For years, developers have been limited by how browsers handle text measurements. This has made it hard to create smooth, responsive interfaces for applications that rely heavily on text. Tools like pretext remove these limitations. They allow for more complex and dynamic user interfaces, especially in areas like chat applications, data visualization, and long-form content display. This innovation means that web applications can become faster and more engaging for users.

JetBrains AI Assistant Expands Reach

In related news, JetBrains, the company known for its developer tools, has expanded the availability of its AI coding assistant, Jupy. While Jupy has been integrated into JetBrains’ integrated development environments (IDEs) for some time, it has now launched as a command-line interface (CLI) tool. This means developers can now use Jupy’s AI capabilities directly from their terminal, regardless of the IDE they are using. The CLI can be installed with a single command. Developers can assign tasks to Jupy, which can analyze project dependencies, suggest code improvements, and more. JetBrains highlights that Jupy’s strength comes from its deep understanding of project architecture, allowing it to switch between different AI models to best suit each task.

Source: He just crawled through hell to fix the browser… (YouTube)