Alguns leitores pediram exemplos práticos de truques de CSS para ebooks. Então, vou compartilhar alguns de meus favoritos.
Estes exemplos presumem que você sabe como trabalhar com folhas de estilo em cascata para fazer belos ebooks.
Letras capitulares
Uma maneira de começar o texto do corpo de um capítulo ou de uma nova seção é usar letras capitulares.
Essa prática remonta a manuscritos medievais, que usavam desenhos lindamente ilustrados em torno de uma versão ampliada da primeira letra de um capítulo para facilitar a localização da seção que um leitor estava procurando.
No design de livros modernos, isso significa definir a primeira letra de modo que seja duas ou três vezes o tamanho do texto do corpo (às vezes mais). Ás vezes em uma fonte decorativa e (quando o custo permite) em uma cor contrastante. E em vez de se destacar da linha de base do texto, a letra maiúscula cai no corpo do parágrafo.
Bem, o custo de produção não é (a princípio) um fator relevante para os ebooks. Assim, podemos usar as letras capitulares sem custo adicional.
Existem algumas maneiras de fazer com que a primeira letra (ou duas, se houver aspas) do primeiro parágrafo em uma seção ou capítulo sejam letras capitulares.
A maneira padrão: <span>
A maneira mais fácil é marcar a letra que você quer que se torne capitular usando as tags <span class = “capitulares”>, como no exemplo abaixo:
<p class="Primeiro"><span class="capitulares">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Nam molestie convallis hendrerit. Aliquam fermentum libero sit amet elit eleifend, sed dictum nisi rhoncus. In eu laoreet lectus. Fusce volutpat egestas lectus, dictum vestibulum dolor. </p>
Em seguida, na folha de estilo CSS, coloque a seguinte regra
p.Primeiro {
text-indent: 0;
}
span.capitulares {
float: letf;
font-family: Zapfino, cursive, serif;
color: darkred;
font-size: 3em;
line-height: 1;
margin-bottom:-0.353em;
margin-right:0.15em;
margin-left:-0.15em;
margin-top:0.5em;
}
Vamos analisar essas regras linha por linha.
p.Primeiro e span.capitulares são os seletores. Assim, qualquer <span> com a classe capitulares ou parágrafo com a classe Primeiro seguirá a regra.
[junkie-alert style=”grey”] Por que precisamos inserir um estilo “Primeiro” independente? Bem, as letras capitulares devem começar nivelando contra a margem esquerda. Se você recuar a primeira linha dos parágrafos, precisará fazer uma exceção no caso do primeiro parágrafo do corpo: text-indent: 0; [/junkie-alert]
float: left; diz ao dispositivo de leitura para empurrar todo o recipiente de extensão para a margem esquerda do recipiente de inclusão, e diz para fluir o resto do texto em torno do span.
font-family: Zapfino, cursive, serif; diz ao dispositivo de leitura para aplicar a fonte de escrita decorativa Zapfino à letra. Se o dispositivo de leitura não tiver essa fonte, ele exibirá sua fonte cursiva padrão. Se ele não tiver uma dessas, então exibirá uma fonte serif.
color: darkred; diz para exibir a letra capitular em vermelho escuro.
font-size: 3em; diz para exibir a letra em três vezes o tamanho de uma letra maiúscula padrão do texto.
As demais regras controlam a posição da letra capitular em relação ao texto do corpo. Essas são as medidas deste exemplo. Sinta-se livre para alterá-las até que você esteja satisfeito com a aparência.
Aqui está a aparência deste parágrafo:
Nada mau.
