Esente coerenza della prima lettera con CSS?

Question

Sto provando a implementare un superamento della prima lettera del primo paragrafo del corpo del testo. Il punto in cui sono bloccato è ottenere una spaziatura coerente tra la prima lettera e il resto del paragrafo.

Ad esempio, c'è un'enorme differenza nella spaziatura tra un "W" e un " I "

Qualcuno ha qualche idea su come mitigare le differenze? Preferirei una soluzione CSS pura, ma ricorrere a JavaScript se necessario.

PS : non ho necessariamente bisogno di compatibilità in IE o Opera

Answer 1

Applicalo a p.outdent: prima lettera :

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

Questo posizionerà la prima lettera sul bordo destro del paragrafo, quindi la spingerà a sinistra di più o meno la larghezza del paragrafo, quindi sposta sia la lettera che tutta la spaziatura nel grande margine negativo del galleggiante così il paragrafo si adatta al margine e non cerca di avvolgere.

Answer 2

Ho provato a usare un carattere a larghezza fissa come 'corriere nuovo' e poiché i caratteri hanno più o meno la stessa larghezza, lo hanno reso molto meno evidente.

Modifica: questo carattere è decente ma potrebbe funzionare solo per 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;
}