Pergunta

Eu estou tentando implementar um Outdent da primeira letra do primeiro parágrafo do corpo do texto. Onde eu estou preso é na obtenção de espaçamento consistente entre a primeira letra eo resto do parágrafo.

Por exemplo, há uma enorme diferença no espaçamento entre um "W" e um "eu"

 'eu' Outdent
 'W' Outdent

Alguém tem alguma idéia sobre como mitigar as diferenças? Eu prefiro uma solução CSS puro, mas vai recorrer a JavaScript se necessário.

PS : Eu não precisa necessariamente de compatibilidade no IE ou Opera

Foi útil?

Solução

Aplicar esta a p.outdent:first-letter:

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

Isso irá posicionar a primeira letra na margem direita do parágrafo, em seguida, empurrá-la deixado por mais ou menos a largura do parágrafo, em seguida, passar a letra e tudo o preenchimento em grande margem negativa do flutuador de modo que o parágrafo não se encaixa na margem e não tentar envolver em torno de.

Outras dicas

Eu tentei usar uma fonte de largura fixa como 'Courier New' e já que os personagens são mais ou menos a mesma largura que tornou muito menos perceptível.

Edit - este tipo de letra é decente, mas poderia funcionar apenas para 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;
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top