Ya hemos hablado con anterioridad (en realidad, el POST que recoge el capítulo ANTERIOR de la serie donde hablamos de ello, todavía está sin publicar: perdón por las molestias KIERMEL) del interés que tiene la portada del libro electrónico como conexión con el libro en papel. Además, disponer de un identificador visual del libro electrónico resulta muy cómodo para los mismos fines que cumple en el libro real (por ejemplo, ayudarnos a recordar si lo hemos leído o no). Siguiendo las BBPP LARdT 1.0 para crear un ePUB decente, dedicamos cierto esfuerzo a asegurarnos que la portada que incluimos en el libro se corresponde con la portada original de la edición en papel a la que nos hemos vinculado mediante los metadatos incluidos en libro. Digamos que procuramos evitar que si los metadatos indican que la edición es de “Bruguera” (p.ej.), la portada anuncie orgullosamente que es un libro de “Alfaguara” (p.ej.). Resulta un poco chusco.
Y una vez elegida la portada a incluir se trata de que luzca lo mejor posible, cosa que a veces no es fácil porque el archivo gráfico disponible no es de las medidas o calidad deseable.
El truco está en el SVG
Tanto CALIBRE como SIGIL soportan SVG y la utilizan para la creación de las portadas de nuestro ePUB. Scalable Vector Graphics (SVG) es una especificación para describir gráficos vectoriales bidimensionales, tanto estáticos como animados en formato XML, que permite además la descripción de imágenes en mapas de bits.
Pero SVG es un completo entorno de gestión gráfica, así que también puedes usarlo para crear rótulos con texto por ejemplo.
Hay que tener en cuenta que el programa de lectura que estés utilizando puede no soportar SVG, en cuyo caso no verás la portada.
Las BBPP LARdT 1.0 para crear un ePUB decente, especifican que debemos tener una portada en nuestro libro con la mejor posible, centrado y redimensionable.
Podemos verlo en LUCIFOX:
No importa el nivel de zoom que apliquemos al libro; la portada sigue centrada y se ajusta al tamaño.
Y esto lo conseguimos con el siguiente código:
El truco está en el parámetro preserveAspectRatio="xMidYMid meet"
que consigue que mantener la proporción horizontal y vertical sin que se estire la imagen. Pero además dado que la pantalla del PAPYRE tiene 600x800 puntos mantenemos la imagen para que ocupe un 80% de la pantalla (480x640 puntos) como máximo mediante:
<image width="480" height="640" xlink:href="../images/img0001.jpeg"></image>
y, por último, creamos una viewBox (es decir, una caja de dimensiones y posición determinadas dónde se va a proyectar el contenido de los comandos SVG) con
viewBox="-60 -80 600 800"
donde posicionamos la esquina superior izquierda de la viewBox en la mitad (20% / 2 =10% de 600x800) del espacio (10%) que le recortamos (20%) a la superficie total de la pantalla (100%).
No entendí los números y la explicación sobre el viewBox. ¿Podrías aclararlo?
ResponderEliminar