fix font height calculations

0xfe · Jan 8, 2022 · 84fb9c6 · 84fb9c6
1 parent aebecd4
commit 84fb9c6
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 20 deletions.
diff --git a/src/canvascontext.ts b/src/canvascontext.ts
@@ -260,7 +260,7 @@ export class CanvasContext extends RenderContext {
     const metrics = this.context2D.measureText(text);
     return {
       width: metrics.width,
-      height: this.textHeight,
+      height: metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent,
     };
   }
 

diff --git a/src/stave.ts b/src/stave.ts
@@ -310,9 +310,9 @@ export class Stave extends Element {
   }
 
   // Section functions
-  setSection(section: string, y: number, xOffset = 0, fontSize = 10) {
+  setSection(section: string, y: number, xOffset = 0, fontSize?: number) {
     const staveSection = new StaveSection(section, this.x + xOffset, y);
-    staveSection.setFontSize(fontSize);
+    if (fontSize) staveSection.setFontSize(fontSize);
     this.modifiers.push(staveSection);
     return this;
   }

diff --git a/src/stavesection.ts b/src/stavesection.ts
@@ -55,22 +55,23 @@ export class StaveSection extends StaveModifier {
     ctx.setLineWidth(2);
     ctx.setFont(this.textFont);
 
-    const textMeasurements = ctx.measureText('' + this.section);
+    const paddingX = 2;
+    const paddingY = 2;
+    const rectWidth = 2;
+    const textMeasurements = ctx.measureText(this.section);
     const textWidth = textMeasurements.width;
     const textHeight = textMeasurements.height;
-    let width = textWidth + 6; // add left & right padding
-    if (width < 18) width = 18;
-    const height = textHeight;
+    const width = textWidth + 2 * paddingX; // add left & right padding
+    const height = textHeight + 2 * paddingY; // add top & bottom padding
 
     //  Seems to be a good default y
-    const y = stave.getYForTopText(3) + this.shift_y;
-    let x = this.x + shift_x;
+    const y = stave.getYForTopText(2) + this.shift_y;
+    const x = this.x + shift_x;
     ctx.beginPath();
-    ctx.setLineWidth(2);
-    ctx.rect(x, y + textHeight / 4, width, height);
+    ctx.setLineWidth(rectWidth);
+    ctx.rect(x, y - height + paddingY, width, height);
     ctx.stroke();
-    x += (width - textWidth) / 2;
-    ctx.fillText('' + this.section, x, y + 16);
+    ctx.fillText(this.section, x + paddingX, y);
     ctx.restore();
     return this;
   }

diff --git a/src/svgcontext.ts b/src/svgcontext.ts
@@ -91,13 +91,7 @@ class MeasureTextCache {
     const bbox = txt.getBBox();
     svg.removeChild(txt);
 
-    const fontSizeInPt: string = attributes['font-size'];
-
-    // Remove the trailing 'pt' from the font size and scale to convert from points to canvas pixel units.
-    // CSS specifies dpi to be 96 and there are 72 points to an inch: 96/72 == 4/3.
-    const height = Font.convertSizeToPixelValue(fontSizeInPt);
-
-    return { width: bbox.width, height: height };
+    return { width: bbox.width, height: bbox.height };
   }
 }