modern-text 0.4.2 → 0.4.3

package/dist/index.cjs

@@ -148,16 +148,26 @@ class Character {
     this.content = content;
     this.index = index;
     this.parent = parent;
+    __publicField$3(this, "path", new modernPath2d.Path2D());
     __publicField$3(this, "lineBox", new modernPath2d.BoundingBox());
     __publicField$3(this, "inlineBox", new modernPath2d.BoundingBox());
     __publicField$3(this, "glyphBox");
     __publicField$3(this, "underlinePosition", 0);
     __publicField$3(this, "underlineThickness", 0);
-    __publicField$3(this, "yStrikeoutPosition", 0);
-    __publicField$3(this, "yStrikeoutSize", 0);
+    __publicField$3(this, "strikeoutPosition", 0);
+    __publicField$3(this, "strikeoutSize", 0);
+    __publicField$3(this, "ascender", 0);
+    __publicField$3(this, "descender", 0);
+    __publicField$3(this, "typoAscender", 0);
+    __publicField$3(this, "typoDescender", 0);
+    __publicField$3(this, "typoLineGap", 0);
+    __publicField$3(this, "winAscent", 0);
+    __publicField$3(this, "winDescent", 0);
+    __publicField$3(this, "xHeight", 0);
+    __publicField$3(this, "capHeight", 0);
     __publicField$3(this, "baseline", 0);
     __publicField$3(this, "centerDiviation", 0);
-    __publicField$3(this, "path", new modernPath2d.Path2D());
+    __publicField$3(this, "fontStyle");
   }
   get center() {
     return this.glyphBox?.center;
@@ -184,25 +194,34 @@ class Character {
     if (!sfnt) {
       return this;
     }
-    const { unitsPerEm, ascender, descender, os2, post } = sfnt;
+    const { hhea, os2, post, head } = sfnt;
+    const unitsPerEm = head.unitsPerEm;
+    const ascender = hhea.ascent;
+    const descender = hhea.descent;
     const { content, computedStyle } = this;
     const { fontSize } = computedStyle;
     const rate = unitsPerEm / fontSize;
     const advanceWidth = sfnt.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.inlineBox.width = advanceWidth;
     this.inlineBox.height = advanceHeight;
-    this.underlinePosition = underlinePosition;
-    this.underlineThickness = underlineThickness;
-    this.yStrikeoutPosition = yStrikeoutPosition;
-    this.yStrikeoutSize = yStrikeoutSize;
+    this.underlinePosition = (ascender - post.underlinePosition) / rate;
+    this.underlineThickness = post.underlineThickness / rate;
+    this.strikeoutPosition = (ascender - os2.yStrikeoutPosition) / rate;
+    this.strikeoutSize = os2.yStrikeoutSize / rate;
+    this.ascender = ascender / rate;
+    this.descender = descender / rate;
+    this.typoAscender = os2.sTypoAscender / rate;
+    this.typoDescender = os2.sTypoDescender / rate;
+    this.typoLineGap = os2.sTypoLineGap / rate;
+    this.winAscent = os2.usWinAscent / rate;
+    this.winDescent = os2.usWinDescent / rate;
+    this.xHeight = os2.sxHeight / rate;
+    this.capHeight = os2.sCapHeight / rate;
     this.baseline = baseline;
     this.centerDiviation = advanceHeight / 2 - baseline;
+    this.fontStyle = fsSelectionMap[os2.fsSelection] ?? macStyleMap[head.macStyle];
     return this;
   }
   update(fonts) {
@@ -216,11 +235,12 @@ class Character {
       content,
       computedStyle: style,
       baseline,
-      inlineBox
+      inlineBox,
+      ascender,
+      descender,
+      typoAscender,
+      fontStyle
     } = this;
-    const { os2, head, ascender, descender } = sfnt;
-    const typoAscender = os2.sTypoAscender;
-    const fontStyle = fsSelectionMap[os2.fsSelection] ?? macStyleMap[head.macStyle];
     const { left, top } = inlineBox;
     const needsItalic = style.fontStyle === "italic" && fontStyle !== "italic";
     let x = left;
@@ -278,7 +298,6 @@ class Character {
         }
       }
     }
-    path.addCommands(this._decoration());
     const fontWeight = style.fontWeight ?? 400;
     if (fontWeight in fontWeightMap && ((fontWeight === 700 || fontWeight === "bold") && fontStyle !== "bold")) {
       path.bold(fontWeightMap[fontWeight] * style.fontSize * 0.05);
@@ -292,49 +311,6 @@ class Character {
     this.glyphBox = this.getGlyphBoundingBox();
     return this;
   }
-  _decoration() {
-    const { isVertical, underlinePosition, yStrikeoutPosition } = this;
-    const { textDecoration, fontSize } = this.computedStyle;
-    const { left, top, width, height } = this.inlineBox;
-    const lineWidth = 0.1 * fontSize;
-    let start;
-    switch (textDecoration) {
-      case "underline":
-        if (isVertical) {
-          start = left;
-        } else {
-          start = top + underlinePosition;
-        }
-        break;
-      case "line-through":
-        if (isVertical) {
-          start = left + width / 2;
-        } else {
-          start = top + yStrikeoutPosition;
-        }
-        break;
-      case "none":
-      default:
-        return [];
-    }
-    if (isVertical) {
-      return [
-        { type: "M", x: start, y: top },
-        { type: "L", x: start, y: top + height },
-        { type: "L", x: start + lineWidth, y: top + height },
-        { type: "L", x: start + lineWidth, y: top },
-        { type: "Z" }
-      ];
-    } else {
-      return [
-        { type: "M", x: left, y: start },
-        { type: "L", x: left + width, y: start },
-        { type: "L", x: left + width, y: start + lineWidth },
-        { type: "L", x: left, y: start + lineWidth },
-        { type: "Z" }
-      ];
-    }
-  }
   _italic(path, startPoint) {
     path.skew(-0.24, 0, startPoint || {
       y: this.inlineBox.top + this.baseline,
@@ -723,14 +699,13 @@ function highlight() {
     paths,
     update: (text) => {
       paths.length = 0;
-      const { characters } = text;
-      let group;
       const groups = [];
+      let group;
       let prevStyle;
-      characters.forEach((character) => {
-        const { isVertical, computedStyle: style } = character;
+      text.forEachCharacter((character) => {
+        const { isVertical, computedStyle: style, inlineBox, fontSize } = character;
         if (!isNone(style.highlightImage) && character.glyphBox) {
-          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) {
+          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 === inlineBox.left : group[0].inlineBox.top === inlineBox.top) && group[0].fontSize === fontSize) {
             group.push(character);
           } else {
             group = [];
@@ -740,15 +715,15 @@ function highlight() {
         }
         prevStyle = style;
       });
-      groups.filter((characters2) => characters2.length).map((characters2) => {
-        const char = characters2[0];
+      groups.filter((characters) => characters.length).map((characters) => {
+        const char = characters[0];
         return {
           style: char.computedStyle,
-          baseline: char.baseline,
-          box: modernPath2d.BoundingBox.from(...characters2.map((c) => c.glyphBox))
+          unitHeight: char.typoAscender + char.typoDescender,
+          box: modernPath2d.BoundingBox.from(...characters.map((c) => c.glyphBox))
         };
       }).forEach((group2) => {
-        const { style, box: groupBox, baseline } = group2;
+        const { style, box: groupBox, unitHeight } = group2;
         const { fontSize, writingMode } = style;
         const isVertical = writingMode.includes("vertical");
         const strokeWidthScale = parseStrokeWidthScale(style.highlightStrokeWidth, fontSize, groupBox.width);
@@ -759,7 +734,6 @@ function highlight() {
         const box = modernPath2d.getPathsBoundingBox(svgPaths, true);
         const refBox = modernPath2d.getPathsBoundingBox(refPaths, false);
         const unitWidth = charsPerRepeat ? fontSize * charsPerRepeat : isVertical ? groupBox.height : groupBox.width;
-        const unitHeight = baseline * 0.8;
         const transform = getTransformMatrix(
           box,
           refBox,
@@ -921,7 +895,7 @@ function render() {
       return boxes.length ? modernPath2d.BoundingBox.from(...boxes) : void 0;
     },
     render: (ctx, text) => {
-      const { characters, paragraphs, glyphBox, effects, style } = text;
+      const { paragraphs, glyphBox, effects, style } = text;
       function fillBackground(color, box) {
         ctx.fillStyle = color;
         ctx.fillRect(box.left, box.top, box.width, box.height);
@@ -940,7 +914,7 @@ function render() {
           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) => {
+          text.forEachCharacter((character) => {
             if (character.parent.style?.backgroundColor) {
               fillBackground(character.parent.style.backgroundColor, character.inlineBox);
             }
@@ -985,6 +959,112 @@ function getTransform2D(text, style) {
   return tempM1.clone();
 }
 
+function textDecoration() {
+  const paths = [];
+  return definePlugin({
+    name: "textDecoration",
+    paths,
+    update: (text) => {
+      paths.length = 0;
+      const groups = [];
+      let group;
+      let prevStyle;
+      text.forEachCharacter((character) => {
+        const { computedStyle: style, underlinePosition, underlineThickness, strikeoutPosition, strikeoutSize } = character;
+        if (!isNone(style.textDecoration)) {
+          let flag = false;
+          if (prevStyle?.textDecoration === style.textDecoration && prevStyle?.writingMode === style.writingMode) {
+            switch (style.textDecoration) {
+              case "underline":
+                if (group[0].underlinePosition === underlinePosition && group[0].underlineThickness === underlineThickness) {
+                  flag = true;
+                }
+                break;
+              case "line-through":
+                if (group[0].strikeoutPosition === strikeoutPosition && group[0].strikeoutSize === strikeoutSize) {
+                  flag = true;
+                }
+                break;
+            }
+          }
+          if (flag) {
+            group.push(character);
+          } else {
+            group = [];
+            group.push(character);
+            groups.push(group);
+          }
+          prevStyle = style;
+        } else {
+          prevStyle = void 0;
+        }
+      });
+      groups.forEach((group2) => {
+        const { computedStyle: style, isVertical, underlinePosition, underlineThickness, strikeoutPosition, strikeoutSize } = group2[0];
+        const { textDecoration: textDecoration2 } = style;
+        const { left, top, width, height } = modernPath2d.BoundingBox.from(...group2.map((c) => c.inlineBox));
+        let strokePosition = isVertical ? left : top;
+        let strokeWidth = 0;
+        switch (textDecoration2) {
+          case "underline":
+            strokePosition += underlinePosition;
+            strokeWidth = underlineThickness * 2;
+            break;
+          case "line-through":
+            strokePosition += strikeoutPosition;
+            strokeWidth = strikeoutSize * 2;
+            break;
+        }
+        strokePosition -= strokeWidth;
+        if (isVertical) {
+          paths.push(new modernPath2d.Path2D([
+            { type: "M", x: strokePosition, y: top },
+            { type: "L", x: strokePosition, y: top + height },
+            { type: "L", x: strokePosition + strokeWidth, y: top + height },
+            { type: "L", x: strokePosition + strokeWidth, y: top },
+            { type: "Z" }
+          ]));
+        } else {
+          paths.push(new modernPath2d.Path2D([
+            { type: "M", x: left, y: strokePosition },
+            { type: "L", x: left + width, y: strokePosition },
+            { type: "L", x: left + width, y: strokePosition + strokeWidth },
+            { type: "L", x: left, y: strokePosition + strokeWidth },
+            { type: "Z" }
+          ]));
+        }
+      });
+    },
+    render: (ctx, text) => {
+      const { effects, fontSize } = text;
+      if (effects) {
+        effects.forEach((style) => {
+          ctx.save();
+          const [a, c, e, b, d, f] = getTransform2D(text, style).transpose().elements;
+          ctx.transform(a, b, c, d, e, f);
+          paths.forEach((path) => {
+            drawPath({
+              ctx,
+              path,
+              fontSize,
+              ...style
+            });
+          });
+          ctx.restore();
+        });
+      } else {
+        paths.forEach((path) => {
+          drawPath({
+            ctx,
+            path,
+            fontSize
+          });
+        });
+      }
+    }
+  });
+}
+
 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) => {
@@ -1059,7 +1139,7 @@ class Text {
     this.measureDom = measureDom;
     this.effects = effects;
     this.fonts = fonts;
-    this.use(render()).use(highlight()).use(listStyle());
+    this.use(listStyle()).use(textDecoration()).use(highlight()).use(render());
   }
   get fontSize() {
     return this.computedStyle.fontSize;
@@ -1074,6 +1154,16 @@ class Text {
     this.plugins.set(plugin.name, plugin);
     return this;
   }
+  forEachCharacter(handle) {
+    this.paragraphs.forEach((p, paragraphIndex) => {
+      p.fragments.forEach((f, fragmentIndex) => {
+        f.characters.forEach((c, characterIndex) => {
+          handle(c, { paragraphIndex, fragmentIndex, characterIndex });
+        });
+      });
+    });
+    return this;
+  }
   updateParagraphs() {
     this.computedStyle = { ...defaultTextStyles, ...this.style };
     let { content, computedStyle: style } = this;
@@ -1263,5 +1353,6 @@ exports.parseColor = parseColor;
 exports.render = render;
 exports.renderText = renderText;
 exports.setupView = setupView;
+exports.textDecoration = textDecoration;
 exports.uploadColor = uploadColor;
 exports.uploadColors = uploadColors;

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import { BoundingBox, Path2D, Vector2, VectorLike, Matrix3 } from 'modern-path2d';
-import { Fonts, Sfnt, GlyphPathCommand } from 'modern-font';
+import { Fonts, Sfnt } from 'modern-font';
 
 declare class Fragment {
     content: string;
@@ -18,16 +18,26 @@ declare class Character {
     content: string;
     index: number;
     parent: Fragment;
+    path: Path2D;
     lineBox: BoundingBox;
     inlineBox: BoundingBox;
     glyphBox: BoundingBox | undefined;
     underlinePosition: number;
     underlineThickness: number;
-    yStrikeoutPosition: number;
-    yStrikeoutSize: number;
+    strikeoutPosition: number;
+    strikeoutSize: number;
+    ascender: number;
+    descender: number;
+    typoAscender: number;
+    typoDescender: number;
+    typoLineGap: number;
+    winAscent: number;
+    winDescent: number;
+    xHeight: number;
+    capHeight: number;
     baseline: number;
     centerDiviation: number;
-    path: Path2D;
+    fontStyle?: 'bold' | 'italic';
     get center(): Vector2 | undefined;
     get computedStyle(): TextStyle;
     get isVertical(): boolean;
@@ -37,7 +47,6 @@ declare class Character {
     protected _getFontSfnt(fonts?: Fonts): Sfnt | undefined;
     updateGlyph(sfnt?: Sfnt | undefined): this;
     update(fonts?: Fonts): this;
-    protected _decoration(): GlyphPathCommand[];
     protected _italic(path: Path2D, startPoint?: VectorLike): void;
     getGlyphMinMax(min?: Vector2, max?: Vector2, withStyle?: boolean): {
         min: Vector2;
@@ -158,6 +167,11 @@ declare class Text {
     get characters(): Character[];
     constructor(options?: TextOptions);
     use(plugin: TextPlugin): this;
+    forEachCharacter(handle: (character: Character, ctx: {
+        paragraphIndex: number;
+        fragmentIndex: number;
+        characterIndex: number;
+    }) => void): this;
     updateParagraphs(): this;
     measure(dom?: HTMLElement | undefined): MeasureResult;
     getGlyphBox(): BoundingBox;
@@ -285,9 +299,11 @@ declare function listStyle(): TextPlugin;
 declare function render(): TextPlugin;
 declare function getTransform2D(text: Text, style: Partial<TextStyle>): Matrix3;
 
+declare function textDecoration(): TextPlugin;
+
 declare function renderText(options: TextOptions & TextRenderOptions): Text;
 
 declare function isNone(val: string | undefined): boolean;
 declare function filterEmpty(val: Record<string, any> | undefined): Record<string, any> | undefined;
 
-export { Character, type DrawShapePathsOptions, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type HighlightImage, type HighlightOverflow, type HighlightSize, type HighlightStrokeWidth, type LinearGradient, type ListStyleImage, type ListStylePosition, type ListStyleSize, type ListStyleType, type MeasureDomResult, type MeasureResult, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, Measurer, Paragraph, type ParagraphContent, type Sizeable, Text, type TextAlign, type TextContent, type TextDecoration, type TextDrawStyle, type TextInlineStyle, type TextLineStyle, type TextOptions, type TextOrientation, type TextPlugin, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultTextStyles, definePlugin, drawPath, filterEmpty, getTransform2D, highlight, isNone, listStyle, measureText, parseColor, render, renderText, setupView, uploadColor, uploadColors };
+export { Character, type DrawShapePathsOptions, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type HighlightImage, type HighlightOverflow, type HighlightSize, type HighlightStrokeWidth, type LinearGradient, type ListStyleImage, type ListStylePosition, type ListStyleSize, type ListStyleType, type MeasureDomResult, type MeasureResult, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, Measurer, Paragraph, type ParagraphContent, type Sizeable, Text, type TextAlign, type TextContent, type TextDecoration, type TextDrawStyle, type TextInlineStyle, type TextLineStyle, type TextOptions, type TextOrientation, type TextPlugin, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultTextStyles, definePlugin, drawPath, filterEmpty, getTransform2D, highlight, isNone, listStyle, measureText, parseColor, render, renderText, setupView, textDecoration, uploadColor, uploadColors };

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import { BoundingBox, Path2D, Vector2, VectorLike, Matrix3 } from 'modern-path2d';
-import { Fonts, Sfnt, GlyphPathCommand } from 'modern-font';
+import { Fonts, Sfnt } from 'modern-font';
 
 declare class Fragment {
     content: string;
@@ -18,16 +18,26 @@ declare class Character {
     content: string;
     index: number;
     parent: Fragment;
+    path: Path2D;
     lineBox: BoundingBox;
     inlineBox: BoundingBox;
     glyphBox: BoundingBox | undefined;
     underlinePosition: number;
     underlineThickness: number;
-    yStrikeoutPosition: number;
-    yStrikeoutSize: number;
+    strikeoutPosition: number;
+    strikeoutSize: number;
+    ascender: number;
+    descender: number;
+    typoAscender: number;
+    typoDescender: number;
+    typoLineGap: number;
+    winAscent: number;
+    winDescent: number;
+    xHeight: number;
+    capHeight: number;
     baseline: number;
     centerDiviation: number;
-    path: Path2D;
+    fontStyle?: 'bold' | 'italic';
     get center(): Vector2 | undefined;
     get computedStyle(): TextStyle;
     get isVertical(): boolean;
@@ -37,7 +47,6 @@ declare class Character {
     protected _getFontSfnt(fonts?: Fonts): Sfnt | undefined;
     updateGlyph(sfnt?: Sfnt | undefined): this;
     update(fonts?: Fonts): this;
-    protected _decoration(): GlyphPathCommand[];
     protected _italic(path: Path2D, startPoint?: VectorLike): void;
     getGlyphMinMax(min?: Vector2, max?: Vector2, withStyle?: boolean): {
         min: Vector2;
@@ -158,6 +167,11 @@ declare class Text {
     get characters(): Character[];
     constructor(options?: TextOptions);
     use(plugin: TextPlugin): this;
+    forEachCharacter(handle: (character: Character, ctx: {
+        paragraphIndex: number;
+        fragmentIndex: number;
+        characterIndex: number;
+    }) => void): this;
     updateParagraphs(): this;
     measure(dom?: HTMLElement | undefined): MeasureResult;
     getGlyphBox(): BoundingBox;
@@ -285,9 +299,11 @@ declare function listStyle(): TextPlugin;
 declare function render(): TextPlugin;
 declare function getTransform2D(text: Text, style: Partial<TextStyle>): Matrix3;
 
+declare function textDecoration(): TextPlugin;
+
 declare function renderText(options: TextOptions & TextRenderOptions): Text;
 
 declare function isNone(val: string | undefined): boolean;
 declare function filterEmpty(val: Record<string, any> | undefined): Record<string, any> | undefined;
 
-export { Character, type DrawShapePathsOptions, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type HighlightImage, type HighlightOverflow, type HighlightSize, type HighlightStrokeWidth, type LinearGradient, type ListStyleImage, type ListStylePosition, type ListStyleSize, type ListStyleType, type MeasureDomResult, type MeasureResult, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, Measurer, Paragraph, type ParagraphContent, type Sizeable, Text, type TextAlign, type TextContent, type TextDecoration, type TextDrawStyle, type TextInlineStyle, type TextLineStyle, type TextOptions, type TextOrientation, type TextPlugin, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultTextStyles, definePlugin, drawPath, filterEmpty, getTransform2D, highlight, isNone, listStyle, measureText, parseColor, render, renderText, setupView, uploadColor, uploadColors };
+export { Character, type DrawShapePathsOptions, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type HighlightImage, type HighlightOverflow, type HighlightSize, type HighlightStrokeWidth, type LinearGradient, type ListStyleImage, type ListStylePosition, type ListStyleSize, type ListStyleType, type MeasureDomResult, type MeasureResult, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, Measurer, Paragraph, type ParagraphContent, type Sizeable, Text, type TextAlign, type TextContent, type TextDecoration, type TextDrawStyle, type TextInlineStyle, type TextLineStyle, type TextOptions, type TextOrientation, type TextPlugin, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultTextStyles, definePlugin, drawPath, filterEmpty, getTransform2D, highlight, isNone, listStyle, measureText, parseColor, render, renderText, setupView, textDecoration, uploadColor, uploadColors };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { BoundingBox, Path2D, Vector2, VectorLike, Matrix3 } from 'modern-path2d';
-import { Fonts, Sfnt, GlyphPathCommand } from 'modern-font';
+import { Fonts, Sfnt } from 'modern-font';
 
 declare class Fragment {
     content: string;
@@ -18,16 +18,26 @@ declare class Character {
     content: string;
     index: number;
     parent: Fragment;
+    path: Path2D;
     lineBox: BoundingBox;
     inlineBox: BoundingBox;
     glyphBox: BoundingBox | undefined;
     underlinePosition: number;
     underlineThickness: number;
-    yStrikeoutPosition: number;
-    yStrikeoutSize: number;
+    strikeoutPosition: number;
+    strikeoutSize: number;
+    ascender: number;
+    descender: number;
+    typoAscender: number;
+    typoDescender: number;
+    typoLineGap: number;
+    winAscent: number;
+    winDescent: number;
+    xHeight: number;
+    capHeight: number;
     baseline: number;
     centerDiviation: number;
-    path: Path2D;
+    fontStyle?: 'bold' | 'italic';
     get center(): Vector2 | undefined;
     get computedStyle(): TextStyle;
     get isVertical(): boolean;
@@ -37,7 +47,6 @@ declare class Character {
     protected _getFontSfnt(fonts?: Fonts): Sfnt | undefined;
     updateGlyph(sfnt?: Sfnt | undefined): this;
     update(fonts?: Fonts): this;
-    protected _decoration(): GlyphPathCommand[];
     protected _italic(path: Path2D, startPoint?: VectorLike): void;
     getGlyphMinMax(min?: Vector2, max?: Vector2, withStyle?: boolean): {
         min: Vector2;
@@ -158,6 +167,11 @@ declare class Text {
     get characters(): Character[];
     constructor(options?: TextOptions);
     use(plugin: TextPlugin): this;
+    forEachCharacter(handle: (character: Character, ctx: {
+        paragraphIndex: number;
+        fragmentIndex: number;
+        characterIndex: number;
+    }) => void): this;
     updateParagraphs(): this;
     measure(dom?: HTMLElement | undefined): MeasureResult;
     getGlyphBox(): BoundingBox;
@@ -285,9 +299,11 @@ declare function listStyle(): TextPlugin;
 declare function render(): TextPlugin;
 declare function getTransform2D(text: Text, style: Partial<TextStyle>): Matrix3;
 
+declare function textDecoration(): TextPlugin;
+
 declare function renderText(options: TextOptions & TextRenderOptions): Text;
 
 declare function isNone(val: string | undefined): boolean;
 declare function filterEmpty(val: Record<string, any> | undefined): Record<string, any> | undefined;
 
-export { Character, type DrawShapePathsOptions, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type HighlightImage, type HighlightOverflow, type HighlightSize, type HighlightStrokeWidth, type LinearGradient, type ListStyleImage, type ListStylePosition, type ListStyleSize, type ListStyleType, type MeasureDomResult, type MeasureResult, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, Measurer, Paragraph, type ParagraphContent, type Sizeable, Text, type TextAlign, type TextContent, type TextDecoration, type TextDrawStyle, type TextInlineStyle, type TextLineStyle, type TextOptions, type TextOrientation, type TextPlugin, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultTextStyles, definePlugin, drawPath, filterEmpty, getTransform2D, highlight, isNone, listStyle, measureText, parseColor, render, renderText, setupView, uploadColor, uploadColors };
+export { Character, type DrawShapePathsOptions, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type HighlightImage, type HighlightOverflow, type HighlightSize, type HighlightStrokeWidth, type LinearGradient, type ListStyleImage, type ListStylePosition, type ListStyleSize, type ListStyleType, type MeasureDomResult, type MeasureResult, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, Measurer, Paragraph, type ParagraphContent, type Sizeable, Text, type TextAlign, type TextContent, type TextDecoration, type TextDrawStyle, type TextInlineStyle, type TextLineStyle, type TextOptions, type TextOrientation, type TextPlugin, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultTextStyles, definePlugin, drawPath, filterEmpty, getTransform2D, highlight, isNone, listStyle, measureText, parseColor, render, renderText, setupView, textDecoration, uploadColor, uploadColors };