fetta 1.1.2 → 1.2.1

package/README.md

@@ -6,7 +6,7 @@ Split text into characters, words, and lines while preserving the original typog
 
 ## Features
 
-- **Kerning Compensation** — Measures character positions before splitting, then applies margin adjustments to maintain original spacing
+- **Kerning Compensation** — Measures kerning between character pairs, applies margin adjustments to maintain original spacing
 - **Nested Elements** — Preserves inline HTML elements (`<a>`, `<em>`, `<strong>`, etc.) with all attributes intact
 - **Line Detection** — Detects lines based on Y-position clustering, works with any container width
 - **Dash Handling** — Allows text to wrap naturally after em-dashes, en-dashes, and hyphens
@@ -265,12 +265,6 @@ Requires:
 - `IntersectionObserver`
 - `Intl.Segmenter`
 
-### Safari
-
-Kerning compensation is not available in Safari due to its Range API returning integer values instead of sub-pixel precision. Text splitting works normally, just without the margin adjustments.
-
-When using `revertOnComplete` with character splitting in Safari, font kerning is automatically disabled to prevent visual shift on revert.
-
 ## License
 
 MIT

package/dist/{chunk-WGVCUEOU.js → chunk-Q2D5AQBW.js}

@@ -63,7 +63,159 @@ var INLINE_ELEMENTS = /* @__PURE__ */ new Set([
   "u",
   "var"
 ]);
-var isSafari = typeof navigator !== "undefined" && /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
+var KERNING_STYLE_PROPS = [
+  "font",
+  "font-kerning",
+  "font-variant-ligatures",
+  "font-feature-settings",
+  "font-variation-settings",
+  "font-optical-sizing",
+  "font-size-adjust",
+  "font-stretch",
+  "font-variant-caps",
+  "font-variant-numeric",
+  "font-variant-east-asian",
+  "font-synthesis",
+  "font-synthesis-weight",
+  "font-synthesis-style",
+  "letter-spacing",
+  "word-spacing",
+  "text-rendering",
+  "text-transform",
+  "direction",
+  "unicode-bidi"
+];
+function copyKerningStyles(target, styles) {
+  KERNING_STYLE_PROPS.forEach((prop) => {
+    const value = styles.getPropertyValue(prop);
+    if (value) target.style.setProperty(prop, value);
+  });
+}
+function buildCanvasFontString(styles) {
+  const fontStyle = styles.fontStyle || "normal";
+  const fontWeight = styles.fontWeight || "normal";
+  const fontSize = styles.fontSize || "16px";
+  const fontFamily = styles.fontFamily || "sans-serif";
+  return [fontStyle, fontWeight, fontSize, fontFamily].filter(Boolean).join(" ");
+}
+function applyKerningStylesToCanvas(ctx, styles) {
+  ctx.font = buildCanvasFontString(styles);
+  const ctxAny = ctx;
+  const setIfExists = (prop, value) => {
+    if (!value || value === "normal") return;
+    if (prop in ctxAny) ctxAny[prop] = value;
+  };
+  setIfExists("fontKerning", styles.getPropertyValue("font-kerning"));
+  setIfExists("fontVariantLigatures", styles.getPropertyValue("font-variant-ligatures"));
+  setIfExists("fontFeatureSettings", styles.getPropertyValue("font-feature-settings"));
+  setIfExists("fontVariationSettings", styles.getPropertyValue("font-variation-settings"));
+  setIfExists("fontOpticalSizing", styles.getPropertyValue("font-optical-sizing"));
+  setIfExists("fontSizeAdjust", styles.getPropertyValue("font-size-adjust"));
+  setIfExists("fontStretch", styles.getPropertyValue("font-stretch"));
+  setIfExists("fontVariantCaps", styles.getPropertyValue("font-variant-caps"));
+  setIfExists("fontVariantNumeric", styles.getPropertyValue("font-variant-numeric"));
+  setIfExists("fontVariantEastAsian", styles.getPropertyValue("font-variant-east-asian"));
+  setIfExists("fontSynthesis", styles.getPropertyValue("font-synthesis"));
+  setIfExists("fontSynthesisWeight", styles.getPropertyValue("font-synthesis-weight"));
+  setIfExists("fontSynthesisStyle", styles.getPropertyValue("font-synthesis-style"));
+  setIfExists("letterSpacing", styles.getPropertyValue("letter-spacing"));
+  setIfExists("wordSpacing", styles.getPropertyValue("word-spacing"));
+  setIfExists("textRendering", styles.getPropertyValue("text-rendering"));
+  setIfExists("direction", styles.getPropertyValue("direction"));
+}
+function buildKerningStyleKey(styles) {
+  return KERNING_STYLE_PROPS.map((prop) => styles.getPropertyValue(prop)).join("|");
+}
+function shouldUseDomKerning(styles) {
+  const textTransform = styles.getPropertyValue("text-transform");
+  if (textTransform && textTransform !== "none") return true;
+  const fontVariant = styles.getPropertyValue("font-variant");
+  if (fontVariant && fontVariant !== "normal") return true;
+  const fontStretch = styles.getPropertyValue("font-stretch");
+  if (fontStretch && fontStretch !== "normal" && fontStretch !== "100%") return true;
+  const fontFeatureSettings = styles.getPropertyValue("font-feature-settings");
+  if (fontFeatureSettings && fontFeatureSettings !== "normal") return true;
+  const fontVariationSettings = styles.getPropertyValue("font-variation-settings");
+  if (fontVariationSettings && fontVariationSettings !== "normal") return true;
+  const fontOpticalSizing = styles.getPropertyValue("font-optical-sizing");
+  if (fontOpticalSizing && fontOpticalSizing !== "auto") return true;
+  const fontSizeAdjust = styles.getPropertyValue("font-size-adjust");
+  if (fontSizeAdjust && fontSizeAdjust !== "none") return true;
+  return false;
+}
+var isSafariBrowser = null;
+function isSafari() {
+  if (isSafariBrowser !== null) return isSafariBrowser;
+  if (typeof navigator === "undefined") return false;
+  isSafariBrowser = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+  return isSafariBrowser;
+}
+function measureKerningCanvas(styleSource, chars, styles) {
+  const kerningMap = /* @__PURE__ */ new Map();
+  if (chars.length < 2) return kerningMap;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return kerningMap;
+  const computedStyles = styles != null ? styles : getComputedStyle(styleSource);
+  applyKerningStylesToCanvas(ctx, computedStyles);
+  const charWidths = /* @__PURE__ */ new Map();
+  for (const char of new Set(chars)) {
+    charWidths.set(char, ctx.measureText(char).width);
+  }
+  for (let i = 0; i < chars.length - 1; i++) {
+    const char1 = chars[i];
+    const char2 = chars[i + 1];
+    const pairWidth = ctx.measureText(char1 + char2).width;
+    const kerning = pairWidth - charWidths.get(char1) - charWidths.get(char2);
+    if (Math.abs(kerning) > 0.01) {
+      kerningMap.set(i + 1, kerning);
+    }
+  }
+  return kerningMap;
+}
+function measureKerningDOM(container, styleSource, chars, styles) {
+  const kerningMap = /* @__PURE__ */ new Map();
+  if (chars.length < 2) return kerningMap;
+  const measurer = document.createElement("span");
+  measurer.style.cssText = `
+    position: absolute;
+    visibility: hidden;
+    white-space: pre;
+  `;
+  const computedStyles = styles != null ? styles : getComputedStyle(styleSource);
+  copyKerningStyles(measurer, computedStyles);
+  const webkitSmoothing = computedStyles.webkitFontSmoothing || computedStyles["-webkit-font-smoothing"];
+  const mozSmoothing = computedStyles.MozOsxFontSmoothing || computedStyles["-moz-osx-font-smoothing"];
+  if (webkitSmoothing) {
+    measurer.style.webkitFontSmoothing = webkitSmoothing;
+  }
+  if (mozSmoothing) {
+    measurer.style.MozOsxFontSmoothing = mozSmoothing;
+  }
+  container.appendChild(measurer);
+  const charWidths = /* @__PURE__ */ new Map();
+  for (const char of new Set(chars)) {
+    measurer.textContent = char;
+    charWidths.set(char, measurer.getBoundingClientRect().width);
+  }
+  for (let i = 0; i < chars.length - 1; i++) {
+    const char1 = chars[i];
+    const char2 = chars[i + 1];
+    measurer.textContent = char1 + char2;
+    const pairWidth = measurer.getBoundingClientRect().width;
+    const kerning = pairWidth - charWidths.get(char1) - charWidths.get(char2);
+    if (Math.abs(kerning) > 0.01) {
+      kerningMap.set(i + 1, kerning);
+    }
+  }
+  container.removeChild(measurer);
+  return kerningMap;
+}
+function measureKerning(container, styleSource, chars, styles) {
+  if (chars.length < 2) return /* @__PURE__ */ new Map();
+  const computedStyles = styles != null ? styles : getComputedStyle(styleSource);
+  return isSafari() || shouldUseDomKerning(computedStyles) ? measureKerningDOM(container, styleSource, chars, computedStyles) : measureKerningCanvas(styleSource, chars, computedStyles);
+}
 var srOnlyStylesInjected = false;
 function injectSrOnlyStyles() {
   if (srOnlyStylesInjected || typeof document === "undefined") return;
@@ -191,24 +343,20 @@ function buildAncestorChain(textNode, rootElement, ancestorCache) {
   }
   return ancestors;
 }
-function measureOriginalText(element, splitChars, trackAncestors) {
-  const range = document.createRange();
+function collectTextStructure(element, trackAncestors) {
   const words = [];
   const ancestorCache = trackAncestors ? /* @__PURE__ */ new WeakMap() : null;
   const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
   let node;
   let currentWord = [];
-  let wordStartLeft = null;
   let noSpaceBeforeNext = false;
   const pushWord = () => {
     if (currentWord.length > 0) {
       words.push({
         chars: currentWord,
-        startLeft: wordStartLeft != null ? wordStartLeft : 0,
         noSpaceBefore: noSpaceBeforeNext
       });
       currentWord = [];
-      wordStartLeft = null;
       noSpaceBeforeNext = false;
     }
   };
@@ -217,29 +365,16 @@ function measureOriginalText(element, splitChars, trackAncestors) {
     const text = node.textContent || "";
     const ancestors = trackAncestors ? buildAncestorChain(node, element, ancestorCache) : emptyAncestors;
     const graphemes = segmentGraphemes(text);
-    let charOffset = 0;
     for (const grapheme of graphemes) {
       if (grapheme === " " || grapheme === "\n" || grapheme === "	") {
         pushWord();
-        charOffset += grapheme.length;
         continue;
       }
-      if (splitChars) {
-        range.setStart(node, charOffset);
-        range.setEnd(node, charOffset + grapheme.length);
-        const rect = range.getBoundingClientRect();
-        if (wordStartLeft === null) {
-          wordStartLeft = rect.left;
-        }
-        currentWord.push({ char: grapheme, left: rect.left, ancestors });
-      } else {
-        currentWord.push({ char: grapheme, left: 0, ancestors });
-      }
+      currentWord.push({ char: grapheme, ancestors });
       if (BREAK_CHARS.has(grapheme)) {
         pushWord();
         noSpaceBeforeNext = true;
       }
-      charOffset += grapheme.length;
     }
   }
   pushWord();
@@ -325,11 +460,6 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
             });
             charSpan.textContent = measuredChar.char;
             globalCharIndex++;
-            if (charIndexInWord > 0) {
-              const prevCharLeft = measuredWord.chars[charIndexInWord - 1].left;
-              const gap = measuredChar.left - prevCharLeft;
-              charSpan.dataset.expectedGap = gap.toString();
-            }
             if ((options == null ? void 0 : options.mask) === "chars") {
               const charWrapper = createMaskWrapper("inline-block");
               charWrapper.appendChild(charSpan);
@@ -347,18 +477,12 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
           }
           charGroups.forEach((group) => {
             group.chars.forEach((measuredChar) => {
-              const charIndexInWord = measuredWord.chars.indexOf(measuredChar);
               const charSpan = createSpan(charClass, globalCharIndex, "inline-block", {
                 propIndex: options == null ? void 0 : options.propIndex,
                 propName: "char"
               });
               charSpan.textContent = measuredChar.char;
               globalCharIndex++;
-              if (charIndexInWord > 0) {
-                const prevCharLeft = measuredWord.chars[charIndexInWord - 1].left;
-                const gap = measuredChar.left - prevCharLeft;
-                charSpan.dataset.expectedGap = gap.toString();
-              }
               if ((options == null ? void 0 : options.mask) === "chars") {
                 const charWrapper = createMaskWrapper("inline-block");
                 charWrapper.appendChild(charSpan);
@@ -455,30 +579,42 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
         i++;
       }
     }
-    if (splitChars && allChars.length > 1 && !isSafari) {
-      const range = document.createRange();
-      const positions = allChars.map((c) => {
-        var _a;
-        const textNode = c.firstChild;
-        if (textNode && textNode.nodeType === Node.TEXT_NODE) {
-          range.setStart(textNode, 0);
-          range.setEnd(textNode, ((_a = textNode.textContent) == null ? void 0 : _a.length) || 1);
-          return range.getBoundingClientRect().left;
+    if (splitChars && allWords.length > 0) {
+      for (const wordSpan of allWords) {
+        const wordChars = Array.from(wordSpan.querySelectorAll(`.${charClass}`));
+        if (wordChars.length < 2) continue;
+        const styleGroups = [];
+        const firstCharStyles = getComputedStyle(wordChars[0]);
+        let currentKey = buildKerningStyleKey(firstCharStyles);
+        let currentGroup = {
+          chars: [wordChars[0]],
+          styleSource: wordChars[0],
+          styles: firstCharStyles
+        };
+        for (let i2 = 1; i2 < wordChars.length; i2++) {
+          const char = wordChars[i2];
+          const charStyles = getComputedStyle(char);
+          const key = buildKerningStyleKey(charStyles);
+          if (key === currentKey) {
+            currentGroup.chars.push(char);
+          } else {
+            styleGroups.push(currentGroup);
+            currentKey = key;
+            currentGroup = { chars: [char], styleSource: char, styles: charStyles };
+          }
         }
-        return c.getBoundingClientRect().left;
-      });
-      for (let i2 = 1; i2 < allChars.length; i2++) {
-        const charSpan = allChars[i2];
-        const expectedGap = charSpan.dataset.expectedGap;
-        if (expectedGap !== void 0) {
-          const originalGap = parseFloat(expectedGap);
-          const currentGap = positions[i2] - positions[i2 - 1];
-          const delta = originalGap - currentGap;
-          if (Math.abs(delta) > 0.1 && Math.abs(delta) < 20) {
-            const targetElement = (options == null ? void 0 : options.mask) === "chars" && charSpan.parentElement ? charSpan.parentElement : charSpan;
-            targetElement.style.marginLeft = `${delta}px`;
+        styleGroups.push(currentGroup);
+        for (const group of styleGroups) {
+          if (group.chars.length < 2) continue;
+          const charStrings = group.chars.map((c) => c.textContent || "");
+          const kerningMap = measureKerning(element, group.styleSource, charStrings, group.styles);
+          for (const [charIndex, kerning] of kerningMap) {
+            const charSpan = group.chars[charIndex];
+            if (charSpan && Math.abs(kerning) < 20) {
+              const targetElement = (options == null ? void 0 : options.mask) === "chars" && charSpan.parentElement ? charSpan.parentElement : charSpan;
+              targetElement.style.marginLeft = `${kerning}px`;
+            }
           }
-          delete charSpan.dataset.expectedGap;
         }
       }
     }
@@ -666,12 +802,8 @@ function splitText(element, {
   if (splitChars) {
     element.style.fontVariantLigatures = "none";
   }
-  if (isSafari && splitChars && revertOnComplete) {
-    element.style.fontKerning = "none";
-  }
   const trackAncestors = hasInlineDescendants(element);
-  const measureChars = splitChars && !isSafari;
-  const measuredWords = measureOriginalText(element, measureChars, trackAncestors);
+  const measuredWords = collectTextStructure(element, trackAncestors);
   const { chars, words, lines } = performSplit(
     element,
     measuredWords,
@@ -720,9 +852,6 @@ function splitText(element, {
     if (splitChars) {
       element.style.fontVariantLigatures = "none";
     }
-    if (isSafari && splitChars && revertOnComplete) {
-      element.style.fontKerning = "none";
-    }
     dispose();
   };
   if (autoSplit) {
@@ -749,7 +878,7 @@ function splitText(element, {
         element.innerHTML = originalHTML;
         requestAnimationFrame(() => {
           if (!isActive) return;
-          const newMeasuredWords = measureOriginalText(element, measureChars, trackAncestors);
+          const newMeasuredWords = collectTextStructure(element, trackAncestors);
           const result = performSplit(
             element,
             newMeasuredWords,

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * Custom splitText implementation with built-in kerning compensation.
- * Measures character positions before splitting, applies compensation,
- * then detects lines based on actual rendered positions.
+ * Measures kerning between character pairs, splits text into spans,
+ * applies margin compensation, and detects lines based on rendered positions.
  */
 /**
  * Configuration options for the splitText function.

package/dist/index.js

@@ -1 +1 @@
-export { splitText } from './chunk-WGVCUEOU.js';
+export { splitText } from './chunk-Q2D5AQBW.js';

package/dist/react.js

@@ -1,4 +1,4 @@
-import { splitText, __spreadProps, __spreadValues, normalizeToPromise } from './chunk-WGVCUEOU.js';
+import { splitText, __spreadProps, __spreadValues, normalizeToPromise } from './chunk-Q2D5AQBW.js';
 import { forwardRef, useRef, useCallback, useState, useLayoutEffect, useEffect, isValidElement, cloneElement } from 'react';
 import { jsx } from 'react/jsx-runtime';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fetta",
-  "version": "1.1.2",
+  "version": "1.2.1",
   "description": "Text splitting library with kerning compensation for animations",
   "type": "module",
   "sideEffects": false,