modern-text 0.2.36 → 0.2.38

package/dist/index.cjs

@@ -76,27 +76,6 @@ function drawPath(options) {
   ctx.restore();
 }
 
-function fillBackground(ctx, text) {
-  const { computedStyle: style, paragraphs } = text;
-  function fillBackground2(color, x, y, width, height) {
-    ctx.fillStyle = color;
-    ctx.fillRect(x, y, width, height);
-  }
-  if (style?.backgroundColor) {
-    fillBackground2(style.backgroundColor, 0, 0, ctx.canvas.width, ctx.canvas.height);
-  }
-  paragraphs.forEach((paragraph) => {
-    if (paragraph.style?.backgroundColor) {
-      fillBackground2(paragraph.computedStyle.backgroundColor, ...paragraph.boundingBox.toArray());
-    }
-    paragraph.fragments.forEach((fragment) => {
-      if (fragment.style?.backgroundColor) {
-        fillBackground2(fragment.computedStyle.backgroundColor, ...fragment.boundingBox.toArray());
-      }
-    });
-  });
-}
-
 function setupView(ctx, pixelRatio, boundingBox) {
   const { left, top, width, height } = boundingBox;
   const view = ctx.canvas;
@@ -117,9 +96,9 @@ function uploadColors(ctx, text) {
   const { paragraphs, computedStyle: style, renderBoundingBox } = text;
   uploadColor(style, renderBoundingBox, ctx);
   paragraphs.forEach((paragraph) => {
-    uploadColor(paragraph.computedStyle, paragraph.boundingBox, ctx);
+    uploadColor(paragraph.computedStyle, paragraph.lineBox, ctx);
     paragraph.fragments.forEach((fragment) => {
-      uploadColor(fragment.computedStyle, fragment.boundingBox, ctx);
+      uploadColor(fragment.computedStyle, fragment.inlineBox, ctx);
     });
   });
 }
@@ -161,13 +140,9 @@ class Character {
     this.content = content;
     this.index = index;
     this.parent = parent;
-    // measure dom
-    __publicField$3(this, "boundingBox", new modernPath2d.BoundingBox());
-    __publicField$3(this, "textWidth", 0);
-    __publicField$3(this, "textHeight", 0);
-    // font glyph
-    __publicField$3(this, "glyphHeight", 0);
-    __publicField$3(this, "glyphWidth", 0);
+    __publicField$3(this, "lineBox", new modernPath2d.BoundingBox());
+    __publicField$3(this, "inlineBox", new modernPath2d.BoundingBox());
+    __publicField$3(this, "glyphBox", new modernPath2d.BoundingBox());
     __publicField$3(this, "underlinePosition", 0);
     __publicField$3(this, "underlineThickness", 0);
     __publicField$3(this, "yStrikeoutPosition", 0);
@@ -175,7 +150,6 @@ class Character {
     __publicField$3(this, "baseline", 0);
     __publicField$3(this, "centerDiviation", 0);
     __publicField$3(this, "path", new modernPath2d.Path2D());
-    __publicField$3(this, "glyphBox", new modernPath2d.BoundingBox());
     __publicField$3(this, "center", new modernPath2d.Vector2());
   }
   get computedStyle() {
@@ -187,6 +161,9 @@ class Character {
   get fontSize() {
     return this.computedStyle.fontSize;
   }
+  get fontHeight() {
+    return this.fontSize * this.computedStyle.lineHeight;
+  }
   _font() {
     const font = modernFont.fonts.get(this.computedStyle.fontFamily)?.font;
     if (font instanceof modernFont.Woff || font instanceof modernFont.Ttf) {
@@ -199,25 +176,24 @@ class Character {
       return this;
     }
     const { unitsPerEm, ascender, descender, os2, post } = font;
-    const { content, computedStyle, boundingBox } = this;
-    const { height } = boundingBox;
+    const { content, computedStyle } = this;
     const { fontSize } = computedStyle;
     const rate = unitsPerEm / fontSize;
-    const glyphWidth = font.getAdvanceWidth(content, fontSize);
-    const glyphHeight = (ascender + Math.abs(descender)) / rate;
+    const advanceWidth = font.getAdvanceWidth(content, fontSize);
+    const advanceHeight = (ascender + Math.abs(descender)) / rate;
     const baseline = ascender / rate;
     const yStrikeoutPosition = (ascender - os2.yStrikeoutPosition) / rate;
     const yStrikeoutSize = os2.yStrikeoutSize / rate;
     const underlinePosition = (ascender - post.underlinePosition) / rate;
     const underlineThickness = post.underlineThickness / rate;
-    this.glyphWidth = glyphWidth;
-    this.glyphHeight = glyphHeight;
+    this.inlineBox.width = advanceWidth;
+    this.inlineBox.height = advanceHeight;
     this.underlinePosition = underlinePosition;
     this.underlineThickness = underlineThickness;
     this.yStrikeoutPosition = yStrikeoutPosition;
     this.yStrikeoutSize = yStrikeoutSize;
     this.baseline = baseline;
-    this.centerDiviation = 0.5 * height - baseline;
+    this.centerDiviation = advanceHeight / 2 - baseline;
     return this;
   }
   updatePath() {
@@ -228,45 +204,39 @@ class Character {
     const {
       isVertical,
       content,
-      textWidth,
-      textHeight,
-      boundingBox,
       computedStyle,
       baseline,
-      glyphHeight,
-      glyphWidth
+      inlineBox
     } = this.updateGlyph(font);
     const { os2, ascender, descender } = font;
-    const usWinAscent = ascender;
-    const usWinDescent = descender;
     const typoAscender = os2.sTypoAscender;
-    const { left, top } = boundingBox;
+    const { left, top } = inlineBox;
     const { fontSize, fontStyle } = computedStyle;
     let x = left;
     let y = top + baseline;
     let glyphIndex;
     const path = new modernPath2d.Path2D();
     if (isVertical) {
-      x += (glyphHeight - glyphWidth) / 2;
-      if (Math.abs(textWidth - textHeight) > 0.1) {
-        y -= (usWinAscent - typoAscender) / (usWinAscent + Math.abs(usWinDescent)) * glyphHeight;
+      x += (inlineBox.height - inlineBox.width) / 2;
+      if (Math.abs(inlineBox.width - inlineBox.height) > 0.1) {
+        y -= (ascender - typoAscender) / (ascender + Math.abs(descender)) * inlineBox.height;
       }
       glyphIndex = void 0;
     }
     if (isVertical && !set1.has(content) && (content.codePointAt(0) <= 256 || set2.has(content))) {
       path.addCommands(
-        font.getPathCommands(content, x, top + baseline - (glyphHeight - glyphWidth) / 2, fontSize) ?? []
+        font.getPathCommands(content, x, top + baseline - (inlineBox.height - inlineBox.width) / 2, fontSize) ?? []
       );
       const point = {
-        y: top - (glyphHeight - glyphWidth) / 2 + glyphHeight / 2,
-        x: x + glyphWidth / 2
+        y: top - (inlineBox.height - inlineBox.width) / 2 + inlineBox.height / 2,
+        x: x + inlineBox.width / 2
       };
       if (fontStyle === "italic") {
         this._italic(
           path,
           isVertical ? {
             x: point.x,
-            y: top - (glyphHeight - glyphWidth) / 2 + baseline
+            y: top - (inlineBox.height - inlineBox.width) / 2 + baseline
           } : void 0
         );
       }
@@ -280,8 +250,8 @@ class Character {
           this._italic(
             path,
             isVertical ? {
-              x: x + glyphWidth / 2,
-              y: top + typoAscender / (usWinAscent + Math.abs(usWinDescent)) * glyphHeight
+              x: x + inlineBox.width / 2,
+              y: top + typoAscender / (ascender + Math.abs(descender)) * inlineBox.height
             } : void 0
           );
         }
@@ -292,7 +262,7 @@ class Character {
         if (fontStyle === "italic") {
           this._italic(
             path,
-            isVertical ? { x: x + glyphHeight / 2, y } : void 0
+            isVertical ? { x: x + inlineBox.height / 2, y } : void 0
           );
         }
       }
@@ -319,7 +289,7 @@ class Character {
   _decoration() {
     const { isVertical, underlinePosition, yStrikeoutPosition } = this;
     const { textDecoration, fontSize } = this.computedStyle;
-    const { left, top, width, height } = this.boundingBox;
+    const { left, top, width, height } = this.inlineBox;
     const lineWidth = 0.1 * fontSize;
     let start;
     switch (textDecoration) {
@@ -361,8 +331,8 @@ class Character {
   }
   _italic(path, startPoint) {
     path.skew(-0.24, 0, startPoint || {
-      y: this.boundingBox.top + this.baseline,
-      x: this.boundingBox.left + this.glyphWidth / 2
+      y: this.inlineBox.top + this.baseline,
+      x: this.inlineBox.left + this.inlineBox.width / 2
     });
   }
   getGlyphMinMax(min, max, withStyle) {
@@ -371,9 +341,7 @@ class Character {
     } else {
       min ?? (min = modernPath2d.Vector2.MAX);
       max ?? (max = modernPath2d.Vector2.MIN);
-      const { left, top } = this.boundingBox;
-      const right = left + this.glyphWidth;
-      const bottom = top + this.glyphHeight;
+      const { left, top, right, bottom } = this.inlineBox;
       min.x = Math.min(min.x, left);
       min.y = Math.min(min.y, top);
       max.x = Math.max(max.x, right);
@@ -422,7 +390,7 @@ class Fragment {
     this.content = content;
     this.style = style;
     this.parent = parent;
-    __publicField$2(this, "boundingBox", new modernPath2d.BoundingBox());
+    __publicField$2(this, "inlineBox", new modernPath2d.BoundingBox());
     this.updateComputedStyle().initCharacters();
   }
   get computedContent() {
@@ -457,7 +425,7 @@ class Paragraph {
   constructor(style, parentStyle) {
     this.style = style;
     this.parentStyle = parentStyle;
-    __publicField$1(this, "boundingBox", new modernPath2d.BoundingBox());
+    __publicField$1(this, "lineBox", new modernPath2d.BoundingBox());
     __publicField$1(this, "fragments", []);
     this.updateComputedStyle();
   }
@@ -559,7 +527,7 @@ class Measurer {
         height: pBox.height
       });
       li.querySelectorAll("span").forEach((span, fragmentIndex) => {
-        const fBox = li.getBoundingClientRect();
+        const fBox = span.getBoundingClientRect();
         fragments.push({
           paragraphIndex,
           fragmentIndex,
@@ -612,64 +580,43 @@ class Measurer {
   measureDom(dom) {
     const { paragraphs } = this._text;
     const rect = dom.getBoundingClientRect();
-    const innerEl = dom.querySelector("ul");
-    const isVertical = window.getComputedStyle(dom).writingMode.includes("vertical");
-    const oldLineHeight = innerEl.style.lineHeight;
-    innerEl.style.lineHeight = "4000px";
-    const _paragraphs = [[]];
-    let fragments = _paragraphs[0];
-    const { characters: oldCharacters } = this._measureDom(dom);
-    if (oldCharacters.length > 0) {
-      fragments.push(oldCharacters[0]);
-      oldCharacters.reduce((prev, current) => {
-        const attr = isVertical ? "left" : "top";
-        if (Math.abs(current[attr] - prev[attr]) > 4e3 / 2) {
-          fragments = [];
-          _paragraphs.push(fragments);
-        }
-        fragments.push(current);
-        return current;
-      });
-    }
-    innerEl.style.lineHeight = oldLineHeight;
     const measured = this._measureDom(dom);
     measured.paragraphs.forEach((p) => {
       const _p = paragraphs[p.paragraphIndex];
-      _p.boundingBox.left = p.left - rect.left;
-      _p.boundingBox.top = p.top - rect.top;
-      _p.boundingBox.width = p.width;
-      _p.boundingBox.height = p.height;
+      _p.lineBox.left = p.left - rect.left;
+      _p.lineBox.top = p.top - rect.top;
+      _p.lineBox.width = p.width;
+      _p.lineBox.height = p.height;
     });
     measured.fragments.forEach((f) => {
       const _f = paragraphs[f.paragraphIndex].fragments[f.fragmentIndex];
-      _f.boundingBox.left = f.left - rect.left;
-      _f.boundingBox.top = f.top - rect.top;
-      _f.boundingBox.width = f.width;
-      _f.boundingBox.height = f.height;
+      _f.inlineBox.left = f.left - rect.left;
+      _f.inlineBox.top = f.top - rect.top;
+      _f.inlineBox.width = f.width;
+      _f.inlineBox.height = f.height;
     });
     const results = [];
     let i = 0;
-    _paragraphs.forEach((oldCharacters2) => {
-      oldCharacters2.forEach((oldCharacter) => {
-        const character = measured.characters[i];
-        const { paragraphIndex, fragmentIndex, characterIndex } = character;
-        results.push({
-          ...character,
-          newParagraphIndex: paragraphIndex,
-          textWidth: oldCharacter.width,
-          textHeight: oldCharacter.height,
-          left: character.left - rect.left,
-          top: character.top - rect.top
-        });
-        const item = paragraphs[paragraphIndex].fragments[fragmentIndex].characters[characterIndex];
-        item.boundingBox.left = results[i].left;
-        item.boundingBox.top = results[i].top;
-        item.boundingBox.width = results[i].width;
-        item.boundingBox.height = results[i].height;
-        item.textWidth = results[i].textWidth;
-        item.textHeight = results[i].textHeight;
-        i++;
+    measured.characters.forEach((character) => {
+      const { paragraphIndex, fragmentIndex, characterIndex } = character;
+      results.push({
+        ...character,
+        newParagraphIndex: paragraphIndex,
+        left: character.left - rect.left,
+        top: character.top - rect.top
       });
+      const item = paragraphs[paragraphIndex].fragments[fragmentIndex].characters[characterIndex];
+      const result = results[i];
+      item.inlineBox.left = result.left;
+      item.inlineBox.top = result.top;
+      item.inlineBox.width = result.width;
+      item.inlineBox.height = result.height;
+      const fontHeight = item.fontHeight;
+      item.lineBox.left = result.left;
+      item.lineBox.top = result.top + (result.height - fontHeight) / 2;
+      item.lineBox.height = fontHeight;
+      item.lineBox.width = result.width;
+      i++;
     });
     return {
       paragraphs,
@@ -746,82 +693,6 @@ function definePlugin(options) {
   return options;
 }
 
-const tempV1 = new modernPath2d.Vector2();
-const tempM1 = new modernPath2d.Matrix3();
-const tempM2 = new modernPath2d.Matrix3();
-function effect() {
-  return definePlugin({
-    name: "effect",
-    getBoundingBox: (text) => {
-      const { characters, fontSize, effects } = text;
-      const boxes = [];
-      characters.forEach((character) => {
-        effects?.forEach((style) => {
-          const aabb = character.glyphBox.clone();
-          const m = getTransform2D(text, style);
-          tempV1.set(aabb.left, aabb.top);
-          tempV1.applyMatrix3(m);
-          aabb.left = tempV1.x;
-          aabb.top = tempV1.y;
-          tempV1.set(aabb.right, aabb.bottom);
-          tempV1.applyMatrix3(m);
-          aabb.width = tempV1.x - aabb.left;
-          aabb.height = tempV1.y - aabb.top;
-          const shadowOffsetX = (style.shadowOffsetX ?? 0) * fontSize;
-          const shadowOffsetY = (style.shadowOffsetY ?? 0) * fontSize;
-          const textStrokeWidth = Math.max(0.1, style.textStrokeWidth ?? 0) * fontSize;
-          aabb.left += shadowOffsetX - textStrokeWidth;
-          aabb.top += shadowOffsetY - textStrokeWidth;
-          aabb.width += textStrokeWidth * 2;
-          aabb.height += textStrokeWidth * 2;
-          boxes.push(aabb);
-        });
-      });
-      return boxes.length ? modernPath2d.BoundingBox.from(...boxes) : void 0;
-    },
-    render: (ctx, text) => {
-      const { characters, renderBoundingBox, effects } = text;
-      if (effects) {
-        effects.forEach((style) => {
-          uploadColor(style, renderBoundingBox, ctx);
-          ctx.save();
-          const [a, c, e, b, d, f] = getTransform2D(text, style).transpose().elements;
-          ctx.transform(a, b, c, d, e, f);
-          characters.forEach((character) => {
-            character.drawTo(ctx, style);
-          });
-          ctx.restore();
-        });
-      } else {
-        characters.forEach((character) => {
-          character.drawTo(ctx);
-        });
-      }
-    }
-  });
-}
-function getTransform2D(text, style) {
-  const { fontSize, renderBoundingBox } = text;
-  const offsetX = (style.offsetX ?? 0) * fontSize;
-  const offsetY = (style.offsetY ?? 0) * fontSize;
-  const PI_2 = Math.PI * 2;
-  const skewX = (style.skewX ?? 0) / 360 * PI_2;
-  const skewY = (style.skewY ?? 0) / 360 * PI_2;
-  const { left, top, width, height } = renderBoundingBox;
-  const centerX = left + width / 2;
-  const centerY = top + height / 2;
-  tempM1.identity();
-  tempM2.makeTranslation(offsetX, offsetY);
-  tempM1.multiply(tempM2);
-  tempM2.makeTranslation(centerX, centerY);
-  tempM1.multiply(tempM2);
-  tempM2.set(1, Math.tan(skewX), 0, Math.tan(skewY), 1, 0, 0, 0, 1);
-  tempM1.multiply(tempM2);
-  tempM2.makeTranslation(-centerX, -centerY);
-  tempM1.multiply(tempM2);
-  return tempM1.clone();
-}
-
 const defaultReferImage = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MiIgaGVpZ2h0PSI3MiIgdmlld0JveD0iMCAwIDcyIDcyIiBmaWxsPSJub25lIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMyLjQwMjkgMjhIMzUuMTU5NFYzMy4xNzcxQzM1Ljk4MjEgMzIuMzExNSAzNi45NzEgMzEuODczNyAzOC4wOTQ4IDMxLjg3MzdDMzkuNjY3NiAzMS44NzM3IDQwLjkxNjYgMzIuNDI5NSA0MS44MzkgMzMuNTQzN0w0MS44NDAzIDMzLjU0NTNDNDIuNjcxNyAzNC41NzA1IDQzLjA5MTUgMzUuODU1OSA0My4wOTE1IDM3LjM4NzdDNDMuMDkxNSAzOC45NzYxIDQyLjY3MjkgNDAuMzAyOCA0MS44MTgzIDQxLjMzMDRMNDEuODE3MSA0MS4zMzE4QzQwLjg3MzEgNDIuNDQ2MSAzOS41ODMyIDQzIDM3Ljk3MjEgNDNDMzYuNzQ3NyA0MyAzNS43NDg4IDQyLjY1OTkgMzQuOTk1OCA0MS45NjkzVjQyLjcyNDdIMzIuNDAyOVYyOFpNMzcuNTQyOCAzNC4wOTI0QzM2Ljg1NDkgMzQuMDkyNCAzNi4zMDE0IDM0LjM1NjEgMzUuODQ4NyAzNC45MDA0TDM1Ljg0NTIgMzQuOTA0NkMzNS4zMzU4IDM1LjQ4NTMgMzUuMDc3NiAzNi4yOTc2IDM1LjA3NzYgMzcuMzQ4NFYzNy41MDU3QzM1LjA3NzYgMzguNDY0IDM1LjI3NzIgMzkuMjQ0MyAzNS42OTQzIDM5LjgyNzlDMzYuMTQ0MSA0MC40NTg3IDM2Ljc3MjYgNDAuNzgxMyAzNy42MjQ1IDQwLjc4MTNDMzguNTg3NCA0MC43ODEzIDM5LjI3MDcgNDAuNDUyNyAzOS43MTUyIDM5LjgxMjdDNDAuMDcyOCAzOS4yNjg0IDQwLjI3MzcgMzguNDY3MyA0MC4yNzM3IDM3LjM4NzdDNDAuMjczNyAzNi4zMTA1IDQwLjA1MzMgMzUuNTMxMyAzOS42NzgzIDM1LjAwNzdDMzkuMjM3MSAzNC40MDcxIDM4LjUzNDIgMzQuMDkyNCAzNy41NDI4IDM0LjA5MjRaIiBmaWxsPSIjMjIyNTI5Ii8+PHBhdGggZD0iTTQ5Ljg2MTQgMzEuODczN0M0OC4xNTM1IDMxLjg3MzcgNDYuODAxNiAzMi40MjM5IDQ1LjgzNDggMzMuNTM5MkM0NC45MzcgMzQuNTQ3MiA0NC40OTY2IDM1Ljg1NiA0NC40OTY2IDM3LjQyN0M0NC40OTY2IDM5LjAzNjggNDQuOTM2NyA0MC4zNjU5IDQ1Ljg1NTkgNDEuMzk0M0M0Ni44MDMxIDQyLjQ3MDYgNDguMTM0OCA0MyA0OS44MjA1IDQzQzUxLjIyNiA0MyA1Mi4zODI2IDQyLjY1NjMgNTMuMjQ3OSA0MS45Njk3QzU0LjEzNTkgNDEuMjYxNCA1NC43MDYxIDQwLjE4ODcgNTQuOTU3MyAzOC43NzkxTDU1IDM4LjUzOTdINTIuMjQ4NEw1Mi4yMjU5IDM4LjcyMDFDNTIuMTM3OSAzOS40MjUxIDUxLjg5MjUgMzkuOTI3OCA1MS41MTA5IDQwLjI1NThDNTEuMTI5NSA0MC41ODM1IDUwLjU4MzEgNDAuNzYxNiA0OS44NDA5IDQwLjc2MTZDNDkuMDAwMSA0MC43NjE2IDQ4LjM5NDkgNDAuNDcxNSA0Ny45OTA3IDM5LjkyMzdMNDcuOTg3NCAzOS45MTk0QzQ3LjUzNTYgMzkuMzQwMSA0Ny4zMTQ0IDM4LjUwNjIgNDcuMzE0NCAzNy40MDc0QzQ3LjMxNDQgMzYuMzMyMiA0Ny41NTQ0IDM1LjUxNzcgNDguMDA1OCAzNC45NTY4TDQ4LjAwNzggMzQuOTU0M0M0OC40NTM3IDM0LjM4MjUgNDkuMDYxOCAzNC4xMTIxIDQ5Ljg2MTQgMzQuMTEyMUM1MC41MjMgMzQuMTEyMSA1MS4wNDUxIDM0LjI2MTUgNTEuNDI3MiAzNC41NDA3QzUxLjc4ODQgMzQuODE5NCA1Mi4wNTMgMzUuMjQ0NyA1Mi4xODgxIDM1Ljg1NzFMNTIuMjIzOSAzNi4wMTk0SDU0Ljk1NDhMNTQuOTE3IDM1Ljc4MzVDNTQuNzA2MyAzNC40NjYgNTQuMTUzNiAzMy40NzAxIDUzLjI2MzQgMzIuODAxOUw1My4yNjAyIDMyLjc5OTVDNTIuMzk1MSAzMi4xNzU1IDUxLjI2MjEgMzEuODczNyA0OS44NjE0IDMxLjg3MzdaIiBmaWxsPSIjMjIyNTI5Ii8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNS43NTYxIDI4LjI3NTNIMjIuNzQ0TDE3IDQyLjcyNDdIMjAuMDE0MUwyMS4zNDI5IDM5LjIwNDlIMjcuMTU3MkwyOC40ODYgNDIuNzI0N0gzMS41MDAxTDI1Ljc1NjEgMjguMjc1M1pNMjIuMjEyNSAzNi45MDc2TDI0LjI1OTYgMzEuNDUzOUwyNi4yODg1IDM2LjkwNzZIMjIuMjEyNVoiIGZpbGw9IiMyMjI1MjkiLz48L3N2Zz4=";
 function parseCharsPerRepeat(size, fontSize, total) {
   if (size === "cover") {
@@ -853,17 +724,35 @@ function parseStrokeWidthScale(strokeWidth, fontSize, total) {
     return strokeWidth / total;
   }
 }
-function getTransformMatrix(a, b, c) {
-  const scaleX = c.width / b.width;
-  const scaleY = c.height / b.height;
-  const aCenterInB = new modernPath2d.Vector2(a.x + a.width / 2, a.y + a.height / 2);
-  const cCenter = new modernPath2d.Vector2(c.x + c.width / 2, c.y + c.height / 2);
-  const translatedCenterInC = cCenter.add(
-    aCenterInB.clone().sub(new modernPath2d.Vector2(b.x + b.width / 2, b.y + b.height / 2)).scale(scaleX, scaleY)
-  );
-  const newX = translatedCenterInC.x - a.width * scaleX / 2;
-  const newY = translatedCenterInC.y - a.height * scaleY / 2;
-  return new modernPath2d.Matrix3().translate(-a.left, -a.top).scale(scaleX, scaleY).translate(newX, newY);
+function getTransformMatrix(a, b, c, isVertical) {
+  let scale;
+  if (!isVertical) {
+    scale = {
+      x: c.width / b.width,
+      y: c.height / b.height
+    };
+  } else {
+    scale = {
+      x: c.width / b.height,
+      y: c.height / b.width
+    };
+  }
+  const offset = c.getCenterPoint().add(
+    a.getCenterPoint().sub(b.getCenterPoint()).scale(scale.x, scale.y)
+  ).sub({
+    x: a.width / 2 * scale.x,
+    y: a.height / 2 * scale.y
+  });
+  const m = new modernPath2d.Matrix3();
+  m.translate(-a.left, -a.top);
+  if (isVertical) {
+    m.translate(-a.width / 2, -a.height / 2);
+    m.rotate(Math.PI / 2);
+    m.translate(a.width / 2, a.height / 2);
+  }
+  m.scale(scale.x, scale.y);
+  m.translate(offset.x, offset.y);
+  return m;
 }
 function highlight() {
   const paths = [];
@@ -889,7 +778,7 @@ function highlight() {
       characters.forEach((character) => {
         const { isVertical, computedStyle: style } = character;
         if (!isNone(style.highlightImage)) {
-          if (style.highlightSize !== "1rem" && prevStyle?.highlightImage === style.highlightImage && prevStyle?.highlightSize === style.highlightSize && prevStyle?.highlightStrokeWidth === style.highlightStrokeWidth && prevStyle?.highlightOverflow === style.highlightOverflow && group.length && (isVertical ? group[0].boundingBox.left === character.boundingBox.left : group[0].boundingBox.top === character.boundingBox.top) && group[0].fontSize === character.fontSize) {
+          if (style.highlightSize !== "1rem" && prevStyle?.highlightImage === style.highlightImage && prevStyle?.highlightSize === style.highlightSize && prevStyle?.highlightStrokeWidth === style.highlightStrokeWidth && prevStyle?.highlightOverflow === style.highlightOverflow && group.length && (isVertical ? group[0].inlineBox.left === character.inlineBox.left : group[0].inlineBox.top === character.inlineBox.top) && group[0].fontSize === character.fontSize) {
             group.push(character);
           } else {
             group = [];
@@ -900,13 +789,16 @@ function highlight() {
         prevStyle = style;
       });
       groups.filter((characters2) => characters2.length).map((characters2) => {
+        const char = characters2[0];
         return {
-          style: characters2[0].computedStyle,
+          style: char.computedStyle,
+          baseline: char.baseline,
           box: modernPath2d.BoundingBox.from(...characters2.map((c) => c.glyphBox))
         };
       }).forEach((group2) => {
-        const { style, box: groupBox } = group2;
-        const { fontSize } = style;
+        const { style, box: groupBox, baseline } = group2;
+        const { fontSize, writingMode } = style;
+        const isVertical = writingMode.includes("vertical");
         const strokeWidthScale = parseStrokeWidthScale(style.highlightStrokeWidth, fontSize, groupBox.width);
         const charsPerRepeat = parseCharsPerRepeat(style.highlightSize, fontSize, groupBox.width);
         const highlightOverflow = isNone(style.highlightOverflow) ? charsPerRepeat ? "hidden" : "visible" : style.highlightOverflow;
@@ -914,8 +806,14 @@ function highlight() {
         const svgPaths = getPaths(style.highlightImage);
         const box = modernPath2d.getPathsBoundingBox(svgPaths, true);
         const refBox = modernPath2d.getPathsBoundingBox(refPaths, false);
-        const transform = getTransformMatrix(box, refBox, groupBox);
-        const unitWidth = charsPerRepeat ? fontSize * charsPerRepeat : groupBox.width;
+        const unitWidth = charsPerRepeat ? fontSize * charsPerRepeat : isVertical ? groupBox.height : groupBox.width;
+        const unitHeight = baseline * 0.8;
+        const transform = getTransformMatrix(
+          box,
+          refBox,
+          new modernPath2d.BoundingBox(groupBox.left, groupBox.top, isVertical ? unitHeight : unitWidth, isVertical ? unitWidth : unitHeight),
+          isVertical
+        );
         const styleScale = fontSize / box.width * 2;
         const total = Math.ceil(groupBox.width / unitWidth);
         for (let i = 0; i < total; i++) {
@@ -1032,6 +930,104 @@ function listStyle() {
   });
 }
 
+const tempV1 = new modernPath2d.Vector2();
+const tempM1 = new modernPath2d.Matrix3();
+const tempM2 = new modernPath2d.Matrix3();
+function render() {
+  return definePlugin({
+    name: "render",
+    getBoundingBox: (text) => {
+      const { characters, fontSize, effects } = text;
+      const boxes = [];
+      characters.forEach((character) => {
+        effects?.forEach((style) => {
+          const aabb = character.glyphBox.clone();
+          const m = getTransform2D(text, style);
+          tempV1.set(aabb.left, aabb.top);
+          tempV1.applyMatrix3(m);
+          aabb.left = tempV1.x;
+          aabb.top = tempV1.y;
+          tempV1.set(aabb.right, aabb.bottom);
+          tempV1.applyMatrix3(m);
+          aabb.width = tempV1.x - aabb.left;
+          aabb.height = tempV1.y - aabb.top;
+          const shadowOffsetX = (style.shadowOffsetX ?? 0) * fontSize;
+          const shadowOffsetY = (style.shadowOffsetY ?? 0) * fontSize;
+          const textStrokeWidth = Math.max(0.1, style.textStrokeWidth ?? 0) * fontSize;
+          aabb.left += shadowOffsetX - textStrokeWidth;
+          aabb.top += shadowOffsetY - textStrokeWidth;
+          aabb.width += textStrokeWidth * 2;
+          aabb.height += textStrokeWidth * 2;
+          boxes.push(aabb);
+        });
+      });
+      return boxes.length ? modernPath2d.BoundingBox.from(...boxes) : void 0;
+    },
+    render: (ctx, text) => {
+      const { characters, paragraphs, renderBoundingBox, effects, style } = text;
+      function fillBackground(color, box) {
+        ctx.fillStyle = color;
+        ctx.fillRect(box.left, box.top, box.width, box.height);
+      }
+      if (style?.backgroundColor) {
+        fillBackground(style.backgroundColor, new modernPath2d.BoundingBox(0, 0, ctx.canvas.width, ctx.canvas.height));
+      }
+      paragraphs.forEach((paragraph) => {
+        if (paragraph.style?.backgroundColor) {
+          fillBackground(paragraph.style.backgroundColor, paragraph.lineBox);
+        }
+      });
+      if (effects) {
+        effects.forEach((style2) => {
+          uploadColor(style2, renderBoundingBox, ctx);
+          ctx.save();
+          const [a, c, e, b, d, f] = getTransform2D(text, style2).transpose().elements;
+          ctx.transform(a, b, c, d, e, f);
+          characters.forEach((character) => {
+            if (character.parent.style?.backgroundColor) {
+              fillBackground(character.parent.style.backgroundColor, character.inlineBox);
+            }
+            character.drawTo(ctx, style2);
+          });
+          ctx.restore();
+        });
+      } else {
+        paragraphs.forEach((paragraph) => {
+          paragraph.fragments.forEach((fragment) => {
+            if (fragment.style?.backgroundColor) {
+              fillBackground(fragment.computedStyle.backgroundColor, fragment.inlineBox);
+            }
+            fragment.characters.forEach((character) => {
+              character.drawTo(ctx);
+            });
+          });
+        });
+      }
+    }
+  });
+}
+function getTransform2D(text, style) {
+  const { fontSize, renderBoundingBox } = text;
+  const offsetX = (style.offsetX ?? 0) * fontSize;
+  const offsetY = (style.offsetY ?? 0) * fontSize;
+  const PI_2 = Math.PI * 2;
+  const skewX = (style.skewX ?? 0) / 360 * PI_2;
+  const skewY = (style.skewY ?? 0) / 360 * PI_2;
+  const { left, top, width, height } = renderBoundingBox;
+  const centerX = left + width / 2;
+  const centerY = top + height / 2;
+  tempM1.identity();
+  tempM2.makeTranslation(offsetX, offsetY);
+  tempM1.multiply(tempM2);
+  tempM2.makeTranslation(centerX, centerY);
+  tempM1.multiply(tempM2);
+  tempM2.set(1, Math.tan(skewX), 0, Math.tan(skewY), 1, 0, 0, 0, 1);
+  tempM1.multiply(tempM2);
+  tempM2.makeTranslation(-centerX, -centerY);
+  tempM1.multiply(tempM2);
+  return tempM1.clone();
+}
+
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => {
@@ -1098,7 +1094,7 @@ class Text {
     this.style = style;
     this.measureDom = measureDom;
     this.effects = effects;
-    this.use(effect()).use(highlight()).use(listStyle());
+    this.use(render()).use(highlight()).use(listStyle());
   }
   get fontSize() {
     return this.computedStyle.fontSize;
@@ -1188,14 +1184,13 @@ exports.Text = Text;
 exports.defaultTextStyles = defaultTextStyles;
 exports.definePlugin = definePlugin;
 exports.drawPath = drawPath;
-exports.effect = effect;
-exports.fillBackground = fillBackground;
 exports.filterEmpty = filterEmpty;
 exports.getTransform2D = getTransform2D;
 exports.highlight = highlight;
 exports.isNone = isNone;
 exports.listStyle = listStyle;
 exports.parseColor = parseColor;
+exports.render = render;
 exports.setupView = setupView;
 exports.uploadColor = uploadColor;
 exports.uploadColors = uploadColors;