Design de eBook: o uso do versalete - Booknando Livros
Produção, cursos e treinamentos de livros digitais
Design de eBook: o uso do versalete
Quem trabalha com a produção com certeza já encontrou dificuldades na aplicação dos versaletes nos eBooks, causadas em geral pelas diferenças entre os softwares leitores do formato ePub. Alguns softwares, em particular aqueles ligados à Adobe não suportam o versalete que aplicamos no Indesign. Esta semana a Adobe lançou uma nova versão do Adobe Digital Edition que parece resolver isto. Parece. Na prática, ainda, para resolver a situação é preciso muita criatividade e trabalho! Mas vamos por partes.
O uso de texto com o versalete é muito útil para dar ênfase em frases ou expressões em alternativa ao itálico e ao bold. É usado também no inicio do capitulo para chamar a atenção ao primeiro parágrafo, ou como elemento de estilo. Em dicionários ou livros técnico o seu uso torna-se determinate para diferenciar os lemas e palavras que precisam ser tipograficamente diferentes.
Nos softwares de produção modernos como o Indesign criar um texto em versal é muito simples. Basta selecionar o texto desejado e clicar no painel de controle no ícone especifico.
Exportar a formatação do versalete do Indesign para o ePub também é, em teoria, simples. Basta criar um estilo de caractere específico para o texto em versal e aplicar ele nas palavras que usam este recurso (assim como se faz com o bold e o itálico). O Indesign consegue exportar a informação para ePub acrescentando a regra CSS específica para isto, ou seja o font-variant: small-caps.
As frustrações iniciam quando abrimos o ePub no software Adobe Digital Edition, ou em outros software que usa a mesma tecnologia Adobe ( por exemplo: Saraiva Reader, BlueFire Reader, Mantano Reader, Aldiko, etc…).
O versalete simplesmente desaparece!
Isto acontece porque estes softwares não suportam corretamente a regra de CSS para o versal. Porém este cenário vai mudar em breve graças ao ePub3. Um exemplo disso é a nova versão do Adobe Digital Edition 4.0 que agora suporta o ePub3.
Se abrirmos nosso arquivo nesta nova versão iremos ver que nada mudou quanto ao versalete. Porém, se exportamos o mesmo arquivo do Indesign mas no formato ePub 3 então os resultados são bem diferentes! O versalete aplicado pelo Indesign se mantém como você pode ver na imagem abaixo!
Você pode notar isto neste arquivo de exemplo no formato ePub3 [link para baixar].
Mas no caso nosso arquivo seja um ePub2, como resolver isto?
O falso versal (span + classe)
Pra resolver esta situação no ePub2, nasce o "falso versalete", um pequeno truque que cria a ilusão de versalete mesmo em sistemas que não suportam esta característica.
Para fazer isto no Indesign escrevemos ou transformamos o texto em caixa alta e depois aplicamos uma redução no tamanho do texto, onde for necessário.
O resultado como podemos ver no exemplo é aparentemente aceitável. O código gerado, porém, é péssimo e em alguns casos quase incompreensível. O Indesign exporta o estilo de caracter com um tag associado a uma classe e no arquivo CSS declara um tamanho menor para a fonte.
Este método parte do pressuposto que o versalete é nada mais do que um texto em caixa alta reduzido, o que tipograficamente não é verdade. Sobre este tema indico aqui um artigo interessante.
O falso versal com o tag small
Para quem trabalha diretamente com o código é possível criar o falso versal usando diretamente o tag small. Isto reduz a complicação do código e não é necessária uma regra específica no CSS. Porém se você está pensando em produzir um ePub3 ou quer deixar seu código limpo e aberto a novas conversões e transformações no futuro, leve em consideração que segundo as normativas do HTML5 o tag small é destinado à outra coisa.
O HTML5 leva muito em consideração a semântica (o significado) do código e não a simples visualização final tipográfica. No caso do tag small ele passou a ser destinado a texto paralelos, a detalhes como comentários ou texto complementares, enfim a texto com letrinhas miúdas mas que possuem uma sua função específica na publicação, como a nota de copyright de uma foto, por exemplo. Portanto, se puder evitar o uso deste tag para o versal é melhor. Para uma introdução ao HTML5 e ao uso semântico dos tags recomendo este livro "Html5, embarque imediato".
Uma solução que pessoalmente aprecio muito, apesar de mais complexa, é o uso de uma fonte que possua uma variação em versalete. Esta solução é muito mais bonita e elegante por respeitar a tipografia da fonte em uso.
No arquivo de exemplo em ePub2 que você pode baixar aqui, uso a fonte Alegreya que além de possuir uma variação específica para o versalete, faz uso da licença SIL Open Fontpermitindo assim usá-la nos eBooks respeitando o copyright. O site www.fontsquirel.com possui muitas fontes de ótima qualidade e com licença de uso Open Source ou que permitem o uso da fonte embutida em publicações digitais.
Caso você queira usar uma fonte específica para o versal será necessário fazer a declaração no CSS e aplicar a fonte na classe usada no XHTML. Se preferir é possível preparar o texto no Indesign estando atento a selecionar a fonte versal para o estilo de caractere que estamos usando.
font-family: AlegreyaSC;
src: url("../Fonts/AlegreyaSC-Regular.otf");
.fontSmallCaps {
font-family: AlegreyaSC, sans-serif;
class="fontSmallCaps">Uso do versalete com fonte específica + regra CSS
A presença da regra CSS font-variant: small-caps tenta prevenir o caso no qual o software leitor não reconheça a fonte mas reconheça o CSS.
Este arquivo ePub2 [clique para baixar] de testes traz exemplos sobre a aplicação do versal e pode facilitar a vida de quem está iniciando a produzir eBooks e quer encontrar soluções agradáveis, práticas e eficazes para uma tipografia nos livros digitais. Abrindo ele nos vários softwares você vai poder ver qual suporte ele possui para o versalete. Você pode também baixar o mesmo arquivo no formato ePub3 [clique para baixar] e testar nos softwares que suportam este formato.
Para informações sobre os cursos presenciais da Booknando visite está página: cursos.booknando.com.br [link].