Intent to Ship: New TextMetrics API in Canvas

Fernando Serboncini

unread,

Aug 31, 2018, 3:48:23 PM8/31/18

to blink-dev

(sent on behalf of davidqu@, because his emails are still being moderated. Moderators, feel free to drop his previous emails)

Contact emails

dav...@chromium.org, fs...@chromium.org

Spec

https://html.spec.whatwg.org/multipage/canvas.html#textmetrics

Summary

The current canvas TextMetrics API only exposes the width of the measured text. Part of the new API was already implemented under a flag, but there were some inconsistencies and bugs, especially with RightToLeft text. We fixed the problems and implemented a new version of the spec including an array of advances per character and a dictionary returning baselines.

The feature bug (https://crbug.com/277215) has strong user support (21 stars)

Link to “Intent to Implement” blink-dev discussion

https://groups.google.com/a/chromium.org/forum/?fromgroups#!searchin/blink-dev/textmetrics|sort:date/blink-dev/SgofW_bQ3ps/jNYamQHplAMJ

The thread was titled “Intend to ship”, but it was seen as “Intend to implement” and was never actually shipped.

Is this feature supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

Yes

Demo link

-

Debuggability

No DevTools needed for debug. Users can console print the full TextMetrics object in one line.

Risks

Interoperability and Compatibility

Safari already has some of the metrics implemented but since the spec was recently updated some work still needs to be done (advances and getBaselines) to have full interoperability with Chrome. Firefox started development 4 years ago but never shipped. Edge is the only one that has no public signals of implementing yet.

Edge: No signals

Firefox: In development

Safari: Partially Shipped

We know this is a major feature requested by developers (as well as internal Google teams like Google Docs). This API will help developers have more control and more accurate text rendering. As of today a different way to achieve this is by using rendering text to the DOM and using getBoundingClientRect to get some measurements. This process not only requires a draw call but also doesn’t help obtaining the advances or the more granular metrics.

Activation

Enable the platform experiment ExtendedTextMetrics

Is this feature fully tested by web-platform-tests? Link to test suite results from wpt.fyi.

A set of test for each metric, prefixed by “2d.text.measure”:

https://wpt.fyi/results/2dcontext/drawing-text-to-the-canvas

Entry on the feature dashboard

https://www.chromestatus.com/feature/5307344997056512

Chris Harrelson

unread,

Aug 31, 2018, 4:25:50 PM8/31/18

to Fernando Serboncini, blink-dev

Hi,

Two pieces of initial feedback:

1. I don't see a TAG review, has one been filed.

2. It sounds like you are actually adding features to an existing partial API, rather than shipping an entirely new one from scratch. Also, you mentioned that WebKit shipped some TextMetrics APIs also. Is this correct?

Could you enumerate exactly the things being added, and also speak to whether the Blink and WebKit features already shipped are compatible with each other, and with the spec?

Chris

--
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/CADp2-T9J%2BO%3D7AxKx0Ab1isbszhXrr9_xa-7Ck5A6EFhEqmnp1Q%40mail.gmail.com.

Johnny Stenback

unread,

Aug 31, 2018, 4:46:33 PM8/31/18

to chri...@chromium.org, fs...@chromium.org, blink-dev

Specifics aside, I wanted to say non-owner LGTM as this has been a much requested feature for quite some time now. Let's figure out the specifics and finally ship these additional text measurement APIs!

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw9AUZmPVbBYFYQNp2qHSh9rog_Mhe2G5OB%2B_-XgymT38Q%40mail.gmail.com.

Fernando Serboncini

unread,

Aug 31, 2018, 5:00:13 PM8/31/18

to Chris Harrelson, blink-dev

TAG review request: https://github.com/w3ctag/design-reviews/issues/302

Fair enough, let me try to recap the situation. We are talking about the TextMetric dictionary that is returned by canvas2d.measureText("text");

Currently, TextMetrics returns a single field ("width").

The old API (that is also what has been shipped by Safari) contains the extra fields: actualBoundingBoxLeft, actualBoundingBoxRight, fontBoundingBoxAscent, fontBoundingBoxDescent, actualBoundingBoxAscent, actualBoundingBoxDescent, emHeightAscent, emHeightDescent, alphabeticBaseline, hangingBaseline, ideographicBaseline.

The new API that is on spec + WPT and behind a flag on Chrome is the old API with the following diff:

remove alphabeticBaseline, hangingBaseline, ideographicBaseline.

add a getBaselines() method that returns a dictionary of optional baselines: alphabetic, hanging, ideographic.

add a advances attribute returning an array of advances per grapheme.

this new API matches a discussion around TextMetric within CSS-Houdini and addresses some small inconsistencies in the original spec (some values were wrongly defined on spec, correctly implemented on Safari, wrongly implemented on Chrome initially, and fixed now and on spec).

The advances attribute is a new addition, so not really incompatible.

The baselines changes does add an incompatibility. But this was done to address deeper problems with the spec definition around baselines (i.e., nobody can agree what a hanging or an ideographic baseline is supposed to mean). This meant that the original values were meaningless heuristics (hanging is ALWAYS 80% of emHeightAscent, not spec'ed anywhere, but following some Apache guideline). The new spec basically states that, if you are not sure what the baseline is - i.e., not available on the font or on your text layout system -, don't return it.

Both our implementation and Firefox's were on hold for years due to mostly those two issues (baselines and wrong definition of Descent on the spec).

smaug

unread,

Aug 31, 2018, 5:16:37 PM8/31/18

to Fernando Serboncini, blink-dev

On 08/31/2018 10:48 PM, Fernando Serboncini wrote:
> (sent on behalf of davidqu@, because his emails are still being moderated. Moderators, feel free to drop his previous emails)
>
>
> Contact emails
>

> dav...@chromium.org <mailto:dav...@chromium.org>, fs...@chromium.org <mailto:fs...@chromium.org>

>
>
> Spec
>
> https://html.spec.whatwg.org/multipage/canvas.html#textmetrics
>
>
> Summary
>
> The current canvas TextMetrics API only exposes the width of the measured text. Part of the new API was already implemented under a flag, but there
> were some inconsistencies and bugs, especially with RightToLeft text. We fixed the problems and implemented a new version of the spec including an
> array of advances per character and a dictionary returning baselines.
>
> The feature bug (https://crbug.com/277215) has strong user support (21 stars)
>
>
> Link to “Intent to Implement” blink-dev discussion
>
> https://groups.google.com/a/chromium.org/forum/?fromgroups#!searchin/blink-dev/textmetrics|sort:date/blink-dev/SgofW_bQ3ps/jNYamQHplAMJ

> <https://groups.google.com/a/chromium.org/forum/?fromgroups#!searchin/blink-dev/textmetrics%7Csort:date/blink-dev/SgofW_bQ3ps/jNYamQHplAMJ>

>
> The thread was titled “Intend to ship”, but it was seen as “Intend to implement” and was never actually shipped.
>
>
> Is this feature supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?
>
> Yes
>
>
> Demo link
>
> -
>
>
> Debuggability
>
> No DevTools needed for debug. Users can console print the full TextMetrics object in one line.
>
>
> Risks
>
> Interoperability and Compatibility
>
> Safari already has some of the metrics implemented but since the spec was recently updated some work still needs to be done (advances and
> getBaselines) to have full interoperability with Chrome. Firefox started development 4 years ago but never shipped. Edge is the only one that has no
> public signals of implementing yet.
>
>

> Edge: No signals <https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/18848270/>
>
> Firefox: In development <https://bugzilla.mozilla.org/show_bug.cgi?id=1102584>

FWIW, a bug filed and active two years ago isn't exactly in-development.

>
> Safari: Partially Shipped <https://bugs.webkit.org/show_bug.cgi?id=157629>

>
>
> We know this is a major feature requested by developers (as well as internal Google teams like Google Docs). This API will help developers have more
> control and more accurate text rendering. As of today a different way to achieve this is by using rendering text to the DOM and using
> getBoundingClientRect to get some measurements. This process not only requires a draw call but also doesn’t help obtaining the advances or the more
> granular metrics.
>
>
> Activation
>
> Enable the platform experiment ExtendedTextMetrics
>
>

> Is this feature fully tested by web-platform-tests <https://chromium.googlesource.com/chromium/src/+/master/docs/testing/web_platform_tests.md>? Link
> to test suite results from wpt.fyi <https://wpt.fyi/results/?label=experimental>.

>
> A set of test for each metric, prefixed by “2d.text.measure”:
>
> https://wpt.fyi/results/2dcontext/drawing-text-to-the-canvas
>
>
>

> Entry on the feature dashboard <http://www.chromestatus.com/>

>
> https://www.chromestatus.com/feature/5307344997056512
>
> --
> 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

> <mailto:blink-dev+...@chromium.org>.

> To view this discussion on the web visit
> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CADp2-T9J%2BO%3D7AxKx0Ab1isbszhXrr9_xa-7Ck5A6EFhEqmnp1Q%40mail.gmail.com

> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CADp2-T9J%2BO%3D7AxKx0Ab1isbszhXrr9_xa-7Ck5A6EFhEqmnp1Q%40mail.gmail.com?utm_medium=email&utm_source=footer>.

Fernando Serboncini

unread,

Aug 31, 2018, 5:58:50 PM8/31/18

to smaug, blink-dev