fix(og): measure cover text with the font's real advance widths

An average glyph width under-measures caps-heavy names and over-measures
narrow ones, so a viewer-supplied file name could still clip off the fixed
canvas. Measure against the same font Satori is handed instead, matching
the library cover generator; the tests parse the font independently so the
assertion is not made with the estimator it is checking.

Author: waleedlatif1

apps/sim/lib/og/cover-image.test.tsx

@@ -1,21 +1,41 @@
 /**
  * @vitest-environment node
  */
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { parse as parseFont } from 'opentype.js'
 import { describe, expect, it } from 'vitest'
 import {
   COVER_MAX_TITLE_LINES,
   COVER_TITLE_BOX_WIDTH,
   createCoverOgImage,
   layoutCover,
-  measureCoverText,
 } from '@/lib/og/cover-image'
 
 const SUBTITLE_FONT_SIZE = 30
 
+/**
+ * The font is measured here independently of the renderer rather than through
+ * a helper it exports. Sharing one measurement function between the layout and
+ * its test makes the assertion circular: swap the renderer back to an
+ * average-glyph-width estimate and a shared helper agrees with it, so a title
+ * that really does run off the canvas still passes.
+ */
+const fontFile = readFileSync(join(process.cwd(), 'public', 'brand', 'fonts', 'Soehne-Kraftig.ttf'))
+const coverFont = parseFont(
+  fontFile.buffer.slice(
+    fontFile.byteOffset,
+    fontFile.byteOffset + fontFile.byteLength
+  ) as ArrayBuffer
+)
+const measure = (text: string, fontSize: number) => coverFont.getAdvanceWidth(text, fontSize)
+/** Undoes the U+00A0 packing so assertions can be written with ordinary spaces. */
+const plain = (text: string) => text.replace(/\u00a0/g, ' ')
+
 /**
  * Both inputs are chosen by whoever created the share — a file name and a
- * workspace/owner pair — so nothing upstream bounds their length. The canvas
- * is fixed, so the layout has to do the bounding.
+ * workspace/owner pair — so nothing upstream bounds their length or their
+ * glyphs. The canvas is fixed, so the layout has to do the bounding.
  */
 describe('cover OG layout', () => {
   const expectWithinCanvas = (title: string, subtitle?: string) => {
@@ -24,11 +44,11 @@ describe('cover OG layout', () => {
     expect(layout.lines.length).toBeGreaterThan(0)
     expect(layout.lines.length).toBeLessThanOrEqual(COVER_MAX_TITLE_LINES)
     for (const line of layout.lines) {
-      expect(measureCoverText(line, layout.fontSize)).toBeLessThanOrEqual(COVER_TITLE_BOX_WIDTH)
+      expect(measure(line, layout.fontSize)).toBeLessThanOrEqual(COVER_TITLE_BOX_WIDTH)
     }
     if (subtitle) {
       expect(layout.subtitle).not.toBeNull()
-      expect(measureCoverText(layout.subtitle as string, SUBTITLE_FONT_SIZE)).toBeLessThanOrEqual(
+      expect(measure(layout.subtitle as string, SUBTITLE_FONT_SIZE)).toBeLessThanOrEqual(
         COVER_TITLE_BOX_WIDTH
       )
     }
@@ -37,7 +57,7 @@ describe('cover OG layout', () => {
 
   it('sets a short title at the largest step on one line', () => {
     const layout = expectWithinCanvas('Protected file')
-    expect(layout.lines).toEqual(['Protected file'])
+    expect(layout.lines.map(plain)).toEqual(['Protected file'])
     expect(layout.fontSize).toBe(110)
     expect(layout.subtitle).toBeNull()
   })
@@ -48,12 +68,27 @@ describe('cover OG layout', () => {
   })
 
   it('steps the type down before it truncates', () => {
-    const long = 'Quarterly planning notes for the platform and infrastructure teams'
-    const layout = expectWithinCanvas(long)
+    const layout = expectWithinCanvas(
+      'Quarterly planning notes for the platform and infrastructure teams'
+    )
     expect(layout.fontSize).toBeLessThan(110)
     expect(layout.lines.join('')).not.toContain('…')
   })
 
+  /**
+   * The cases an average-glyph-width estimate gets wrong. Caps run well wider
+   * than the mean and glyphs the font has no coverage for run narrower, so an
+   * estimator misjudges both — in the caps direction, by letting the line
+   * render straight off the right edge.
+   */
+  it('keeps a caps-heavy title inside the box', () => {
+    expectWithinCanvas('QUARTERLY WORKFORCE PLANNING SUMMARY')
+  })
+
+  it('keeps a title of uncovered glyphs inside the box', () => {
+    expectWithinCanvas('四半期計画メモ・共有ファイル', '共有ワークスペース')
+  })
+
   it('truncates a title too long to fit even at the smallest step', () => {
     const layout = expectWithinCanvas(`${'unbroken'.repeat(60)}.pdf`)
     expect(layout.lines).toHaveLength(COVER_MAX_TITLE_LINES)
@@ -70,7 +105,20 @@ describe('cover OG layout', () => {
 
   it('leaves a caption that already fits intact', () => {
     const layout = expectWithinCanvas('report.pdf', 'Design · Shared by Someone')
-    expect(layout.subtitle).toBe('Design · Shared by Someone')
+    expect(plain(layout.subtitle as string)).toBe('Design · Shared by Someone')
+  })
+
+  /**
+   * Satori measures the first plain space in a text node at roughly double
+   * width, so every space that reaches it has to be a U+00A0 — and the layout
+   * has to pack lines with it already in place, or it would be measuring
+   * something other than what it renders.
+   */
+  it('packs lines and captions with non-breaking spaces', () => {
+    const layout = expectWithinCanvas('two words.pdf', 'Design · Shared by Someone')
+    expect(layout.lines[0]).toContain('\u00a0')
+    expect(layout.lines.join('')).not.toContain(' ')
+    expect(layout.subtitle).not.toContain(' ')
   })
 })
 

apps/sim/lib/og/cover-image.tsx

@@ -2,6 +2,7 @@ import { readFile } from 'node:fs/promises'
 import { join } from 'node:path'
 import type { CSSProperties } from 'react'
 import { ImageResponse } from 'next/og'
+import { parse as parseFont } from 'opentype.js'
 
 /**
  * The brandbook cover template, rendered on demand.
@@ -27,9 +28,6 @@ const MUTED_INK_COLOR = 'rgba(81, 81, 81, 0.72)'
 const TITLE_FONT_SIZES = [110, 96, 85] as const
 const SUBTITLE_FONT_SIZE = 30
 const ELLIPSIS = '\u2026'
-/** Average glyph width as a fraction of font size, for this weight/family — used to pack words into lines. */
-const CHAR_WIDTH_EM = 0.42
-
 /** Width the title and its caption are laid out into, leaving the right third of the card open. */
 export const COVER_TITLE_BOX_WIDTH = 1020
 /**
@@ -58,6 +56,28 @@ const titleFont = await readFile(
   join(process.cwd(), 'public', 'brand', 'fonts', 'Soehne-Kraftig.ttf')
 )
 
+/**
+ * Real advance widths for the font we actually render with.
+ *
+ * An average-glyph-width estimate is not good enough here. File names are
+ * whatever a viewer named them: a caps-heavy or wide-glyph name runs far past
+ * the average and clips off the fixed canvas, while a narrow one wraps early
+ * for no reason. Measuring against the same font Satori is handed makes the
+ * two agree by construction — including for glyphs Söhne has no coverage for
+ * (CJK, emoji), which measure and render at the same notdef advance because
+ * this is the only font in the `fonts` array.
+ *
+ * The library cover generator measures the same way and for the same reason
+ * (`scripts/generate-library-covers.tsx`); the docs route falls back to an
+ * estimate only because the edge runtime has no filesystem.
+ */
+const titleFontMetrics = parseFont(
+  titleFont.buffer.slice(
+    titleFont.byteOffset,
+    titleFont.byteOffset + titleFont.byteLength
+  ) as ArrayBuffer
+)
+
 const CONTAINER_STYLE = {
   height: '100%',
   width: '100%',
@@ -97,41 +117,28 @@ const SUBTITLE_STYLE = {
   lineHeight: 1.2,
 } satisfies CSSProperties
 
-function estimateWidthEm(text: string): number {
-  return text.length * CHAR_WIDTH_EM
-}
-
-/** Estimated rendered width of `text` in pixels, at `fontSize`, in the cover typeface. */
-export function measureCoverText(text: string, fontSize: number): number {
-  return estimateWidthEm(text) * fontSize
+/** Whether `text` fits the title box at `fontSize`, by the font's real advance widths. */
+function fits(text: string, fontSize: number): boolean {
+  return titleFontMetrics.getAdvanceWidth(text, fontSize) <= COVER_TITLE_BOX_WIDTH
 }
 
-/** Trims `text` from the right until it plus an ellipsis fits `maxWidthEm`. */
-function withEllipsis(text: string, maxWidthEm: number): string {
+/** Trims `text` from the right until it plus an ellipsis fits the title box at `fontSize`. */
+function withEllipsis(text: string, fontSize: number): string {
   let kept = text
-  while (kept && estimateWidthEm(kept + ELLIPSIS) > maxWidthEm) {
+  while (kept && !fits(kept + ELLIPSIS, fontSize)) {
     kept = kept.slice(0, -1)
   }
   return kept + ELLIPSIS
 }
 
-/**
- * Splits a single word wider than `maxWidthEm` into chunks that each fit.
- *
- * Hyphens are tried first because that is where a reader expects a compound to
- * break, and the trailing hyphen stays on the upper line. A chunk with no
- * usable hyphen falls back to a character-level split, which only a
- * pathological token reaches — and file names, the titles this renders,
- * supply plenty of them.
- */
-function splitOversizedWord(word: string, maxWidthEm: number): string[] {
+/** Greedily packs `pieces` into chunks that each fit the title box at `fontSize`. */
+function packChunks(pieces: string[], fontSize: number): string[] {
   const chunks: string[] = []
   let chunk = ''
 
-  const pieces = word.split(/(?<=-)/).flatMap((piece) => (piece.length > 1 ? [piece] : [...piece]))
   for (const piece of pieces) {
     const candidate = chunk + piece
-    if (estimateWidthEm(candidate) > maxWidthEm && chunk) {
+    if (!fits(candidate, fontSize) && chunk) {
       chunks.push(chunk)
       chunk = piece
     } else {
@@ -140,28 +147,23 @@ function splitOversizedWord(word: string, maxWidthEm: number): string[] {
   }
   if (chunk) chunks.push(chunk)
 
-  return chunks.flatMap((entry) =>
-    estimateWidthEm(entry) > maxWidthEm ? splitByCharacter(entry, maxWidthEm) : [entry]
-  )
+  return chunks
 }
 
-/** Last-resort break for a run with no hyphen to break on — a long URL, an unbroken identifier. */
-function splitByCharacter(word: string, maxWidthEm: number): string[] {
-  const chunks: string[] = []
-  let chunk = ''
-
-  for (const char of word) {
-    const candidate = chunk + char
-    if (estimateWidthEm(candidate) > maxWidthEm && chunk) {
-      chunks.push(chunk)
-      chunk = char
-    } else {
-      chunk = candidate
-    }
-  }
-  if (chunk) chunks.push(chunk)
+/**
+ * Splits a single word wider than the title box into chunks that each fit.
+ *
+ * Hyphens are tried first because that is where a reader expects a compound to
+ * break, and the trailing hyphen stays on the upper line. A chunk with no
+ * usable hyphen falls back to a character-level split — which file names, the
+ * titles this renders, reach constantly.
+ */
+function splitOversizedWord(word: string, fontSize: number): string[] {
+  const afterHyphens = packChunks(word.split(/(?<=-)/), fontSize)
 
-  return chunks
+  return afterHyphens.flatMap((chunk) =>
+    fits(chunk, fontSize) ? [chunk] : packChunks([...chunk], fontSize)
+  )
 }
 
 /**
@@ -170,32 +172,32 @@ function splitByCharacter(word: string, maxWidthEm: number): string[] {
  * roughly double width — a non-breaking space measures correctly and reads
  * identically at these sizes, so it sidesteps the bug rather than fighting
  * Satori's own line-wrapping, which is disabled here since lines arrive
- * pre-split.
+ * pre-split. Title lines are packed with the U+00A0 already in them so that
+ * what is measured is exactly what is rendered.
  */
 function withHardSpaces(text: string): string {
   return text.replace(/ /g, '\u00a0')
 }
 
 /** Greedily packs words into lines that fit `COVER_TITLE_BOX_WIDTH` at `fontSize`. */
 function wrapTitleLines(title: string, fontSize: number): string[] {
-  const maxWidthEm = COVER_TITLE_BOX_WIDTH / fontSize
   const lines: string[] = []
   let current = ''
 
   for (const word of title.split(' ')) {
-    if (estimateWidthEm(word) > maxWidthEm) {
+    if (!fits(word, fontSize)) {
       if (current) {
         lines.push(current)
         current = ''
       }
-      const chunks = splitOversizedWord(word, maxWidthEm)
+      const chunks = splitOversizedWord(word, fontSize)
       lines.push(...chunks.slice(0, -1))
       current = chunks[chunks.length - 1] ?? ''
       continue
     }
 
-    const candidate = current ? `${current} ${word}` : word
-    if (estimateWidthEm(candidate) > maxWidthEm && current) {
+    const candidate = current ? `${current}\u00a0${word}` : word
+    if (!fits(candidate, fontSize) && current) {
       lines.push(current)
       current = word
     } else {
@@ -204,7 +206,7 @@ function wrapTitleLines(title: string, fontSize: number): string[] {
   }
   if (current) lines.push(current)
 
-  return lines.map(withHardSpaces)
+  return lines
 }
 
 /** "sim" wordmark, no icon — the brandbook wordmark geometry the docs navbar and library covers use. */
@@ -276,9 +278,8 @@ export function layoutCover({ title, subtitle }: CoverOgImageProps): CoverLayout
   }
 
   if (lines.length > COVER_MAX_TITLE_LINES) {
-    const maxWidthEm = COVER_TITLE_BOX_WIDTH / smallest
     lines = lines.slice(0, COVER_MAX_TITLE_LINES)
-    lines[lines.length - 1] = withEllipsis(lines[lines.length - 1], maxWidthEm)
+    lines[lines.length - 1] = withEllipsis(lines[lines.length - 1], smallest)
   }
 
   return { fontSize, lines, subtitle: subtitle ? fitCaption(subtitle) : null }
@@ -290,9 +291,9 @@ export function layoutCover({ title, subtitle }: CoverOgImageProps): CoverLayout
  * the right edge instead of wrapping.
  */
 function fitCaption(subtitle: string): string {
-  const maxWidthEm = COVER_TITLE_BOX_WIDTH / SUBTITLE_FONT_SIZE
-  const fitted =
-    estimateWidthEm(subtitle) <= maxWidthEm ? subtitle : withEllipsis(subtitle, maxWidthEm)
+  const fitted = fits(subtitle, SUBTITLE_FONT_SIZE)
+    ? subtitle
+    : withEllipsis(subtitle, SUBTITLE_FONT_SIZE)
   return withHardSpaces(fitted)
 }
 

apps/sim/package.json

@@ -208,6 +208,7 @@
     "nuqs": "2.8.9",
     "officeparser": "^5.2.0",
     "openai": "7.0.0",
+    "opentype.js": "1.3.4",
     "pdf-lib": "1.17.1",
     "pdfjs-dist": "5.4.296",
     "postgres": "^3.4.5",
@@ -264,6 +265,7 @@
     "@types/mssql": "12.3.0",
     "@types/node": "24.2.1",
     "@types/nodemailer": "8.0.1",
+    "@types/opentype.js": "1.3.10",
     "@types/prismjs": "^1.26.5",
     "@types/react": "^19",
     "@types/react-dom": "^19",