This PR removes the use of font-based underscores as melisma lines and replaces them with lines drawn by CSS the border property.
The tricky part is the aligning of the melisma with the alphabetic baseline of the chosen lyrics font. To accomplish this, we first measure the height of the font. We then draw a "melisma box" with the same height next to the lyrics. This box is given a bottom border. The bottom border of this box is rendered by Chromium at roughly the bottom baseline of the font. Next, we calculate the distance between the alphabetic baseline and the bottom of the font. We use this offset to raise the bottom border to be roughly level with the alphabetic baseline. See this article for an illustration of the meanings of these baselines. Font metrics are calculated via TextMetrics.
This PR removes the use of font-based underscores as melisma lines and replaces them with lines drawn by CSS the
border
property.The tricky part is the aligning of the melisma with the alphabetic baseline of the chosen lyrics font. To accomplish this, we first measure the height of the font. We then draw a "melisma box" with the same height next to the lyrics. This box is given a bottom border. The bottom border of this box is rendered by Chromium at roughly the bottom baseline of the font. Next, we calculate the distance between the alphabetic baseline and the bottom of the font. We use this offset to raise the bottom border to be roughly level with the alphabetic baseline. See this article for an illustration of the meanings of these baselines. Font metrics are calculated via TextMetrics.
Fixes #643.