Typography Line Terms

See: https://en.wikipedia.org/wiki/Typeface#Font_metrics

Windows terminology is slightly different:

/* Example em55x55 H1 font @ 192dpi:
    _   _                   _              ___    <- y:0
   (_)_(_)                 | |             ___ /\    "diacritics circumflex"
     / \   __ _ _   _ _ __ | |_ ___ _ __       ||
    / _ \ / _` | | | | '_ \| __/ _ \ '_ \      ||    .ascend:30
   / ___ \ (_| | |_| | |_) | ||  __/ | | |     ||     max extend above baseline
  /_/   \_\__, |\__, | .__/ \__\___|_| |_| ___ || <- .baseline:44
           __/ | __/ | |                       ||    .descend:11
          |___/ |___/|_|                   ___ \/     max height of descenders
                                                  <- .height:55
  em: 55x55
  ascender for "diacritics circumflex" is (h:55 - a:30 - d:11) = 14
*/

The Unicode glyph Ḝ Latin Capital Letter E with Cedilla and Breve

Will look render

const int32_t y_0 = y + i.top;
const int32_t y_b = y_0 + v->fm->baseline;
const int32_t y_a = y_b - v->fm->ascent;
const int32_t y_h = y_0 + v->fm->height;
const int32_t y_x = y_b - v->fm->x_height;
const int32_t y_d = y_b + v->fm->descent;
ui_gdi.line(x, y_0, x + w, y_0, ui_colors.orange);
ui_gdi.line(x, y_a, x + w, y_a, ui_colors.green);
ui_gdi.line(x, y_x, x + w, y_x, ui_colors.orange);
ui_gdi.line(x, y_b, x + w, y_b, ui_colors.red);
// next two lines overlap:
ui_gdi.line(x, y_d, x + w / 2, y_d, ui_colors.blue);
ui_gdi.line(x + w / 2, y_h, x + w, y_h, ui_colors.yellow);

like this: