Padronização do design dos eBooks: hyperlinks

Márcio Duarte, em 16/09/2011. Categoria: ePub Bugs, Laboratório do eBook 0

O suporte a folhas de estilo CSS nos leitores de ePub é muito irregular, para não dizer sofrível. Mesmo atributos simples como uma simples alteração de cor nos hyperlinks não é garantida em todos os leitores. O iBooks, leitor de eBooks da Apple que usa o motor de renderização Webkit, é um exemplo disso. Recusa-se a aceitar a alteração na cor dos links, mesmo se o CSS for aplicado inline, junto ao código, o que deveria ter a preferência sobre outros estilos. A cor padrão aplicada pelo programa é um púrpura (fig. 1) que possui pouco contraste com a cor preta padrão do texto. O resultado é que muitos links são difíceis de encontrar à primeira vista. Mudar a sua cor da forma padrão não funciona no iBooks. Por exemplo: ao usar o CSS a { color: red; }, nada acontece. A mesma cor púrpura de sempre é utilizada. Se aplicarmos estilos inline (diretamente no código HTML) a cor é alterada, mas este tipo de aplicação do CSS é difícil de introduzir e atualizar. Isso acontece no iBooks, no Adobe Digital Editions (e em todos os eReaders que usam a mesma base, o Adobe RMSDK) estilos inline não são obedecidos.

Onde estão os links nessa página?

Figura 1: Um doce para quem encontrar os links neste texto :)

Investigando o problema

Mas será que não é mesmo possível alterar essa cor mantendo um padrão entre os diferentes eReaders? E outros atributos, como underline e cor de fundo? Como outros programas/dispositivos leitores se comportam nesse quesito? Para buscar soluções, criei um ebook de teste (Baixe: [download id="3"]) com diversas formas de se estilizar um link via CSS para testá-lo em diversos eReaders, e verificar como se comportam de acordo com o tipo de código: estilos inline, em folhas de estilo externas ou no cabeçalho do HTML. Como o iBooks utiliza o Webkit para renderizar as páginas, testei também várias extensões CSS desta engine para verificar como o eReader da Apple se comporta. As extensões CSS (ou CSS vendor extensions) do Webkit, assim como as de outros motores de layout como o Gecko (Firefox) e Trident (Internet Explorer), são propriedades de estilos CSS que afetam somente os programas que os utilizam como base, e não funcionam nos programas que não as usam. Assim podemos aplicá-los para (tentar) resolver problemas como estes, sem prejuizo algum para a interpretação do código do ePub.

Fiz algumas descobertas interessantes:

  • Como havia dito, uma parte dos eReaders, entre eles os que usam a mesma base do Adobe Digital Editions, simplesmente não reconhecem estilos inline, aplicados junto do código. O CSS especificado em uma classe ou diretamente à tag <a>, por meio de um CSS externo, foi aplicado corretamente. O iBooks, por sua vez, reconheceu os estilos inline, mas não os externos (por classe ou aplicados à tag <a> :P ;
  • No iBooks, se o texto do link estiver envolto por uma tag span, é possível alterar a cor do texto do link e a cor de fundo, mas o underline é mantido em outros leitores, pois é uma propriedade do link em si;
  • O CoolReader (programa relativamente popular e bastante utilizado na plataforma Android) não reconheceu os estilos aplicados por meio de “id” ou diretamente à tag <a> no CSS externo, apenas aqueles aplicados por meio de “class”;
  • Ao enclausuar o texto do link em uma tag <span>, o Nook ignorou a cor de fundo do link;
  • A extensão -webkit-text-fill-color é capaz de alterar a cor do texto do link no iBooks sem prejudicar a funcionalidade. A boa notícia é que outros eReaders que utilizam o Webkit também se beneficiam da mudança. Nos meus testes, os programas de leitura Stanza (iPad), iBis Reader (Online) e Moon+ Reader (Android) responderam à propriedade CSS -webkit-text-fill-color, ou seja, aplicaram a cor corretamente;
  • Inserir no ePub o arquivo com.apple.ibooks.display-options.xml, um arquivo geralmente utilizado em ePubs de layout fixo do iBooks, faz com que o programa aceite qualquer cor de link (permite também que fontes embutidas sejam utilizadas), mesmo sem a extensão -webkit-text-fill-color. Mas como é usado apenas no iBooks, não é uma opção muito universal;
  • Parece ser uma prática relativamente comum entre vários eReaders (Stanza, Laputa, FBReader e mesmo o Aldiko para Android) adotar uma espécie de pré-processamento do código, ou seja, ao ser aberto, o conteúdo do ePub é extraído e é renderizado pelo programa com a ajuda do seu próprio CSS, ignorando o CSS embutido no arquivo. Alguns leitores oferecem a possibilidade de carregar esse CSS especificado pelo designer, outros não (Laputa, FBReader, Stanza Desktop). Isso dificulta muito a padronização do projeto visual do ePub, pois cada eReader tem sua opinião sobre a melhor forma de apresentar o ePub, e ela nem sempre é a melhor possível. Seria importante que os programas permitissem que os estilos propostos pelo designer fossem carregados primeiro, assim como acontecem nos navegadores no caso de websites. Alguém já navegou em algum site onde o design do site foi todo redefinido pelo navegador ao ser aberto, sem sua solicitação? Creio que não.

Galeria 1: Imagens das telas de alguns eReaders. Note a discrepância na interpretação dos links.

Conclusões

A melhor abordagem ao estilizar links no ePub é aplicar uma classe qualquer à tag em questão e especificar os estilos em um arquivo CSS externo para afetar os eReaders baseados no RMSDK da Adobe, incluindo a propriedade -webkit-text-fill-color para os programas que usam Webkit, principalmente o iBooks. Não enclausure o texto do link em nenhuma tag, aplique o estilo à classe, se preciso. Assim, para especificar cor nos links dos seus ePubs inclua sempre no seu código:

/* HTML */
<a class=“link” href=“http://www.seulink.com”>Texto do link</a>
/* CSS */
a.link {
color: #suacor;
-webkit-text-fill-color: #suacor;
}

Esta é solução mais universal para estilização de links. Ainda assim, alguns eReaders como o FBReader e o Laputa Reader para Android sobrepõem completamente o CSS criado pelo designer do ePub. Outros, como o Moon+ Reader e o Aldiko, também para Android, só aceitam o CSS se o leitor especificar deliberadamente essa opção nas configurações do programa. Neste caso, não há muito o que fazer, mas como o código não interfere nos demais estilos e na performance do arquivo, é uma opção viável.

Lembrando que essa abordagem de usar extensões Webkit pode ser aplicada para buscar a solução de outros tipos de problemas de interpretação do CSS nos eReaders que usam esse “motor”, como o iBooks e o Stanza (iPad), mas não a utilize isoladamente para recursos fundamentais do livro, pois somente os eReaders com Webkit serão capazes de apresentá-los. O ideal seria mesmo que a especificação ePub (e o CSS que ela suporta) fosse implementada corretamente nos eReaders, mas até lá soluções como essa serão necessárias.

Padronização do visual do ePub: futuro distante

A dificuldade em se aplicar cores a um simples hyperlink mostra a complexidade em se produzir ePubs que fujam do default dos programas e busquem uma padronização no projeto visual do Livro eletrônico. Ainda estamos longe do estágio em que um arquivo com layout mais avançado seja lido de forma padronizada nos mais diversos eReaders. Quem sabe com a adoção do ePUB3 isso começa a se resolver. Até lá, muito teste e cautela na aplicação de estilos CSS para o ePub.

Deixe o seu comentário