Intent to Prototype: Canvas Formatted Text

114 views
Skip to first unread message

Sushanth Rajasankar

unread,
Dec 4, 2020, 8:20:44 PM12/4/20
to blin...@chromium.org, Travis Leithead

Contact emails 

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

unread,
Dec 8, 2020, 4:27:35 PM12/8/20
to blin...@chromium.org, Sushanth Rajasankar, Travis Leithead
Fixing the row for "Web Developer signals"

We do have positive signals from web developers, they are interested in adopting this API for both performance and correctness reasons

nhelfman · GitHub - Excel Online - Microsoft

Thanks,
Sushanth

From: 'Sushanth Rajasankar' via blink-dev <blin...@chromium.org>
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

unread,
Dec 9, 2020, 5:54:01 AM12/9/20
to Sushanth Rajasankar, blin...@chromium.org, Travis Leithead
This would be good for our game engine Construct 3 (www.construct.net) as well.

Our engine renders entirely to a canvas, and for displaying text we use the canvas text APIs. Since ~2012 we've had to maintain our own custom word wrap engine in JavaScript to handle multi-line text, and I doubt it does everything this proposal does especially with regards to break opportunities and bidi text, so it would be great if the browser could handle that for us. I do think backwards compatibility would be tricky though, as switching existing content to a different word wrap engine will probably result in unwanted differences, but there's not much that can be done about that.


Daniel Bratell

unread,
Dec 10, 2020, 1:44:55 PM12/10/20
to Sushanth Rajasankar, blin...@chromium.org, Travis Leithead

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

unread,
Dec 14, 2020, 1:26:49 PM12/14/20
to brat...@gmail.com, blin...@chromium.org, Travis Leithead
Thanks Bratell, that is a good suggestion. We will follow up with the TAG in the new year 🙂.


From: Daniel Bratell <brat...@gmail.com>
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

unread,
Dec 14, 2020, 1:30:28 PM12/14/20
to ash...@scirra.com, blin...@chromium.org, Travis Leithead
Thanks, Ashley. I'm excited to see that we can help simplify code and address your use case. Looking forward to your feedback once we have a prototype in Chromium.


From: Ashley Gullen <ash...@scirra.com>
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
 
Reply all
Reply to author
Forward
0 new messages