CSS Reference Property

hanging-punctuation

by Sara Soueidan

Hanging punctuation places the punctuation (full stop, comma, bullet, quote, hyphen, etc.) outside the margins — outside the left or right edge of a line of text.

The punctuation mark hangs in the margin creating a more visually pleasing text alignment, where the first (or last) letter on the line is properly aligned with the rest of the document.

Basically, the hanging-punctuation property will tell the browser whether or not and how to move a punctuation mark outside the line box (or in the line box’s indent) , whether at the beginning of a line or at its end.

Hanging punctuation is commonly used with fully-justified text (see text-align for more) and gives a finer control over the alignment of all the lines in a paragraph of text when used at the end of the lines.

The following examples show the result of hanging the punctuation at the beginning of the lines in a paragraph of text. Notice how hanging punctuation makes the lines better aligned and thus more visually appealing and fairly easier to scan through.

Example of a paragraph with hanging punctuation. The grey vertical line represents the starting point of the lines.
Example of a paragraph with hanging punctuation. The grey vertical line represents the starting point of the lines.

Note that the hanging punctuation marks may cause an overflow on the block-level element containing the text if that element does not have sufficient padding.

The hanging punctuation is mostly used for blockquotes, pull quotes, and bullet lists. The following examples borrowed from Mark Boulton’s article illustrate how hanging punctuation can improve alignment on bulleted lists and pull-quotes.

The following image shows the effect of hanging bullets in an unordered list. The alignment is destroyed when the bullets aren’t hung.The eye looks for straight lines everywhere, when type is indented in this way, it destroys the flow of text.

Example showing before and after hanging bullets of an unordered list,
The first image (left) shows the bulleted list when the bullets aren’t hung. The indentation disrupts the vertical alignment of the text. The second image (right) shows the correct alignment with hanging punctuation.

Another use-case for hanging punctuation is pull quotes. When the quotes are not hung, the interruption to flow is considerable and the overall effect is pretty unsightly (left image). In the second image on the right, the quotes are hung either side of the quote. Once again this allows uninterrupted reading for the audience.

Example showing the before and after of hanging quotation marks of quotes.
The first image (left) shows the pull quote when the quotes aren’t hung. The indentation disrupts the vertical alignment of the text. The second image (right) shows the correct alignment with hanging punctuation.

Trivia & Notes

Hanging punctuation, also known as “exdentation” (as opposed to indentation), is commonly used when setting pull-quotes but can be used for any block of text. It can be used with flush left or right alignment, and fully-justified text.

The effect resulting from hanging a punctuation mark at the beginning of a line is similar to setting a negative indentation on that line (see the text-indent property for more), so the same effect can be achieved by using a negative indentation in browsers that don’t support this property.

Hanging bullet lists can also be achieved by resetting the default margin and padding on lists.

Official Syntax

  • Syntax:
    hanging-punctuation: none | [ first || [ force-end | allow-end ] || last ]
                            
  • Initial: none
  • Applies To: inline-elements
  • Animatable: no

Values

none
No character hangs.
first
An character at the start of the first formatted line of an element hangs.
last
A 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.
allow-end
A stop or comma at the end of a line hangs if it does not otherwise fit prior to justification.

Notes

When a punctuation mark hangs, it is not considered when measuring the line’s contents for fit, alignment, or justification (See text-align and text-justify for more). Depending on the line’s alignment, this may (or may not) result in the mark being placed outside the line box.

Examples

blockquote {
    hanging-punctuation: first;
}

.justified-content {
    hanging-punctuation: last;
}
                

Live Demo

No browser currently supports this property so no working demo for this property is possible at this time.

Browser Support

The property is currently not supported in any browser.

Last updated: February 4, 2015 at 3:30 pm

Do you have a suggestion, question or want to contribute? Submit an issue.