Scale certificate name to fit within available space (#2687)

* Scale name on certificate to fit within available space

* Clean up

* Move to utils

* Named print scaling constant

Author: jonkafton

frontends/main/src/app/certificate/[certificateType]/[uuid]/pdf/route.test.tsx

@@ -0,0 +1,95 @@
+import { pxToPt, getNameStyles } from "./utils"
+
+jest.mock("@react-pdf/renderer", () => ({
+  Document: "Document",
+  Page: "Page",
+  View: "View",
+  Text: "Text",
+  Svg: "Svg",
+  G: "G",
+  Path: "Path",
+  Font: {
+    register: jest.fn(),
+    registerHyphenationCallback: jest.fn(),
+  },
+  Image: "Image",
+  pdf: jest.fn(),
+}))
+
+describe("Certificate PDF", () => {
+  describe("pxToPt", () => {
+    it("converts pixels to points correctly", () => {
+      expect(pxToPt(96)).toBeCloseTo(57.6) // 96 * (72/96) * 0.8
+      expect(pxToPt(52)).toBeCloseTo(31.2) // 52 * 0.75 * 0.8
+      expect(pxToPt(206)).toBeCloseTo(123.6)
+      expect(pxToPt(950)).toBeCloseTo(570)
+    })
+  })
+
+  describe("Name scaling to ensure page fit", () => {
+    const baseFontSize = pxToPt(52)
+    const baselineTop = pxToPt(206)
+
+    it("keeps short names <= 23 chars at full size", () => {
+      const shortName = "Wolfgang Amadeus Mozart"
+      const styles = getNameStyles(shortName)
+
+      expect(styles.fontSize).toBeCloseTo(baseFontSize)
+      expect(styles.top).toBeCloseTo(baselineTop)
+    })
+
+    it("scales medium-length names <= 33 chars proportionally", () => {
+      const mediumName = "Sir Bartholomew Fizzlewhisk III"
+      const styles = getNameStyles(mediumName)
+
+      expect(styles.fontSize).toBeLessThan(baseFontSize)
+      expect(styles.fontSize).toBeGreaterThan(baseFontSize * 0.35)
+
+      expect(styles.top).toBeGreaterThan(baselineTop)
+    })
+
+    it("scales longer names <= 47 chars more aggressively", () => {
+      const longName = "Dr. Maximilian Thunderbolt von Schnitzelhausen"
+      const styles = getNameStyles(longName)
+
+      expect(styles.fontSize).toBeLessThan(baseFontSize)
+      expect(styles.top).toBeGreaterThan(baselineTop)
+
+      const mediumName = "Sir Bartholomew Fizzlewhisk III"
+      const mediumStyles = getNameStyles(mediumName)
+      expect(styles.fontSize).toBeLessThan(mediumStyles.fontSize)
+    })
+
+    it("applies minimum scale factor of 35% for very long names <= 112 chars", () => {
+      const veryLongName =
+        "His Excellency Count Maximilian Cornelius Archibald Pumpernickel-Wigglesworth-Thunderbolt-Whiskerdoodle III"
+      const styles = getNameStyles(veryLongName)
+
+      const minFontSize = baseFontSize * 0.35
+      expect(styles.fontSize).toBeCloseTo(minFontSize)
+
+      const maxOffset = baseFontSize - minFontSize
+      expect(styles.top).toBeCloseTo(baselineTop + maxOffset)
+    })
+
+    it("maintains baseline alignment when scaling names", () => {
+      const names = [
+        "Wolfgang Amadeus Mozart",
+        "Sir Bartholomew Fizzlewhisk III",
+        "Princess Anastasia Beauregard-Winterstone",
+        "Dr. Maximilian Thunderbolt von Schnitzelhausen",
+        "Captain Cornelius Pumpernickel-Whiskerdoodle Jones",
+        "Lady Penelope Wigglesworth-Featherstone de la Fontaine",
+        "Professor Archibald Bartholomew Higginbotham-Waffletop IV",
+      ]
+
+      names.forEach((name) => {
+        const styles = getNameStyles(name)
+
+        // The baseline position should be consistent: baseline = top + fontSize
+        const baseline = styles.top + styles.fontSize
+        expect(baseline).toBeCloseTo(baselineTop + baseFontSize, 1)
+      })
+    })
+  })
+})

frontends/main/src/app/certificate/[certificateType]/[uuid]/pdf/route.tsx

@@ -24,14 +24,7 @@ import {
   pdf,
 } from "@react-pdf/renderer"
 import { redirect } from "next/navigation"
-
-/* Enables use of the CertificatePage pixel units styles
-  - Browsers print at 96 dpi, PDFs default to 72 dpi
-  - Scaling factor of 0.8 emulates browser print scaling and better reflect the screen design
-*/
-const pxToPt = (px: number): number => {
-  return px * (72 / 96) * 0.8
-}
+import { pxToPt, getNameStyles } from "./utils"
 
 // https://use.typekit.net/lbk1xay.css
 Font.register({
@@ -309,8 +302,9 @@ const CertificateDoc = ({
               style={{
                 color: colors.red,
                 ...typography.h1,
+                fontSize: getNameStyles(userName).fontSize,
                 position: "absolute",
-                top: pxToPt(206),
+                top: getNameStyles(userName).top,
                 left: pxToPt(46),
               }}
             >

frontends/main/src/app/certificate/[certificateType]/[uuid]/pdf/utils.ts

@@ -0,0 +1,39 @@
+/* Enables use of the CertificatePage pixel units styles
+  - Browsers print at 96 dpi, PDFs default to 72 dpi
+  - Scaling factor of 0.8 emulates browser print scaling and better reflect the screen design
+*/
+const PRINT_SCALING_FACTOR = 0.8
+
+export const pxToPt = (px: number): number => {
+  return px * (72 / 96) * PRINT_SCALING_FACTOR
+}
+
+/**
+ * Calculate font size and top position for user name based on estimated text width
+ * to ensure long names fit on the certificate while maintaining baseline alignment
+ */
+export const getNameStyles = (
+  name: string,
+): { fontSize: number; top: number } => {
+  const baselineTop = pxToPt(206) // Original top position for full-size name
+  const baseFontSize = pxToPt(52) // h1 font size
+  const maxWidth = pxToPt(950) // Maximum available width
+
+  // For Neue Haas Grotesk at 52px, approximate average char width is ~60% of font size
+  const avgCharWidth = baseFontSize * 0.6
+
+  const estimatedWidth = name.length * avgCharWidth
+
+  let scaleFactor = 1.0
+  if (estimatedWidth > maxWidth) {
+    scaleFactor = Math.max(0.35, maxWidth / estimatedWidth)
+  }
+
+  const fontSize = baseFontSize * scaleFactor
+
+  // Keep the baseline in the same position
+  const fontSizeDiff = baseFontSize - fontSize
+  const top = baselineTop + fontSizeDiff
+
+  return { fontSize, top }
+}