Correctly position font baseline and line-height

[tonsky]

This patch changes logic how baseline and line-height are calculated, to match what browsers do and tools like Figma.

This is especially noticeable on font IBM Plex Sans due to how its metrics are set up. It was less noticeable on Inter, because previous calculations somehow arrived at almost correct numbers.

Implementation notes:

• useOS2Table is removed, because it’s not what browsers/Figma seem to be using
• yMax, yMin are not used in text positioning at all
• lineHeight is calculated before as a fraction of fontSize, so height just recalculates it back

Before:

After:

Background blue/orange text is a static PNG rendered with Figma, black text is rendered with Satori.

Should solve #577

References: https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

And https://www.figma.com/blog/line-height-changes/:

Background image (if needed):

https://github.com/vercel/satori/assets/285292/3c8d6a75-cdca-4774-b285-7bd64bae51ee

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
satori-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 8, 2024 0:22am

[tonsky]

Update: default line-height is not 1.2, it’s actually ascender + descender + lineGap, so I fixed that too

Demo:

Reference:

[shuding]

Great work, thank you!

[Vizards]

@shuding Could you please assist in releasing and publishing the bugfixes on the main branch to npm? The latest version on npm is 0.10.13(5 month ago). I found that the action-run corresponding to this Pull Request has failed, and subsequent commits have skipped the Maybe Release step. It may require some manual intervention. Thank you.