(function (doc) { if (doc.__sfFitWords) return; var win = doc.defaultView; var SELECTOR = "h1,h2,h3,h4,h5,h6,[class*='font-heading'],[class*='font-display']"; // Body text a block asked to shrink (its Text group's Shrink), beside // the headings: what this script may fit at all. modeOf() decides each one. var SHRINK_BODY = "[data-fit] p,[data-fit] li,[data-fit-tablet] p,[data-fit-tablet] li,[data-fit-phone] p,[data-fit-phone] li"; var CANDIDATES = SELECTOR + "," + SHRINK_BODY; var MIN_SCALE = 0.3, MIN_PX = 16, SLACK = 1, PHONE_BELOW = 800; var TABLET_MIN = 720, DESKTOP_MIN = 1100; // A block's own answer (lib/content/block-size, the wrapper's attributes): // the fit "wrap" | "shrink" | "line" and the floor, each with a tablet and a // phone twin. From 1100 the desktop's; from the tablet line (800 for a holder // in a Box, marked edge; 720 outside one) the tablet's where it has one; // under it the phone's, else the tablet's, else the desktop's. With no // tablet answer the phone's is read under 800, as before (the edge moves with // F1). With none, a heading shrinks and body text wraps, as always. // A holder with any tablet attribute takes the three views (its line and 1100) // for its fit AND its floor together; one with none keeps the 800 edge. var TABLET_ATTRS = ["data-fit-tablet", "data-fit-min-tablet"]; function own(el, attr, tabletAttr, phoneAttr) { var holder = el.closest("[" + attr + "],[" + tabletAttr + "],[" + phoneAttr + "]"); if (!holder) return null; var w = win.innerWidth, d = holder.getAttribute(attr); if (w >= DESKTOP_MIN) return d; var t = holder.getAttribute(tabletAttr), p = holder.getAttribute(phoneAttr); if (w < (holder.hasAttribute("data-fit-edge") ? PHONE_BELOW : TABLET_MIN)) return p || t || d; if (holder.hasAttribute(TABLET_ATTRS[0]) || holder.hasAttribute(TABLET_ATTRS[1])) return t || d; return (w < PHONE_BELOW && p) || d; } function modeOf(el) { var mode = own(el, "data-fit", "data-fit-tablet", "data-fit-phone"); if (mode === "wrap" || mode === "shrink") return mode; if (mode === "line") return "wrap"; // One line: the block keeps its words whole, nothing shrinks return el.matches(SELECTOR) ? "shrink" : "wrap"; } function floorOf(el, set) { var min = parseFloat(own(el, "data-fit-min", "data-fit-min-tablet", "data-fit-min-phone")); return min >= 0 ? min : Math.max(set * MIN_SCALE, MIN_PX); } function measure(el) { var widest = 0, current = 0, last = null, split = false, lastBlock = null; function blockOf(n) { for (var p = n.parentElement; p && p !== el; p = p.parentElement) { var d = win.getComputedStyle(p).display; if (d.indexOf("inline") !== 0 && d !== "contents") return p; } return el; } function close() { if (current > widest) widest = current; current = 0; last = null; } var walker = doc.createTreeWalker(el, 5), range = doc.createRange(), node; while ((node = walker.nextNode())) { if (node.nodeType === 1) { if (node.tagName === "BR" || node.tagName === "WBR") close(); continue; } var block = blockOf(node); if (block !== lastBlock) close(); lastBlock = block; var re = /(\S+)|(\s+)/g, m; while ((m = re.exec(node.data))) { if (m[2]) { close(); continue; } range.setStart(node, m.index); range.setEnd(node, m.index + m[0].length); var rects = range.getClientRects(); for (var i = 0; i < rects.length; i++) { var r = rects[i]; if (r.width <= 0) continue; current += r.width; if (last && r.top > last.top + last.height / 2) split = true; last = r; } } } close(); return { widest: widest, split: split }; } function lineWidth(el) { var cs = win.getComputedStyle(el); return el.getBoundingClientRect().width - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight) - parseFloat(cs.borderLeftWidth) - parseFloat(cs.borderRightWidth); } // ⚠️ THE HEADING ELEMENT IS NEVER TOUCHED — no style="", no data-*. This // runs before React hydrates, and React 19 in development reports ANY // attribute that differs from what it rendered ("a tree hydrated but some // attributes didn't match"): first our inline font-size on the hero (which // React owns via --heading-size), then, when that moved to a data-sf-fit // attribute, the attribute itself. So the fitted size lives only in this // script's own stylesheet, in , addressed to each heading by its // POSITION (":root>*:nth-child(2)>…"). A position goes stale when the page's // structure changes, so the rules are rewritten in the MutationObserver // callback, which runs before the next paint. !important so the size also // beats a part's own inline size. var head = doc.head || doc.documentElement; var fitEl = doc.createElement("style"); fitEl.id = "storefront-fit-words-sizes"; head.appendChild(fitEl); // heading -> [[element, fitted size]]: the heading and each Text part inside // it that holds its own size (a span [data-sf-part-styled]), e.g. // [[h2, "43.8px"], [span, "43.8px"]]. Sizing the heading alone leaves such // a part at its own size, and the word still breaks (card C25, Spec Table). var fitted = new Map(); function pathOf(el) { var parts = []; for (var e = el; e && e.parentElement; e = e.parentElement) { var i = 1, s = e; while ((s = s.previousElementSibling)) i++; parts.unshift("*:nth-child(" + i + ")"); } return ":root>" + parts.join(">"); } function writeRules() { var css = ""; fitted.forEach(function (sizes, el) { if (!el.isConnected) { fitted.delete(el); return; } for (var i = 0; i < sizes.length; i++) css += pathOf(sizes[i][0]) + "{font-size:" + sizes[i][1] + " !important}"; }); if (fitEl.textContent !== css) fitEl.textContent = css; } function unfit(el) { if (fitted.delete(el)) writeRules(); } function fits(el) { var m = measure(el); return !m.split && m.widest <= lineWidth(el) + SLACK; } function fit(el) { unfit(el); if (modeOf(el) !== "shrink") return; // the block's own Wrap if (lineWidth(el) <= 0) return; // hidden, or not laid out yet if (fits(el)) return; var set = parseFloat(win.getComputedStyle(el).fontSize); if (!set) return; var floor = floorOf(el, set); if (floor >= set) return; function size(px) { return Math.floor(px * 10) / 10 + "px"; } // The SEARCH tries sizes on the element's own style and then puts that // attribute back byte for byte (or removes it, if it had none), so nothing // is left for React to see. A trial in a stylesheet instead restyles the // whole page per step: a full pass on the Hartes home took 75–160ms at 4x // CPU that way. // Every trial scales the heading AND each part inside it that holds its // own size, by the same ratio, so a part keeps its proportion to the // heading. var carriers = [el].concat(Array.prototype.slice.call(el.querySelectorAll("[data-sf-part-styled]"))); var base = carriers.map(function (c) { return parseFloat(win.getComputedStyle(c).fontSize) || set; }); var saved = carriers.map(function (c) { return c.hasAttribute("style") ? c.getAttribute("style") : null; }); function attempt(px) { for (var i = 0; i < carriers.length; i++) carriers[i].style.setProperty("font-size", size(base[i] * px / set), "important"); } function done() { for (var i = 0; i < carriers.length; i++) { if (saved[i] !== null) carriers[i].setAttribute("style", saved[i]); else carriers[i].removeAttribute("style"); } } attempt(floor); if (!fits(el)) { done(); return; } // even the floor does not fit: leave it as set var lo = floor, hi = set; for (var i = 0; i < 8; i++) { var mid = (lo + hi) / 2; attempt(mid); if (fits(el)) lo = mid; else hi = mid; } done(); fitted.set(el, carriers.map(function (c, i) { return [c, size(base[i] * lo / set)]; })); writeRules(); } // What each heading measured right after we last fitted it, so the // ResizeObserver below can tell a real change (a font swap, a rotate, a // container that moved) from the size change our own write just caused. var seen = new WeakMap(); function remember(el) { var b = el.getBoundingClientRect(); seen.set(el, b.width + "x" + b.height); } function fitAndRemember(el) { fit(el); remember(el); } // ⚠️ A ResizeObserver, NOT fonts.ready or a resize event, and the reason is // WHEN it runs: after layout, BEFORE paint. The web font arriving re-wraps a // fitted heading, and fonts.ready resolves only after that frame is painted — // measured on the Hartes hero: a 42px jump in 2 of 3 loads. A size change // reported here is fitted in the same frame, so the broken state is never // drawn. It also covers a container that resizes. var ro = new win.ResizeObserver(function (entries) { for (var i = 0; i < entries.length; i++) { var el = entries[i].target; var b = el.getBoundingClientRect(); if (seen.get(el) === b.width + "x" + b.height) continue; // our own write fitAndRemember(el); } }); // Its own set, not seen: fitAndRemember has written seen by the // time watch runs, so a seen test observed no heading at all, and a // heading fitted in the fallback face was never fitted again when the web // font arrived (hartesmetal.com.au, "FusionForge." with its "." alone). var watched = new WeakSet(); function watch(el) { if (!watched.has(el)) { watched.add(el); ro.observe(el); } } function fitAll() { var els = doc.querySelectorAll(CANDIDATES); for (var i = 0; i < els.length; i++) { if (modeOf(els[i]) === "shrink") { fitAndRemember(els[i]); watch(els[i]); } else unfit(els[i]); // Wrap here (a phone value may differ from the desktop's) } } var queued = 0, all = false, touched = new Set(); function run() { queued = 0; if (all) { all = false; touched.clear(); fitAll(); return; } var els = Array.from(touched); touched.clear(); for (var i = 0; i < els.length; i++) { if (!els[i].isConnected) continue; if (modeOf(els[i]) === "shrink") { fitAndRemember(els[i]); watch(els[i]); } else unfit(els[i]); } } function schedule() { if (!queued) queued = win.requestAnimationFrame(run); } function scheduleAll() { all = true; schedule(); } fitAll(); // A backstop only: a font that changes widths without changing any // heading's box is not seen by the ResizeObserver. if (doc.fonts && doc.fonts.ready) doc.fonts.ready.then(scheduleAll, function () {}); // …and the viewport WIDTH, which the ResizeObserver cannot stand in for: a // heading sized to its own text (fit-content, a flex item) keeps the SAME box // when the phone turns to 844, so nothing reports a change and it would stay // shrunk. The probe's rotate check caught exactly that. var lastWidth = win.innerWidth; function onResize() { if (win.innerWidth === lastWidth) return; // a phone's toolbar changing HEIGHT is not our business lastWidth = win.innerWidth; scheduleAll(); } win.addEventListener("resize", onResize); var mo = new win.MutationObserver(function (records) { // Positions first: a node added or removed anywhere can shift the // nth-child path of a fitted heading, and this callback runs before paint. if (fitted.size) { for (var q = 0; q < records.length; q++) if (records[q].type === "childList") { writeRules(); break; } } for (var i = 0; i < records.length; i++) { var r = records[i]; // A block's text fit (Wrap / Shrink / One line) or Min font size changed in the editor: // only a data-fit attribute moved, so every heading is measured again. if (r.type === "attributes") { scheduleAll(); continue; } var target = r.target.nodeType === 1 ? r.target : r.target.parentElement; var owner = target && target.closest(CANDIDATES); if (owner) touched.add(owner); for (var j = 0; j < r.addedNodes.length; j++) { var n = r.addedNodes[j]; if (n.nodeType !== 1) continue; if (n.matches(CANDIDATES)) touched.add(n); var inner = n.querySelectorAll(CANDIDATES); for (var k = 0; k < inner.length; k++) touched.add(inner[k]); } } if (touched.size) schedule(); }); mo.observe(doc.body, { childList: true, subtree: true, characterData: true, attributes: true, attributeFilter: ["data-fit","data-fit-tablet","data-fit-phone","data-fit-min","data-fit-min-tablet","data-fit-min-phone","data-fit-edge"], }); doc.__sfFitWords = function stop() { win.removeEventListener("resize", onResize); ro.disconnect(); mo.disconnect(); if (queued) win.cancelAnimationFrame(queued); fitted.clear(); fitEl.remove(); delete doc.__sfFitWords; }; // For the probe and for debugging: which headings are fitted, at what size, // and the sheet that holds it (disable it to read a heading's set size). doc.__sfFitWords.fitted = fitted; doc.__sfFitWords.sheet = fitEl; // …and the two questions a block's own answer changes, for the guard // (scripts/test-block-size.tsx §5): which mode an element is in, and its floor. doc.__sfFitWords.modeOf = modeOf; doc.__sfFitWords.floorOf = floorOf; })(document);

Legal & policies.

Shop

Support

Discover

Brands

Follow