html2canvas-pro 2.3.0 → 2.3.1

package/dist/lib/render/canvas/text-renderer.js

@@ -100,6 +100,7 @@ class TextRenderer {
          */
         this.glyphWidthCache = null;
         this.ctx = deps.ctx;
+        this.fontMetrics = deps.fontMetrics;
         this.options = deps.options;
         this.decorationRenderer = new text_decoration_renderer_1.TextDecorationRenderer(deps.ctx);
     }
@@ -236,21 +237,21 @@ class TextRenderer {
             });
         }
     }
-    renderTextStrokeWithStyle(text, styles) {
+    renderTextStrokeWithStyle(text, styles, baseline) {
         if (!styles.webkitTextStrokeWidth || !text.text.trim().length) {
             return;
         }
         this.ctx.strokeStyle = (0, color_utilities_1.asString)(styles.webkitTextStrokeColor);
         this.ctx.lineWidth = styles.webkitTextStrokeWidth;
         this.ctx.lineJoin = getTextStrokeLineJoin();
-        this.renderStrokeText(text, styles.letterSpacing, styles.fontSize.number, styles.writingMode);
+        this.renderStrokeText(text, styles.letterSpacing, baseline, styles.writingMode);
         this.ctx.strokeStyle = '';
         this.ctx.lineWidth = 0;
         this.ctx.lineJoin = 'miter';
     }
-    renderTextFillWithShadows(text, styles) {
+    renderTextFillWithShadows(text, styles, baseline) {
         this.ctx.fillStyle = (0, color_utilities_1.asString)(styles.color);
-        this.renderTextWithLetterSpacing(text, styles.letterSpacing, styles.fontSize.number, styles.writingMode);
+        this.renderTextWithLetterSpacing(text, styles.letterSpacing, baseline, styles.writingMode);
         const textShadows = styles.textShadow;
         if (textShadows.length && text.text.trim().length) {
             textShadows
@@ -261,7 +262,7 @@ class TextRenderer {
                 this.ctx.shadowOffsetX = textShadow.offsetX.number * this.options.scale;
                 this.ctx.shadowOffsetY = textShadow.offsetY.number * this.options.scale;
                 this.ctx.shadowBlur = textShadow.blur.number;
-                this.renderTextWithLetterSpacing(text, styles.letterSpacing, styles.fontSize.number, styles.writingMode);
+                this.renderTextWithLetterSpacing(text, styles.letterSpacing, baseline, styles.writingMode);
             });
             this.ctx.shadowColor = '';
             this.ctx.shadowOffsetX = 0;
@@ -273,15 +274,15 @@ class TextRenderer {
      * Helper method to render text with paint order support
      * Reduces code duplication in line-clamp and normal rendering
      */
-    renderTextBoundWithPaintOrder(textBound, styles, paintOrderLayers) {
+    renderTextBoundWithPaintOrder(textBound, styles, paintOrderLayers, baseline) {
         paintOrderLayers.forEach((paintOrderLayer) => {
             switch (paintOrderLayer) {
                 case 0 /* PAINT_ORDER_LAYER.FILL */:
                     this.ctx.fillStyle = (0, color_utilities_1.asString)(styles.color);
-                    this.renderTextWithLetterSpacing(textBound, styles.letterSpacing, styles.fontSize.number, styles.writingMode);
+                    this.renderTextWithLetterSpacing(textBound, styles.letterSpacing, baseline, styles.writingMode);
                     break;
                 case 1 /* PAINT_ORDER_LAYER.STROKE */:
-                    this.renderTextStrokeWithStyle(textBound, styles);
+                    this.renderTextStrokeWithStyle(textBound, styles, baseline);
                     break;
             }
         });
@@ -362,7 +363,7 @@ class TextRenderer {
      * Groups text bounds by their Y position into visual lines, then renders
      * only the first N-1 complete lines followed by an ellipsis on the Nth line.
      */
-    renderLineClampedText(text, styles, paintOrder, containerBounds) {
+    renderLineClampedText(text, styles, paintOrder, baseline, containerBounds) {
         const lineHeight = styles.fontSize.number * 1.5;
         const lines = [];
         let currentLine = [];
@@ -385,7 +386,7 @@ class TextRenderer {
             return false; // fall through to normal rendering
         // Render full lines (0..N-2)
         for (let i = 0; i < maxLines - 1; i++) {
-            lines[i].forEach((tb) => this.renderTextBoundWithPaintOrder(tb, styles, paintOrder));
+            lines[i].forEach((tb) => this.renderTextBoundWithPaintOrder(tb, styles, paintOrder, baseline));
         }
         // Nth line: truncated with ellipsis
         const lastLine = lines[maxLines - 1];
@@ -398,10 +399,10 @@ class TextRenderer {
             for (const layer of paintOrder) {
                 if (layer === 0 /* PAINT_ORDER_LAYER.FILL */) {
                     this.ctx.fillStyle = (0, color_utilities_1.asString)(styles.color);
-                    this.renderTextWithLetterSpacing(bounds, styles.letterSpacing, styles.fontSize.number, styles.writingMode);
+                    this.renderTextWithLetterSpacing(bounds, styles.letterSpacing, baseline, styles.writingMode);
                 }
                 else if (layer === 1 /* PAINT_ORDER_LAYER.STROKE */) {
-                    this.renderTextStrokeWithStyle(bounds, styles);
+                    this.renderTextStrokeWithStyle(bounds, styles, baseline);
                 }
             }
         }
@@ -411,7 +412,7 @@ class TextRenderer {
      * Render single-line text with text-overflow: ellipsis.
      * Returns true if ellipsis was applied (caller should skip normal rendering).
      */
-    renderEllipsisText(text, styles, paintOrder, containerBounds) {
+    renderEllipsisText(text, styles, paintOrder, baseline, containerBounds) {
         const lineHeight = styles.fontSize.number * 1.5;
         const firstTop = text.textBounds[0].bounds.top;
         const isSingleLine = text.textBounds.every((tb) => Math.abs(tb.bounds.top - firstTop) < lineHeight * 0.5);
@@ -429,9 +430,9 @@ class TextRenderer {
         const bounds = new text_1.TextBounds(truncated, text.textBounds[0].bounds);
         for (const layer of paintOrder) {
             if (layer === 0 /* PAINT_ORDER_LAYER.FILL */)
-                this.renderTextFillWithShadows(bounds, styles);
+                this.renderTextFillWithShadows(bounds, styles, baseline);
             else if (layer === 1 /* PAINT_ORDER_LAYER.STROKE */)
-                this.renderTextStrokeWithStyle(bounds, styles);
+                this.renderTextStrokeWithStyle(bounds, styles, baseline);
         }
         return true;
     }
@@ -439,18 +440,23 @@ class TextRenderer {
         // Reset glyph width cache at the start of each text node render —
         // the font may change between nodes.
         this.glyphWidthCache = null;
-        this.ctx.font = this.createFontStyle(styles)[0];
+        const [fontString, fontFamily, fontSize] = this.createFontStyle(styles);
+        this.ctx.font = fontString;
         this.ctx.direction = styles.direction === 1 /* DIRECTION.RTL */ ? 'rtl' : 'ltr';
         this.ctx.textAlign = 'left';
         this.ctx.textBaseline = 'alphabetic';
         const paintOrder = styles.paintOrder;
+        // Use the measured baseline from FontMetrics instead of fontSize,
+        // which correctly accounts for fonts with large descenders (e.g. Paul)
+        // where the alphabetic baseline is closer to the top of the em-square.
+        const { baseline } = this.fontMetrics.getMetrics(fontFamily, fontSize);
         // -webkit-line-clamp
         const clamp = styles.webkitLineClamp > 0 &&
             (styles.display & 2 /* DISPLAY.BLOCK */) !== 0 &&
             styles.overflowY === 1 /* OVERFLOW.HIDDEN */ &&
             text.textBounds.length > 0;
         if (clamp) {
-            if (this.renderLineClampedText(text, styles, paintOrder, containerBounds))
+            if (this.renderLineClampedText(text, styles, paintOrder, baseline, containerBounds))
                 return;
         }
         // text-overflow: ellipsis (single-line only)
@@ -458,18 +464,18 @@ class TextRenderer {
             containerBounds &&
             styles.overflowX === 1 /* OVERFLOW.HIDDEN */ &&
             text.textBounds.length > 0;
-        if (ellipsis && this.renderEllipsisText(text, styles, paintOrder, containerBounds))
+        if (ellipsis && this.renderEllipsisText(text, styles, paintOrder, baseline, containerBounds))
             return;
         // Normal rendering: fill + stroke + decorations per text bound
         text.textBounds.forEach((tb) => {
             paintOrder.forEach((layer) => {
                 if (layer === 0 /* PAINT_ORDER_LAYER.FILL */) {
-                    this.renderTextFillWithShadows(tb, styles);
+                    this.renderTextFillWithShadows(tb, styles, baseline);
                     if (styles.textDecorationLine.length)
                         this.renderTextDecoration(tb.bounds, styles);
                 }
                 else if (layer === 1 /* PAINT_ORDER_LAYER.STROKE */) {
-                    this.renderTextStrokeWithStyle(tb, styles);
+                    this.renderTextStrokeWithStyle(tb, styles, baseline);
                 }
             });
         });

package/dist/types/render/canvas/text-renderer.d.ts

@@ -10,18 +10,18 @@
  * - Paint order (fill/stroke)
  * - Font styles
  */
-import { Context } from '../../core/context';
 import { TextContainer } from '../../dom/text-container';
 import { CSSParsedDeclaration } from '../../css';
 import { Bounds } from '../../css/layout/bounds';
 import { TextBounds } from '../../css/layout/text';
 import { WRITING_MODE } from '../../css/property-descriptors/writing-mode';
+import { FontMetrics } from '../font-metrics';
 /**
  * Dependencies required for TextRenderer
  */
 export interface TextRendererDependencies {
     ctx: CanvasRenderingContext2D;
-    context: Context;
+    fontMetrics: FontMetrics;
     options: {
         scale: number;
     };
@@ -35,6 +35,7 @@ export declare const hasCJKCharacters: (text: string) => boolean;
  */
 export declare class TextRenderer {
     private readonly ctx;
+    private readonly fontMetrics;
     private readonly options;
     private readonly decorationRenderer;
     /**

package/package.json

@@ -19,7 +19,7 @@
       "default": "./dist/html2canvas-pro.esm.js"
     }
   },
-  "version": "2.3.0",
+  "version": "2.3.1",
   "author": {
     "name": "yorickshan",
     "email": "yorickshan@gmail.com",