A veces las portadas de los libros electrónicos en formato epub no se cargan correctamente en determinados lectores.
La especificación de epub es un poco vaga y cada lector se fija en una cosa, así que hay epubs que en unos lectores muestran la portada y en otros no.
Los cambios que pongo a continuación pretenden servir para todos los lectores, por lo que para un lector determinado no todos los cambios son necesarios.
IMAGEN DE PORTADA
Cada lector utiliza portadas con diferentes proporciones:
– Una de las más habituales es 3:4 (1,33333), por ejemplo 600×800.
– Otra proporción habitual, utilizada por ejemplo por bq Cervantes light es 1,5: 600×900 – 680×1020
– Otra proporción que he visto utilizada es 1,476: 500×738 – 600×886 – 694×1024
La imagen puede estar en formato JPEG, GIF, PNG, BMP y puede llamarse de cualquier manera, pero por lo de asegurarnos que la acepta el mayor número posible de lectores, la llamaremos “cover.jpg”.
MODIFICACIÓN DE EPUB
Los ficheros epub son en realidad ficheros ZIP con otra extensión.
Para modificar un epub hay que abrir el fichero con cualquier gestor de archivos comprimidos, o descomprimirlo y después volverlo a comprimir.
Buscaremos el archivo “content.opf”, que es el que define el epub. En la misma carpeta ponemos nuestro archivo “cover.jpg” y un fichero nuevo “portada.xhtml”.
El “truco” de portada.xhtml no es necesario en todos los lectores, pero como hemos comentado, no molesta (casi) ponerlo y nos aseguramos una mayor compatibilidad.
CONTENIDO DE portada.xml
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titulo</title>
<style type="text/css"> img { max-width: 100%; text-align:center; } </style>
</head>
<body>
<div id="imagen_portada"><img src="cover.jpg" alt="Titulo"/></div>
</body>
</html>
MODIFICAMOS content.opf
<metadata ...
...
<meta name="cover" content="imagen_portada"/>
</metadata>
<manifest>
...
<item href="cover.jpg" id="imagen_portada" media-type="image/jpg"/>
<item href="portada.xhtml" id="cover" media-type="application/xhtml+xml"/>
</manifest>
<spine toc="ncxtoc">
<!-- itemref idref="cover" linear="no"/ -->
...
</spine>
<guide>
<!-- reference href="cover.jpg" type="cover" title="Cover Image"/ -->
<reference href="portada.xhtml" type="cover" title="Cover"/>
</guide>