changeset

The OG/social preview image rendered the page title at a fixed text-8xl
size with leading-none, so long titles overflowed the fixed 630px image
and were cropped, and titles over 64 chars were hard-truncated with an
ellipsis. Scale the title font size down as the title grows so it wraps
across a few lines and fits, and raise the truncation cap so full titles
are shown.

RND-11313

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DQmPMoCedddS7JXBJYLk6v

.changeset/rnd-11313-ogimage-long-titles.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Prevent long page titles from being cut off in the auto-generated social/link preview image by wrapping and scaling the title font size to fit.

packages/gitbook/src/routes/ogimage.tsx

@@ -20,6 +20,10 @@ import { getExtension } from '@/lib/paths';
 import { getCacheTag } from '@gitbook/cache-tags';
 import { SiteDefaultIcon } from './icon';
 
+// Upper bound on the rendered title length. Kept generous so full titles are
+// shown (the font scales down to fit); only pathological titles get clipped.
+const MAX_TITLE_LENGTH = 128;
+
 /**
  * Render the OpenGraph image for a site content.
  */
@@ -40,8 +44,8 @@ export async function serveOGImage(baseContext: GitBookSiteContext, params: Page
 
     // Compute all text to load only the necessary fonts
     const pageTitle = page
-        ? page.title.length > 64
-            ? `${page.title.slice(0, 64)}...`
+        ? page.title.length > MAX_TITLE_LENGTH
+            ? `${page.title.slice(0, MAX_TITLE_LENGTH)}...`
             : page.title
         : 'Not found';
     const pageDescription =
@@ -199,7 +203,8 @@ export async function serveOGImage(baseContext: GitBookSiteContext, params: Page
             {/* Title and description */}
             <div tw="flex flex-col">
                 <h1
-                    tw={`text-8xl my-0 tracking-tight leading-none text-left text-[${colors.title}] font-bold`}
+                    tw={`my-0 tracking-tight leading-none text-left text-[${colors.title}] font-bold`}
+                    style={{ fontSize: getTitleFontSize(pageTitle.length) }}
                 >
                     {transformText(pageTitle)}
                 </h1>
@@ -346,6 +351,24 @@ function transformText(text: string) {
     return '';
 }
 
+/**
+ * Scale the title font size down as the title gets longer, so long titles wrap
+ * across a few lines and stay within the fixed-height image instead of being
+ * cropped. Sizes mirror Tailwind's text-8xl down to text-5xl.
+ */
+function getTitleFontSize(length: number): number {
+    if (length <= 32) {
+        return 96;
+    }
+    if (length <= 64) {
+        return 72;
+    }
+    if (length <= 96) {
+        return 60;
+    }
+    return 48;
+}
+
 type Theme = CustomizationDefaultThemeMode.Dark | CustomizationDefaultThemeMode.Light;
 
 function getTheme(customization: GitBookSiteContext['customization']): Theme {