html2canvas-pro 2.3.1 → 2.3.2

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

@@ -18,6 +18,7 @@ const color_utilities_1 = require("../../css/types/color-utilities");
 const parser_1 = require("../../css/syntax/parser");
 const writing_mode_1 = require("../../css/property-descriptors/writing-mode");
 const text_decoration_renderer_1 = require("./text/text-decoration-renderer");
+const font_utils_1 = require("./font-utils");
 // iOS font fix - see https://github.com/niklasvh/html2canvas/pull/2645
 const iOSBrokenFonts = ['-apple-system', 'system-ui'];
 /**
@@ -100,7 +101,6 @@ 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);
     }
@@ -440,16 +440,17 @@ class TextRenderer {
         // Reset glyph width cache at the start of each text node render —
         // the font may change between nodes.
         this.glyphWidthCache = null;
-        const [fontString, fontFamily, fontSize] = this.createFontStyle(styles);
+        const [fontString] = 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);
+        // Compute baseline using the actual rendered font via Canvas API.
+        // This ensures correct positioning whether using webfonts (which may not
+        // be loaded in the original document but are active in the Canvas) or
+        // system fonts.
+        const baseline = (0, font_utils_1.measureBaseline)(this.ctx, styles.fontSize.number);
         // -webkit-line-clamp
         const clamp = styles.webkitLineClamp > 0 &&
             (styles.display & 2 /* DISPLAY.BLOCK */) !== 0 &&

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

@@ -37,7 +37,6 @@ export declare class CanvasRenderer {
     ctx: CanvasRenderingContext2D;
     private readonly context;
     private readonly options;
-    private readonly fontMetrics;
     private readonly backgroundRenderer;
     private readonly borderRenderer;
     private readonly borderImageRenderer;

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

@@ -5,7 +5,6 @@ import { BoundCurves } from '../bound-curves';
 import { Vector } from '../vector';
 import { Context } from '../../core/context';
 import { TextRenderer } from './text-renderer';
-import { FontMetrics } from '../font-metrics';
 import { Color } from '../../css/types/color';
 import { CSSParsedDeclaration } from '../../css/index';
 /**
@@ -36,7 +35,7 @@ export declare function renderReplacedElements(ctx: CanvasRenderingContext2D, co
 /**
  * Render form element content: checkbox, radio, text input.
  */
-export declare function renderFormElements(ctx: CanvasRenderingContext2D, fontMetrics: FontMetrics, textRenderer: TextRenderer, pathFn: (paths: Vector[]) => void, container: ElementContainer, styles: CSSParsedDeclaration): void;
+export declare function renderFormElements(ctx: CanvasRenderingContext2D, textRenderer: TextRenderer, pathFn: (paths: Vector[]) => void, container: ElementContainer, styles: CSSParsedDeclaration): void;
 /**
  * Render list-item marker (image or text).
  */

package/dist/types/render/canvas/font-utils.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Font measurement utility
+ *
+ * Provides Canvas API-based baseline measurement that works correctly with
+ * webfonts (which may not be loaded in the original document) and system fonts.
+ *
+ * Fallback chain:
+ *   1. fontBoundingBoxAscent — font-level metric (Chrome 99+, FF 116+, Safari 17.4+)
+ *   2. actualBoundingBoxAscent — glyph-level metric (widely supported)
+ *   3. fallback value — coarse CSS fallback
+ */
+/**
+ * Measure the baseline ascent for the currently set font.
+ *
+ * @param ctx - Canvas 2D rendering context with ctx.font already set
+ * @param fallback - Fallback value when no metrics are available (e.g. fontSize.number)
+ * @returns The distance from the text baseline to the top of the bounding box
+ */
+export declare const measureBaseline: (ctx: CanvasRenderingContext2D, fallback: number) => number;

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

@@ -15,13 +15,11 @@ 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;
-    fontMetrics: FontMetrics;
     options: {
         scale: number;
     };
@@ -35,7 +33,6 @@ 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.1",
+  "version": "2.3.2",
   "author": {
     "name": "yorickshan",
     "email": "yorickshan@gmail.com",