(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)
https://www.tonymottaz.com/blog/oh-no-my-json/
I was excited to start using this property until I realized it is only supported in Safari. Though it is interesting to note that it has been supported there since 2016. I wonder why it hasn’t been implemented in any other browsers yet.
Here’s a link to caniuse.com:
https://caniuse.com/?search=hanging-punctuation
I regularly check to see if this has been added to other browsers yet. Alas..
Is there any info on why this is not supported by most browsers?