Merge pull request #8320 from processing/fix/font-align

Better visual centering of text

Author: davepagurek

src/type/textCore.js

@@ -2518,6 +2518,21 @@ function textCore(p5, fn) {
     return this._pInst;
   };
 
+  Renderer.prototype._middleAlignOffset = function() {
+    const { textFont, textSize } = this.states;
+    const font = textFont?.font;
+    const ctx = this.textDrawingContext();
+    const metrics = ctx.measureText('X');
+    let sCapHeight = (font?.data || {})['OS/2']?.sCapHeight;
+    if (sCapHeight) {
+      const unitsPerEm = font.data.head.unitsPerEm;
+      sCapHeight *= textSize / unitsPerEm;
+    } else {
+      sCapHeight = metrics.fontBoundingBoxAscent;
+    }
+    return metrics.alphabeticBaseline + sCapHeight / 2;
+  };
+
   if (p5.Renderer2D) {
     p5.Renderer2D.prototype.textCanvas = function () {
       return this.canvas;
@@ -2607,7 +2622,7 @@ function textCore(p5, fn) {
         case fn.BASELINE:
           break;
         case textCoreConstants._CTX_MIDDLE:
-          yOff = ydiff / 2;
+          yOff = ydiff / 2 + this._middleAlignOffset();
           break;
         case fn.BOTTOM:
           yOff = ydiff;
@@ -2712,7 +2727,7 @@ function textCore(p5, fn) {
         case fn.BASELINE:
           break;
         case textCoreConstants._CTX_MIDDLE:
-          yOff = (-totalHeight + textSize + (height || 0)) / 2 + this._verticalAlignFont();
+          yOff = (-totalHeight + textSize + (height || 0)) / 2 + this._verticalAlignFont() + this._middleAlignOffset();
           break;
         case fn.BOTTOM:
           yOff = -(totalHeight - textSize) + (height || 0);

test/unit/visual/cases/typography.js

@@ -145,6 +145,36 @@ visualSuite('Typography', function () {
     });
   });
 
+  visualSuite('vertical centering', function() {
+    const fonts = {
+      Inter: 'https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZhrib2Bg-4.ttf',
+      Raleway: 'https://fonts.gstatic.com/s/raleway/v36/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaooCPNLA3JC9c.ttf',
+      'Inknut Antiqua': 'https://fonts.gstatic.com/s/inknutantiqua/v16/Y4GRYax7VC4ot_qNB4nYpBdaKU2_xbj5bBoIYJNf.ttf',
+      Oswald: 'https://fonts.gstatic.com/s/oswald/v57/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvgUFoZAaRliE.ttf',
+    };
+    for (const mode of ['2d', 'webgl']) {
+      for (const fontName in fonts) {
+        visualTest(`${fontName} in ${mode} mode`, async function (p5, screenshot) {
+          p5.createCanvas(200, 50, mode === 'webgl' ? p5.WEBGL : p5.P2D);
+          p5.background(255);
+          const font = await p5.loadFont(fonts[fontName]);
+          if (mode === '2d') p5.translate(p5.width/2, p5.height/2);
+          p5.textFont(font);
+
+          p5.stroke('red');
+          p5.line(-p5.width/2, 0, p5.width/2, 0);
+
+          p5.noStroke();
+          p5.fill(0);
+          p5.textSize(20);
+          p5.textAlign(p5.CENTER, p5.CENTER);
+          p5.text('Vertical align', 0, 0);
+          screenshot();
+        });
+      }
+    }
+  });
+
   visualSuite('textAlign', function () {
     for (const mode of ['2d', 'webgl']) {
       visualSuite(`${mode} mode`, () => {

test/unit/visual/screenshots/Typography/vertical centering/Inknut Antiqua in 2d mode/000.png

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}

test/unit/visual/screenshots/Typography/vertical centering/Inknut Antiqua in 2d mode/metadata.json

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}

test/unit/visual/screenshots/Typography/vertical centering/Inknut Antiqua in webgl mode/000.png

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}

test/unit/visual/screenshots/Typography/vertical centering/Inknut Antiqua in webgl mode/metadata.json

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}