Hanging Quotes

May 20, 2010

One of my small pet peeves that I’ve been seeing on the web lately are misaligned punctuation marks, especially if used while highlighting a specific quote. The proper way is to hang the punctuation outside of the vertical edge so the all words are aligned to the origin of the edge. A small detail I know, and most people could care less; but it’s a quick and easy fix with CSS.

blockquote {
       text-indent: -8px; /* indent width relative to the font size */
       font-size: 14px; 
}

Rather than get something like this:

“Having small touches of colour makes it more colourful than having the whole thing in colour.”

Dieter Rams

A more proper look:

“Having small touches of colour makes it more colourful than having the whole thing in colour.”

Dieter Rams

Of course, the obvious alternative is through the use of a CSS background image for blockquotes, like the one I put together from my Dribbble account.

Dieter Rams

 

Comments