pixi-glyphs 4.2.1 → 4.3.0

package/README.md

@@ -83,6 +83,7 @@ The style objects are modified versions (supersets) of `PIXI.TextStyle` (referre
 - `fontScaleWidth` - Percentage to scale the font e.g. `0.5` = 50%
 - `fontScaleHeight` - Percentage to scale the font e.g. `1.25` = 125%
 - `letterSpacing` - Additional horizontal spacing between each character in pixels. Can be positive to spread letters apart or negative to bring them closer together. Default is `0`.
+- `wordSpacing` - Additional horizontal spacing for word separators (spaces) in pixels. Adjusts the width of spaces between words. Can be positive to increase spacing or negative to decrease spacing. Default is `0`.
 - `lineSpacing` - Additional vertical spacing between lines of text in pixels. This spacing is added between all lines within a paragraph. Default is `0`.
 - `paragraphSpacing` - Additional spacing between paragraphs that is added when you use an explicit carriage return rather than letting the text wrap at the end of a line. Default is `0`. Can also be negative.
 - `breakLines` - When `breakLines` is `false`, the text in the tag will ignore the `wordWrapWidth` property and never wrap to the next line unless you explicitly include a newline character. It essentially treats the whole tag as a single word. If a nested tag overrides this, only the text inside the nested tag will wrap. Default is `true`.

package/dist/pixi-glyphs.js

@@ -890,9 +890,17 @@ const verticalAlignInLines = (lines, lineSpacing, overrideValign) => {
     let baseHeight = tallestToken.bounds?.height ?? 0;
     let baseTallestAscent = 0;
     let baseTallestDescent = 0;
+    let tallestSpriteHeight = 0;
     const hasRealContent = line.flat(2).some(seg => !isWhitespaceToken(seg) && !isNewlineToken(seg));
     for (const word of line) {
       for (const segment of word) {
+        if (isSpriteToken(segment)) {
+          const spriteHeight = segment.bounds?.height ?? 0;
+          if (spriteHeight > tallestSpriteHeight) {
+            tallestSpriteHeight = spriteHeight;
+          }
+          continue;
+        }
         let segAscent = segment.fontProperties?.ascent ?? 0;
         const segDescent = segment.fontProperties?.descent ?? 0;
         const style = segment.style;
@@ -920,7 +928,8 @@ const verticalAlignInLines = (lines, lineSpacing, overrideValign) => {
         }
       }
     }
-    baseHeight = baseTallestAscent + baseTallestDescent;
+    const textBasedHeight = baseTallestAscent + baseTallestDescent;
+    baseHeight = Math.max(textBasedHeight, tallestSpriteHeight);
     if (baseHeight === 0 && baseTallestAscent === 0) {
       baseHeight = lastNonEmptyTallestToken.bounds?.height ?? 0;
       baseTallestAscent = lastNonEmptyTallestToken.fontProperties?.ascent ?? 0;
@@ -1267,7 +1276,8 @@ const calculateTokens = (styledTokens, splitStyle = "words", scaleIcons = true,
         const baselineAdjustment = getBaselineAdjustment(style, adjustFontBaseline, fontProperties.ascent);
         fontProperties.ascent += baselineAdjustment;
         const {
-          letterSpacing
+          letterSpacing,
+          wordSpacing
         } = style;
         if (letterSpacing) {
           bounds.width += letterSpacing;
@@ -1280,6 +1290,9 @@ const calculateTokens = (styledTokens, splitStyle = "words", scaleIcons = true,
           fontProperties,
           textDecorations
         };
+        if (wordSpacing && isOnlyWhitespace(str)) {
+          convertedToken.bounds.width += wordSpacing;
+        }
         return convertedToken;
       });
       output = output.concat(textTokens);