Hanging Punctuation in Block Level Elements

Left aligned block-level elements (such as such as <p> and <blockquote>) that begin with certain punctuation marks can hang the punctuation in the left margin by giving the element a negative text-indent value in CSS. Using javascript you can find the elements that begin with hangable punctuation and apply a corresponding HTML class to them.

Some puntuation marks are thicker in width than others. If you want to be more precise in aligning your hanging puntuation, you can create multiple HTML classes whose text-indent values vary slightly. Thus the negative indent width of each block-level element will depend on the width of its beginning punctuation mark.

Try toggling the hanging punctuation on this page to see its effects.

“Smart Quotes” Can Be Hung

“Smart double quotes” (“ and ”) qualify to be hung at the beginning of a paragraph or other block-level element.

‘Smart single quotes’ (‘ and ’) can also begin a block-level element and qualify to be hung. They are, however, slightly thinner in width than double quotes and require a slightly smaller indent for more precise alignment.

"Dumb Quotes" Can Also Be Hung

"Dumb double quotes" (") can be hung and use about the same indent width as smart double quotes.

'Single dumb quotes' (') can also be hung. Similar to the smart single quotes, dumb single quotes are thinner than double quotes and thus should use a slightly thinner negative indent.

Blockquotes Can Hang Beginning Punctuation

Blocks of text inside blockquote elements can also have hanging punctuation, depending on how you style them.

“Don’t forget that blockquotes are important design elements. They too can have eligible beginning punctuation marks hung in the left margin,” said a web designer.

Remember that quoted excerpts can have multiple lines, so that means multiple <p> tags need to be parsed inside the <blockquote> element.

Hanging Lists

You can also hang list elements by putting the list mark outside the containing box. This can be done by setting the list style to ul {list-style-position: outside}.

• Make sure that you reset the styles for the list
• This includes overriding styles like padding: 0; margin: 0
• Ensure the container of the list item does not have overflow: hidden set, otherwise the bullets will not be visible
• "Hanging punctuation" inside list elements can be troublesome, as the bullet points could collide with the hanging punctuation.

Note that it’s not actually impossible to hang punctuation inside <li> elements styled with bullet points. To do so, you’d have to manually space the bullet points from the punctuation so they don’t collide, which would require removing the list bullet points (list-style-type:none) and adding them back as either a background image or pseudo element with sufficient negative margins.

In the end, hanging list item marks is a personal decision.

International Quotation Marks

There are a variety of non-English quotation marks which could also be hung when beginning a sentence. Listed are a few examples, but you can find a more comprehensive list on Wikipedia.

«Double angle quotes» (« and »), also called guillemets, are a non-English form of punctuation mark and can be hung when beginning a sentence.

‹Single angle quotes› (‹ and ›) can also be hung. Similar to the double angle quotes, they are a non-English form of punctuation.

„A double low smart quote mark” („), is an International form of punctuation. It corresponds with a smart double quote („Hungarian quote marks” or „Icelandic quote marks“) to indicate a quotation or direct speech. It qualifies to be hung when beginning a sentence.

‚A single low smart quote’ (‚) is also an International form of punctuation that is used in tandem with a smart single quote (‚low-high quotes’ or ‚Icelandic single quotes‘) to indicate a quotation or direct speech. Similar to smart single quotes, it can also be hung when beginning a sentence.

“Moby Dick” Excerpt: An Example of Continuous Hanging Punctuation

But though the other boarders kept coming in by ones, twos, and threes, and going to bed, yet no sign of my harpooneer.

“Landlord!” said I, “what sort of a chap is he—does he always keep such late hours?” It was now hard upon twelve o'clock.

The landlord chuckled again with his lean chuckle, and seemed to be mightily tickled at something beyond my comprehension. “No,” he answered, “generally he’s an early bird—airley to bed and airley to rise—yes, he’s the bird what catches the worm. But to-night he went out a peddling, you see, and I don’t see what on airth keeps him so late, unless, may be, he can’t sell his head.”

“Can't sell his head?—What sort of a bamboozingly story is this you are telling me?” getting into a towering rage. “Do you pretend to say, landlord, that this harpooneer is actually engaged this blessed Saturday night, or rather Sunday morning, in peddling his head around this town?”

“That's precisely it,” said the landlord, “and I told him he couldn't sell it here, the market's overstocked.”

“With what?” shouted I.

“With heads to be sure; ain't there too many heads in the world?”

“I tell you what it is, landlord,” said I quite calmly, “you'd better stop spinning that yarn to me—I'm not green.”

“May be not,” taking out a stick and whittling a toothpick, “but I rayther guess you’ll be done BROWN if that ere harpooneer hears you a slanderin' his head.”

“I’ll break it for him,” said I, now flying into a passion again at this unaccountable farrago of the landlord’s.

“It’s broke a’ready,” said he.

“Broke,” said I—“BROKE, do you mean?”

“Sartain, and that’s the very reason he can’t sell it, I guess.”