The `hanging-punctuation` property in CSS

(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)