[css-inline-3] Define em-top and em-bottom baselines

[fantasai]

The Canvas API has several references into the metrics defined in

It also defines emHeightAscent and emHeightDescent but doesn't have a concrete definition for them. Talked with @jfkthame about what they might be defined as and currently thinking maybe we add in definitions for these for HTML to refer into, so all the related metrics are all defined in one place (even if CSS doesn't end up using this particular pair).

Proposed definition from me and @jfkthame is:

• if the ideographic-top + ideographic-bottom or ideographic-central baselines are defined by the font, emHeightAscent is 0.5em above the ideographic-central and emHeightDescent is 0.5em below. (This will normally make ideographic-top = emHeightAscent and ideographic-bottom = emHeightDescent, but if ideographic-top and ideographic-bottom are not 1em apart it will normalize the distance to 1em)
• if none of the ideographic baselines are defined, use the ascent and descent normalized proportionally so they add up to 1em

Roughly in code, something like:

if iTop | iBottom | iCentral:
  /* rules of font format considers at least one of these defined */
  if iBottom && !iTop:
    iTop = iBottom + 1em;
  if iTop && !iBottom:
    iBottom = iTop - 1em;
  if !iCentral:
    iCentral = (iTop + iBottom)/2;

  return (iCentral + 0.5em, iCentral - 0.5em);
else:
  p = 1em/(ascent - descent);
  return (ascent*p, descent*p);

CC @annevk @yiyix

[kojiishi]

Thank you for working on this. A few questions:

• I think you mean iTop = HorizAxis.ideo and iBottom = HorizAxis.idtp? What is iCentral?
• ascent/descent are the ones defined in CSS?
• It looks like the definition is similar but slightly modified from OpenType Ideographic Em-Box. Is this intentional?

cc @macnmm @litherum

[fantasai]

I think you mean iTop = HorizAxis.ideo and iBottom = HorizAxis.idtp? What is iCentral

i* corresponds to ideographic-* defined in https://drafts.csswg.org/css-inline-3/#baseline-types

ascent/descent are the ones defined in CSS?

I'm unsure, but I guess so.

It looks like the definition is similar but slightly modified from OpenType Ideographic Em-Box. Is this intentional?

Yes. jfkthame says particular metric is should be normalized to 1em.

(Please note this is not a metric used for CSS layout. This is just for this particular Canvas API. See https://html.spec.whatwg.org/multipage/canvas.html#dom-textmetrics-fontboundingboxascent )

[kojiishi]

I think you mean iTop = HorizAxis.ideo and iBottom = HorizAxis.idtp? What is iCentral

i* corresponds to ideographic-* defined in https://drafts.csswg.org/css-inline-3/#baseline-types

Thank you, so:

• iTop = ideographic-over
• iBottom = ideographic-under
• iCenter = central

?

central is defined as "halfway between the ideographic-under and ideographic-over baselines", so it will never be defined without iTop and iBottom, correct?

(Please note this is not a metric used for CSS layout. This is just for this particular Canvas API. See https://html.spec.whatwg.org/multipage/canvas.html#dom-textmetrics-fontboundingboxascent )

Thank you, yes, I think we're in sync. emHeightAscent and emHeightDescent, not fontBoundingBoxAscent and fontBoundingBoxDescent, correct?

Fonts have horizontal and vertical metrics. Which metrics do we want? Maybe we suggest HTML Canvas to add horizontal and vertical metrics?

[fantasai]

central is defined as "halfway between the ideographic-under and ideographic-over baselines", so it will never be defined without iTop and iBottom, correct?

Depends on the font format, some formats have an explicit ideographic-central baseline.

emHeightAscent and emHeightDescent, not fontBoundingBoxAscent and fontBoundingBoxDescent, correct?

Yes.

Maybe we suggest HTML Canvas to add horizontal and vertical metrics?

I guess that's an issue for Canvas API :) In CSS we use the correct set depending on writing-mode...