Grow your CSS skills. Land your dream job.

hanging-punctuation

Last updated on:

The hanging-punctuation property aims at giving web web designers a finer grained control over typography on the web.

The idea behind hanging punctuation is to put some punctuation characters from start (or to a lesser extend at the end) of text elements "outside" of the box in order to preserve the reading flow.

Basically, it would slightly move that quote, bullet or whatever to the left (or right in rtl mode) so that the first letter is properly aligned with the rest of the document.

Figure from this article by Steve Hickey

Please note this property is optional so browser makers may or may not support it.

Syntax

hanging-punctuation: none | [ first || [ force-end | allow-end ] || last ]

blockquote p {
  hanging-punctuation: first;
}

none

No character hangs. This is the default value for this property.

first

An available character at the start of the first formatted line of an element hangs.

last

An available character at the end of the last formatted line of an element hangs.

force-end

A stop or comma at the end of a line hangs.

The punctuation is forced to hang and isn't considered when measuring the line for justification.

allow-end

A stop or comma at the end of a line hangs if it doesn't otherwise fit prior to justification.

The punctuation at the end of the first line for doesn't hang because it fits without hanging. On the second line however, there isn't enough space so it does hang.

Available characters

Code Character Name
U+002C , COMMA
U+002E . FULL STOP
U+060C ، ARABIC COMMA
U+06D4 ۔ ARABIC FULL STOP
U+3001 IDEOGRAPHIC COMMA
U+3002 IDEOGRAPHIC FULL STOP
U+FF0C FULLWIDTH COMMA
U+FF0E FULLWIDTH FULL STOP
U+FE50 SMALL COMMA
U+FE51 SMALL IDEOGRAPHIC COMMA
U+FE52 SMALL FULL STOP
U+FF61 HALFWIDTH IDEOGRAPHIC FULL STOP
U+FF64 HALFWIDTH IDEOGRAPHIC COMMA

Note that user agents are allowed to add any character to this list. Quoting the spec:

The UA may include other characters as appropriate.

Related Properties

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
none none none none none none none

A decent fallback for unsupported browser would be to use a negative text-indent as so:

blockquote p {
  text-indent: -0.5em; /* Change according to your font */
}

For bullet lists, you might want to make sure the position of bullets is set to outside and that the container's overflow isn't set to hidden.

Comments

  1. I long for the day that we have control over typography in the way that programs like InDesign give us.

  2. In working on a client project I happening across what I think is a browser bug, but would like some validation.

    I would have loved hanging-puncuation to be ready, so instead, I used negative text-indent on a p > q declaration. Works great in most instances, but when inside CSS3 columns, the punctuation disappears and no amount of overflow: visible brings it back.

    Here’s a CodePen: http://cdpn.io/xkcgw
    Anyone have any insight into what is happening here?

    • Brian
      Permalink to comment#

      J. Hogue, I’m not sure what exactly is happening and I’m not too familiar with css3 and multiple columns, but it appears the visual area that the quote occupies, is no longer in the visual bounding box of the column. I tested in Chrome, and set the margin-left of the 2nd column to -1em, then set the padding on the q to 1 em. After doing this the quote was visible and “hanging” like the single column example. I say “hanging” in the sense that it only appears to hang and you would have to adjust everything in the column accordingly to make it work. This feels hacky and probably isn’t worth the additional effort when considering messing with margins etc. Also, I have no idea how other browsers would render it either :/ That being said, I hope you find this useful in some way!

Leave a Comment

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".