The Scribe's First Un-hyphenated Line: On the Frantic River of a Perfectly Justified Block Without a Soft Break
Imagine for a moment a medieval scribe, hunched over a vellum manuscript. Their task is to copy a sacred text, and they have reached the edge of the parchment. The word they are about to write is too long for the remaining space. A skilled scribe has a tool for this: the hyphen. A quick dash, a fragment of the word on one line, the remainder on the next. The text remains readable, the right margin remains as straight as the edge of a ruler. Now, imagine that scribe, forbidden from using hyphens. The result? Either a ragged, uneven right edge, or, if forced into justification, a frantic scrambling of letters, stretched to absurd widths or crushed into an illegible block. The line becomes a river of white space, winding through the text, distracting from its meaning.
This ancient problem is alive and well in our modern craft. We call it text-align: justify;. On the surface, it promises a clean, formal, newspaper-column neatness. But without the scribe’s proverbial hyphen—without the control over how words break—it can become one of the most subtle yet jarring performance issues a reader can feel. It’s not a metric that will crash a Lighthouse report or spike a Core Web Vital, but it is a direct assault on one of our primary duties: to present words in a way that can be comfortably consumed.
Performance isn't just about how quickly pixels paint; it’s about the cognitive load we impose after they do. A block of fully justified text, rendered by a browser without adequate soft break opportunities (defined by the hyphens property and supported language dictionaries, or the gentle suggestion of a <wbr> tag), forces the layout engine into a panic. It must meet its rigid dimensional constraints, so it takes the available whitespace and distributes it between words, and then between letters. The result is a text block that looks orderly from a distance but, up close, possesses a frantic, uneven rhythm. Some lines are so loose the words seem to float apart; others are so tight they feel compressed. The reader’s eye, seeking a smooth flow, instead stumbles over these inconsistent gaps.
The Quiet Hum of Intentional Rag
There is a different path, one that embraces a different kind of performance—the performance of reading. It’s the path of the intentional rag: a left-aligned or right-aligned block where the ragged edge is not a flaw but a feature. This rag follows a natural rhythm, breaking where words naturally break. It allows the browser’s typesetting engine to work with the text, not against it. The cognitive load on the reader drops significantly. The page may not have the artificial perfection of a justified block, but it gains a quiet, organic hum of readability.
When justification is a true requirement, the modern scribe’s toolbox does offer solutions. The hyphens: auto; property, coupled with a defined lang attribute, allows the browser to insert breaks intelligently. The text-justify property provides finer control over the spacing algorithm. These are our hyphens. They are the small, considerate concessions to the reality of variable container widths and human language. To craft a block of text with justification but without these aids is to build a beautiful facade with a crumbling foundation. The page may load in a thousand milliseconds, but if the first thing a visitor does is squint at a river of whitespace winding through your paragraph, a crucial part of the experience has already faltered. We must tend to the rhythm of the words themselves, for that is the true heartbeat of the web.
Notes & further reading
A few pages I came back to while writing this:
- The Archivist's First Un-indexed Folio: On the Silent Weight of a Perfectly Optimized Image Without a Descriptive `alt`
- The Tailor's First Un-basted Seam: On the Precise Fit of a Perfectly Positioned Element Without a `contain` Property
- The Baker's First Un-proved Dough: On the Hollow Core of a Perfectly Pre-rendered Summer Page