notes+links

20080315

Hanging Punctuation on the Web

This technique was first developed and implemented by the Russian design firm Art. Lebedev Studio. Strangely, it was never documented.

For a left-aligned text block, we'd have this HTML…

<p>This is some filler text, and some more filler
<span class="l">text.</span>
<span class="r">&#8220;This</span> is a
sentence within quotation marks.&#8221; This is
more filler text, followed by yet more filler
text.</p>

and this CSS…

.l {
margin-right: 0.4em;
}
.r {
margin-left: -0.4em;
}
p {
padding-left: 0.4em;
}

Any inline quotation mark occuring at the start of a line will be hung. The left padding on p is for IE, which can’t quite get the hang – pun intended! – of elements being pulled outside their containing block. It’d, of course, be optimal if this padding could be taken into account from the outset. One way to introduce this padding without compromising the layout is to “counteract” it by assigning a negative left margin of -0.4em.