Sprints: [WebAPI] 2D Canvas, Fx 74 tasks

[chrisdavidmills]

Trello

https://trello.com/c/N0hJJV95/129-2d-canvas-api-fx-74

Acceptance criteria

1. 
   
   • [x] [Implement extended TextMetrics object](https://bugzilla.mozilla.org/show_bug.cgi?id=1102584). See https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics — there is quite a bit to do here.
   
   

[chrisdavidmills]

@Elchi3 not saying you necessarily have to do this one; but I'd like help in giving it a proper estimate. Thanks!

[Elchi3]

BCD: https://github.com/mdn/browser-compat-data/pull/5760

[Elchi3]

Updated/created docs:

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/74#Canvas_and_WebGL

https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics
https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics/actualBoundingBoxAscent
https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics/actualBoundingBoxDescent
https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics/actualBoundingBoxLeft
https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics/actualBoundingBoxRight
https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics/alphabeticBaseline
https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics/emHeightAscent
https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics/emHeightDescent
https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics/fontBoundingBoxAscent
https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics/fontBoundingBoxDescent
https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics/hangingBaseline
https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics/ideographicBaseline

review? @chrisdavidmills

[chrisdavidmills]

@Elchi3 awesome work here, nice one!

I only had a few comments here:

• Some of the descriptions are quite hard to parse. Particularly difficult was this bit, in actualBoundingBoxLeft|Right — "Is a double giving the distance parallel to the baseline from the alignment point given by...". Umm, what does that mean? It'd be nice to try to clarify this text a bit.
• I think a diagram of an actual piece of text would really help, to show where these different lines sit on the text. The diagram in this section might help: https://html.spec.whatwg.org/multipage/canvas.html#text-styles
• None of the child pages have a Syntax section.

[Elchi3]

Thanks @chrisdavidmills!

• Yeah, the descriptions are from the main page, I'm not a font expert, so not sure how to express this better. Trying to read up on this.
• Do you think we can embed this diagram for clarity? https://html.spec.whatwg.org/images/baselines.png
• These are all properties. Per stumptown content types, properties have no syntax box, because (unlike methods) there is no signature to show. Do you disagree with this?

[chrisdavidmills]

Do you think we can embed this diagram for clarity? https://html.spec.whatwg.org/images/baselines.png

Yes, that would work for me, along with a little bit of context.

These are all properties. Per stumptown content types, properties have no syntax box, because (unlike methods) there is no signature to show. Do you disagree with this?

Ah, so that's what we've agreed going forward for stumptown? I guess it works for me, as long as the value type is explained in the summary of the page, which it usually is.

[Elchi3]

Do you think we can embed this diagram for clarity? https://html.spec.whatwg.org/images/baselines.png
Yes, that would work for me, along with a little bit of context.

So, I've given this another try and added a live sample, see https://wiki.developer.mozilla.org/en-US/docs/Web/API/TextMetrics#Examples, with the goal of illustrating this like done in the spec diagram. Of course it only fully works in browsers that support the TextMetrics API or have the respective flags enabled.

Ah, so that's what we've agreed going forward for stumptown? I guess it works for me, as long as the value type is explained in the summary of the page, which it usually is.

Yup. I think it is a good change. I never fully saw the point of syntax boxes for properties.

[chrisdavidmills]

@Elchi3 live example looks good; illustrates nicely what the lines referenced in the property values mean. It's a shame so few of them are supported right now ;-)

[Elchi3]

Particularly difficult was this bit, in actualBoundingBoxLeft|Right — "Is a double giving the distance parallel to the baseline from the alignment point given by...". Umm, what does that mean? It'd be nice to try to clarify this text a bit.

So, I now get why these two properties exist and I have added example that shows the usefulness of these two: https://wiki.developer.mozilla.org/en-US/docs/Web/API/TextMetrics#Measuring_text_width

I struggle with finding a better description for this though as I don't want to risk writing something wrong there. (I think the current descriptions are close to the spec, so they are very precise). Do you have a suggestion? Or should we leave this as is for now?

[chrisdavidmills]

So, I now get why these two properties exist and I have added example that shows the usefulness of these two: https://wiki.developer.mozilla.org/en-US/docs/Web/API/TextMetrics#Measuring_text_width

Cool, this is really useful, thanks! I've added a bit to the example's description to say clearly why this is useful; does it look OK to you?

I struggle with finding a better description for this though as I don't want to risk writing something wrong there. (I think the current descriptions are close to the spec, so they are very precise). Do you have a suggestion? Or should we leave this as is for now?

I have had a go at rewriting the sentence slightly so that it makes more sense. The information is the same, but I've just broken it out into a couple of sentences so that it isn't as hard to parse. WDYT?

[Elchi3]

Thank Chris, I think both looks good now! :)
Lets call this done :tada: