Intent to Ship: Baselines in New TextMetrics API in Canvas

[Yi Xu]

Contact emails

yi...@chromium.org, aar...@chromium.org, fs...@chromium.org

Explainer

https://learn.microsoft.com/en-us/typography/opentype/spec/baselinetags

Specification

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

we are launching the following attributes in TextMetrics: alphabeticBaseline, hangingBaseline and ideographicBaseline

Tag Review

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

Summary

This is the 4th installment in extending the TextMetrics API (first attempt link, second attempt, third attempt).The current canvas TextMetrics API exposes the actualBoundingBox and the fontBoundingBox readings. The definition of baseline is more clear now. Both Firefox and Safari have already shipped this extension to TextMetrics.

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

Blink component

Blink>Canvas

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

Yes

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

https://wpt.fyi/results/html/canvas/element/text/2d.text.measure.baselines.html?label=experimental&label=master&aligned

Entry on the feature dashboard

https://chromestatus.com/feature/6516079022571520

Risks

Interoperability and Compatibility

Safari and Firefox have has already shipped these metrics in the spec.

 

Firefox: Shipped

Safari: Shipped

 

We know this is a 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 requires a relayout of the page.

 

Activation

Enable the platform experiment ExtendedTextMetrics

[Yoav Weiss]

On Fri, Aug 18, 2023 at 8:25 PM Yi Xu <yi...@chromium.org> wrote:

Contact emails

yi...@chromium.org, aar...@chromium.org, fs...@chromium.org

Explainer

https://learn.microsoft.com/en-us/typography/opentype/spec/baselinetags

Specification

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

we are launching the following attributes in TextMetrics: alphabeticBaseline, hangingBaseline and ideographicBaseline

Tag Review

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

Summary

This is the 4th installment in extending the TextMetrics API (first attempt link, second attempt, third attempt).The current canvas TextMetrics API exposes the actualBoundingBox and the fontBoundingBox readings. The definition of baseline is more clear now. Both Firefox and Safari have already shipped this extension to TextMetrics.

Thanks for pushing through this!! Any details on why the past attempts weren't successful?

 

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

Blink component

Blink>Canvas

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

Yes

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

https://wpt.fyi/results/html/canvas/element/text/2d.text.measure.baselines.html?label=experimental&label=master&aligned

Entry on the feature dashboard

https://chromestatus.com/feature/6516079022571520

Risks

Interoperability and Compatibility

Safari and Firefox have has already shipped these metrics in the spec.

 

Firefox: Shipped

Safari: Shipped

 

We know this is a 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 requires a relayout of the page.

 

Activation

Enable the platform experiment ExtendedTextMetrics

--
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/CAC3hXJeKqXo9QKyreEM%2BqiNM0gi_us%3DWZ_-17AxpMg-bF%2BoLkA%40mail.gmail.com.

[Yi Xu]

Hi Yoav,

In first attempt link, we tried to ship all the attributes under TextMetrics API (in 2018). Some definitions were not clear so we was not able to do it.

In second attempt, we shipped actualBoundingBoxLeft, actualBoundingBoxRight, fontBoundingBoxAscent, fontBoundingBoxDescent, actualBoundingBoxAscent, actualBoundingBoxDescent, emHeightAscent and emHeightDescent.

In third attempt, we shipped fontBoundingBoxAscent, fontBoundingBoxDescent

In this attempt, we are trying to ship alphabeticBaseline, hangingBaseline and ideographicBaseline. Note that both Safari and firefox have shipped it, so we will like to catch up on this.

Thank you,

Yi Xu

[Mike Taylor]

LGTM1

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

[Chris Harrelson]

LGTM2

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/67059d9a-6196-4783-9707-33b5be2de094%40chromium.org.

[TAMURA, Kent]

LGTM3.

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

--

TAMURA, Kent
Software Engineer, Google

[Ashley Gullen]

There is still this open issue about inconsistent TextMetrics measurements across browsers: https://bugs.chromium.org/p/chromium/issues/detail?id=1183752

I think it may involve this unresolved spec issue: https://github.com/whatwg/html/issues/6731

This is causing us constant annoying compatibility problems across browsers - we just can't draw or align text in a canvas consistently across browsers and our customers keep complaining about it. Shouldn't these issues be sorted out before adding even more text metrics?

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

[Yi Xu]

Hi Ashley,

Thank you for reviewing! I am trying to launch hanging, alphabetic and ideographic baselines and the issues that you pointed out are related to the "top" baseline. I can look into the top baseline definition afterwards.

Yi Xu