Enhanced Canvas TextMetrics

Category: Graphics
Type: New or changed feature
Status: Proposed (Chrome Proposed)
Intent stage: None

Summary

Expand the TextMetrics Canvas API to support selection rectangles, bounding box queries, and glyph cluster-based operations. This new functionality should enable complex text editing applications with accurate selection, caret positioning, and hit testing. Additionally, cluster-based rendering facilitates sophisticated text effects such as independent character animations and styling.

Motivation

The existing TextMetrics API provides measurements for atomic text, but offers no facilities to break down that information to a more granular level. Sophisticated text applications (editors in particular) require such granular information in order to support accurate selection, caret positioning and hit testing at a grapheme level. Currently they are resorting to various inaccurate approximations to work around API limitations. Another complex use case involves rendering fragments of pre-shaped text with different attributes - e.g. different colors or different transforms. This is of particular interest to animation frameworks which allow characters to be animated independently. Such functionality is not directly supported in existing APIs, and implementers must again resort to approximate workarounds. The enhanced TextMetrics proposal aims to address the current API shortcomings and to offer first class support for the above use cases.

Standards & signals

Specification: https://github.com/whatwg/html/pull/11000
Firefox: No signal
Safari: Negative — WebKit supports the general problem space—enabling canvas text shaping, cluster rendering, and selection—but has expressed reservations regarding the specific API design in this proposal (see WHATWG issue #10677). Specifically, WebKit prefers exploring an alternative, line-level abstraction (e.g., TextLine) to handle multi-style text and BiDi interleaving, rather than extending TextMetrics.
Web developers: Positive — Strongly Positive There is strong demand from canvas-heavy frameworks and applications that implement custom text layout and text editing. Canvas text rendering currently suffers from significant performance and memory overhead because applications are forced to synchronize offscreen DOM elements just to measure selection rectangles, bounding boxes, and caret positions. Key validation from the ~8-month Origin Trial: * Flutter Web: Integrated and validated the API in their production engine (WebParagraph) throughout the Origin Trial. They rely on getTextClusters() and getSelectionRects() to drive their web text layout and hit-testing, and are strongly advocating for shipping this capability. * Canvas Tooling & Creative Coding: Successfully demonstrated in complex single-line typography scenarios, such as interactive text-on-a-path editors and per-glyph animations, without requiring DOM-based synchronization.
Tracking bug: https://issues.chromium.org/issues/341213359

Explainers: https://github.com/fserb/canvas2D/blob/master/spec/enhanced-textmetrics.md https://github.com/Igalia/explainers/blob/main/canvas-formatted-text/text-metrics-additions.md https://github.com/whatwg/html/issues/10677

View on chromestatus.com