Melhore as Letras Capitais com "initial-letter"

Letras capitais ou capitulares são uma forma de decoração usada, por vezes, no começo de blocos de texto, que faz com que a letra inicial ocupe a altura de várias linhas, além de indentar o texto dessas mesmas linhas.

É uma tradição tipográfica tão antiga quanto a história da formatação de texto em si e, hoje em dia, podemos simulá-la com CSS usando o pseudo elemento ::first-letter. Estilizar aquela primeira letra, contudo, é notoriamente trabalhoso, mas a propriedade initial-letter tem como objetivo melhorar essa situação. Examinemos o que é, o que podemos fazer com ela e o que podemos esperar no futuro.

A Abordagem Atual

Comecemos com uma demonstração: um parágrafo de texto.

Agora, manipularemos o primeiro caractere do parágrafo usando o pseudo elemento ::first-letter. A abordagem atual de estilização seria fazer o caractere fluturar, usando p::first-letter { float: left; }, removendo-o do fluxo normal do parágrafo e ajustando seu tamanho apropriadamente.

Isso não está tão ruim e pode ser melhorado com line-height, posicionamento e por aí vai. Além disso, tem ótimo suporte. Mas, certamente, não está perfeita. Para aproveitarmos, de verdade, o que as letras capitais tem a nos oferecer, precisamos de mais controle e flexibilidade.

Uma Nova Solução

A propriedade initial-letter, atualmente discutida através dos Rascunhos dos Editores na W3C (é o ponto mais inicial do processo de padronização), tem como objetivo dar-nos o controle tipográfico preciso que queremos. Ela é usada em conjunto com o first-letter.

O primeiro valor que ela recebe determina o tamanho da letra inicial, em relação a quantas linhas ela ocupará.

p::first-letter {
  initial-letter: 3;
}

Eis como se parece:

Ressalvas

Desculpe, pare bem aí. O suporte para ela ainda é bem fraco. No momento da escrita desse texto, a demonstração acima só se mostra corretamente se estiver usando o Safari do Mac OS X ou um navegador do iOS e, apenas, porque estamos usando a sintaxe prefixada, -webkit-initial-letter: 3;.

Eis algumas capturas de tela se não conseguir ver o que eu vejo:

A primeira coisa que talvez perceba seja a diferença das fontes. Nenhum navegador lida bem com a propriedade initial-letter e fontes para web. Quaisquer fontes instaladas no seu sistema funcionam muito bem, embora precisem ser declaradas explicitamente. Usar serif ou sans-serif ao fim da pilha da declaração de fontes parece não ter resultado. Você precisará de algo como font-family: "minha fonte para web", arial; para sobrepujar a alternativa do navegador.

A segunda coisa que perceberá é que a linha do topo está indo além da margem direita da página. Isso é um defeito, portanto, por enquanto, precisaremos de uma alternativa. Felizmente, é possível forçar as margens da letra inicial além do topo do parágrafo que a contém (fazendo, assim, com que o navegador entenda que a linha do topo não deve ter a largura igual a do recipiente inteiro. Um bom e alto valor para margin-top resolverá o problema:

@jensimmons eis uma tentativa de um não-engenheiro-de-navegador em explicar o que eu 'acho' que está acontecendo ^Ian pic.twitter.com/tODqdaKX40

— Envato Tuts+ Web (@wdtuts), 14 de Abril de 2016

Segundo Valor

Certo, continuemos. O segundo valor que initial-letter aceita é opcional. Ele determina por quantas linhas a letra inicial desce, por exemplo:

p::first-letter {
  initial-letter: 3 2;
}

Aqui, delcaramos que a letra deve ter altura de três linhas mas descer apenas duas.

Isso é conhecido como "inicial alçada", ao invés de uma verdadeira "letra capital". Novamente, eis uma captura de tela caso não veja o resultado desejado:

Responsividade

Letras capitais grandes são fantásticas, você deveria repensá-las como parte de sua tipografia responsiva. Provavelmente, você aplica fontes de texto menores para telas pequenas, então também é bom considerar o uso de letras capitais proporcionais.

/* set base paragraph styles */
p {
    font-size: 1em;
}

/* set base drop cap styles */
p::first-letter {
    initial-letter: 2;

    color: #c69c6d;
    margin: 1em .2em 0 0;
}

/* mobile first media query */
@media only screen and (min-width: 800px) {
  
    /* set paragraph styles for larger screens */
    p {
        font-size: 1.25em;
    }
  
    /* set drop cap styles for larger screens */
    p::first-letter {
        initial-letter: 3 2;
        margin: 1em .5em 0 0;
    }
  
}

Alternativa

Se estiver vendo essas demonstrações em um navegador não suportado, talvez esteja pensando como evitar o resultado absurdo que pode acontecer:

Estamos com todos estilos, exceto aqueles que fazem a letra comportar-se como uma letra capital. Usando consultas de funcionalidades do CSS, você pode aplicar os estilos de forma seletiva. Envolva os estilos da sua letra capitular em uma condição @supports, dessa forma:

@supports (initial-letter: 1) or (-webkit-initial-letter: 1) {
 
 /* your initial-letter styles here */
 
}

Se a propriedade initial-letter for suportada, os estilos serão aplicados–caso contrário, não serão.

Nota: nem mesmo as consultas de funcionalidades do CSS tem suporte universal, então pense bem antes de aplicar essa técnica. Usar o Modernizr seria mais seguro.

Indo um pouco mais além, talvez você queira usar a versão em JavaScript, o polyfill dropcap.js, da Adobe, mas não cobriremos seu uso aqui. O Dudley Stoey fez um ótimo trabalho falando em seu blog.

Conclusão

Ainda é muito recente, mas a propriedade initial-letter promete muito. Fique de olho em outras propriedades, como a initial-letter-align, que ajudará em alfabetos não romanos; e na initial-letter-wrap, que ajudará a ajustar melhor o texto ao redor da letra capital.

As demonstrações usadas aqui são bem funcionais, mas imagine as possibilidades para tipografia decorativa! Em princípio, estaremos livres para usar várias das propriedades que já conhecemos na letra inicial, incluindo:

• Todas as propriedades de fontes conhecidas
• Cor e opacidade
• Sombra de texto e outras tipos de decorações de texto
• Propriedades de transformação
• e o que acha da background-clip?

Para atualizações sobre o progresso dessas propriedades, a melhor coisa a fazer é seguir a @jensimmons (ela sabe de tudo sobre isso).

Leitura Adicional

• Rascunhos dos Editores da W3C
• Letra Capital Diária: Inspiração visual pela Jessica Hische
• Letra inicial na MDN
  

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!