html2canvas-pro 2.0.3 → 2.0.4

package/dist/html2canvas-pro.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
  */
@@ -4245,6 +4245,30 @@
         }
     };
 
+    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',
@@ -4861,6 +4885,7 @@
             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);
@@ -5796,6 +5821,9 @@
         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
@@ -5835,6 +5863,11 @@
     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);
         }
     }
@@ -8723,7 +8756,11 @@
          * 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;
@@ -8740,17 +8777,39 @@
                 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);
                 });
             }
@@ -8764,7 +8823,7 @@
                 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) {
@@ -8772,11 +8831,11 @@
                             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;
@@ -9012,11 +9071,11 @@
                             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 */:
@@ -9025,11 +9084,11 @@
                                         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;
@@ -9084,11 +9143,11 @@
                     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) {
@@ -9100,11 +9159,11 @@
                                     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 = '';
@@ -9120,11 +9179,11 @@
                                 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;
@@ -9141,7 +9200,7 @@
                     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
@@ -9152,7 +9211,7 @@
                                     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;
@@ -9171,11 +9230,11 @@
                                 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;
@@ -9470,7 +9529,7 @@
                     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';
@@ -9497,7 +9556,7 @@
                     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';
                 }