hanging-punctuation

Avatar of Chris Coyier
Chris Coyier on (Updated on )

The hanging-punctuation property aims at giving 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

CodeCharacterName
U+002C,COMMA
U+002E.FULL STOP
U+060C،ARABIC COMMA
U+06D4۔ARABIC FULL STOP
U+3001IDEOGRAPHIC COMMA
U+3002IDEOGRAPHIC FULL STOP
U+FF0CFULLWIDTH COMMA
U+FF0EFULLWIDTH FULL STOP
U+FE50SMALL COMMA
U+FE51SMALL IDEOGRAPHIC COMMA
U+FE52SMALL FULL STOP
U+FF61HALFWIDTH IDEOGRAPHIC FULL STOP
U+FF64HALFWIDTH 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.

Other Resources

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
NoNoNoNo10

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
NoNoNo10.0-10.2

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.