Hanging Punctuation With CSS


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:
CSS Techniques - Hanging Punctuations Fig. 1

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).

[css]blockquote {
text-indent:-0.5em;
}[/css]

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.
CSS Techniques - Hanging Punctuations Fig. 2

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.

[css]ol {
margin-left:0;
padding-left:1.5em;
position:relative;
left:-1.5em;
}
[/css]

You can view the finished example here.

Blogging

{ 4 comments… add one }

5 comments on “Hanging Punctuation With CSS

  1. Chris Hanson on said:

    nice tut it was intresting lol keep them coming they usefull to everyone especially people who have been in the game for years!

  2. Daniel Aleksandersen on said:

    Thanks! I have been looking for a way to do hanging quotes and bullets for some time. You method is really neat.

  3. web designer roxy on said:

    Thanks for the awesome tutorial…its really very helpful !!

  4. Great trick to make it work in IE6 and IE7 – thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

HTML tags are not allowed.

Leave a Comment