The column and the contour
For most of the history of the printed page, type has set around obstacles. The illuminated initial — thegiant ‘C’ that opened a chapter, painted in lapis or burnished in gold — required the compositor to thinkabout more than where the line broke. He thought about which line broke where. He thought abouthow the column narrowed for the first three rows and widened again for the fourth. He thought abouthow the descender of the letter on the right caught the rising counter on the left. The page was a layoutproblem. The wrap was the answer.
The web has never had quite this. CSS shape-outside ships in browsers, but it shapes the wrap withouttelling the line-breaker what shape to wrap to. The two systems sit beside each other and disagree. Theresult, when you see it on a webpage, is text wrapped to a rectangle that pretends to be a curve, or acurve that the lines do not quite follow.
What follows on this page is what happens when both systems get the same data.
The example below sets prose around a large lowercase letter. The silhouette is extracted from the fontfile at build time. The per-row width of that silhouette is fed both to chenglou’s pretext line-breaker andto the CSS shape-outside. They agree on the contour, row by row.
Typography begins with the letter. Not the word, not the sentence — thesingle glyph, drawn from ink and intention, that starts the chain of meaning.Every typeface is an argument about what a letter should feel like: how thebowl curves, where the stress falls, whether the serif tapers or bites.Fraunces makes one argument with particular conviction. Its optical-sizeaxis trades the crisper construction of a display face for warmth at readingsizes, and its lowercase a is a fine demonstration of that warmth: an enclosedcounter that breathes, a slightly forward stress that moves the eye along. When prose wraps aroundsuch a letter, the reader notices the shape before understanding why. That is the geometry of typespeaking before language does.
The other obstacle the column has always set around is the picture. Magazine spreads worked this wayfor most of the twentieth century: a portrait floated in the column, the text wrapping its shoulder, thenegative space holding the reader’s eye on the figure rather than against the rectangle of the image. Theweb inherited the column and the picture but lost the wrap.
The example below uses a photograph silhouette. The image’s alpha channel describes the contour.The build extracts a per-row width array. Pretext and shape-outside again receive the same data.
The photograph is the oldestcounterargument to the typeset column. Text has been flowing aroundimages since illustrated manuscripts; the medieval scribe left agutter of vellum beside the miniature and let the copy fill it. Whatchanged with digital layout is the precision: where the scribeestimated, the software samples. Every row of the image yields arightmost pixel, a horizontal limit that the line of text must respect.The prose wraps not around a rectangle but around theactual silhouette of the subject — a shoulder, a curve, ahand held just so. The negative space is no longer coin-cidental; it is the shape of the content itself, madelegible by typography that follows it.
Both examples come from the same engine. The line-breaker that sets these paragraphs around theirsilhouettes is the same one that hyphenates “anthropomorphically” cleanly. It holds emphasis andstrong weight in the rich-inline path. It wraps an anchor link across a break without losing the href.There is no special path for the special features.
Print figured this out long before the web took an interest. What changes is whose job the wrap is. Inthe metal-type era it was the compositor’s. In the digital print era it was the layout artist’s. On the web,until recently, it was nobody’s. Build-time changes that — the page receives a static file in which everyline already knows where it ends.