From cd99f11b1b9eb1260a548a63e2a370a0a5ddafa0 Mon Sep 17 00:00:00 2001
From: Niklas von Hertzen <niklasvh@gmail.com>
Date: Thu, 15 Jul 2021 16:54:01 +0800
Subject: [PATCH] fix: text position for form elements and list markers (#2588)

---
 src/render/canvas/canvas-renderer.ts | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/render/canvas/canvas-renderer.ts b/src/render/canvas/canvas-renderer.ts
index 5cd9f32..c9c44d4 100644
--- a/src/render/canvas/canvas-renderer.ts
+++ b/src/render/canvas/canvas-renderer.ts
@@ -376,7 +376,7 @@ export class CanvasRenderer {
             this.ctx.font = fontFamily;
             this.ctx.fillStyle = asString(styles.color);
 
-            this.ctx.textBaseline = 'middle';
+            this.ctx.textBaseline = 'alphabetic';
             this.ctx.textAlign = canvasTextAlign(container.styles.textAlign);
 
             const bounds = contentBox(container);
@@ -409,7 +409,7 @@ export class CanvasRenderer {
                 baseline
             );
             this.ctx.restore();
-            this.ctx.textBaseline = 'bottom';
+            this.ctx.textBaseline = 'alphabetic';
             this.ctx.textAlign = 'left';
         }
 
@@ -427,7 +427,7 @@ export class CanvasRenderer {
                     }
                 }
             } else if (paint.listValue && container.styles.listStyleType !== LIST_STYLE_TYPE.NONE) {
-                const [fontFamily, fontSize] = this.createFontStyle(styles);
+                const [fontFamily] = this.createFontStyle(styles);
 
                 this.ctx.font = fontFamily;
                 this.ctx.fillStyle = asString(styles.color);
@@ -441,12 +441,10 @@ export class CanvasRenderer {
                     computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2 + 1
                 );
 
-                const {baseline} = this.fontMetrics.getMetrics(fontFamily, fontSize);
-
                 this.renderTextWithLetterSpacing(
                     new TextBounds(paint.listValue, bounds),
                     styles.letterSpacing,
-                    baseline
+                    computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2 + 2
                 );
                 this.ctx.textBaseline = 'bottom';
                 this.ctx.textAlign = 'left';