html2canvas-pro 2.0.3 → 2.0.4

package/dist/html2canvas-pro.esm.js

@@ -1,5 +1,5 @@
 /*!
- * html2canvas-pro 2.0.3 <https://yorickshan.github.io/html2canvas-pro/>
+ * html2canvas-pro 2.0.4 <https://yorickshan.github.io/html2canvas-pro/>
  * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
  * Released under MIT License
  */
@@ -4239,6 +4239,30 @@ const wordBreak = {
     }
 };
 
+const isVerticalWritingMode = (writingMode) => writingMode !== 0 /* WRITING_MODE.HORIZONTAL_TB */;
+const isSidewaysWritingMode = (writingMode) => writingMode === 3 /* WRITING_MODE.SIDEWAYS_RL */ || writingMode === 4 /* WRITING_MODE.SIDEWAYS_LR */;
+const writingMode = {
+    name: 'writing-mode',
+    initialValue: 'horizontal-tb',
+    prefix: false,
+    type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
+    parse: (_context, writingMode) => {
+        switch (writingMode) {
+            case 'vertical-rl':
+                return 1 /* WRITING_MODE.VERTICAL_RL */;
+            case 'vertical-lr':
+                return 2 /* WRITING_MODE.VERTICAL_LR */;
+            case 'sideways-rl':
+                return 3 /* WRITING_MODE.SIDEWAYS_RL */;
+            case 'sideways-lr':
+                return 4 /* WRITING_MODE.SIDEWAYS_LR */;
+            case 'horizontal-tb':
+            default:
+                return 0 /* WRITING_MODE.HORIZONTAL_TB */;
+        }
+    }
+};
+
 const zIndex = {
     name: 'z-index',
     initialValue: 'auto',
@@ -4855,6 +4879,7 @@ class CSSParsedDeclaration {
         this.webkitTextStrokeWidth = parse(context, webkitTextStrokeWidth, declaration.webkitTextStrokeWidth);
         this.webkitLineClamp = parse(context, webkitLineClamp, declaration.webkitLineClamp);
         this.wordBreak = parse(context, wordBreak, declaration.wordBreak);
+        this.writingMode = parse(context, writingMode, declaration.writingMode);
         this.zIndex = parse(context, zIndex, declaration.zIndex);
         this.objectFit = parse(context, objectFit, declaration.objectFit);
         this.imageRendering = parse(context, imageRendering, declaration.imageRendering);
@@ -5790,6 +5815,9 @@ const segmentWords = (value, styles) => {
     return breakWords(value, styles);
 };
 const breakText = (value, styles) => {
+    if (isVerticalWritingMode(styles.writingMode)) {
+        return segmentGraphemes(value);
+    }
     return styles.letterSpacing !== 0 ? segmentGraphemes(value) : segmentWords(value, styles);
 };
 // https://drafts.csswg.org/css-text/#word-separator
@@ -5829,6 +5857,11 @@ const breakWords = (str, styles) => {
 class TextContainer {
     constructor(context, node, styles) {
         this.text = transform(node.data, styles.textTransform);
+        // Range offsets below are based on transformed text; keep the node in sync
+        // when casing changes string length, for example "ß".toUpperCase() === "SS".
+        if (this.text.length !== node.data.length) {
+            node.data = this.text;
+        }
         this.textBounds = parseTextBounds(context, this.text, styles, node);
     }
 }
@@ -8717,7 +8750,11 @@ class TextRenderer {
      * call (fillText or strokeText), allowing fill and stroke paths to share one
      * implementation.
      */
-    iterateLettersWithLetterSpacing(text, letterSpacing, baseline, renderFn) {
+    iterateLettersWithLetterSpacing(text, letterSpacing, baseline, writingMode, renderFn) {
+        if (isVerticalWritingMode(writingMode)) {
+            this.iterateVerticalGlyphs(text, letterSpacing, baseline, writingMode, renderFn);
+            return;
+        }
         const letters = segmentGraphemes(text.text);
         const y = text.bounds.top + baseline;
         let left = text.bounds.left;
@@ -8734,17 +8771,39 @@ class TextRenderer {
             left += this.ctx.measureText(letter).width + letterSpacing;
         }
     }
+    iterateVerticalGlyphs(text, letterSpacing, baseline, writingMode, renderFn) {
+        const letters = segmentGraphemes(text.text);
+        let top = text.bounds.top;
+        for (const letter of letters) {
+            if (isSidewaysWritingMode(writingMode) || (!hasCJKCharacters(letter) && letter.trim().length > 0)) {
+                this.ctx.save();
+                this.ctx.translate(text.bounds.left + baseline, top);
+                this.ctx.rotate(writingMode === 4 /* WRITING_MODE.SIDEWAYS_LR */ ? -Math.PI / 2 : Math.PI / 2);
+                renderFn(letter, 0, 0);
+                this.ctx.restore();
+            }
+            else {
+                const savedBaseline = this.ctx.textBaseline;
+                if (hasCJKCharacters(letter)) {
+                    this.ctx.textBaseline = 'ideographic';
+                }
+                renderFn(letter, text.bounds.left, top + baseline);
+                this.ctx.textBaseline = savedBaseline;
+            }
+            top += this.ctx.measureText(letter).width + letterSpacing;
+        }
+    }
     /**
      * Render text with letter-spacing applied (fill pass).
      * When letterSpacing is 0 the whole string is drawn in one call; otherwise each
      * grapheme is drawn individually so spacing and CJK baseline are applied correctly.
      */
-    renderTextWithLetterSpacing(text, letterSpacing, baseline) {
-        if (letterSpacing === 0) {
+    renderTextWithLetterSpacing(text, letterSpacing, baseline, writingMode = 0 /* WRITING_MODE.HORIZONTAL_TB */) {
+        if (letterSpacing === 0 && !isVerticalWritingMode(writingMode)) {
             this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
         }
         else {
-            this.iterateLettersWithLetterSpacing(text, letterSpacing, baseline, (letter, x, y) => {
+            this.iterateLettersWithLetterSpacing(text, letterSpacing, baseline, writingMode, (letter, x, y) => {
                 this.ctx.fillText(letter, x, y);
             });
         }
@@ -8758,7 +8817,7 @@ class TextRenderer {
             switch (paintOrderLayer) {
                 case 0 /* PAINT_ORDER_LAYER.FILL */:
                     this.ctx.fillStyle = asString(styles.color);
-                    this.renderTextWithLetterSpacing(textBound, styles.letterSpacing, styles.fontSize.number);
+                    this.renderTextWithLetterSpacing(textBound, styles.letterSpacing, styles.fontSize.number, styles.writingMode);
                     break;
                 case 1 /* PAINT_ORDER_LAYER.STROKE */:
                     if (styles.webkitTextStrokeWidth && textBound.text.trim().length) {
@@ -8766,11 +8825,11 @@ class TextRenderer {
                         this.ctx.lineWidth = styles.webkitTextStrokeWidth;
                         this.ctx.lineJoin =
                             typeof window !== 'undefined' && !!window.chrome ? 'miter' : 'round';
-                        if (styles.letterSpacing === 0) {
+                        if (styles.letterSpacing === 0 && !isVerticalWritingMode(styles.writingMode)) {
                             this.ctx.strokeText(textBound.text, textBound.bounds.left, textBound.bounds.top + styles.fontSize.number);
                         }
                         else {
-                            this.iterateLettersWithLetterSpacing(textBound, styles.letterSpacing, styles.fontSize.number, (letter, x, y) => this.ctx.strokeText(letter, x, y));
+                            this.iterateLettersWithLetterSpacing(textBound, styles.letterSpacing, styles.fontSize.number, styles.writingMode, (letter, x, y) => this.ctx.strokeText(letter, x, y));
                         }
                         this.ctx.strokeStyle = '';
                         this.ctx.lineWidth = 0;
@@ -9006,11 +9065,11 @@ class TextRenderer {
                         switch (paintOrderLayer) {
                             case 0 /* PAINT_ORDER_LAYER.FILL */:
                                 this.ctx.fillStyle = asString(styles.color);
-                                if (styles.letterSpacing === 0) {
+                                if (styles.letterSpacing === 0 && !isVerticalWritingMode(styles.writingMode)) {
                                     this.ctx.fillText(truncatedText, firstBound.bounds.left, firstBound.bounds.top + styles.fontSize.number);
                                 }
                                 else {
-                                    this.iterateLettersWithLetterSpacing(truncatedBounds, styles.letterSpacing, styles.fontSize.number, (letter, x, y) => this.ctx.fillText(letter, x, y));
+                                    this.iterateLettersWithLetterSpacing(truncatedBounds, styles.letterSpacing, styles.fontSize.number, styles.writingMode, (letter, x, y) => this.ctx.fillText(letter, x, y));
                                 }
                                 break;
                             case 1 /* PAINT_ORDER_LAYER.STROKE */:
@@ -9019,11 +9078,11 @@ class TextRenderer {
                                     this.ctx.lineWidth = styles.webkitTextStrokeWidth;
                                     this.ctx.lineJoin =
                                         typeof window !== 'undefined' && !!window.chrome ? 'miter' : 'round';
-                                    if (styles.letterSpacing === 0) {
+                                    if (styles.letterSpacing === 0 && !isVerticalWritingMode(styles.writingMode)) {
                                         this.ctx.strokeText(truncatedText, firstBound.bounds.left, firstBound.bounds.top + styles.fontSize.number);
                                     }
                                     else {
-                                        this.iterateLettersWithLetterSpacing(truncatedBounds, styles.letterSpacing, styles.fontSize.number, (letter, x, y) => this.ctx.strokeText(letter, x, y));
+                                        this.iterateLettersWithLetterSpacing(truncatedBounds, styles.letterSpacing, styles.fontSize.number, styles.writingMode, (letter, x, y) => this.ctx.strokeText(letter, x, y));
                                     }
                                     this.ctx.strokeStyle = '';
                                     this.ctx.lineWidth = 0;
@@ -9078,11 +9137,11 @@ class TextRenderer {
                 switch (paintOrderLayer) {
                     case 0 /* PAINT_ORDER_LAYER.FILL */: {
                         this.ctx.fillStyle = asString(styles.color);
-                        if (styles.letterSpacing === 0) {
+                        if (styles.letterSpacing === 0 && !isVerticalWritingMode(styles.writingMode)) {
                             this.ctx.fillText(truncatedText, firstBound.bounds.left, firstBound.bounds.top + styles.fontSize.number);
                         }
                         else {
-                            this.iterateLettersWithLetterSpacing(truncatedBounds, styles.letterSpacing, styles.fontSize.number, (letter, x, y) => this.ctx.fillText(letter, x, y));
+                            this.iterateLettersWithLetterSpacing(truncatedBounds, styles.letterSpacing, styles.fontSize.number, styles.writingMode, (letter, x, y) => this.ctx.fillText(letter, x, y));
                         }
                         const textShadows = styles.textShadow;
                         if (textShadows.length && truncatedText.trim().length) {
@@ -9094,11 +9153,11 @@ 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;
-                                if (styles.letterSpacing === 0) {
+                                if (styles.letterSpacing === 0 && !isVerticalWritingMode(styles.writingMode)) {
                                     this.ctx.fillText(truncatedText, firstBound.bounds.left, firstBound.bounds.top + styles.fontSize.number);
                                 }
                                 else {
-                                    this.iterateLettersWithLetterSpacing(truncatedBounds, styles.letterSpacing, styles.fontSize.number, (letter, x, y) => this.ctx.fillText(letter, x, y));
+                                    this.iterateLettersWithLetterSpacing(truncatedBounds, styles.letterSpacing, styles.fontSize.number, styles.writingMode, (letter, x, y) => this.ctx.fillText(letter, x, y));
                                 }
                             });
                             this.ctx.shadowColor = '';
@@ -9114,11 +9173,11 @@ class TextRenderer {
                             this.ctx.lineWidth = styles.webkitTextStrokeWidth;
                             this.ctx.lineJoin =
                                 typeof window !== 'undefined' && !!window.chrome ? 'miter' : 'round';
-                            if (styles.letterSpacing === 0) {
+                            if (styles.letterSpacing === 0 && !isVerticalWritingMode(styles.writingMode)) {
                                 this.ctx.strokeText(truncatedText, firstBound.bounds.left, firstBound.bounds.top + styles.fontSize.number);
                             }
                             else {
-                                this.iterateLettersWithLetterSpacing(truncatedBounds, styles.letterSpacing, styles.fontSize.number, (letter, x, y) => this.ctx.strokeText(letter, x, y));
+                                this.iterateLettersWithLetterSpacing(truncatedBounds, styles.letterSpacing, styles.fontSize.number, styles.writingMode, (letter, x, y) => this.ctx.strokeText(letter, x, y));
                             }
                             this.ctx.strokeStyle = '';
                             this.ctx.lineWidth = 0;
@@ -9135,7 +9194,7 @@ class TextRenderer {
                 switch (paintOrderLayer) {
                     case 0 /* PAINT_ORDER_LAYER.FILL */: {
                         this.ctx.fillStyle = asString(styles.color);
-                        this.renderTextWithLetterSpacing(text, styles.letterSpacing, styles.fontSize.number);
+                        this.renderTextWithLetterSpacing(text, styles.letterSpacing, styles.fontSize.number, styles.writingMode);
                         const textShadows = styles.textShadow;
                         if (textShadows.length && text.text.trim().length) {
                             textShadows
@@ -9146,7 +9205,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);
+                                this.renderTextWithLetterSpacing(text, styles.letterSpacing, styles.fontSize.number, styles.writingMode);
                             });
                             this.ctx.shadowColor = '';
                             this.ctx.shadowOffsetX = 0;
@@ -9165,11 +9224,11 @@ class TextRenderer {
                             this.ctx.lineJoin =
                                 typeof window !== 'undefined' && !!window.chrome ? 'miter' : 'round';
                             const baseline = styles.fontSize.number;
-                            if (styles.letterSpacing === 0) {
+                            if (styles.letterSpacing === 0 && !isVerticalWritingMode(styles.writingMode)) {
                                 this.ctx.strokeText(text.text, text.bounds.left, text.bounds.top + baseline);
                             }
                             else {
-                                this.iterateLettersWithLetterSpacing(text, styles.letterSpacing, baseline, (letter, x, y) => this.ctx.strokeText(letter, x, y));
+                                this.iterateLettersWithLetterSpacing(text, styles.letterSpacing, baseline, styles.writingMode, (letter, x, y) => this.ctx.strokeText(letter, x, y));
                             }
                             this.ctx.strokeStyle = '';
                             this.ctx.lineWidth = 0;
@@ -9464,7 +9523,7 @@ class CanvasRenderer extends Renderer {
                 new Vector(bounds.left, bounds.top + bounds.height)
             ]);
             this.ctx.clip();
-            this.textRenderer.renderTextWithLetterSpacing(new TextBounds(container.value, textBounds), styles.letterSpacing, baseline);
+            this.textRenderer.renderTextWithLetterSpacing(new TextBounds(container.value, textBounds), styles.letterSpacing, baseline, styles.writingMode);
             this.ctx.restore();
             this.ctx.textBaseline = 'alphabetic';
             this.ctx.textAlign = 'left';
@@ -9491,7 +9550,7 @@ class CanvasRenderer extends Renderer {
                 this.ctx.textBaseline = 'middle';
                 this.ctx.textAlign = 'right';
                 const bounds = new Bounds(container.bounds.left, container.bounds.top + getAbsoluteValue(container.styles.paddingTop, container.bounds.width), container.bounds.width, computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2 + 1);
-                this.textRenderer.renderTextWithLetterSpacing(new TextBounds(paint.listValue, bounds), styles.letterSpacing, computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2 + 2);
+                this.textRenderer.renderTextWithLetterSpacing(new TextBounds(paint.listValue, bounds), styles.letterSpacing, computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2 + 2, styles.writingMode);
                 this.ctx.textBaseline = 'bottom';
                 this.ctx.textAlign = 'left';
             }