Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

LayoutNG

Scheduled to be released in Chrome 76, LayoutNG is a new layout engine exiting a multi-year effort. There are several exciting immediate improvements, and additional performance gains and advanced layout features will be coming.

What's new?

  1. Improves performance isolation.
  2. Better support for scripts other than Latin
  3. Fixes many issues around floats and margins
  4. Fixes a large number of web compatibility issues

Please note that LayoutNG will be launched in stages. In Chrome 76, LayoutNG is used for inline and block layout. Other layout primitives (such as table, flexbox, grid, and block fragmentation) will be replaced in subsequent releases.

Developer visible changes

Although the user visible impact should be minimal, LayoutNG changes some behavior in very subtle ways, fixes hundreds of tests, and improves compatibility with other browsers. Despite our best efforts, it is likely that this will cause some sites and applications to render or behave slightly differently.

The performance characteristics are also quite different; although performance on a whole is similar or slightly better than before, certain use cases are likely to see performance improvements, while others are expected to regress somewhat, at least short-term.

Floats

LayoutNG reimplements support for floating elements (float: left; and float: right;) fixing a number of correctness issues around placement of floats in relation to other content.

Superimposed content

The legacy float implementation didn’t correctly account for margins when placing content around a floating element, resulting in the content partially or fully overlapping the float itself. The most common manifestation of this bug appears when an image is positioned beside a paragraph where the avoidance logic fails to account for the height of a line. (See Chromium bug #861540.)

top text line shown overlaying floated image
Fig 1a, Legacy layout engine
Text overlaps the floating image to the right
proper text on left and floated image on right
Fig 1b, LayoutNG
Text is positioned beside the floating image to the right

The same problem may occur within a single line. The example below shows a block element with a negative margin following a floating element (#895962). The text should not overlap with the float.

text line shown overlaying an orange box
Fig 2a, Legacy layout engine
Text overlaps the floating orange element
proper text on right of orange box
Fig 2b, LayoutNG
Text is positioned beside the floating orange element

Formatting context positioning

When an element forming a block formatting context is sized next to floats, the legacy layout engine would try to size the block a fixed number of times before giving up. This approach led to unpredictable and unstable behavior and didn't match other implementations. In LayoutNG all floats are taken into account when sizing the block. (See Chromium bug #548033.)

Absolute and fixed positioning are now more compliant with W3C specifications and better match the behavior in other browsers. The differences between the two are most visible in two cases:

  • Multi-line inline containing blocks
    If an absolutely positioned containing block spanned multiple lines, the legacy engine might incorrectly use only a subset of the lines to compute the containing block bounds.
  • Vertical writing modes
    The legacy engine had many problems placing out-of-flow elements in the default position in vertical writing modes. See the next section for more details about improved writing mode support.

Right-to-left (RTL) languages and vertical writing modes

LayoutNG was designed from the ground up to support vertical writing modes and RTL languages, including bidirectional content.

Bidirectional text

LayoutNG supports the most up-to-date bidirectional algorithm defined by The Unicode Standard. Not only does this update fix various rendering errors, but it also includes missing features such as paired bracket support (See Chromium bug #302469.)

Orthogonal flows

LayoutNG improves the accuracy of vertical flow layout, including, for example, placement of absolutely positioned objects and sizing of orthogonal flow boxes (especially when percent is used). Of the 1,258 tests in the W3C test suites, 103 tests that failed in the old layout engine pass in LayoutNG.

Intrinsic sizing

Intrinsic sizes are now calculated correctly when a block contains children in an orthogonal writing mode.

Text layout & line breaking

The legacy Chromium layout engine laid out text element-by-element and line-by-line. This approach worked well in most cases but required a lot of e xtra complexity to support scripts and achieve good performance. It was also prone to measurement inconsistencies, which led to subtle differences in the sizing of size-to-content containers and their content or unnecessary line breaks.

In LayoutNG, text is laid out at the paragraph level and then split into lines. This allows for better performance, higher quality text rendering, and more consistent line breaking. The most notable differences are detailed below.

Joining across element boundaries

In some scripts, certain characters can be visually joined when they're adjacent. Check out this example from Arabic:

In LayoutNG joining now works even if the characters are in different elements. Joins will even be preserved when different styling is applied (See Chromium bug #6122.)

A grapheme is the smallest unit of a language's writing system. For example, in English and other languages that use the Latin alphabet, each letter is a grapheme.

The images below show the rendering of the following HTML in the legacy layout engine and LayoutNG, respectively:

<div>&#1606;&#1587;&#1602;</div>
<div>&#1606;&#1587;<span>&#1602;</span></div>
proper grapheme on left and separated improper rendering on right
Fig 3a, Legacy layout engine
Note how the form of the second letter changes
proper combined graphemes shown
Fig 3b, LayoutNG
The two versions are now identical

Chinese, Japanese, and Korean (CJK) ligatures

Although Chromium already supports ligatures and enables them by default, there are some limitations: ligatures involving multiple CJK codepoints are not supported in the legacy layout engine due to a rendering optimization. LayoutNG removes these restrictions and supports ligatures regardless of script.

The example below shows the rendering of three discretionary ligatures using the Adobe SourceHanSansJP font:

middle character combination not forming ligature
Fig 4a, Legacy layout engine
MHz correctly forms a ligature
but マンション and 10点 do not
proper ligatures shown
Fig 4b, LayoutNG
All three groups form ligatures as expected

Size-to-content elements

For elements that size-to-content (such as inline blocks) the current layout engine computes the size of the block first and then performs layout on the content. In some cases, such as when a font kerns aggressively, this may result in a mismatch between the size of the content and the block. In LayoutNG this failure mode has been eliminated as the block is sized based on the actual content.

The example below shows a yellow block sized to content. It uses the Lato font which uses kerning to adjust the spacing between T and -. The bounds of the yellow box should match the bounds of the text.

trailing whitespace shown at the end of the text container
Fig 5a, Legacy layout engine
Note the trailing whitespace after the last _T_
text bounds have no extra space
Fig 5b, LayoutNG
Note how the left and right edges of the box match the bounds of the text

Line wrapping

Similar to the problem described above, if the content of a size-to-content block is larger (wider) than the block, content can sometimes wrap unnecessarily. This is quite rare but sometimes happens for mixed directionality content.

premature line break shown causing extra space
Fig 6a, Legacy layout engine
Note the unnecessary line break and extra space on the right
no unnecessary space or line breaks shown
Fig 6b, LayoutNG
Note how the left and right edges of the box match the bounds of the text

Further information

For more detailed information about the specific compatibility issues and bugs fixed by LayoutNG, please see the issues linked above or search the Chromium bug database for bugs marked Fixed-In-LayoutNG.

If you suspect that LayoutNG may have caused a website to break, please file a bug report, and we'll investigate.

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

rss_feed Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!