Precise alignment of text and numbers

[matram]

I was struggling with getting good alignment when combining font sizes and using text drawn on the canvas. I did this small experiment to understand better.


This screen has two elements positioned like this

<div class="f-d-m f-num" style="top:calc(50%);left:calc(30% - 50%e);">
<div class="f-d-xs f-num" style="top:calc(50%);left:calc(70% - 50%e);">

The green line is at 233px (50%), the red line is 78px below, which is the font size for the ‘f-d-m’ font.

The height of the numbers is smaller than the font size, not surprising as such, but the effect with differents size fonts is that they do not align on the top.

With this setup …

 <div class="f-d-m f-num" style="top:calc(50% - 50%e);left:calc(30% - 50%e);">
 <div class="f-d-xs f-num" style="top:calc(50% - 50%e);left:calc(70% - 50%e);">

We get this …

Not precisely centered vertically but maybe good enough.

Best seems to be to align at the bottom, i.e. -100%e.

It could be useful with more information about font metrics if we want to achieve perfect alignment.