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.

6 min read • View on GitHub • More from vladartym

A massive mechanical scale perfectly balancing a dense block of raw text on one side and interlocking metal typography blocks on the other. This illustrates the core thesis of treating typography as a dependent variable of content volume.
When content dictates form, typography becomes a mathematical certainty.
Key Takeaways

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.

Project README, Repository documentation · vladartym/always-fit-resume README

The layout engine isolates the perfect font size in logarithmic time.

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.

Project README, Repository documentation · vladartym/always-fit-resume README
A close-up of a tangled web of thick ropes representing the DOM tree. Floating gracefully above the ropes is a pristine metal caliper taking a precise measurement of a single letter block without touching the tangled ropes below. This illustrates the abstraction of pretext and DOM-free measurement.
Virtual Canvas layout completely bypasses the browser's expensive reflow cycle.

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.

A classic mechanical printing press where the pressing mechanism is shaped like giant rigid CSS curly brackets. They are stamping a perfectly crisp scaled-down document onto an oversized piece of paper. This visualizes the concept of using CSS transforms to force a web layout into a strict physical medium.
CSS transforms and media queries force flexible web layouts into strict physical constraints.

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.

Featurealways-fit-resumeReactive ResumeMicrosoft Word
Layout EngineAlgorithmic (Binary Search)CSS / DOM RenderingManual Adjustment
PDF GenerationNative Browser PrintClient-side LibraryProprietary Engine
CustomizationStrict / MinimalHigh / ThemableAbsolute
Target OutputStrictly 1 A4 PageMulti-page SupportedMulti-page Supported