Sponsored Ad

Hanging Punctuation refers to the technique of positioning certain typographical elements, such as bullets, quotation marks on pull quotes, etc. into the margin of a document, so that the main text that the glyph highlights remains flush with the rest of the body copy around it. Often seen in print, rarely used on the web, hanging punctuations can help keep the flow of your document and make the text easier to read.

Devising a cross-browser solution can be tricky, particularly with regards to lists. I've come up with a solution below that works in IE6/7, FireFox, Opera 9 and Safari.

First, let's look at hanging punctuation on block quotes, which is by far the easier of the two.

As you can see below, the image on the left shows a block quote without hanging punctuation (the red line signifies the margin in both images). The diagram on the right illustrats the quote with the punctuation hung in the left margin:

Accomplishing this with CSS is simple. All we have to do is apply a negative text indent, so that the quotation mark is moved over into the margin. I can't take credit for this one. I've seen it several places on the web. I'm just re-posting it here, because blockquotes should be hung and it goes along with the CSS to hang lists (which I haven't personally seen elsewhere).

Now let's move on to lists, where things get a little trickier.

Again, let's look at an example of a "unhung" list vs. a "hung" list.

For the list to hang properly in Firefox, we need to do away with its default left margin.

Finally, to make this work properly in IE6, we need to manually set the left padding, and then relatively position it to the left of the margin. The left padding that we manually set is also going to get us working in Opera.

You can view the finished example here.

Posted Saturday, January 20th, 2007 at 3:50 am in Typography | Trackback