a figure of Ideographic baseline differs from the definition

[mandel59]

https://html.spec.whatwg.org/images/baselines.png (referred in https://html.spec.whatwg.org/multipage/canvas.html#text-styles)
The image above seems to show the ideographic baseline as ideographic character face bottom edge, but actually it should be ideographic em-box bottom edge by definition.

Ideographic em-box is called as character frame in Requirements for Japanese Text Layout.

Related specs

WHATWG Canvas: https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-textbaseline-ideographic

ideographic: The ideographic-under baseline

CSS Inline Module: https://drafts.csswg.org/css-inline/#ideographic-under-baseline

ideographic-under: Corresponds to the line-under design edge of CJK (Han/Hangul/Kana) text. Assigned to ideo in OpenType.

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

'ideo': Ideographic em-box bottom edge.

[sideshowbarker]

heads-up @whatwg/i18n

[annevk]

See also the discussion in #5826. Ideally we'd rely entirely on CSS, but we lack the expertise to make that call confidently. Help would be appreciated.

[himorin]

need to ask alphabetic typography experts (not i18n-jlreq?),, but it seems for me, 'bottom of em space' in the image should be descender...

[macnmm]

agreed it looks too high in the design space. Is it trying to refer to the ICF (Ideographic Character Face) baseline? If so, it could be labelled as such.

[macnmm]

"Bottom of em square" seems not to refer to the CJK embox bottom, but rather the Latin typographic em square (design space). We should add the bottom (and top) of the CJK embox in the correct position(s) since those baselines are the most significant for CJK...

[macnmm]

@himorin has informed me that I am on the hook for a better illustration. I will attempt to provide one shortly. cc @whatwg/i18n

[groverlynn]

This is horribly wrong…
Ideographs do not have baselines. Any reference of baseline in the context of ideographs can only be the alphabetic baseline, implemented by most CJK fonts for consistent vertical alignment when mixed with alphanumerics. Since the em-box for alphabetics (from ascender to descender) was originally for ideographs (movable type, the outer EM square), the alphabetic ascender is the top edge of the ideograph EM square, and the alphabetic descender is bottom edge of the ideograph EM square. However, descender and ascender may be reached by letters, but the EM square edges shall never be reached by ideographs. Ideographs have a slightly smaller "bounding box" or type face acting as the real edges of glyphs.

Typically, the bottom side of the type face (ideograph low baseline) is still way lower than the alphabetic baseline, while the top side of the type face (ideograph high baseline) may still be higher than the alphabetic cap height. When laid-out horizontally, ideographs are usually aligned on the low baseline with other ideographs regardless of font size, and on the alphabetic baseline with other alphanumerics. However, when laid out vertically (upright), ideographs are aligned on the central baseline (that is literally the central/mid-line), while side-way alphanumeric letters are still aligned on the (rotated) alphanumeric baseline. The graph below (from Mac's Emoji and Symbols palette) shows the alphanumeric baseline, top and bottom EM square (type body), and left and right bounding box (type face).

[macnmm]

@groverlynn don’t worry, we know. However it is necessary to place text on a baseline to align the glyphs across different sizes, fonts of the same script, and fonts of different scripts. Being incredibly nuanced this current illustration and what it implies is I agree “incredibly wrong” so I will propose a new one or maybe several that outline what layout engines should consider when lining text up correctly especially for CJK.