Como ajustar a capa do livro digital. Dicas de CSS e modelo gratuito
Para quem trabalha com produção de livros digitais um dos problemas encontrados com mais frequência é o bom funcionamento do design nos vários softwares de leitura. Muitas vezes as frustrações nascem de uma visão equivocada de que o digital deva ter o mesmo design do impresso. Sobre isso temos falado bastante e indico aqui o artigo da Isadora Cal que trabalha na Bookwire sobre os eventos “Ebookcraft + Tech Forum 2019”.
Entenda que o seu E-book e o seu Audiobook são formatos diferentes do seu livro impresso. O conteúdo pode ser o mesmo, mas a experiência de leitura, não. (Isadora Cal)
Uma boa compreensão da linguagem HTML/CSS usada no formato ePub irá permitir a construção de um conteúdo que seja acessível e ao mesmo tempo funcione de maneira agradável nos vários softwares leitores.
Quero deixar aqui a vocês um modelo de capa que utilizo nos livros produzidos e que coloquei em um repositório do Github com licença opensource. Você encontra aqui o link para a página. É possível clonar o repositório ou simplesmente baixar um arquivo zip no seu computador. Você poderá assim utilizar nos seus projetos os modelos que estão lá.
O que quero mostrar aqui é uma funcionalidade bacana do CSS que acrescentei no modelo de capa.
Dando uma olhada no CSS da capa
Olhado o arquivo CSS que utilizo, podemos ter a sensação de redundância de regras, e de fato é assim. O objetivo é alcançar o maior maior número possível de leitores de eBook fazendo com que eles interpretem de maneira correta a capa, que deve ser uma imagem que se adapta à tela cobrindo toda a área de visualização permitida pelo software.
Percebam a linha seguinte do CSS:
@supports (height: 100vh)
{
figure { height: 100vh; }
}
Utilizei uma regra @supports que verifica se o software dá suporte à algumas regras. No meu caso peço ao software leitor se ele suporta o valor de 100vh para a altura. O “vh” é um valor que indica a vertical da área de visualização (chamada viewport). Isto significa que se eu colocar um valor de 50vh para um objeto ele irá se posicionar na metade da “página”. Legal né?
Nem todos os softwares suportam isso. É por esta razão que primeiro peço a ele se existe suporte. Caso exista, então ele aplica este valor ao tag <figure> que no meu caso contém a imagem da capa. Isto fará com que este tag tenha o máximo da altura possível fazendo assim com que a imagem adapte-se corretamente.
E se não tiver suporte a isso? Simples, ele vai usar o valor de max-height: 100% que declarei anteriormente para o tag <figure> e o software vai tentar fazer o possível para deixar a capa no lugar certo.
Bem, como vocês irão perceber que o modelo de capa o HTML é bem simples, mas completo. Permite o funcionamento mesmo se o CSS tiver problemas ou o software leitor não aceitar o funcionamento do CSS. Também funciona com os software que irão fazer a leitura da tela (screen reader) para a acessibilidade.
Era isso que queria compartilhar! Se gostou compartilhe com seus amigos.
Cursos e desconto
Caso ficou interessado em aprender mais sobre CSS e HTML5 faça o curso HTML e CSS para livros digitais.
Se ainda não trabalha com livros digitais mas gostaria de iniciar faça o curso Técnicas de produção de livros digitais.
Deixo aqui para quem conseguiu ler até o final o artigo um bônus de desconto para todos os cursos da plataforma da Booknando de 10%. No momento da compra do curso basta colocar na área onde pede o coupon este texto: MEDIUMBKND.
