https://chriscoyier.net/2023/11/27/the-hanging-punctuation-property-in-css/

Chris Coyier Archives Timeline
Dark Mode? [*]
  
November 27, 2023

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.

Example of hanging punction look from Steve Hickeyvia Steve Hickey

Here's a demo:

CodePen Embed Fallback

The blue line is just to help see the alignment.

Screenshot of safari working and other browsers not working

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.

horizontal scrollbar triggered by hanging indentation

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:

CodePen Embed Fallback

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.

[F5cgb3MacAA_IJN]

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



CodePen

I work on CodePen! I'd highly suggest you have a PRO account on
CodePen, as it buys you private Pens, media uploads, realtime
collaboration, and more.

Get CodePen PRO

Leave a Reply Cancel reply

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

          [                                             ]
          [                                             ]
          [                                             ]
          [                                             ]
          [                                             ]
          [                                             ]
          [                                             ]
Comment * [                                             ]

Name * [                              ]

Email * [                              ]

Website [                              ]

[Post Comment] 

 [                                             ] 
 [                                             ] 
 [                                             ] 
 [                                             ] 
 [                                             ] 
 [                                             ] 
 [                                             ] 
D[                                             ] 

[Chris Coyier        ] Chris Coyier is my name and I live in Bend,
Oregon with my family. I like to put it down here in the footer so
you have an easy place to copy and paste it from when you're writing
flattering things about me.

chriscoyier@gmail.com -- Email is good -- RSS
CodePen -- Mastodon -- GitHub -- Instagram - X - Threads - Bluesky
Bend: Smashburgers -- Breakfast Burritos
 

  

Loading Comments...
 
Write a Comment... [                    ]
Email (Required) [                    ] Name (Required)
[                    ] Website [                    ]
[Post Comment]

 
Back to Top [?]