Um livro, múltiplas telas

Márcio Duarte, em 26/08/2012. Categoria: Dicas, Laboratório do eBook 3

Cada plataforma tem suas particularidades na apresentação do conteúdo do livro

Acapacidade do ePUB ser realmente multiplataforma é, sem dúvida, a principal promessa do formato, ainda que essa não seja, nem de longe, a realidade. Não seria interessante ter seus livros digitais funcionando consistentemente em todos os programas de leitura, com bela tipografia, conteúdo bem estruturado e legível? É, seria… mas por causa da fragmentação de plataformas e do suporte irregular ao padrão, o que acontece é que, na prática, é difícil manter um mínimo de consistência na exibição do conteúdo, principalmente se ele é um pouco mais complexo visualmente falando, com listas, quadros, tabelas, fontes personalizadas e múltiplos estilos. É a “síndrome do cobertor curto”: estilos complexos aplicados em uma plataforma “A” interferem na visualização do texto na plataforma “B”, e vice-versa.

Ainda que isso esteja longe de ser resolvido, há um recurso muito útil do CSS para lidar com esse problema e garantir que o seu livro matenha um controle mínimo da apresentação do texto, ao menos nas plataformas dominantes: as media queries. Para quem não sabe, as media queries, agora oficialmente recomendadas pelo W3C, são o coração do webdesign responsivo e regulam a aplicação de estilos CSS de acordo com as características do ambiente de apresentação do conteúdo (media types). Assim, é possível ter estilos CSS que, por exemplo, só são aplicados ao conteúdo quando este é impresso ou quando é visualizado em uma tela de celular. A lista de aplicações é enorme e há até previsão para utilização em TVs. Na demonstração abaixo, a media query significa: parágrafos exibidos em uma área de visualização (viewport) de, no mínimo, 1024px de largura (como a do iPad em formato paisagem) devem ter a cor vermelha:

@media screen and (min-width: 1024px) {
p { color: red; }
}

Podemos ativar as media queries dentro do CSS (exemplo acima) ou no próprio XHTML, como no exemplo a seguir:

<link rel="stylesheet" media="screen and (min-width: 1024px)" href="estilos.css" />

Uma media query referenciada na seção <head> do documento XHTML.

Usando as media queries no ePUB

O recurso é poderoso, mas não faz parte da especificação ePUB 2.0.1, e sim do ePUB3. Portanto, ainda não é suportado em boa parte dos eReaders que usam o Adobe RMSDK (ou Adobe Reader Mobile Software Development Kit), um dos principais motores de renderização do mercado, mas que ainda não foi atualizado para ePUB3. Apesar disso, já podemos usar as media queries a nosso favor para aperfeiçoar a apresentação do livro nos sistemas de leitura que as suportam, como o iBooks e o Readium. O segredo é criar duas folhas de estilo: uma voltada a eReaders que reconhecem o recurso (geralmente os baseados no Webkit) e outra voltada aos eReaders que usam o RMSDK (Nook, eReaders da Sony, Positivo Alfa, Adobe Digital Editions, Saraiva Reader, Cultura Reader, Bluefire e outros).

A primeira folha de estilos deve conter todo o CSS padrão do livro e a segunda, os estilos para os eReaders que suportam media queries. Para que essa técnica funcione, é preciso que as media queries sejam aplicadas em uma folha de estilo separada, referenciada no XHTML após a primeira, com os estilos padrão. Ela é inefetiva se todo o código estiver em apenas um CSS (o RMSDK simplesmente o ignora dessa forma). Veja um exemplo:

<link href="padrao.css" rel="stylesheet" type="text/css" /> <!-- CSS padrao -->
<link href="otimizado.css" media="all and (min-width: 240px)" rel="stylesheet" type="text/css" /> <!-- CSS otimizado -->

Este pedaço de código deve ser inserido no <head> de todos os arquivos XHTML. Os estilos vão nos respectivos arquivos CSS. Não se esqueça de referenciá-los na seção manifest do arquivo .opf

Os eReaders com RMSDK vão simplesmente ignorar a segunda folha de estilos (otimizado.css), que pode ser utilizada para melhorar ou resolver problemas na formatação do livro nos eReaders com Webkit, que permitem uma gama de possibilidades de formatação muito maior, desde listas com marcadores personalizados, gradientes sem o uso de imagens, até quadros com cantos arredontados. Dessa forma, é possível aplicar o conceito de melhoria progressiva (Progressive Enhancement) aos eBooks, e ter versões mais refinadas tipograficamente nos leitores mais avançados, sem prejudicar a formatação e a acessibilidade dos livros nos eReaders menos capazes. Livros apresentados no iBooks, particularmente, podem ser muito beneficiados dessa técnica, já que o suporte a CSS no leitor da Apple é muito mais avançado que os demais.

Demonstração de tipografia avançada para Webkit (iBooks)

Figura 1: um exemplo de tipografia avançada para o motor Webkit, que utiliza apenas CSS. Soluções assim já funcionam no iBooks. (clique na imagem para visitar o site de origem)

Obviamente, essa técnica tem suas limitações quando falamos de livros digitais, pois nem sempre é possível resolver todos os problemas de apresentação visual somente no CSS; há casos onde é necessário alterar também o código XHTML para solucionar bugs de formatação. Sem falar na insistência de alguns programas e dispositivos em ignorar por padrão o CSS original do livro, impondo cegamente sua própria folha de estilos, como acontece no eReader Nook e no aplicativo Aldiko, no Android.

Painel do leitor Nook

Figura 2: O famigerado publisher defaults, sempre desligado por padrão, no Nook. Não há media query que dê jeito…

Apesar das limitações dos eReaders, as media queries devem se tornar cada vez mais necessárias no mundo dos eBooks, na medida em que observamos a proliferação de aparelhos (o iPad mini vem por aíjá veio ao mundo), programas voltados à leitura com suporte a EPUB3 e livros lidos a partir do próprio navegador. Diante desse cenário de múltiplas telas e resoluções, toda carta na manga é bem-vinda.

Extras

Para saber se o seu eReader suporta media queries, baixe o ePUB de teste no link abaixo e abra-o no programa/dispositivo de leitura. O arquivo possui os exemplos de código utilizados neste artigo.

[download id="4" format="2"] Formato ePUB » Tamanho: 310kb