Hanging Punctuation

A traditional typographical style from the world of print, hanging punctuation creates a striking layout. The straight line of the page's left edge is pleasing to the eye. Indented punctuation, such as bullets, is incorrect as this breaks the straight line.

Hanging punctuation can be used for …

• bullets and numbers
• quotation marks
• brackets
• hyphens and dashes (on the right-hand side of justified text)

Can we do it in CSS?

As yet, we cannot create this effect with CSS for brackets nor for hyphens and dashes. For bullets you simply set their margins to zero. In Internet Explorer you need some padding for the bullets to sit it. To achieve the effect for quotes, you have three choices …

1. use negative text indent (text-indent: -0.3em;)
2. use a background image
3. wait for CSS3's proposed ‘hanging-punctuation’ property …

“Liquorice allsorts (also spelled licorice allsorts) consist of a variety of liquorice candies sold as a mixture. They are made of liquorice, sugar, coconut, aniseed jelly, fruit flavourings, turnip, seaweed, and toothpaste.”

Liquorice allsorts (also spelled licorice allsorts) consist of a variety of liquorice candies sold as a mixture. They are made of liquorice, sugar, coconut, aniseed jelly, fruit flavourings, turnip, seaweed, and toothpaste.