Fit long guide titles to available width

_layouts/guide.html

@@ -46,7 +46,7 @@
             <span>{{ topic_translation.title }}</span>
           </a>
           <div class="guide-heading__title">
-            <h1>
+            <h1 data-fit-guide-title>
               {% include guide_avatar.html guide=page size="header" %}
               {{ page[site.lang].title }}
             </h1>
@@ -98,7 +98,7 @@ <h2 id="guide-feedback-title">{% t was_article_helpful %}</h2>
 
     {% include footer.html %}
     <script src="/js/search.js" integrity="sha256-Cn9RZi6b09IrtHxo4SOhpbbX/E5ZK+VAFUrpZMFjghg=" defer></script>
-    <script src="/js/article-navigation.js" integrity="sha256-n5SVYPnptA4t2JJaq3b+FC0eYX8KPygyM8jq7/XtIi0=" defer></script>
+    <script src="/js/article-navigation.js" integrity="sha256-wCYJmMu4lFJ6xS8zGIftK+/iSWhmPjnRowWepgy5lUQ=" defer></script>
     <script src="/js/article-feedback.js" integrity="sha256-AlC35S17jo/t3ripYSesMGbb0n4TCpeu1H+vT7O2UnM=" defer></script>
   </body>
 </html>

css/style.scss

@@ -1612,13 +1612,23 @@ html[lang="es"] .home-hero h1 {
 .guide-heading h1 {
   min-width: 0;
   margin: 0;
+  position: relative;
   color: var(--indigo);
   font-family: var(--font-heading);
   font-size: 104px;
   font-weight: 600;
   line-height: 0.98;
   letter-spacing: -0.02em;
-  overflow-wrap: anywhere;
+  hyphens: none;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+.guide-heading__word-probe {
+  position: absolute;
+  visibility: hidden;
+  white-space: nowrap;
+  pointer-events: none;
 }
 
 @media (min-width: 1200px) {

js/article-navigation.js

@@ -1,4 +1,78 @@
 (function () {
+  var guideTitle = document.querySelector("[data-fit-guide-title]");
+
+  if (guideTitle) {
+    var guideTitleWords = guideTitle.textContent.trim().split(/\s+/);
+    var guideTitleProbe = document.createElement("span");
+    var guideTitleFitFrame = null;
+
+    guideTitleProbe.className = "guide-heading__word-probe";
+    guideTitleProbe.setAttribute("aria-hidden", "true");
+    guideTitle.appendChild(guideTitleProbe);
+
+    function fitGuideTitle() {
+      guideTitle.style.removeProperty("font-size");
+
+      var availableWidth = guideTitle.getBoundingClientRect().width;
+      var defaultFontSize = parseFloat(window.getComputedStyle(guideTitle).fontSize);
+
+      if (!availableWidth || !defaultFontSize) {
+        return;
+      }
+
+      var longestWordWidth = guideTitleWords.reduce(function (longestWidth, word) {
+        guideTitleProbe.textContent = word;
+        return Math.max(longestWidth, guideTitleProbe.getBoundingClientRect().width);
+      }, 0);
+
+      guideTitleProbe.textContent = "";
+
+      if (longestWordWidth <= availableWidth) {
+        return;
+      }
+
+      var fittedFontSize = defaultFontSize * ((availableWidth - 1) / longestWordWidth);
+
+      guideTitle.style.fontSize = Math.max(1, fittedFontSize) + "px";
+    }
+
+    function scheduleGuideTitleFit() {
+      if (guideTitleFitFrame !== null) {
+        window.cancelAnimationFrame(guideTitleFitFrame);
+      }
+
+      guideTitleFitFrame = window.requestAnimationFrame(function () {
+        guideTitleFitFrame = null;
+        fitGuideTitle();
+      });
+    }
+
+    scheduleGuideTitleFit();
+    window.addEventListener("pageshow", scheduleGuideTitleFit);
+
+    if (document.fonts && document.fonts.ready) {
+      document.fonts.ready.then(scheduleGuideTitleFit);
+    }
+
+    if (typeof window.ResizeObserver === "function") {
+      var previousGuideTitleWidth = 0;
+      var guideTitleResizeObserver = new ResizeObserver(function (entries) {
+        var nextGuideTitleWidth = entries[0].contentRect.width;
+
+        if (Math.abs(nextGuideTitleWidth - previousGuideTitleWidth) < 0.5) {
+          return;
+        }
+
+        previousGuideTitleWidth = nextGuideTitleWidth;
+        scheduleGuideTitleFit();
+      });
+
+      guideTitleResizeObserver.observe(guideTitle.parentElement);
+    } else {
+      window.addEventListener("resize", scheduleGuideTitleFit);
+    }
+  }
+
   var sidebar = document.querySelector("[data-article-sidebar]");
   var sidebarToggle = sidebar && sidebar.querySelector("[data-sidebar-toggle]");
   var sidebarNav = sidebar && sidebar.querySelector(".article-sidebar__nav");

netlify.toml

@@ -14,4 +14,4 @@
   for = "/*"
 
   [headers.values]
-    Content-Security-Policy = "default-src 'self'; base-uri 'self'; object-src 'none'; script-src 'self' 'sha256-KOs83E8sWN0ZSanqdvyKqXPbanqGOxQAEZPz+lkrVh4=' 'sha256-Cn9RZi6b09IrtHxo4SOhpbbX/E5ZK+VAFUrpZMFjghg=' 'sha256-n5SVYPnptA4t2JJaq3b+FC0eYX8KPygyM8jq7/XtIi0=' 'sha256-AlC35S17jo/t3ripYSesMGbb0n4TCpeu1H+vT7O2UnM=' 'strict-dynamic' https://www.googletagmanager.com https://static.hotjar.com https://script.hotjar.com; style-src 'self' 'unsafe-inline' https://static.hotjar.com https://script.hotjar.com; img-src 'self' https://*.google-analytics.com https://www.googletagmanager.com https://*.g.doubleclick.net https://*.google.com https://google.com https://www.google.com.uy https://www.googleadservices.com https://pagead2.googlesyndication.com https://googleads.g.doubleclick.net https://static.hotjar.com https://script.hotjar.com https://survey-images.hotjar.com; font-src 'self' https://script.hotjar.com; connect-src 'self' https://*.google-analytics.com https://*.analytics.google.com https://www.googletagmanager.com https://*.g.doubleclick.net https://*.google.com https://google.com https://www.google.com.uy https://www.googleadservices.com https://pagead2.googlesyndication.com https://googleads.g.doubleclick.net https://ad.doubleclick.net https://*.hotjar.com https://*.hotjar.io wss://*.hotjar.com; frame-src https://www.googletagmanager.com https://insights.hotjar.com; frame-ancestors 'none'; form-action 'self'; upgrade-insecure-requests"
+    Content-Security-Policy = "default-src 'self'; base-uri 'self'; object-src 'none'; script-src 'self' 'sha256-KOs83E8sWN0ZSanqdvyKqXPbanqGOxQAEZPz+lkrVh4=' 'sha256-Cn9RZi6b09IrtHxo4SOhpbbX/E5ZK+VAFUrpZMFjghg=' 'sha256-wCYJmMu4lFJ6xS8zGIftK+/iSWhmPjnRowWepgy5lUQ=' 'sha256-AlC35S17jo/t3ripYSesMGbb0n4TCpeu1H+vT7O2UnM=' 'strict-dynamic' https://www.googletagmanager.com https://static.hotjar.com https://script.hotjar.com; style-src 'self' 'unsafe-inline' https://static.hotjar.com https://script.hotjar.com; img-src 'self' https://*.google-analytics.com https://www.googletagmanager.com https://*.g.doubleclick.net https://*.google.com https://google.com https://www.google.com.uy https://www.googleadservices.com https://pagead2.googlesyndication.com https://googleads.g.doubleclick.net https://static.hotjar.com https://script.hotjar.com https://survey-images.hotjar.com; font-src 'self' https://script.hotjar.com; connect-src 'self' https://*.google-analytics.com https://*.analytics.google.com https://www.googletagmanager.com https://*.g.doubleclick.net https://*.google.com https://google.com https://www.google.com.uy https://www.googleadservices.com https://pagead2.googlesyndication.com https://googleads.g.doubleclick.net https://ad.doubleclick.net https://*.hotjar.com https://*.hotjar.io wss://*.hotjar.com; frame-src https://www.googletagmanager.com https://insights.hotjar.com; frame-ancestors 'none'; form-action 'self'; upgrade-insecure-requests"

script/verify_security_headers.rb

@@ -12,7 +12,7 @@ def integrity_for(path)
 script_integrities = {
   '/js/gtm.js' => 'sha256-KOs83E8sWN0ZSanqdvyKqXPbanqGOxQAEZPz+lkrVh4=',
   '/js/search.js' => 'sha256-Cn9RZi6b09IrtHxo4SOhpbbX/E5ZK+VAFUrpZMFjghg=',
-  '/js/article-navigation.js' => 'sha256-n5SVYPnptA4t2JJaq3b+FC0eYX8KPygyM8jq7/XtIi0=',
+  '/js/article-navigation.js' => 'sha256-wCYJmMu4lFJ6xS8zGIftK+/iSWhmPjnRowWepgy5lUQ=',
   '/js/article-feedback.js' => 'sha256-AlC35S17jo/t3ripYSesMGbb0n4TCpeu1H+vT7O2UnM='
 }