yuanqing.blogspot.com

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 with two inline quotations, we’d have this HTML…

<p>Sed egestas purus, enim et tique
<span class="l">amet,</span>
<span class="r">&#8220;Felis</span>
nisi ut tristique enim!&#8221;
Vel faucibus et
<span class="l">enim:</span>
<span class="r">&#8220;Et</span>
sem!&#8221;</p>

and this CSS…

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

See it in action! (Try bumping up the text size.)

Inline quotation marks occuring at the start of a line will be hung; this is due to the negative left margin of span.r.

Inline quotation marks not occuring at the start of a line will be unaffected; in such a case, span.l and span.r are side by side, and their respective margins will cancel each other out.

The left padding on p is for IE, which can’t quite get the hang of elements being pulled outside their containing block.

Labels: note

¶