sábado, 7 de abril de 2012

Oficina do eBook: Capitulares

Aumentar Letra Diminuir Letra


Hoje vou falar de uma coisa simples mas que embeleza muito os livros digitais, que são as capitulares.
Capitular é a primeira letra ou palavra de um parágrafo que possui um tamanho maior que indica o começo do capítulo.

Como podem ver acima o texto fica muito bonito, entretanto já adianto que o kindle não suporta este tipo de capitular, suporta apenas o tamanho maior, mas não o texto em volta.

Mãos à obra!
Para usarmos o capitular você deve usar a tag <span>.
Esta tag tem como objetivo aplicar um estilo no trecho abordado por ela que é diferente do estilo usado no documento e no parágrafo que ela se encontra.
Então a primeira coisa é escolher o lugar que você quer e colocar a tag.



<span>T</span>exto de Exemplo.


Mas a span sem nada  não faz nada então vamos  aumentar o tamanho da letra.



<span style="font-size: 4em;">T</span>exto de Exemplo.
Texto de Exemplo.

Como podem ver isso torna a primeira letra maior, e é tudo que podemos fazer no formato mobi, também recomendo este uso para parágrafos muito curtos, inclusive no epub.

O que mais podemos fazer?
O epub permite fazermos muito mais que o kindle então vamos incrementar o código da seguinte maneira:

<span style="font-size: 4em;margin-bottom: -0.3em; float: left; line-height: 1.0em; width: .8em; font-weight:bold;">T</span>exto de Exemplo.
Texto de Exemplo.

Como podem observar no exemplo acima o texto fica em volta do parágrafo, isso deixa o texto mais bonito, mas em parágrafos curtos pode ficar estranho, abaixo apenas uma variação do exemplo acima para ilustrar melhor o texto sobre a capitular.

<span style="font-size: 4em;margin-bottom: -0.3em; float: left; line-height: 1.0em; width: .8em; font-weight:bold;">T</span>exto<br />de<br />Exemplo.
Texto
de
Exemplo.

mas vamos  analisar cada um dos comandos que adicionamos ao estilo.
margin-bottom: -0.3em; - Este comando tem por objetivo alinhar a letra com o resto do texto, nos exemplos aqui apresentados ele não aparece porque o blog não aceita o comando, mas no seu livro vai funcionar, o valor varia de acordo com o tamanho da fonte usada.
float: left; - Este comando é um dos mais bacanas pois permite que o texto seja "flutuante" é isso que permite que o texto fique em volta dele, também é possível usar em imagens.
line-height: 1.0em; - Aqui temos a altura das linhas, não ultrapasse nunca o valor 1 senão as linhas vão ficar muito distantes entre si e o capitular não ficará bom.
width: .8em;- Aqui temos a largura da letra, é usado para aproximar o texto da letra, sem ela teríamos uma borda ao redor da letra. e não ficaria bom.
font-weight:bold;- Isto deixa a fonte em negrito, seu uso é opcional.

Pra finalizar vamos substituir este comando por uma classe da seguinte forma.

<span class="capitular">T</span>exto<br />de<br />Exemplo.

Assim podemos ter nosso documento mais organizado, e não podemos esquecer de criar a classe em nossa folha de estilos.


span.capitular {margin-bottom: -0.3em; font-size: 4em; float: left; line-height: 1.0em; width: .8em; font-weight:bold;}

É isso com alguns recursos simples nosso livro virtual fica muito mais bonito.

Obs: Para usar o capitular é necessário que o parágrafo não use o espaçamento na primeira linha então o parágrafo precisa usar a regra de estilo text-indent:0;

2 comentários:

  1. Acho muito legal, isso influencia muito no aspecto visual do ebook.

    ResponderExcluir
    Respostas
    1. Verdade! Ler tem que ser uma experiência agradável. O capricho no visual é importante!

      Excluir