Controlar la visibilidad de los pies de ilustración de imagen en un EPUB de maquetación fluida

En esta entrada aprenderemos a resolver un problema que se puede presentar en el texto de los pies de ilustración de las imágenes incluidas en un libro en formato EPUB de diseño fluido.

Supongamos que un libro en formato EPUB de diseño fluido contiene imágenes flexibles que incluyen un texto como pie de ilustración. Puede ocurrir que el texto del pie de ilustración o parte del mismo quede oculto cuando su texto es extenso, cuando se aumenta el tamaño de la fuente de lectura o si la pantalla del visor del libro no es suficientemente ancha y el texto requiere varias líneas.

En la siguiente imagen podemos ver una página de un EPUB de diseño fluido en el visor de libros electrónicos de Calibre.

El texto del pie de ilustración "Los cuadrantes de la máquina señalaban el año 802.701" ocupa tres líneas y nunca queda oculto.

Esto se puede lograr muy fácilmente editando la hoja de estilos CSS del libro electrónico e introduciendo un pequeño cambio de código.

Esta técnica de edición avanzada por medio de la edición de la hoja de estilos CSS ya se ha explicado en detalle en otras entradas de este blog:

http://mmindesign.blogspot.com/2013/07/estilos-css-en-documentos-epub-parte-i.html

Estilos CSS en documentos EPUB. Parte I: Introducción El estándar para libros electrónicos EPUB de maquetación fluida tradicional se caracteriza porque el contenido del libro se reorganiza y adapta a cualquier tamaño de pantalla y se basa en otros estándares anteriores como el HTML de páginas web y el CSS utilizado para modificar el aspecto de los elementos de las páginas web. La adopción de los estándares HTML y CSS es una muy buena ... mmindesign.blogspot.com

Continuando con nuestro ejercicio, el problema del texto oculto se resuelve en dos pasos:

Paso 1) Fijar el espacio entre las imágenes del libro y el texto:

Exportar el documento InDesign en formato Epub de maquetación ajustable.

En el cuadro de opciones de exportación, en la categoría "Objeto", sección "CSS":

- Tamaño de CSS: Relativo al flujo de texto (para que las imágenes sean flexibles)

- Maquetación: centrar (para centrar las imágenes en la pantalla del lector)

- Espacio antes de: 6 píxeles (para fijar el espacio superior entre cada imagen y el texto del libro)

- Espacio posterior: 36 píxeles (para fijar el espacio inferior entre cada imagen y el texto del libro, este espacio debe ser suficientemente amplio para que quepa el texto del pie de ilustración en 2 o 3 líneas)

Paso 2) Fijar la visibilidad del texto de los pies de ilustración como "visible":

Editar con Dreamweaver el archivo de hoja de estilos CSS del libro (idGeneratedStyles.css). Dentro de la estructura del EPUB, este archivo se encuentra dentro en la carpeta "OEBPS/css/".

Es necesario cambiar el valor de visibilidad del overflow por defecto (hidden) a la valor visible en cada uno de los contenedores de texto del pie de ilustración.

La siguiente imagen muestra el archivo de hoja de estilos CSS editado con la aplicación Dreamweaver con la corrección del código ya hecha para una imagen:

Observemos los siguientes detalles en el código:

- El contenedor de la imagen inicia en la línea 141 #_idContainer000, aquí no hay que cambiar nada.

- El contenedor del pie de ilustración inicia en la línea 149: #_idContainer001, en la linea 152 hemos cambiado el valor de visibilidad del overflow a visible.

Hechos todos los cambios necesarios en la hoja de estilos CSS, debemos guardar el archivo y por último reconstruir el paquete EPUB con la aplicación de compresión de archivos.

Hay que tener en cuenta que un pequeño error de escritura de código en el archivo CSS podría hacer que el libro sea ilegible, por lo tanto es siempre aconsejable comprobar el libro en el visor de libros electrónicos de Calibre.