Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

Melhore as Letras Capitais com "initial-letter"

Read Time: 5 mins

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

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.

Example of a drop cap by The WalrusExample of a drop cap by The WalrusExample of a drop cap by The Walrus
Exemplo de letra capital, como visto no The Walrus
Drop cap example as found on NautilusDrop cap example as found on NautilusDrop cap example as found on Nautilus
Exemplo de letra capital, como visto no Nautilus

É 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á.

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:

Initial letter demo in Safari OS XInitial letter demo in Safari OS XInitial letter demo in Safari OS X
Demonstração da propriedade initial-letter no Safari do Mac OS X
Initial letter demo in Safari iOSInitial letter demo in Safari iOSInitial letter demo in Safari iOS
Demonstração da propriedade initial-letter no Safari do iOS

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:


Segundo Valor

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

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:

Sunken initial-letterSunken initial-letterSunken initial-letter

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.

More readable initial-letterMore readable initial-letterMore readable initial-letter
Mantendo o texto legível em telas menores

Alternativa

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

Unsupported initial-letterUnsupported initial-letterUnsupported initial-letter
Estiliação com initial-letter, quando não suportado

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:

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

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

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.