Drop Shadow for Text with CSS

My distinguished colleagues at A List Apart already took care of building box-shaped drop shadows. But what if you want the text to have a shadow under every letter? Here are the results of my experiment, which I loathe for two reasons:

1. You have to repeat the shadowed text when it’s completely unnecessary from a content perspective, and
2. The div height and font size are hardcoded

Without further ado, the markup:

<div id='mydiv'>
<div class='shadowed'>The quick brown fox did something or other</div>
<div class='shadow'>The quick brown fox did something or other</div>
</div>

The CSS:

.shadowed {
position: relative;
overflow: hidden;
z-index: 2; }

.shadow {
position: relative;
overflow: hidden;
z-index: 1;
left: 1px; }

#mydiv {
height: 20px;
overflow: hidden;
font-size: 16px;
}

#mydiv .shadow {
color: grey;
top: -19px; }

Does anyone have a less hackish way of doing this? I’d love to hear about it.