ZoomBlog

(I did a Twitter thread on this a while back, against my better judgment, and now moving to a proper blog.)

The hanging-punctuation property in CSS is almost a no-brainer. The classic example is a blockquote that starts with a curly-quote. Hanging that opening curly-quote into the space off to the start of the text and aligning the actual words is a better look.

Here’s a demo:

The blue line is just to help see the alignment.

It is a cascading property, so you can just do this if you like:

html { hanging-punctuation: first last; }Code language: CSS (css)

In case you go against the grain, for aesthetics, and align text the other way, the `last` value will hang punctuation off the other else also. That’s what it’s supposed to do anyway, but in my testing (trying quotes and periods), Safari doesn’t support that. 路‍♀️

There is some risk to the property. Because the punctuation hangs off the edge, if you don’t have any available space, it can trigger a horizontal scroll bar, which sucks. This is probably why it’s not a default. It’s rare there is zero space on the edge of text, though, so meh.

Want it to work across all browsers? Use a negative text-indent instead. Then test for support and replace it.

blockquote { text-indent: -0.45em; } @​supports (hanging-punctuation: first) { blockquote { text-indent: 0; hanging-punctuation: first; } }Code language: CSS (css)

Having to use a magic number for the `text-indent` kinda sucks, so definitely isolate where you are applying it. Here’s a demo where a custom property is used instead to make it less weird:

By the way! For putting curly quotes on blockquote, might as well do that in CSS rather than in the content.

blockquote { &::before { content: open-quote; } &::after { content: close-quote; } }Code language: CSS (css)

Hanging punctuation is relevant in design software and print design as well. I feel like any half-decent book typesetting will be doing this. Adobe InDesign calls it “Optical Margin Alignment”.

Elliot Jay Stocks notes that here.

I think hanging-punctuation is nice! Just a nice bonus where supported and not a huge deal if it’s not. I’d probably start a new project with:

html { hanging-punctuation: first allow-end last; }Code language: CSS (css)

Related

ncG1vNJzZmibmKe2tK%2FOsqCeql6jsrV7kWlpbGdhZnxzg46tn55lmJa7qLXNoGSprZ6Ywbat06Kmp2Wgp7yxsdGtsGahnmKwtL%2BO