Последовательный отступ первой буквы с CSS?

Question

Я пытаюсь реализовать отступ первой буквы первого абзаца основного текста. Я застрял в том, чтобы получить постоянный интервал между первой буквой и остальной частью абзаца.

Например, существует огромная разница в расстоянии между "W" и "I"

У кого-нибудь есть идеи о том, как смягчить различия? Я бы предпочел чистое решение CSS, но при необходимости прибегну к JavaScript.

PS : мне не обязательно нужна совместимость в IE или Opera

Answer 1

Примените это к p.outdent:first-letter:

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

Это поместит первую букву по правому краю абзаца, затем переместит ее влево на более или менее ширину абзаца, затем переместит букву и все отступы в большое отрицательное поле плавающего элемента, чтобы абзац умещается на полях и не пытается обернуться.

Answer 2

Я попытался использовать шрифт фиксированной ширины, например «courier new», и, поскольку символы примерно одинаковой ширины, это сделало его намного менее заметным.

Редактировать - этот шрифт приличный, но может работать только для 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;
}