Horizontal Baseline Alignment for Multiple Text Objects

[asturur]

Discussed in #10213

^{Originally posted by eiLLFire October 15, 2024}
I need the ability to select two or more text objects and align them horizontally based on their individual baselines. This feature would ensure that text objects with different font sizes, line heights, or font families can be aligned along a common baseline, ensuring a uniform appearance in the layout. How do I implement function getBaselinePosition

var text1 = new Text('Hello', {
  left: 100,
  top: 100,
  fontSize: 40,
});

var text2 = new Text('World', {
  fontFamliy: 'xxx',
  left: 200,
  top: 150,
  fontSize: 60,
});

canvas.add(text1, text2);

function getBaselinePosition(text) {
  // calculate its baseline based on its font metrics
}

var baseline1 = getBaselinePosition(text1);
var baseline2 = getBaselinePosition(text2);
if (baseline1 > baseline2) {
  text2.top += baseline1 - baseline2;
} else {
  text1.top += baseline2 - baseline1;
}
```</div>