Fix font alignment in textToPaths and WebGL

Author: davepagurek

src/type/p5.Font.js

@@ -737,25 +737,14 @@ export class Font {
 
   /////////////////////////////// HELPERS ////////////////////////////////
 
-  _verticalAlign(size) {
-    const { sCapHeight } = this.data?.['OS/2'] || {};
-    const { unitsPerEm = 1000 } = this.data?.head || {};
-    const { ascender = 0, descender = 0 } = this.data?.hhea || {};
-    const current = ascender / 2;
-    const target = (sCapHeight || (ascender + descender)) / 2;
-    const offset = target - current;
-    return offset * size / unitsPerEm;
-  }
-
   /*
     Returns an array of line objects, each containing { text, x, y, glyphs: [ {g, path} ] }
   */
   _lineateAndPathify(str, x, y, width, height, options = {}) {
 
     let renderer = options?.graphics?._renderer || this._pInst._renderer;
-
-    // save the baseline
-    let setBaseline = renderer.drawingContext.textBaseline;
+    renderer.push();
+    renderer.textFont(this);
 
     // lineate and compute bounds for the text
     let { lines, bounds } = renderer._computeBounds
@@ -772,8 +761,7 @@ export class Font {
     const axs = this._currentAxes(renderer);
     let pathsForLine = lines.map(l => this._lineToGlyphs(l, { scale, axs }));
 
-    // restore the baseline
-    renderer.drawingContext.textBaseline = setBaseline;
+    renderer.pop();
 
     return pathsForLine;
   }
@@ -857,7 +845,7 @@ export class Font {
 
   _position(renderer, lines, bounds, width, height) {
 
-    let { textAlign, textLeading } = renderer.states;
+    let { textAlign, textLeading, textSize } = renderer.states;
     let metrics = this._measureTextDefault(renderer, 'X');
     let ascent = metrics.fontBoundingBoxAscent;
 

src/type/textCore.js

@@ -2688,6 +2688,13 @@ function textCore(p5, fn) {
       return this._yAlignOffset(lineData, adjustedH);
     };
 
+    p5.RendererGL.prototype._verticalAlignFont = function() {
+      const ctx = this.textDrawingContext();
+      const metrics = ctx.measureText('X');
+      return -metrics.alphabeticBaseline ||
+        (-metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent);
+    }
+
     p5.RendererGL.prototype._yAlignOffset = function (dataArr, height) {
 
       if (typeof height === 'undefined') {
@@ -2700,12 +2707,12 @@ function textCore(p5, fn) {
         ((textLeading - textSize) * (numLines - 1));
       switch (textBaseline) { // drawingContext ?
         case fn.TOP:
-          yOff = textSize;
+          yOff = this._verticalAlignFont();
           break;
         case fn.BASELINE:
           break;
         case textCoreConstants._CTX_MIDDLE:
-          yOff = -totalHeight / 2 + textSize + (height || 0) / 2;
+          yOff = (-totalHeight + textSize + (height || 0)) / 2 + this._verticalAlignFont();
           break;
         case fn.BOTTOM:
           yOff = -(totalHeight - textSize) + (height || 0);
@@ -2714,7 +2721,6 @@ function textCore(p5, fn) {
           console.warn(`${textBaseline} is not supported in WebGL mode.`); // FES?
           break;
       }
-      yOff += this.states.textFont.font?._verticalAlign(textSize) || 0; // Does this function exist?
       dataArr.forEach(ele => ele.y += yOff);
       return dataArr;
     };