Letra inicial - CSS-Tricks

Anonim

initial-letter é uma propriedade CSS que seleciona a primeira letra do elemento onde é aplicada e especifica o número de linhas que a letra ocupa.

Você pode ter visto algo assim em sites de notícias, onde a primeira letra de um parágrafo inicial é maior do que o resto do conteúdo.

O site da New Yorker estiliza a letra inicial

O truque para definir o estilo da primeira letra do conteúdo costumava dar um pequeno hack onde você envolvia a letra em uma e aplicava uma classe para defini-la:

/* Style that first letter! */ .first-letter ( font-size: 35px; line-height: 70px; )


Once upon a time in a faraway land…

Isso funciona, mas é mais marcação HTML do que queremos e divide nosso conteúdo. Além disso, é doloroso ter que aplicar essa classe manualmente sempre que quiser.

É aí que initial-letterentra:

/* Style that first letter! */ .subhead ( initial-letter: 2; )


Once upon a time in a faraway land…

Isso é mais limpo! Outra abordagem é aplicá-lo ao ::first-letterseletor psuedo:

/* Style that first letter! */ .subhead::first-letter ( initial-letter: 2; )

Você viu aquilo? A initial-letterpropriedade calcula automaticamente o tamanho da fonte e o número de linhas necessárias para criar nossa capitulação estilizada! Quer ocupar exatamente 2, 3, 4 ou mais linhas? Informe a propriedade e ela fará o trabalho pesado.

Alterar a propriedade para ocupar 1, 2 e 4 linhas

Sintaxe e valores

initial-letter: normal | ( );

initial-letter aceita os seguintes valores:

  • normal: Não aplica um efeito de escala na primeira letra. Isso pode ser útil para redefinir o valor onde um pode ser herdado da cascata.
  • : Quantas linhas a letra deve ocupar onde valores negativos não são permitidos.
  • : Quantas linhas a letra deve afundar onde valores negativos não são permitidos. Isso é útil se você precisar posicionar a letra mais abaixo para acomodar problemas de espaçamento complicado, mas, se não for especificado, leva o valor de

Exemplos

Capitular, capitular elevada e capitular usando a letra inicial

O estilo da letra inicial pode ser usado para obter alguns métodos sofisticados de design tipográfico. Observe que os exemplos a seguir são suportados apenas pelo Safari.

Capitulares são provavelmente o caso de uso mais familiar:

Veja a letra inicial da caneta: Capitulação de Geoff Graham (@geoffgraham) no CodePen.

Os limites elevados são outro exemplo:

Veja a letra inicial da caneta: Raised Cap por Geoff Graham (@geoffgraham) na CodePen.

Block Caps remete a velhos contos de fadas:

Veja a letra inicial da caneta: Block Cap de Geoff Graham (@geoffgraham) no CodePen.

Suporte para navegador

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.

Área de Trabalho

cromada Raposa de fogo IE Beira Safári
Não Não Não Não TP *

Celular / Tablet

Android Chrome Android Firefox Android iOS Safari
Não Não Não 14,0-14,4 *

Relacionado

  • ::first-letter
  • Snippet de letras maiúsculas

Mais Informações

  • Módulo de Layout CSS Inline Nível 3: As especificações oficiais
  • Jen Simmons Labs: demonstrações e exemplos de casos de uso
  • Tíquete do Firefox: Abra o tíquete para oferecer suporte ao recurso
  • Tíquete do Internet Explorer: Abra o tíquete para oferecer suporte ao recurso