always-fit-resume: The Binary Search for Perfect Typography
How a minimalist React app uses DOM-free measurement and high-speed algorithms to solve the most frustrating problem in document design.
- always-fit-resume treats font size as a dependent variable calculated by a two-pass binary search algorithm.
- The application bypasses layout thrashing by utilizing pretext for DOM-free Canvas text measurement.
- Native browser print APIs and CSS transforms are hijacked to deliver zero-dependency, pixel-perfect PDF generation.
Typography as a Dependent Variable
Most document editors force the user to manually tweak font sizes, line heights, and margins to get text to fit perfectly on one page. The always-fit-resume project flips the paradigm entirely. The user provides the raw content, and the application mathematically deduces the exact typography needed to fill a single A4 page. It is a brilliant engineering solution to a universally annoying design problem.
The mechanism driving this is a two-pass binary search algorithm. Instead of guessing layout properties, the system treats font size as a dependent variable. Pass one uses a binary search to find the maximum font size while holding the line height at a fixed minimum. Pass two locks that determined font size and performs a second binary search to find the maximum line height that still allows the content to fit the page.
Always Fit Resume A resume builder that auto-scales font size and line spacing to always fit on one A4 page.
Escaping the DOM
Running a binary search loop on layout properties introduces a massive performance bottleneck. Measuring text height typically requires rendering it to the Document Object Model, waiting for the browser to reflow, and then reading the offset height. Doing this hundreds of times in rapid succession would freeze the browser entirely.
To solve this, the application utilizes the pretext library for DOM-free text measurement. By leveraging Canvas API arithmetic, the system performs a virtual layout. It calculates the exact dimensions of the text strings without ever touching the DOM, allowing hundreds of layout calculations to execute in milliseconds.
The preview updates instantly â no DOM measurement, no flickering, no layout shifts.
The Zero-Dependency Print Hack
Getting perfectly calculated virtual layout into a physical PDF is notoriously difficult. Standard practice involves heavy client-side libraries or server-side rendering engines. always-fit-resume avoids all of this by hijacking the native browser print dialog.
The application temporarily modifies the DOM to hide the editor interface. It then injects strict CSS print media rules and calculates a transform scale to map its virtual 794-pixel wide canvas directly onto a physical A4 sheet. This zero-dependency hack ensures crisp, vector-quality text output without bloating the application bundle.
The Cost of Absolute Consistency
This opinionated design demands a specific set of trade-offs. You lose the ability to arbitrarily make one specific header larger or strictly control page breaks for multi-page documents. In return, you gain an absolute guarantee of a perfectly balanced, professional layout with zero manual tweaking.
| Feature | always-fit-resume | Reactive Resume | Microsoft Word |
|---|---|---|---|
| Layout Engine | Algorithmic (Binary Search) | CSS / DOM Rendering | Manual Adjustment |
| PDF Generation | Native Browser Print | Client-side Library | Proprietary Engine |
| Customization | Strict / Minimal | High / Themable | Absolute |
| Target Output | Strictly 1 A4 Page | Multi-page Supported | Multi-page Supported |