Scale certificate name to fit within available space

[jonkafton]

What are the relevant tickets?

Closes https://github.com/mitodl/hq/issues/8971

Description (What does it do?)

Certificate PDF page layouts are constrained by height and elements are positions absolute.

We can not wrap longer names to multiple lines without changing the layout to accommodate.

This change makes an estimation on the width of the rendered name based on character count and scales the font size to ensure it fits on one line.

Screenshots (if appropriate):

Normal case:

Scaling starts around 30+ characters:

Failure point around 98 characters (max scale down is 35%). The name below has 107 chars:

The MIT IS&T Data Warehouse FULL_NAME field can hold up to 90 characters: https://web.mit.edu/warehouse/metadata/fields/student_directory_full.html

From Sonnet 4.5:

Available data points

1. General population:

   • Average full name: ~13–14 characters
   • 95% of names: ≤25 characters (older study, US-focused)

2. MIT context:

   • Maximum: 90 characters (system limit)
   • International student body likely skews longer than general US averages

Realistic estimates for MIT

Given MIT's international population, a reasonable estimate:

• 90th percentile: ~40–50 characters
• 95th percentile: ~55–65 characters
• 99th percentile: ~70–80 characters

How can this be tested?

• If you have mitxonline running locally and certificates set up, navigate to http://open.odl.local:8062/certificate/<"course"|"program">/<certificate_id>/pdf

• If not, grab a response from e.g. https://api.rc.mitxonline.mit.edu/api/v2/course_certificates/8a2ebafe-40b3-4178-8860-ea9bd063f3cd/ and return it in the certificateQueries.courseCertificatesRetrieve() hook queryFn and load http://open.odl.local:8062/certificate/course/8a2ebafe-40b3-4178-8860-ea9bd063f3cd/pdf.

• Override the username with various value lengths and confirm the certificate displays as expected.

[ahtesham-quraish]

You can clarify the intent of the scaling factor 0.8 (which is fine) by naming it:

const PRINT_SCALING_FACTOR = 0.8;
return px * (72 / 96) * PRINT_SCALING_FACTOR;

That way, future devs instantly know what it represents without reading the comment block.

[ahtesham-quraish]

If name is an empty string, estimatedWidth is 0, and scaleFactor stays 1.0. That’s fine — but you could explicitly handle it for clarity:

if (!name.trim()) return { fontSize: baseFontSize, top: baselineTop };

right?

[jonkafton]

We'll always have a name - not much point in setting a font size for printing nothing in any case.

[ahtesham-quraish]

Suggestion:
Sometimes names are right at the edge of the maxWidth, so a tiny buffer (e.g. 95% of max width) ensures better visual balance: (I will reproduce it in local testing)

const effectiveMaxWidth = maxWidth * 0.95;
if (estimatedWidth > effectiveMaxWidth) {
  scaleFactor = Math.max(0.35, effectiveMaxWidth / estimatedWidth);
}

[jonkafton]

The max width already leaves some whitespace before the text overlays the badge, so we can render right up to it.