Yesterday I had the pleasure of teaching a class on typography for the product design students at the Boston Startup School. In the act of preparing my material I revisited a lot of the techniques I’d learned as a student and then reluctantly set aside as the limitations of type on the web became apparent to me. After looking into some of these techniques again I discovered that they are creeping into the specifications, including a method known as hanging punctuation.

What Is Hanging Punctuation?

When a typographer hangs their punctuation they are outdenting the lines in a block of text that start or end with certain punctuation marks, usually quotation marks and hyphens. This forms a more even visual edge when compared to the distracting dents created in a text block without hung punctuation.

The technique is a great way to improve the readability and visual appeal of a block of text, but unfortunately it can’t be accomplished on anything but the first line of a paragraph by using current CSS techniques.

So, What’s The Point Of This Article?

Good question. There is a spec for hanging punctuation in CSS, but it’s not useable in any browser yet and the lack of working implementations have put it in danger of being cut. The good news is somebody is paying attention and if we’re lucky someone will add it to a major browser so we can use it in the wild and guarantee more progress on the spec.

How Would This Work If It Was Implemented?

It needs some work, but to use it you would declare a style rule as follows:

p { hanging-punctuation: none; /* default value */ }

The other values you can use are first, force-end, allow-end and last. None is the default value and means that no characters will hang. First will cause only the first character in a paragraph to hang, if it is a quote or bracket. Last has a similar effect, just on the end of a paragraph. This would be useful for justified or right-aligned paragraphs. Force-end and allow-end are more useful, but possibly overthought. Force-end makes a period or comma at the end of a line always hang, while allow-end causes the same characters to hang only if they wouldn’t fit prior to a block of text rendering as justified.

How Should It Work?

If you ask me, the spec is poorly thought out. First and last make sense because they allow a level of fine-grained control that some typographers would find useful. Force-end and allow-end are too similar to each other to be worth having two separate values, and they don’t affect enough characters to be useful. Not to mention that they do nothing to control the first character on a line. In fact, there is no way to affect the first character on any line except the first line.

If I were writing this, there would only be three values beyond the default: first, last and all. First and last would work as previously described, but would include a broader range of characters. All would make it so that all eligible punctuation would hang if they were on an aligned text edge, just like force-end. All would also include more characters, such as hyphens (to accomodate CSS hyphenation). Hanging should always work the way force-end does, as the author has explicitly stated that they want punctuation to hang. The decision on which edge it hangs off of should be determined by the value established with the text-align property and the browser’s text rendering.

If we get lucky we’ll see some progress on this matter in the coming year. Too many designers are too concerned with the finer points of typography to let something as promising as this slip out of the spec. We’ll just need to find a browser dev team open to suggestion (or bribery) and make our case.