Outdent consistente da primeira letra com CSS?
-
01-07-2019 - |
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"
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
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;
}