Easily render multiline formatted text in Canvas, while letting the browser handle the hard parts of line-breaking and other language-specific constraints.

Motivation

You have a paragraph of text. You want to write it to the canvas. Canvas only supplies fill/strokeText -- only line of text at a time. Where do you break your paragraph up? Doing this is JavaScript is hard and error prone. For example, the author must consider: where are the break opportunities between words or Graphemes? Break opportunities are based primarily on the Unicode Spec but also use dictionaries for languages like Thai and French that dictate additional line breaking rules. Other consideration include identifying grapheme clusters, handling Bidi text, proper text shaping and kerning. Luckily, the browser already has a powerful line breaking, text shaping component used for regular HTML layout. This feature enables authors to tap into the browser's layout feature while maintaining control over the layout of multi-line formatted text.

Status in Chromium

Blink>Canvas


No active development (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

  • No signal
  • No signal
  • No signals

Owners

Last updated on 2020-12-10