fix: correctly align text vertically (#299)

redotvideo · Sep 23, 2024 · 8d7a728 · 8d7a728
1 parent 59bc0d0
commit 8d7a728
Showing 1 changed file with 4 additions and 5 deletions.
diff --git a/packages/2d/src/lib/components/TxtLeaf.ts b/packages/2d/src/lib/components/TxtLeaf.ts
@@ -66,9 +66,11 @@ export class TxtLeaf extends Shape {
     await document.fonts?.ready;
     this.applyText(context);
     context.font = this.styles.font;
+    context.textBaseline = 'bottom';
     if ('letterSpacing' in context) {
       context.letterSpacing = `${this.letterSpacing()}px`;
     }
+    const fontOffset = context.measureText('').fontBoundingBoxAscent;
 
     const parentRect = this.element.getBoundingClientRect();
     const {width, height} = this.size();
@@ -84,7 +86,7 @@ export class TxtLeaf extends Shape {
       const rangeRect = range.getBoundingClientRect();
 
       const x = width / -2 + rangeRect.left - parentRect.left;
-      const y = height / -2 + rangeRect.top - parentRect.top;
+      const y = height / -2 + rangeRect.top - parentRect.top + fontOffset;
 
       if (lineRect.y === y) {
         lineRect.width += rangeRect.width;
@@ -107,9 +109,7 @@ export class TxtLeaf extends Shape {
     text: string,
     box: BBox,
   ) {
-    const y = box.y + box.height / 2;
-    context.save();
-    context.textBaseline = 'middle';
+    const y = box.y;
     text = text.replace(/\s+/g, ' ');
     if (this.lineWidth() <= 0) {
       context.fillText(text, box.x, y);
@@ -120,7 +120,6 @@ export class TxtLeaf extends Shape {
       context.fillText(text, box.x, y);
       context.strokeText(text, box.x, y);
     }
-    context.restore();
   }
 
   protected override getCacheBBox(): BBox {