(function (doc) { if (doc.__sfFitWords) return; var win = doc.defaultView; var SELECTOR = "h1,h2,h3,h4,h5,h6,[class*='font-heading'],[class*='font-display']"; var MIN_SCALE = 0.3, MIN_PX = 16, SLACK = 1; 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); var fitted = new Map(); // heading -> fitted size, e.g. "43.8px" 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 (size, el) { if (!el.isConnected) { fitted.delete(el); return; } css += pathOf(el) + "{font-size:" + size + " !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 (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 = Math.max(set * MIN_SCALE, MIN_PX); 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. var hadStyle = el.hasAttribute("style"), origStyle = el.getAttribute("style"); function attempt(px) { el.style.setProperty("font-size", size(px), "important"); } function done() { if (hadStyle) el.setAttribute("style", origStyle); else el.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, size(lo)); 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); } }); function watch(el) { if (!seen.has(el)) { remember(el); ro.observe(el); } } function fitAll() { var els = doc.querySelectorAll(SELECTOR); for (var i = 0; i < els.length; i++) { fitAndRemember(els[i]); watch(els[i]); } } 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) { fitAndRemember(els[i]); watch(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]; var target = r.target.nodeType === 1 ? r.target : r.target.parentElement; var own = target && target.closest(SELECTOR); if (own) touched.add(own); for (var j = 0; j < r.addedNodes.length; j++) { var n = r.addedNodes[j]; if (n.nodeType !== 1) continue; if (n.matches(SELECTOR)) touched.add(n); var inner = n.querySelectorAll(SELECTOR); 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 }); 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; })(document);

Talk to us.

Eight cities. One inbox.