pixi-glyphs 4.1.7 → 4.2.0

package/README.md

@@ -107,6 +107,7 @@ The style objects are modified versions (supersets) of `PIXI.TextStyle` (referre
 - `lineThroughThickness` - Sets the thickness of the line-through. Default is `1`.
 - `lineThroughOffset` - Positions the line-through above or below the default location. Default is `0`.
 - `adjustBaseline` - Adjusts the position of the text above or below the baseline. Default is `0`. Also see the `adjustFontBaseline` property in the options.
+- `topTrim` - Adjusts the line height of text by trimming (or expanding) from the top of the text. Positive values reduce the line height by trimming from the top (useful for reducing gaps above large text), while negative values increase the line height. This property only affects the segments that have it set, and the overall line height is determined by the tallest effective segment after all individual `topTrim` adjustments. Default is `0`. Example: `<big topTrim="50">Big Text</big>` reduces the line height of "Big Text" by 50 pixels from the top.
 - `highlightColor` - Adds a background highlight color behind the text. Can be a hex number like `0xFFEB3B` or a hex string like `"#FFEB3B"`. The highlight appears as a continuous solid color box behind the text with no borders, spanning across spaces between words for a seamless highlight effect. When the same highlight color is applied to consecutive text segments, they will be rendered as a single continuous highlight box. Perfect for emphasizing important text, creating visual hierarchy, inline code blocks, or implementing syntax highlighting. Example: `<highlight>This entire phrase is highlighted</highlight>` will create one continuous highlight box.
 - `color` - An alias for `fill`. It's recommended you just use either `fill` or `color`, but if both are set, `fill` will be used. If tags are nested, `color` on an inner tag can override `fill` in an outer tag.
 

package/dist/pixi-glyphs.js

@@ -321,34 +321,17 @@ const isOnlyWhitespace = s => s.search(/^\s+$/) === 0;
 const PX_PER_EM = 16;
 const PX_PER_PERCENT = 16 / 100;
 const PX_PER_PT = 1.3281472327365;
-const fontMetricsCache = new Map();
-const measureFont = font => {
-  if (fontMetricsCache.has(font)) {
-    return fontMetricsCache.get(font);
-  }
-  const canvas = document.createElement('canvas');
-  const context = canvas.getContext('2d');
-  if (!context) throw new Error('Cannot get 2D context');
-  context.font = font;
-  const measureString = "Mgpjy";
-  const metrics = context.measureText(measureString);
-  const fontSize = parseInt(font.match(/(\d+)px/)?.['1'] || '16');
-  const result = {
-    ascent: metrics.actualBoundingBoxAscent || fontSize * 0.88,
-    descent: metrics.actualBoundingBoxDescent || fontSize * 0.12,
-    fontSize: fontSize
-  };
-  fontMetricsCache.set(font, result);
-  return result;
-};
 const getFontPropertiesOfText = (textField, forceUpdate = false) => {
+  const text = textField.text;
   const style = textField.style;
-  const fontSize = typeof style.fontSize === 'number' ? style.fontSize : 16;
-  const fontFamily = style.fontFamily || 'Arial';
-  const fontWeight = style.fontWeight || 'normal';
-  const fontStyle = style.fontStyle || 'normal';
-  const font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
-  return measureFont(font);
+  const measureText = text && text.trim().length > 0 ? text : 'M';
+  const metrics = PIXI__namespace.CanvasTextMetrics.measureText(measureText, style);
+  const fontSize = metrics.fontProperties?.fontSize || (typeof style.fontSize === 'number' ? style.fontSize : 16);
+  return {
+    ascent: metrics.fontProperties?.ascent || fontSize * 0.88,
+    descent: metrics.fontProperties?.descent || fontSize * 0.12,
+    fontSize: fontSize
+  };
 };
 const cloneSprite = sprite => new PIXI__namespace.Sprite(sprite.texture);
 const fontSizeStringToNumber = size => {
@@ -872,7 +855,7 @@ const getTallestToken = line => {
     }
   }
   const relevantWords = lastNonWhitespaceIndex >= 0 ? line.slice(0, lastNonWhitespaceIndex + 1) : line;
-  return flatReduce((tallest, current) => {
+  const tallest = flatReduce((tallest, current) => {
     if (isWhitespaceToken(current) || isNewlineToken(current)) {
       return tallest;
     }
@@ -886,6 +869,14 @@ const getTallestToken = line => {
     }
     return tallest;
   }, createEmptySegmentToken())(relevantWords);
+  if ((tallest.bounds?.height ?? 0) === 0) {
+    const allTokens = line.flat(2);
+    const firstNewline = allTokens.find(t => isNewlineToken(t));
+    if (firstNewline) {
+      return firstNewline;
+    }
+  }
+  return tallest;
 };
 const verticalAlignInLines = (lines, lineSpacing, overrideValign) => {
   let previousTallestToken = createEmptySegmentToken();
@@ -898,12 +889,29 @@ const verticalAlignInLines = (lines, lineSpacing, overrideValign) => {
     let tallestToken = getTallestToken(line);
     let baseHeight = tallestToken.bounds?.height ?? 0;
     let baseTallestAscent = 0;
+    const hasRealContent = line.flat(2).some(seg => !isWhitespaceToken(seg) && !isNewlineToken(seg));
     for (const word of line) {
       for (const segment of word) {
-        if (isWhitespaceToken(segment) || isNewlineToken(segment)) {
+        let segAscent = segment.fontProperties?.ascent ?? 0;
+        const style = segment.style;
+        const strokeWidth = typeof style?.stroke === 'object' ? style.stroke.width : 0;
+        const legacyStrokeThickness = style.strokeThickness || 0;
+        const strokeThickness = strokeWidth || legacyStrokeThickness;
+        if (strokeThickness && strokeThickness > 0) {
+          segAscent += strokeThickness / 2;
+        }
+        const topTrim = segment.style.topTrim ?? 0;
+        if (topTrim !== 0) {
+          segAscent = Math.max(0, segAscent - topTrim);
+        }
+        const isNewline = isNewlineToken(segment);
+        isWhitespaceToken(segment);
+        const skipNewline = isNewlineToken(segment) && hasRealContent;
+        const skipWhitespace = isWhitespaceToken(segment) && !isNewline && !(strokeThickness && strokeThickness > 0);
+        const isEmptyLineNewline = isNewline && !hasRealContent;
+        if ((skipNewline || skipWhitespace) && !isEmptyLineNewline) {
           continue;
         }
-        const segAscent = segment.fontProperties?.ascent ?? 0;
         if (segAscent > baseTallestAscent) {
           baseTallestAscent = segAscent;
         }
@@ -947,13 +955,17 @@ const verticalAlignInLines = (lines, lineSpacing, overrideValign) => {
           ...bounds
         };
         const valign = overrideValign ?? style.valign;
+        const strokeWidth = typeof style?.stroke === 'object' ? style.stroke.width : 0;
+        const legacyStrokeThickness = style.strokeThickness || 0;
+        const strokeThickness = strokeWidth || legacyStrokeThickness;
+        const hasStroke = style?.stroke && strokeThickness > 0;
         let {
           ascent
         } = fontProperties;
         if (isSpriteToken(segment)) {
           const imgDisplay = segment.style[IMG_DISPLAY_PROPERTY];
           if (imgDisplay === 'icon') {
-            ascent = segment.bounds.height - 4;
+            ascent = fontProperties.ascent;
           } else {
             ascent = segment.bounds.height;
           }
@@ -967,10 +979,6 @@ const verticalAlignInLines = (lines, lineSpacing, overrideValign) => {
           continue;
         }
         let newY = previousLineBottom;
-        const strokeWidth = typeof style?.stroke === 'object' ? style.stroke.width : 0;
-        const legacyStrokeThickness = style.strokeThickness || 0;
-        const strokeThickness = strokeWidth || legacyStrokeThickness;
-        const hasStroke = style?.stroke && strokeThickness > 0;
         switch (valign) {
           case "bottom":
             newY += tallestHeight - height;
@@ -1212,14 +1220,6 @@ const calculateTokens = (styledTokens, splitStyle = "words", scaleIcons = true,
         fontProperties = {
           ...getFontPropertiesOfText(localSizer, true)
         };
-        if (isOnlyWhitespace(token) === false) {
-          const stroke = localSizer.style.stroke ?? 0;
-          if (stroke > 0) {
-            fontProperties.descent += stroke / 2;
-            fontProperties.ascent += stroke / 2;
-            fontProperties.fontSize = fontProperties.ascent + fontProperties.descent;
-          }
-        }
         const sw = style.fontScaleWidth ?? 1.0;
         const sh = style.fontScaleHeight ?? 1.0;
         const scaleWidth = isNaN(sw) || sw < 0 ? 0.0 : sw;
@@ -1232,7 +1232,10 @@ const calculateTokens = (styledTokens, splitStyle = "words", scaleIcons = true,
         if (isOnlyWhitespace(str)) {
           const fontSize = typeof localSizer.style.fontSize === 'string' ? parseInt(localSizer.style.fontSize) : localSizer.style.fontSize || 24;
           const spaceWidth = fontSize * 0.3 * str.length;
-          const height = fontProperties.fontSize;
+          let height = fontProperties.fontSize;
+          if (strokeThickness && strokeThickness > 0) {
+            height += strokeThickness;
+          }
           bounds = new PIXI__namespace.Rectangle(0, 0, spaceWidth, height);
         } else {
           const measureSizer = new PIXI__namespace.Text({
@@ -1286,11 +1289,6 @@ const calculateTokens = (styledTokens, splitStyle = "words", scaleIcons = true,
       fontProperties = {
         ...getFontPropertiesOfText(localSizer, true)
       };
-      if (strokeThickness && strokeThickness > 0) {
-        fontProperties.ascent += strokeThickness / 2;
-        fontProperties.descent += strokeThickness / 2;
-        fontProperties.fontSize = fontProperties.ascent + fontProperties.descent;
-      }
       if (isIcon) {
         const h = Math.max(sprite.height, 1);
         if (h > 1 && sprite.scale.y === 1) {
@@ -1906,6 +1904,8 @@ class Glyphs extends PIXI__namespace.Container {
         color: cleanedStyle.stroke,
         width: cleanedStyle.strokeThickness || 0
       };
+    }
+    if (cleanedStyle.strokeThickness !== undefined) {
       delete cleanedStyle.strokeThickness;
     }
     const textField = new PIXI__namespace.Text({
@@ -2020,11 +2020,11 @@ class Glyphs extends PIXI__namespace.Container {
     const g = this._debugGraphics;
     g.clear();
     let lineHeightGraphics = new PIXI__namespace.Graphics();
-    lineHeightGraphics.name = 'lineHeightGraphics';
+    lineHeightGraphics.label = 'lineHeightGraphics';
     debugContainer.addChild(lineHeightGraphics);
     lineHeightGraphics.clear();
     let baselineGraphics = new PIXI__namespace.Graphics();
-    baselineGraphics.name = 'baselineGraphics';
+    baselineGraphics.label = 'baselineGraphics';
     baselineGraphics.visible = true;
     baselineGraphics.alpha = 1;
     debugContainer.addChild(baselineGraphics);
@@ -2041,13 +2041,38 @@ class Glyphs extends PIXI__namespace.Container {
     }
     for (let lineNumber = 0; lineNumber < paragraph.length; lineNumber++) {
       const line = paragraph[lineNumber];
-      const lineBounds = getBoundsNested(line);
-      let lineBoxY = lineBounds.y + 2;
-      let lineBoxHeight = lineBounds.height;
+      getBoundsNested(line);
+      for (const word of line) {
+        for (const segment of word) {
+        }
+      }
+      let tallestEffectiveHeight = 0;
+      let tallestEffectiveY = Number.POSITIVE_INFINITY;
+      for (const word of line) {
+        for (const segment of word) {
+          const topTrim = segment.style.topTrim ?? 0;
+          let segmentAscent = segment.fontProperties.ascent;
+          const segmentDescent = segment.fontProperties.descent;
+          if (topTrim !== 0) {
+            segmentAscent = Math.max(0, segmentAscent - topTrim);
+          }
+          const effectiveHeight = segmentAscent + segmentDescent;
+          const effectiveY = segment.bounds.y + segment.fontProperties.ascent - segmentAscent;
+          if (effectiveHeight > tallestEffectiveHeight) {
+            tallestEffectiveHeight = effectiveHeight;
+            tallestEffectiveY = effectiveY;
+          }
+        }
+      }
+      let lineBoxY = tallestEffectiveY;
+      let lineBoxHeight = tallestEffectiveHeight;
       if (this.defaultStyle.wordWrap) {
         const w = this.defaultStyle.wordWrapWidth ?? this.width;
-        g.lineStyle(0.5, DEBUG.LINE_COLOR, 0.2);
-        g.drawRect(0, lineBoxY, w, lineBoxHeight);
+        g.rect(0, lineBoxY, w, lineBoxHeight).stroke({
+          width: 0.5,
+          color: DEBUG.LINE_COLOR,
+          alpha: 0.2
+        });
       }
       for (let wordNumber = 0; wordNumber < line.length; wordNumber++) {
         const word = line[wordNumber];
@@ -2058,49 +2083,31 @@ class Glyphs extends PIXI__namespace.Container {
             y,
             width
           } = segmentToken.bounds;
-          let adjustedY = y;
-          const fontSize = segmentToken.fontProperties?.fontSize || 24;
-          let adjustment = 0;
-          if (fontSize <= 24) {
-            adjustment = -2;
-          } else if (fontSize <= 28) {
-            adjustment = -3;
-          } else if (fontSize === 36) {
-            adjustment = 5;
-          } else if (fontSize > 36 && fontSize <= 47) {
-            adjustment = 5 + (fontSize - 36) * 0.2;
-          } else if (fontSize > 47) {
-            adjustment = 7 + (fontSize - 47) * 0.1;
-          }
-          adjustedY -= adjustment;
           let baseline;
           if (isSprite) {
-            baseline = adjustedY + segmentToken.bounds.height;
+            baseline = y + segmentToken.bounds.height;
           } else {
-            baseline = adjustedY + segmentToken.fontProperties.ascent;
-            const strokeWidth = typeof segmentToken.style?.stroke === 'object' ? segmentToken.style.stroke.width : 0;
-            const legacyStrokeThickness = segmentToken.style.strokeThickness || 0;
-            const strokeThickness = strokeWidth || legacyStrokeThickness;
-            const hasStroke = segmentToken.style?.stroke && strokeThickness > 0;
-            if (fontSize === 36) {
-              baseline += 15;
-            } else if (hasStroke && fontSize <= 28) {
-              baseline += 6;
-            } else if (fontSize <= 24) {
-              baseline += 4;
-            } else {
-              baseline += 4;
+            baseline = y + segmentToken.fontProperties.ascent;
+            const actualHeight = segmentToken.bounds.height;
+            const metricsHeight = segmentToken.fontProperties.ascent + segmentToken.fontProperties.descent;
+            const heightDifference = actualHeight - metricsHeight;
+            if (heightDifference > 1) {
+              baseline += heightDifference / 2;
             }
           }
-          let boxY = adjustedY;
+          let boxY = y;
           let boxHeight = segmentToken.bounds.height;
           if (!isSprite) {
-            const ascent = segmentToken.fontProperties.ascent;
+            let ascent = segmentToken.fontProperties.ascent;
             const descent = segmentToken.fontProperties.descent;
+            const segmentTopTrim = segmentToken.style.topTrim ?? 0;
+            if (segmentTopTrim !== 0) {
+              ascent = Math.max(0, ascent - segmentTopTrim);
+            }
             boxY = baseline - ascent;
             boxHeight = ascent + descent;
           } else {
-            boxHeight += segmentToken.fontProperties.descent;
+            boxHeight = segmentToken.bounds.height + segmentToken.fontProperties.descent;
           }
           const strokeColor = isWhitespaceToken(segmentToken) && this.options.drawWhitespace === false ? DEBUG.WHITESPACE_STROKE_COLOR : DEBUG.WORD_STROKE_COLOR;
           const fillColor = isWhitespaceToken(segmentToken) && this.options.drawWhitespace === false ? DEBUG.WHITESPACE_COLOR : DEBUG.WORD_FILL_COLOR;
@@ -2141,15 +2148,16 @@ class Glyphs extends PIXI__namespace.Container {
       }
     }
     if (baselines.length > 0) {
-      baselineGraphics.beginFill(DEBUG.BASELINE_COLOR, 0.8);
       for (const {
         x,
         baseline,
         width
       } of baselines) {
-        baselineGraphics.drawRect(x, baseline - 1, width, 2);
+        baselineGraphics.rect(x, baseline - 1, width, 2).fill({
+          color: DEBUG.BASELINE_COLOR,
+          alpha: 0.8
+        });
       }
-      baselineGraphics.endFill();
     }
   }
 }