How LayoutNG Improved Text Layout and Stability in Chromium

Project LayoutNG was a multi-year architectural rewrite of the Blink rendering engine’s layout system in the Chromium web browser. This article explains how LayoutNG drastically improved text layout accuracy and eliminated thousands of edge-case stability bugs by replacing a decades-old mutable layout tree with an immutable fragment tree, adopting paragraph-level text shaping, and standardizing subpixel geometry.

The Legacy Architecture Problem

Before LayoutNG, Chromium’s layout engine relied on a single, mutable tree of objects originally inherited from WebKit. During a layout pass, nodes modified their own states and the states of their children simultaneously. This tight coupling caused severe stability issues, particularly when handling complex CSS combinations like nested floats, tables, and flexbox. Incremental layout updates often left the tree in an inconsistent state, leading to memory corruption, crashes, and visual rendering glitches.

The Immutable Fragment Tree for Stability

LayoutNG solved edge-case stability issues by strictly separating layout inputs and outputs, inspired by functional programming principles. The engine takes the DOM node, applies a read-only ConstraintSpace (input), and generates an immutable PhysicalFragment tree (output).

Because output fragments cannot be altered once they are created, the engine completely prevents state-corruption bugs during layout passes. This architectural shift eliminated entire classes of crashes related to unexpected layout invalidations, out-of-order tree mutations, and infinite recursion loops in complex CSS edge cases. It also made caching layout results entirely predictable and safe.

Paragraph-Level Text Shaping

The most significant leap in text layout accuracy came from how LayoutNG interacts with HarfBuzz, Chromium's text-shaping engine. The legacy engine broke text into isolated inline elements before shaping it. If a single word was split by a <span> tag—for example, to change the color of the first letter—the browser treated the segments as entirely separate words. This broke font kerning, ligatures, and connected cursive scripts like Arabic.

LayoutNG processes and shapes the entire paragraph as a single flat string of text before breaking it into lines or applying inline box boundaries. By feeding the whole paragraph to HarfBuzz at once, Chromium maintains full contextual awareness. Ligatures, kerning, and complex script connections are now preserved seamlessly, even across multiple <span> tags with different borders, margins, or colors.

Accurate Bidirectional Text and Line Breaking

Handling right-to-left (RTL) and left-to-right (LTR) text in the same paragraph was previously a major source of edge-case rendering bugs. LayoutNG integrates the International Components for Unicode (ICU) library directly into the paragraph-level pipeline.

By resolving bidirectional (Bidi) text levels across the entire paragraph before line breaking occurs, Chromium accurately renders mixed-direction text without misplacing punctuation or scrambling word orders at line wraps. Additionally, line breaking is more accurate because LayoutNG calculates breaks using pre-shaped glyph clusters rather than raw characters, ensuring hyphenation and word-wrapping strictly adhere to Unicode standards.

Eliminating Subpixel Rounding Errors

In the legacy engine, text measurement and box positioning used different rounding methods for fractional pixel values. Across long lines of text or deeply nested inline elements, these tiny subpixel discrepancies accumulated. This often caused text to unexpectedly overflow its container, overlap adjacent elements, or wrap to a new line prematurely when zooming the page.

LayoutNG unified the geometry system to use consistent fixed-point arithmetic (LayoutUnit) throughout the entire inline layout pipeline. By measuring and positioning shaped text fragments using the exact same subpixel grid, LayoutNG ensures that the sum of individual text segments always equals the total measured paragraph width, eradicating zoom-related text reflow bugs.