fetta 1.3.3 → 1.3.5

package/README.md

@@ -85,6 +85,7 @@ 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` |
+| `disableKerning` | `boolean` | `false` | Skip kerning compensation (no margin adjustments) |
 
 #### Return Value
 
@@ -110,7 +111,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) |
+| `options` | `object` | — | Split options (type, classes, mask, propIndex, disableKerning) |
 | `autoSplit` | `boolean` | `false` | Re-split on container resize |
 | `revertOnComplete` | `boolean` | `false` | Revert after animation completes |
 | `inView` | `boolean \| InViewOptions` | `false` | Enable viewport detection |

package/dist/{chunk-RJ7GQ53Y.js → chunk-HQLYE4Q5.js}

@@ -33,6 +33,10 @@ var BREAK_CHARS = /* @__PURE__ */ new Set([
   "\u2015"
   // horizontal bar (U+2015)
 ]);
+var CONTEXTUAL_SCRIPT_REGEX = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF\u0590-\u05FF\uFB1D-\uFB4F\u0E00-\u0E7F\u0900-\u097F\u0980-\u09FF\u0A00-\u0A7F\u0A80-\u0AFF\u0B00-\u0B7F\u0B80-\u0BFF\u0C00-\u0C7F\u0C80-\u0CFF\u0D00-\u0D7F]/;
+function hasContextualScript(chars) {
+  return chars.some((char) => CONTEXTUAL_SCRIPT_REGEX.test(char));
+}
 var INLINE_ELEMENTS = /* @__PURE__ */ new Set([
   "a",
   "abbr",
@@ -580,10 +584,12 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
         i++;
       }
     }
-    if (splitChars && allWords.length > 0) {
+    if (!(options == null ? void 0 : options.disableKerning) && splitChars && allWords.length > 0) {
       for (const wordSpan of allWords) {
         const wordChars = Array.from(wordSpan.querySelectorAll(`.${charClass}`));
         if (wordChars.length < 2) continue;
+        const charStringsForCheck = wordChars.map((c) => c.textContent || "");
+        if (hasContextualScript(charStringsForCheck)) continue;
         const styleGroups = [];
         const firstCharStyles = getComputedStyle(wordChars[0]);
         let currentKey = buildKerningStyleKey(firstCharStyles);
@@ -630,6 +636,7 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
         const lastChar = lastCharSpan.textContent || "";
         const firstChar = firstCharSpan.textContent || "";
         if (!lastChar || !firstChar) continue;
+        if (hasContextualScript([lastChar, firstChar])) continue;
         const styles = getComputedStyle(firstCharSpan);
         const kerningMap = measureKerning(element, firstCharSpan, [lastChar, " ", firstChar], styles);
         let totalKerning = 0;
@@ -640,7 +647,7 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
           targetElement.style.marginLeft = `${totalKerning}px`;
         }
       }
-    } else if (splitWords && allWords.length > 1) {
+    } else if (!(options == null ? void 0 : options.disableKerning) && splitWords && allWords.length > 1) {
       for (let wordIdx = 1; wordIdx < allWords.length; wordIdx++) {
         if (noSpaceBeforeSet.has(allWords[wordIdx])) continue;
         const prevWord = allWords[wordIdx - 1];
@@ -650,6 +657,7 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
         if (!prevText || !currText) continue;
         const lastChar = prevText[prevText.length - 1];
         const firstChar = currText[0];
+        if (hasContextualScript([lastChar, firstChar])) continue;
         const styles = getComputedStyle(currWord);
         const kerningMap = measureKerning(element, currWord, [lastChar, " ", firstChar], styles);
         let totalKerning = 0;
@@ -805,7 +813,8 @@ function splitText(element, {
   onResize,
   onSplit,
   revertOnComplete = false,
-  propIndex = false
+  propIndex = false,
+  disableKerning = false
 } = {}) {
   var _a;
   if (!(element instanceof HTMLElement)) {
@@ -856,7 +865,7 @@ function splitText(element, {
     splitChars,
     splitWords,
     splitLines,
-    { propIndex, mask, ariaHidden: !trackAncestors }
+    { propIndex, mask, ariaHidden: !trackAncestors, disableKerning }
   );
   currentChars = chars;
   currentWords = words;
@@ -931,7 +940,7 @@ function splitText(element, {
             splitChars,
             splitWords,
             splitLines,
-            { propIndex, mask, ariaHidden: !trackAncestors }
+            { propIndex, mask, ariaHidden: !trackAncestors, disableKerning }
           );
           currentChars = result.chars;
           currentWords = result.words;

package/dist/index.d.ts

@@ -42,6 +42,10 @@ interface SplitTextOptions {
     revertOnComplete?: boolean;
     /** Add CSS custom properties (--char-index, --word-index, --line-index) */
     propIndex?: boolean;
+    /** Skip kerning compensation (no margin adjustments applied).
+     * Kerning is naturally lost when splitting into inline-block spans.
+     * Use this if you prefer no compensation over imperfect Safari compensation. */
+    disableKerning?: boolean;
 }
 /**
  * Result returned by splitText containing arrays of split elements and a revert function.
@@ -108,6 +112,6 @@ interface SplitTextResult {
  * });
  * ```
  */
-declare function splitText(element: HTMLElement, { type, charClass, wordClass, lineClass, mask, autoSplit, onResize, onSplit, revertOnComplete, propIndex, }?: SplitTextOptions): SplitTextResult;
+declare function splitText(element: HTMLElement, { type, charClass, wordClass, lineClass, mask, autoSplit, onResize, onSplit, revertOnComplete, propIndex, disableKerning, }?: SplitTextOptions): SplitTextResult;
 
 export { type SplitTextOptions, type SplitTextResult, splitText };

package/dist/index.js

@@ -1 +1 @@
-export { splitText } from './chunk-RJ7GQ53Y.js';
+export { splitText } from './chunk-HQLYE4Q5.js';

package/dist/react.d.ts

@@ -10,6 +10,10 @@ interface SplitTextOptions {
     /** Apply overflow mask wrapper to elements for reveal animations */
     mask?: "lines" | "words" | "chars";
     propIndex?: boolean;
+    /** Skip kerning compensation (no margin adjustments applied).
+     * Kerning is naturally lost when splitting into inline-block spans.
+     * Use this if you prefer no compensation over imperfect Safari compensation. */
+    disableKerning?: 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-RJ7GQ53Y.js';
+import { splitText, __spreadProps, __spreadValues, normalizeToPromise } from './chunk-HQLYE4Q5.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.3.3",
+  "version": "1.3.5",
   "description": "Text splitting library with kerning compensation for animations",
   "type": "module",
   "sideEffects": false,