Consistance dépassée de la première lettre avec CSS?

Question

J'essaie d'implémenter un dépassement de la première lettre du premier paragraphe du corps du texte. Ce qui me bloque, c’est d’obtenir un espacement constant entre la première lettre et le reste du paragraphe.

Par exemple, il existe une énorme différence d'espacement entre un "W" et un "W". et un "I"

Quelqu'un a-t-il une idée sur la manière d'atténuer les différences? Je préférerais une solution CSS pure, mais ferai appel à JavaScript si besoin est.

PS : je n'ai pas nécessairement besoin de compatibilité dans IE ou Opera

Answer 1

Appliquez ceci à p.outdent: première lettre :

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

Ceci placera la première lettre sur le bord droit du paragraphe, puis la déplacera à gauche ou à gauche de la largeur du paragraphe, puis déplacera la lettre et tous les éléments de remplissage dans la grande marge négative du flotteur afin que le paragraphe s'inscrit dans la marge et ne cherche pas à envelopper.

Answer 2

J'ai essayé d'utiliser une police à largeur fixe telle que 'courrier nouveau' et, comme les caractères ont à peu près la même largeur, cela est beaucoup moins visible.

Modifier - cette police est correcte mais ne fonctionne que pour 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;
}