Reference even more baseline concepts in CSS Inline Layout

[annevk]

See w3c/csswg-drafts#5312. And also #5429 for where all of this started.

Ideally though w3c/csswg-drafts#5431 would be fixed too and we'd figure out how to update images/baselines.png (I've asked Ian if there's an original somewhere).

---

/canvas.html ( diff )
/infrastructure.html ( diff )

---

/canvas.html ( diff )
/infrastructure.html ( diff )

[annevk]

Per @kojiishi's comment at w3c/csswg-drafts#5380 (comment) there might be normative changes warranted here depending on which browser we want to follow.

cc @jfkthame

[annevk]

It seems the baseline image was introduced in 96b4346 and as far as I can tell it's not clear how it was generated. One option here would be to drop it in favor of relying even more on https://drafts.csswg.org/css-inline/#css-metrics which does not seem all bad. @fantasai @dauwhe @domenic thoughts?

[domenic]

In general I'd prefer if the image were maintained in CSS, but to my non-expert's eye, there's not a lot of overlap in the terminology and examples used in https://github.com/whatwg/html/blob/master/images/baselines.png vs. https://drafts.csswg.org/css-inline/#css-metrics. So, I'd appreciate it if someone was able to reassure me that the CSS spec was comprehensive and that we wouldn't be losing useful information by deleting the HTML spec's image.

[annevk]

@fantasai @dauwhe @jfkthame @whatwg/css ping. Would be nice to sort this as apparently there are compatibility issues as well, see #6731.

[annevk]

@fantasai @dauwhe @jfkthame @whatwg/css another ping. It'd be great to get some (additional) review.

[mfreed7]

@fserb

[fserb]

Sorry for the delay.
@yiyix

[macnmm]

@himorin has informed me that I should provide a better illustration of various baselines to show the issue, so I will do so shortly.

[annevk]

That would be great!

[annevk]

@schenney-chromium is this something you could help review as part of your TextMetrics improvements?

[schenney-chromium]

Yes, I'll review once I make sure I understand all of the context for the change.

[schenney-chromium]

Making this change to unify the definition of top/em-over and bottom/em-under in the canvas text styles section to explicitly align with CSS is a good change to land. With the previously suggested edit and the fix for the image to correct the labels I would LGTM this.

Regarding whether the metrics explaining image we have is better/worse than the CSS image, one advantage of the existing canvas metrics image is the clear indication that glyphs can escape the em box. That's important because it motivates the various bounds methods on TextMetrics.

As a meta point, the definitions in CSS for em-over and em-under are explicitly not relevant to CSS, and are even derived values not present in fonts. We could move them from the CSS spec to the canvas spec, along with the method to derive them. My desire to do that does not block this PR.

[annevk]

I edited the image locally by essentially replacing the text. Seems to look good enough.

I'm no longer sure why I marked this "needs tests" though.

[schenney-chromium]

LGTM. Nice image editing.

Of course, I need to do more to get write access.