Hanging Punctuation in CSS3

2011-07-24 18:25

In the 1980s, I worked for a company in the business of text processing. This was Texet Cor­por­ation — it lived from 1982 to 1987, and it is well-nigh impossible to find any reference to it on the Internet now. (LinkedIn has an ex-employees group.) Texet made a hardware-software system — later software only — aimed at professional doc­u­ment production departments in cor­por­a­tions. For a time I was in charge of the wish­list and require­ments for future versions of the pro­duct.

“Hanging punctuation” was a feature that had been on the list from the beginning of the com­pany, but it was never deemed important enough to bother speccing out, let alone implementing. One quote I read at the time somewhere in the industry (maybe Frank Romano?): “Two people in the world care about hanging punctuation, and both of them work at the Poetry Foundation!”

Hanging punctuation is a style of setting type in which certain punctuation marks fall outside of (to the left or right of) the margins in fully justified text. The theory behind it is that punctuation marks, being so small and taking up so little of the cap height as they do, break the visual line of justification. For this reason full cap-height marks such as ! or ? are not commonly hung.

This typographic nicety falls so far outside the capabilities of Microsoft Word that you can’t even see it from there. Adobe InDesign has such a feature; they call it Optical Margin Alignment. Here is a screenshot from InDesign CS3:

InDesign CS3 hanging punctuation, a.k.a Optical Margin Alignment
hang INDD

CSS3 status

Hanging punctuation actually shows up, for a wonder, in the CSS3 specification — see this w3.org page. The syntax is:

hanging-punctuation: none | [ first || [ force-end | allow-end ] ];

It is marked as “optional” in the spec, and for that reason support for it has not been implemented in any browser. In fact a note in the spec says that the feature is “at risk and may be cut from the spec during its CR period if there are no (correct) implementations.” Just like we used to do at Texet.

As rendered in this browser with hanging-punctuation: first force-end

This is text with some “quotes” in it at “seemingly random” places. I’m not sure, but I “believe” we have to use the &[lr][ds]quo; forms in order to trigger the hanging behavior. I have “done” so here. I “highly” doubt that this punctuation will “hang in” any browser “in” which I try it. Browser “makers” have their “work cut out” for them if “they” wish to im­plement even the “most commonly” requested features in CSS3. Hanging punctuation “cannot” be all that “frequently” mentioned in this context. Another question is: what marks will hang? The answer should be the list below.

How it might look if browsers supported hanging punctuation

Cleaning up the specificaiton of what should be hung

In the spec, the list of glyphs that can be hung outside the margins is given as “Unicode categories Ps, Pf, Pi”:

Pi (Punctuation, initial)    «   ‘   “   ‹  

Pf (Punctation, final)    »   ’   ”   ›  

Ps (Punctuation, open)    (   [   {   ༺   ༼   ᚛   ⁅   ⁽   ₍   〈   ⎴   ❨   ❪   ❬   ❮   ❰   ❲   ❴   ⟦   ⟨   ⟪   ⦃   ⦅   ⦇   ⦉   ⦋   ⦍   ⦏   ⦑   ⦓   ⦕   ⦗   ⧘   ⧚   ⧼   〈   《   「   『   【   〔   〖   〘   〚   〝   ﴾   ︵   ︷   ︹   ︻   ︽   ︿   ﹁   ﹃   ﹇   ﹙   ﹛   ﹝   (   [   {   ⦅   「

The list is wholly inadequate. It suggests that not everyone involved with the spec was versed in the history of typo­graphy — or even familiar with the basic rationale behind hanging punctuation. Pi and Pf are opening and closing quotation marks — this is a start. But Ps are opening brackets, braces, and the like; such characters should not be included in the list of punc­tu­a­tion to be hung, as they are mostly full cap-height. The corresponding list of closing punctuation match­ing Ps, namely Pe (“Punctuation, close”) is not even mentioned in the spec.

And the spec entirely omits two other principal classes of characters which are traditionally hung at the right margin: dashes (PD, “Punctuation, dash”) and a subset of Po (“Punctuation, other”) en­com­passing period, comma, colon, and semicolon.

The spec does include a note: “Issue: Should other characters be included?” Yes. The list below is probably sufficient for Western languages:

Pi (Punctuation, initial)      «   ‘   “   ‹
Pf (Punctation, final)   »   ’   ”   ›
PD (Punctation, dash)   -   –   —
Subset of Po (Punctation, other)   .   ,   :   ;

Meta specificaiton

Better would be a way to specify separately the lists of glyphs allowed to hang on the left and the right. Such a mechanism raises an interesting point: I don’t know of any facility now in HTML / CSS that allows redefinition of layout behavior. This idea seems to be meta to CSS.