Consistent outdent of first letter with CSS?

Question

I'm trying to implement an outdent of the first letter of the first paragraph of the body text. Where I'm stuck is in getting consistent spacing between the first letter and the rest of the paragraph.

For example, there is a huge difference in spacing between a "W" and an "I"

Anyone have any ideas about how to mitigate the differences? I'd prefer a pure CSS solution, but will resort to JavaScript if need be.

PS: I don't necessarily need compatibility in IE or Opera

Answer 1

Apply this to p.outdent:first-letter:

margin-left: -800px;
padding-right: 460px;
float: right;

This will position the first letter on the right edge of the paragraph, then shove it left it by more or less the width of the paragraph, then move both the letter and all the padding into the float's large negative margin so the paragraph fits in the margin and doesn't try to wrap around.

Answer 2

I tried using a fix-width font like 'courier new' and since the characters are more or less the same width it made it a lot less noticeable.

Edit - this font is decent but might only work for windows

p.outdent:first-letter {
    font-family: ms mincho;
    font-size: 8em;
    line-height: 1;
    font-weight: normal;
    float: left;
    margin: -0.1em 0 0 -.55em;
    letter-spacing: 0.05em;
}