Hanging Punctuation in CSS

Using the hanging-punctuation CSS property it’s possible to control whether a punctuation mark should hang at the start or end of a line of text, so that they do not disrupt the ‘flow’ of a body of text or ‘break’ the margin of alignment.

Here’s a pen:

See the Pen mWJJNx by Joel Drapper (@joeldrapper) on CodePen.

☝️ If that’s not working for you, here’s why: at the time of writing hanging-punctuation is only supported on Safari.

To cater for browser that don’t support hanging-punctuation you can (somewhat) fake hanging-punctuation: first; using a negative text-indent, along with an override for browser that do (using @supports):

See the Pen Hanging Punctuation in CSS with @supports and Custom Properties by Dudley Storey (@dudleystorey) on CodePen.

“Hangable” characters targeted by hanging-punctuation are ', ", , , , , ,, ., ،, ۔, , , , , , , , , , «, and »

CSS Tricks Almanac: hanging-punctuation

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.