fixed: invalid text y position on web screen

packages/component/src/svg/shapeDrawer/Measurement.ts

@@ -4,7 +4,7 @@
  * Created by sunvisor on 2025/02/07.
  * Copyright (C) Sunvisor Lab. 2025.
  */
-import { MeasurementInterface, Scale, Size, Text } from '@sunvisor/super-leopard-core';
+import { Font, MeasurementInterface, Scale, Text } from '@sunvisor/super-leopard-core';
 import { WebFont } from './WebFont';
 
 
@@ -26,26 +26,34 @@ export class Measurement implements MeasurementInterface {
   }
 
   measureHeight(text: Text): number {
-    return this.getTextSize(text).height;
+    const context = this.getContext(text.font);
+    if (!context) {
+      return text.font.size;
+    }
+    // add 'MyAg' to get exact height
+    const metrics = context.measureText(text.text + 'MyAg');
+    return this.#scale.pointFromPixel(metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent);
   }
 
   measureWidth(text: Text): number {
-    return this.getTextSize(text).width;
+    const context = this.getContext(text.font);
+    if (!context) {
+      return text.font.size * text.text.length;
+    }
+    const metrics = context.measureText(text.text);
+    return this.#scale.pointFromPixel(metrics.width);
   }
 
-  private getTextSize(text: Text): Size {
+  private getContext(font: Font) {
     const canvas = document.createElement('canvas');
     const context = canvas.getContext('2d');
     if (!context) {
-      return { width: 0, height: 0 };
+      console.error('could not get canvas context!');
+      return undefined;
     }
-    context.font = this.#webFont.webFontAttr(text.font);
-    const metrics = context.measureText(text.text);
+    context.font = this.#webFont.webFontAttr(font);
 
-    return {
-      width: this.#scale.pointFromPixel(metrics.width),
-      height: this.#scale.pointFromPixel(metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent),
-    };
+    return context;
   }
 
 }

packages/component/src/svg/shapeDrawer/TextDrawerSingle.stories.tsx

@@ -258,6 +258,10 @@ export const VerticalAlignTopText: Story = {
   args: {
     text: {
       ...baseData,
+      font: {
+        family: 'NotoSansJP',
+        size: 20,
+      },
       height: 180,
       text: '上寄せ Vertical Align Top Text',
       valign: ValignType.TOP
@@ -274,6 +278,10 @@ export const VerticalAlignMiddleText: Story = {
   args: {
     text: {
       ...baseData,
+      font: {
+        family: 'NotoSansJP',
+        size: 20,
+      },
       height: 180,
       text: '縦中央 Vertical Align Middle Text',
       valign: ValignType.MIDDLE
@@ -290,6 +298,10 @@ export const VerticalAlignBottomText: Story = {
   args: {
     text: {
       ...baseData,
+      font: {
+        family: 'NotoSansJP',
+        size: 20,
+      },
       height: 180,
       text: '下寄せ Vertical Align Bottom Text',
       valign: ValignType.BOTTOM

packages/component/src/svgDriver/SvgJsDriver.test.ts

@@ -29,6 +29,10 @@ describe('Tests for SvgJsDrawer', () => {
     font: vi.fn().mockReturnThis(),
     opacity: vi.fn().mockReturnThis(),
     size: vi.fn().mockReturnThis(),
+    bbox: vi.fn().mockReturnValue({
+      height: 10,
+      width: 10,
+    }),
   } as unknown as Shape
 
   afterEach(() => {
@@ -329,7 +333,7 @@ describe('Tests for SvgJsDrawer', () => {
       drawer.text({ x: 10, y: 20, text: 'Hello', font, fillColor: '#0000ff' });
       // Assert
       expect(mockSvg.text).toHaveBeenCalledWith('Hello');
-      expect(mockShape.move).toHaveBeenCalledWith(10, 20);
+      expect(mockShape.move).toHaveBeenCalledWith(10, 21); // (12 - 10) / 2
       expect(mockShape.fill).toHaveBeenCalledWith('#0000ff');
       expect(mockShape.opacity).toHaveBeenCalledWith(1);
     });

packages/component/src/svgDriver/SvgJsDriver.ts

@@ -95,7 +95,10 @@ export class SvgJsDrawer implements SvgDrawerInterface {
     text.fill(fillColor);
     text.opacity(opacity || 1);
     this.applyDecoration(text, params);
-    text.move(x, y);
+    const bbox = text.bbox();
+    // adjust font top axis
+    const offsetY = (bbox.height - font.size) / 2;
+    text.move(x, y - offsetY);
 
     return new SvgJsText(text);
   }

packages/core/src/__test_assets__/en/testBill.ts

@@ -117,7 +117,7 @@ export const billTestData: ReportData = {
           y: 10,
           text: "INVOICE",
           width: 170,
-          height: 7,
+          height: 10,
           align: "center",
           valign: "middle"
         },
@@ -413,7 +413,7 @@ export const billTestData: ReportData = {
           color: "#000000",
           x: 140,
           y: 92,
-          width: 8,
+          width: 15,
           height: 5,
           text: "Amount"
         },

packages/core/src/__test_assets__/testBill.ts

@@ -117,7 +117,7 @@ export const billTestData: ReportData = {
           y: 10,
           text: "請　求　書",
           width: 170,
-          height: 7,
+          height: 10,
           align: "center",
           valign: "middle"
         },
@@ -376,7 +376,8 @@ export const billTestData: ReportData = {
           y: 92,
           width: 20,
           height: 5,
-          text: "品　　　名"
+          align: 'justify-all',
+          text: "品名"
         },
         {
           type: "text",