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 — the singleglyph, drawn from ink and intention, that starts the chain ofmeaning. Every typeface is an argument about what a lettershould feel like: how the bowl curves, where the stress falls,whether the serif tapers or bites. Fraunces makes one argumentwith particular conviction. Its optical-size axis trades the crisperconstruction of a display face for warmth at reading sizes, and its double-storey lowercase g is a fine demonstration of that warmth: twoenclosed counters connected by a slender link, a small earlifting off the right, a descender that turns the eye downwardwithout abandoning the line. When prose wraps around such aletter, the reader notices the shape before understanding why. That isthe geometry of type speaking 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 oldest counterargument to the typesetcolumn. Text has been flowing around images sinceillustrated manuscripts; the medieval scribe left a gutterof vellum beside the miniature and let the copy fill it.What changed with digital layout is the precision: wherethe scribe estimated, the software samples. Every row ofthe image yields a rightmost pixel, a horizontal limitthat the line of text must respect. The prosewraps not around a rectangle but around theactual silhouette of the subject — a shoulder, acurve, a hand held just so. The negative space isno longer coincidental; it is the shape of the con-tent itself, made legible by typography thattraces 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. Where the engine still falls short — packed-graphemebreaks at rare words — the upstream fix (pretext commit f06fef0, awaiting npm release) retires theworkaround.
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.