Variações

Baixe como e-book

Testar seus e-books em diferentes plataformas não é apenas mais uma etapa da produção: é um exercício de descoberta. Como já falamos mais de uma vez por aqui, não existe uma visualização única para um livro digital, pois os aplicativos e aparelhos influenciam, em maior ou menor grau, a maneira como o arquivo é renderizado. Na prática, isso significa que elementos que funcionam num não necessariamente funcionam noutro, e que resultados idênticos nem sempre serão obtidos com as mesmas linhas de código.

A iniciativa 99 problems, por exemplo, serve para que produtores listem bugs encontrados em plataformas de leitura de e-books e troquem ideias de como resolvê-los. Apenas mais uma evidência das diferenças encontradas.

O objetivo desse post é apontar algumas dessas diferenças, para que fique claro do que estamos falando, e também oferecer algumas dicas para lidar com elas. Selecionei algumas relativamente tranquilas de lidar.

Background-color (cor de fundo) numa página inteira

Exemplo: uma página com cores invertidas – fundo preto, fonte branca. Forma mais simples de adaptar no e-book: criar, na folha de estilos, uma classe que sirva para modificar a cor de fundo da página (digamos .black { background-color: #000;} ) e outra para modificar a cor da fonte (um <span> caso já haja uma classe aplicada ao texto da página; uma classe de parágrafo totalmente nova caso não haja. O importante é que o parâmetro color: #fff esteja aplicado). O passo seguinte é atribuir as classes: para que toda a página fique com fundo preto, aplica-se class=”black” no <body> e a classe, seja <span> ou de parágrafo, no trecho específico.

Em termos técnicos, nada há de errado no uso dessas soluções. O resultado, porém, varia dependendo do ambiente de leitura.

background-color-SaraivaAplicativo da Saraiva

background-color-Google

Aplicativo Google Livros

background-color-iBooks

Aplicativo iBooks

O resultado que mais salta aos olhos é do iBooks, da Apple. Lá, com os parâmetros aqui apontados, consegue-se algo parecido com uma caixa de texto ou uma <div>. A área preta se restringe aos limites do texto, e não toma toda a tela, como seria de se esperar.

O problema não é só do iBooks: alguns aplicativos não aceitam cores no <body>. É preciso, portanto, em casos assim, encontrar uma solução intermediária, que pode ser a seguinte: utilizar uma <div> que englobe todo o texto que precise ter o background colorido; nela, especificar a cor desejada; além da cor, utilizar o parâmetro padding para que o texto não fique colado às bordas. O resultado não é perfeito, mas pode satisfazer a necessidade da cor de fundo numa página específica.

background-color-iBooks-padding

iBooks: <div> + padding

Renderização de fontes

Fontes embutidas podem ser uma pequena dor de cabeça. Enquanto há aplicativos que as visualizam sem problemas, outros simplesmente as ignoram e substituem por fontes padrão.

No iBooks, por exemplo, é necessário o acréscimo do arquivo com.apple.ibooks.display-options.xml1 na pasta META-INF do ePub para que fontes embutidas sejam corretamente renderizadas.

Se estamos falando do app Kindle para iOS – iPad ou iPhone –, não tem jeito: as fontes simplesmente são ignoradas. Você pode apenas escolher entre o conjunto de fontes que o aplicativo disponibiliza por padrão.

Há situações em que as fontes são essenciais para o livro. Podem identificar uma mudança de narrador, ou mudanças mais sutis importantes para a narrativa. Outra complicação possível é a seguinte: certas fontes são naturalmente pequenas (ou parecem pequenas se comparadas com a fonte do miolo de um livro). Quando estas precisam ser inseridas, seu tamanho por vezes é aumentado na folha de estilos (se o tamanho padrão da fonte do miolo for 1em, a classe onde está atribuída a fonte diferenciada precisará ter, digamos, 1.3em como font-size) para que emparelhe com da fonte do texto. Se determinado aplicativo não visualiza fontes embutidas e as substitui por uma padrão, essa fonte padrão, no trecho específico onde a fonte embutida deveria aparecer, surgirá maior que a fonte do miolo! Isso certamente causará confusão entre leitores que visualizem o e-book naquela plataforma.

A dica é ficar atento às fontes utilizadas no projeto gráfico dos livros a serem convertidos e, caso necessário, substituí-las (após consulta ao departamento de produção gráfica, naturalmente).

Largura e altura de imagens

Muitos aplicativos e mesmo alguns e-readers possuem a funcionalidade de ampliação de imagens – com um duplo toque, é possível exibir a imagem separadamente do trecho do livro onde ela se encontra, bem como aumentar e diminuir o zoom sobre a mesma. Devido a restrições de resolução, imagens muito grandes não podem ser colocadas a esmo no e-book, pois extrapolam o tamanho de tela. Através do css, no entanto, é possível manipular o tamanho com que uma imagem é visualizada no e-book sem que isso signifique diminuir o tamanho real da imagem. Assim, o leitor tem uma visualização menor da imagem e, ao tocar duas vezes sobre ela, pode vê-la em suas verdadeiras dimensões.

A forma mais básica de efetuar essa ação, que é a aplicação de uma classe diretamente na imagem, como mostra o exemplo: <img class=”image01″ src=”../Images/nomedaimagem.jpg”></img>, onde a classe image01 tem como parâmetro, digamos, width: 50%.

image-width-Koboapp

Aplicativo da Kobo

image-width-Saraiva

Aplicativo da Saraiva

Porém, esse tipo de manipulação do tamanho da imagem é outro recurso que varia de ambiente para ambiente. O iBooks, por exemplo, não aceita a solução aplicada nos exemplos acima. O aplicativo da Apple realiza um ajuste automático, de modo que a imagem se encaixe nas proporções da tela:

image-width-iBooks-errado

iBooks. Perceba como a imagem fica maior que nos exemplos anteriores.

Um modo de realizar esse processo no iBooks, como demonstrado nesse texto da Liz Castro (Deus a abençoe) é não definir a largura pretendida na imagem em si, mas de uma <div> que a contenha. A imagem precisa estar ajustada como width: 100%. A <div> precisa ter, além do parâmetro da largura (continuamos com os 50%), a linha display: inline-block.

image-width-iBooks-certo

iBooks respeitando a largura designada no css.

Dessa forma, consegue-se controlar o tamanho com que a imagem será visualizada, mesmo que ela seja, originalmente, bem maior do que se vê. Unido ao recurso de ampliação da imagem via duplo toque, essa funcionalidade mostra-se ideal para adaptação de cadernos de fotos, por exemplo, ou fotos que surgem em meio do texto, mais comuns em livros de não ficção. E o melhor: essa última solução funciona em todos os aplicativos e eReaders.

Esses foram apenas alguns exemplos. Como falado no início, um exercício de descoberta. Que não acaba nunca, diga-se.


 

1. Aqui, uma explicação passo a passo acerca do uso de fontes embutidas no iBooks: http://ebooks.stackexchange.com/questions/1037/can-i-make-custom-fonts-show-up-in-ibooks (em inglês). Se você utiliza a versão mais atual do InDesign para exportar seus ePubs, nem precisa se preocupar: o programa já faz esse trabalho para você.

escrito por Josué de Oliveira

Josué de Oliveira

Josué de Oliveira tem 25 anos e trabalha com e-books há pouco mais de três. Integra a equipe de digitais da editora Intrínseca, lidando diretamente com a produção dos mesmos, da conversão à finalização. É formado em Estudos de Mídia pela Universidade Federal Fluminense. Gosta de ler, escrever, ver filmes esquisitos e curte bandas que ninguém conhece. Tem alguns contos publicados em antologias e um romance policial que, segundo rumores, um dia ficará pronto.

4 comentários sobre “Variações

Deixe um comentário