Intent to Prototype: Canvas Formatted Text
Sushanth Rajasankar
Contact
emails
sush...@microsoft.com, tra...@microsoft.com
Explainer
None
Summary
Easily render multiline formatted text in Canvas, while letting the browser handle the hard parts of line-breaking and other language-specific constraints.
Blink
component
Blink>Canvas
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.
Initial public proposal
TAG review
None
TAG review status
Pending
Risks
This feature exposes new functionality to the Canvas. Similar behavior is being exposed to the CSS Houdini Layout API. Our goal is to find a good balance in terms of design that harmonizes the two concepts.
Interoperability and Compatibility
None
Gecko:
No signal
WebKit:
No signal
Web
developers:
No signals
Is this feature fully tested by web-platform-tests?
No
Tracking bug
Link to entry on the Chrome Platform Status
Sushanth Rajasankar
Sent: Friday, December 4, 2020 4:36 PM
To: blin...@chromium.org <blin...@chromium.org>
Cc: Travis Leithead <travis....@microsoft.com>
Subject: [EXTERNAL] [blink-dev] Intent to Prototype: Canvas Formatted Text
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/MN2PR00MB060671AEFC6F81BCB9725037FDF09%40MN2PR00MB0606.namprd00.prod.outlook.com.
Ashley Gullen
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/DM6PR00MB060336F0695308E30C6499C8FDCD9%40DM6PR00MB0603.namprd00.prod.outlook.com.
Daniel Bratell
It does indeed sound like a good idea to leverage the browser's advanced line wrapping capabilities!
One friendly recommendation, don't wait too long with filing tag reviews and getting platform tests together, because I think this is something where there might be some discussions before everyone agrees on the best API surface.
/Daniel
Sushanth Rajasankar
Sent: Thursday, December 10, 2020 10:44 AM
To: Sushanth Rajasankar <Sushanth....@microsoft.com>; blin...@chromium.org <blin...@chromium.org>
Cc: Travis Leithead <travis....@microsoft.com>
Subject: [EXTERNAL] Re: [blink-dev] Intent to Prototype: Canvas Formatted Text
Sushanth Rajasankar
Sent: Wednesday, December 9, 2020 2:53 AM
To: Sushanth Rajasankar <Sushanth....@microsoft.com>
Cc: blin...@chromium.org <blin...@chromium.org>; Travis Leithead <travis....@microsoft.com>
Subject: [EXTERNAL] Re: [blink-dev] Re: Intent to Prototype: Canvas Formatted Text
Frank Tang
I am proposing an enhancement of Intl.Segmenter API (adding line break support) to TC39 for ECMA402 (see https://github.com/tc39-transfer/proposal-intl-segmenter-v2 ) The API expose "line break opportunity" of text which implement the
Unicode® Standard Annex #14 UNICODE LINE BREAKING ALGORITHM (see https://www.unicode.org/reports/tr14/)
so it can be used for developer to use it with
- multiple lines of text rendering in <CANVAS>
- jsPDF and other context which need to layout text into multiple lines
- SVG multiple lines of text
During the stage advancement discussion, one delegate suggest me to reach out to Houdini to see which one of the following is better
- Instead of adding that to ECMA402 as a low level API, leave that part of job (breaking text into multiple lines of text) to Houdini to add such API to empower developers to use it on <CANVAS>, SVG , or for jsPDF and therefore there are no need to add them into ECMA402, OR
- TC39 add such low level API into ECMA402 to allow developers to use that with the currently defined Houdini APIs, OR
- TC39 add such low level API into ECMA402 to allow Houdini to depends on Intl.Segmenter for the job of finding out linguistic line break opportunity.
Please comment so we can move forward better in TC39 / ECMA402. Thanks
Similar question to you- do you think the enhancement to Intl.Segmenter will be conflict or redundant to your API? or will it complement the API you intend to implement?
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/BYAPR00MB059824555DAD1801B8F6933AFDC79%40BYAPR00MB0598.namprd00.prod.outlook.com.
Joe Lewis
Curious to know if this is something that's still being pursued or should I write my own layouting engine?
Mike Taylor
According to
https://issues.chromium.org/u/2/issues/40160099#comment20 - it is
not being pursued.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/92387448-12d8-43b7-baef-a8e97f032e2bn%40chromium.org.
Thomas Steiner
According to https://issues.chromium.org/u/2/issues/40160099#comment20 - it is not being pursued.
Stephen Chenney
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/4fc7b100-d613-43d3-b64d-8d29f912973f%40chromium.org.