fetta 1.1.2 → 1.2.0

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-PRR25BMJ.js}

@@ -63,7 +63,89 @@ var INLINE_ELEMENTS = /* @__PURE__ */ new Set([
   "u",
   "var"
 ]);
-var isSafari = typeof navigator !== "undefined" && /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
+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(element, chars) {
+  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 styles = getComputedStyle(element);
+  ctx.font = `${styles.fontStyle} ${styles.fontWeight} ${styles.fontSize} ${styles.fontFamily}`;
+  if (styles.letterSpacing && styles.letterSpacing !== "normal") {
+    ctx.letterSpacing = styles.letterSpacing;
+  }
+  if (styles.wordSpacing && styles.wordSpacing !== "normal") {
+    ctx.wordSpacing = styles.wordSpacing;
+  }
+  if ("fontVariantLigatures" in ctx) ctx.fontVariantLigatures = "none";
+  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(element, chars) {
+  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 styles = getComputedStyle(element);
+  measurer.style.font = styles.font;
+  measurer.style.letterSpacing = styles.letterSpacing;
+  measurer.style.wordSpacing = styles.wordSpacing;
+  measurer.style.fontKerning = styles.fontKerning;
+  measurer.style.fontVariantLigatures = "none";
+  const webkitSmoothing = styles.webkitFontSmoothing || styles["-webkit-font-smoothing"];
+  const mozSmoothing = styles.MozOsxFontSmoothing || styles["-moz-osx-font-smoothing"];
+  if (webkitSmoothing) {
+    measurer.style.webkitFontSmoothing = webkitSmoothing;
+  }
+  if (mozSmoothing) {
+    measurer.style.MozOsxFontSmoothing = mozSmoothing;
+  }
+  element.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);
+    }
+  }
+  element.removeChild(measurer);
+  return kerningMap;
+}
+function measureKerning(element, chars) {
+  if (chars.length < 2) return /* @__PURE__ */ new Map();
+  return isSafari() ? measureKerningDOM(element, chars) : measureKerningCanvas(element, chars);
+}
 var srOnlyStylesInjected = false;
 function injectSrOnlyStyles() {
   if (srOnlyStylesInjected || typeof document === "undefined") return;
@@ -191,24 +273,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 +295,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 +390,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 +407,13 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
           }
           charGroups.forEach((group) => {
             group.chars.forEach((measuredChar) => {
-              const charIndexInWord = measuredWord.chars.indexOf(measuredChar);
+              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 +510,18 @@ 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;
-        }
-        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) {
+    if (splitChars && allWords.length > 0) {
+      for (const wordSpan of allWords) {
+        const wordChars = Array.from(wordSpan.querySelectorAll(`.${charClass}`));
+        if (wordChars.length < 2) continue;
+        const charStrings = wordChars.map((c) => c.textContent || "");
+        const kerningMap = measureKerning(element, charStrings);
+        for (const [charIndex, kerning] of kerningMap) {
+          const charSpan = wordChars[charIndex];
+          if (charSpan && Math.abs(kerning) < 20) {
             const targetElement = (options == null ? void 0 : options.mask) === "chars" && charSpan.parentElement ? charSpan.parentElement : charSpan;
-            targetElement.style.marginLeft = `${delta}px`;
+            targetElement.style.marginLeft = `${kerning}px`;
           }
-          delete charSpan.dataset.expectedGap;
         }
       }
     }
@@ -666,12 +709,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 +759,6 @@ function splitText(element, {
     if (splitChars) {
       element.style.fontVariantLigatures = "none";
     }
-    if (isSafari && splitChars && revertOnComplete) {
-      element.style.fontKerning = "none";
-    }
     dispose();
   };
   if (autoSplit) {
@@ -749,7 +785,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-PRR25BMJ.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-PRR25BMJ.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.0",
   "description": "Text splitting library with kerning compensation for animations",
   "type": "module",
   "sideEffects": false,