fetta 1.4.3 → 1.4.4

package/dist/{chunk-24TCJGUM.js → chunk-Y4GCLM4K.js}

@@ -122,58 +122,9 @@ function copyKerningStyles(target, styles) {
     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;
@@ -181,29 +132,6 @@ function isSafari() {
   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) > 1e-3) {
-      kerningMap.set(i + 1, kerning);
-    }
-  }
-  return kerningMap;
-}
 function measureKerningDOM(container, styleSource, chars, styles) {
   const kerningMap = /* @__PURE__ */ new Map();
   if (chars.length < 2) return kerningMap;
@@ -242,10 +170,47 @@ function measureKerningDOM(container, styleSource, chars, styles) {
   container.removeChild(measurer);
   return kerningMap;
 }
+function measureKerningRange(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);
+  container.appendChild(measurer);
+  const range = document.createRange();
+  const measureWidth = () => {
+    const textNode = measurer.firstChild;
+    if (!textNode) return 0;
+    range.selectNodeContents(textNode);
+    return range.getBoundingClientRect().width;
+  };
+  const charWidths = /* @__PURE__ */ new Map();
+  for (const char of new Set(chars)) {
+    measurer.textContent = char;
+    charWidths.set(char, measureWidth());
+  }
+  for (let i = 0; i < chars.length - 1; i++) {
+    const char1 = chars[i];
+    const char2 = chars[i + 1];
+    measurer.textContent = char1 + char2;
+    const kerning = measureWidth() - charWidths.get(char1) - charWidths.get(char2);
+    if (Math.abs(kerning) > 1e-3) {
+      kerningMap.set(i + 1, kerning);
+    }
+  }
+  range.detach();
+  container.removeChild(measurer);
+  return kerningMap;
+}
 function measureKerning(container, styleSource, chars, styles) {
   if (chars.length < 2) return /* @__PURE__ */ new Map();
+  if (!container.isConnected) {
+    console.warn("splitText: kerning measurement requires a connected DOM element. Skipping kerning.");
+    return /* @__PURE__ */ new Map();
+  }
   const computedStyles = styles != null ? styles : getComputedStyle(styleSource);
-  return isSafari() || shouldUseDomKerning(computedStyles) ? measureKerningDOM(container, styleSource, chars, computedStyles) : measureKerningCanvas(styleSource, chars, computedStyles);
+  return isSafari() ? measureKerningDOM(container, styleSource, chars, computedStyles) : measureKerningRange(container, styleSource, chars, computedStyles);
 }
 var srOnlyStylesInjected = false;
 function injectSrOnlyStyles() {

package/dist/index.js

@@ -1 +1 @@
-export { splitText } from './chunk-24TCJGUM.js';
+export { splitText } from './chunk-Y4GCLM4K.js';

package/dist/react.js

@@ -1,4 +1,4 @@
-import { splitText, __spreadProps, __spreadValues, normalizeToPromise } from './chunk-24TCJGUM.js';
+import { splitText, __spreadProps, __spreadValues, normalizeToPromise } from './chunk-Y4GCLM4K.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.4.3",
+  "version": "1.4.4",
   "description": "Text splitting library with kerning compensation for animations",
   "type": "module",
   "sideEffects": false,
@@ -80,11 +80,20 @@
   "keywords": [
     "text",
     "split",
+    "split-text",
+    "splittext",
+    "text-animation",
+    "text-effect",
     "animation",
     "motion",
     "kerning",
     "typography",
-    "gsap"
+    "gsap",
+    "javascript",
+    "typescript",
+    "react",
+    "web-animation",
+    "accessible"
   ],
   "license": "MIT",
   "author": "dimi",