fetta 1.1.1 → 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
@@ -85,7 +85,6 @@ const result = splitText(element, options);
 | `onSplit` | `function` | — | Callback after initial split |
 | `revertOnComplete` | `boolean` | `false` | Auto-revert when animation completes |
 | `propIndex` | `boolean` | `false` | Add CSS custom properties: `--char-index`, `--word-index`, `--line-index` |
-| `willChange` | `boolean` | `false` | Add `will-change: transform, opacity` for performance |
 
 #### Return Value
 
@@ -111,7 +110,7 @@ import { SplitText } from 'fetta/react';
 | `children` | `ReactElement` | — | Single element to split |
 | `onSplit` | `function` | — | Called after text is split |
 | `onResize` | `function` | — | Called on autoSplit re-split |
-| `options` | `object` | — | Split options (type, classes, mask, propIndex, willChange) |
+| `options` | `object` | — | Split options (type, classes, mask, propIndex) |
 | `autoSplit` | `boolean` | `false` | Re-split on container resize |
 | `revertOnComplete` | `boolean` | `false` | Revert after animation completes |
 | `inView` | `boolean \| InViewOptions` | `false` | Enable viewport detection |
@@ -266,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-6EZFFMJ3.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();
@@ -259,9 +324,6 @@ function createSpan(className, index, display = "inline-block", options) {
   span.style.display = display;
   span.style.position = "relative";
   span.style.textDecoration = "inherit";
-  if (options == null ? void 0 : options.willChange) {
-    span.style.willChange = "transform, opacity";
-  }
   if (options == null ? void 0 : options.ariaHidden) {
     span.setAttribute("aria-hidden", "true");
   }
@@ -311,7 +373,6 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
     measuredWords.forEach((measuredWord, wordIndex) => {
       const wordSpan = createSpan(wordClass, wordIndex, "inline-block", {
         propIndex: options == null ? void 0 : options.propIndex,
-        willChange: options == null ? void 0 : options.willChange,
         propName: "word",
         ariaHidden: options == null ? void 0 : options.ariaHidden
       });
@@ -324,17 +385,11 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
           measuredWord.chars.forEach((measuredChar, charIndexInWord) => {
             const charSpan = createSpan(charClass, globalCharIndex, "inline-block", {
               propIndex: options == null ? void 0 : options.propIndex,
-              willChange: options == null ? void 0 : options.willChange,
               propName: "char",
               ariaHidden: options == null ? void 0 : options.ariaHidden
             });
             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);
@@ -352,19 +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,
-                willChange: options == null ? void 0 : options.willChange,
                 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);
@@ -461,21 +510,18 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
         i++;
       }
     }
-    if (splitChars && allChars.length > 1 && !isSafari) {
-      const positions = allChars.map((c) => 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) < 20) {
-            const roundedDelta = Math.round(delta * 100) / 100;
+    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 = `${roundedDelta}px`;
+            targetElement.style.marginLeft = `${kerning}px`;
           }
-          delete charSpan.dataset.expectedGap;
         }
       }
     }
@@ -486,7 +532,6 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
       lineGroups.forEach((words, lineIndex) => {
         const lineSpan = createSpan(lineClass, lineIndex, "block", {
           propIndex: options == null ? void 0 : options.propIndex,
-          willChange: options == null ? void 0 : options.willChange,
           propName: "line",
           ariaHidden: options == null ? void 0 : options.ariaHidden
         });
@@ -583,7 +628,6 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
       lineGroups.forEach((wrappers, lineIndex) => {
         const lineSpan = createSpan(lineClass, lineIndex, "block", {
           propIndex: options == null ? void 0 : options.propIndex,
-          willChange: options == null ? void 0 : options.willChange,
           propName: "line"
         });
         allLines.push(lineSpan);
@@ -625,8 +669,7 @@ function splitText(element, {
   onResize,
   onSplit,
   revertOnComplete = false,
-  propIndex = false,
-  willChange = true
+  propIndex = false
 } = {}) {
   var _a;
   if (!(element instanceof HTMLElement)) {
@@ -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,
@@ -681,7 +720,7 @@ function splitText(element, {
     splitChars,
     splitWords,
     splitLines,
-    { propIndex, willChange, mask, ariaHidden: !trackAncestors }
+    { propIndex, mask, ariaHidden: !trackAncestors }
   );
   currentChars = chars;
   currentWords = words;
@@ -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,
@@ -759,7 +795,7 @@ function splitText(element, {
             splitChars,
             splitWords,
             splitLines,
-            { propIndex, willChange, mask, ariaHidden: !trackAncestors }
+            { propIndex, mask, ariaHidden: !trackAncestors }
           );
           currentChars = result.chars;
           currentWords = result.words;

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.
@@ -42,8 +42,6 @@ interface SplitTextOptions {
     revertOnComplete?: boolean;
     /** Add CSS custom properties (--char-index, --word-index, --line-index) */
     propIndex?: boolean;
-    /** Add will-change: transform, opacity to split elements for better animation performance (default: true) */
-    willChange?: boolean;
 }
 /**
  * Result returned by splitText containing arrays of split elements and a revert function.
@@ -110,6 +108,6 @@ interface SplitTextResult {
  * });
  * ```
  */
-declare function splitText(element: HTMLElement, { type, charClass, wordClass, lineClass, mask, autoSplit, onResize, onSplit, revertOnComplete, propIndex, willChange, }?: SplitTextOptions): SplitTextResult;
+declare function splitText(element: HTMLElement, { type, charClass, wordClass, lineClass, mask, autoSplit, onResize, onSplit, revertOnComplete, propIndex, }?: SplitTextOptions): SplitTextResult;
 
 export { type SplitTextOptions, type SplitTextResult, splitText };

package/dist/index.js

@@ -1 +1 @@
-export { splitText } from './chunk-6EZFFMJ3.js';
+export { splitText } from './chunk-PRR25BMJ.js';

package/dist/react.d.ts

@@ -10,7 +10,6 @@ interface SplitTextOptions {
     /** Apply overflow mask wrapper to elements for reveal animations */
     mask?: "lines" | "words" | "chars";
     propIndex?: boolean;
-    willChange?: boolean;
 }
 interface InViewOptions {
     /** How much of the element must be visible (0-1). Default: 0 */

package/dist/react.js

@@ -1,4 +1,4 @@
-import { splitText, __spreadProps, __spreadValues, normalizeToPromise } from './chunk-6EZFFMJ3.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.1",
+  "version": "1.2.0",
   "description": "Text splitting library with kerning compensation for animations",
   "type": "module",
   "sideEffects": false,