[p5.js 2.0 Bug Report]: text vertical align center is not quite centered

[davepagurek]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

2.0+

Web browser and version

Firefox

Operating system

MacOS

Steps to reproduce this

Steps:

1. Use textAlign(CENTER, CENTER)
2. Use rectMode(CENTER)
3. Draw a box with height textLeading()
4. Draw text at 0,0

The text is often not quite centered in the box, with more space for descenders than ascenders. There will always be some variance between fonts, but it feels generally offbalance.

Snippet:

https://editor.p5js.org/davepagurek/sketches/wTUaNfi5K

[davepagurek]

It looks like this shift makes it look nice, fairly generally:

(metrics.fontBoundingBoxDescent +
      (metrics.alphabeticBaseline || -metrics.fontBoundingBoxAscent / 2)) /
      2 -
    (metrics.fontBoundingBoxAscent - metrics.fontBoundingBoxDescent) / 2

https://editor.p5js.org/davepagurek/sketches/IOKApYq7H