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.

Aplicaciones de maquetación de páginas

En esta nueva entrada les presento QuarkXPress, una aplicación para Windows y Mac producida por Quark Software Inc.

QuarkXPress e InDesign se asemejan mucho, de hecho ambas aplicaciones se usan para lo mismo: la maquetación de páginas.

Iniciar un proyecto nuevo

El cuadro “Nuevo proyecto” de Quark, al igual que el cuadro “Nuevo documento” de InDesign, permite configurar las características generales de un nuevo documento, como el Tipo de maquetación (para imprimir o digital), Tamaño de Página de documento, Márgenes y Columnas.

Cuenta además con una casilla de opción para crear pliegos de dos “Páginas enfrentadas” (para diseñar material para imprimir) y una casilla de opción para crear un “Cuadro de texto automático”, nuestro conocido “Marco de texto principal” de InDesign.

En la imagen superior, la opción de Cuadro de texto automático está activada. 

La interfaz de usuario

La interfaz de usuario de QuarkXPress es muy similar a la de Adobe InDesign.

En la parte superior de la ventana hay una barra que muestra el ícono y el nombre de la aplicación y a continuación, entre corchetes, el nombre del proyecto abierto (con extensión de documento .QXP), el tipo de maquetación y su orientación.

Luego aparece una barra con los 11 menús de la aplicación: Archivo, Editar, Estilo, Elemento, Página, Maquetación, Tabla, Visualizar, Utilidades, Ventana y Ayuda.

Más abajo se puede observar una barra sensible al contexto, muy similar a nuestra conocida "Barra de control" de InDesign, que muestra información acerca del objeto que está actualmente seleccionado.

Mas abajo a la izquierda hay una caja de herramientas y a la derecha una barra similar a la barra de "Paneles" o "Paletas" de InDesign.

En la imagen está el panel “Maquetación de página” de Quark abierto. Los paneles se pueden abrir o cerrar desde el menú "Ventana". El panel “Maquetación de página” se puede abrir o cerrar presionando alternativamente la tecla "F4" del teclado. Este panel corresponde al panel “Páginas” (F12) de InDesign.

La primera versión de QuarkXPress se lanzó en 1987, sólo para Mac, mientras que en 1992 apareció la versión para Windows. La última versión (QuarkXpress 2018) fue lanzada el 16 de mayo de 2018.

En futuras entradas presentaré algunas características de QuarkXPress que la convierten en una alternativa interesante a nuestro conocido Adobe InDesign.

Controlar la posición de los títulos de capítulo en un EPUB de maquetación fluida

En esta entrada aprenderemos a controlar una parte del espacio en blanco, en libros electrónicos en formato EPUB de maquetación fluida.

Supongamos que tenemos un libro electrónico que contiene varios capítulos, como en el ejemplo siguiente. La imagen inferior muestra, en el visor de libros electrónicos de Calibre, una pantalla del e-book "La Máquina del Tiempo", de Herbert George Wells, donde inicia el capítulo "La máquina":

Supongamos que queremos que el título de cada capítulo aparezca a una distancia determinada del borde superior de la caja de texto, por ejemplo a 100 píxeles, como muestra la siguiente imagen:

Podemos lograr este efecto muy fácilmente utilizando la hoja de estilos CSS del libro electrónico.

Hemos visto en entradas anteriores que en un libro digital en formato EPUB el contenido legible se guarda en archivos HTML y el formato se controla con un archivo de hoja de estilos CSS.

Al exportar un documento InDesign en formato EPUB de maquetación fluida, se crean dentro del paquete de archivos todos los documentos HTML necesarios con el contenido del libro y, además, un archivo de hoja de estilos CSS independiente que controla el formato del libro, compuesto normalmente por varias reglas CSS.

La ventaja de utilizar un archivo de hoja de estilos independiente es que si modificamos la hoja de estilos, el formato de todos los documentos HTML que usen esa hoja de estilos se actualizará automáticamente. Este método de trabajo define una separación entre el contenido y el formato y brinda una mayor flexibilidad y control en la tarea de diseño.

En esta entrada veremos con un ejemplo concreto cómo controlar el espacio en blanco de las páginas iniciales de los capítulos en nuestro EPUB.

La definición de espaciados con estilos de párrafo

En InDesign el formato del texto se controla con la definición y aplicación de estilos de texto.

Los estilos de párrafo permiten formatear párrafos completos.

En la siguiente imagen tenemos una página de un documento InDesign donde inicia un nuevo capítulo con el título "La máquina":

También podemos observar a la derecha de la imagen el panel Estilos de párrafo, que muestra una lista de los estilos ya definidos en el documento InDesign. El estilo de párrafo Capítulo al final de la lista, está seleccionado en el panel.

Por último, está abierto el cuadro Opciones de estilo de párrafo, que muestra todas las propiedades de formato definidas en el estilo.

Todas las propiedades de formato están organizadas en Categorías, que aparecen en la lista de la izquierda. Por ejemplo, la categoría Sangría y espaciado muestra los formatos vinculados a las sangrías y espaciados definidos en el estilo Capítulo. Podemos observar por ejemplo, que el estilo Capítulo se define con una Alineación al Centro, un Espacio anterior de 100 píxeles y un Espacio posterior de 30 píxeles.

En la práctica esto significa que cada párrafo formateado con el estilo Capítulo aparecerá centrado, con un espacio en blanco de 100 píxeles por encima y de 30 píxeles por debajo.

La hoja de estilos de un EPUB

Al exportar el documento InDesign en formato EPUB de maquetación fluida, los estilos de párrafo se traducen en reglas de estilo que se almacenan en un archivo de hoja de estilos css que controlará el formato del libro.

La siguiente imagen muestra una sección del archivo de hoja de estilos idGeneratedStyles.css generado por InDesign al exportar en formato EPUB y editado con la aplicación Adobe Dreamweaver:

En el archivo idGeneratedStyles.css, las reglas de formato aparecen en filas numeradas.

Observe lo siguiente:

1. Entre las lineas 40 y 59, el conjunto de reglas css que controlan el formato de los capítulos
2. Todas las reglas están encerradas entre llaves { } y se separan entre sí por un punto y coma ;
3. Cada regla está compuesta por una propiedad y un valor, separados por los dos puntos :, por ejemplo color:#000000
4. La línea 47 contiene la regla margin-bottom:30px; que controla el espacio inferior
5. La línea 50 contiene la regla margin-top:100px; que controla el espacio superior
6. En la línea 53, la propiedad page-break-before sirve para controlar el salto de página antes de cada capítulo y el valor always hace que siempre se cambie de página antes de dicho elemento

Si abrimos el libro EPUB en el visor de libros electrónicos de Calibre, podremos observar que efectivamente cada capítulo comenzará en una nueva pantalla. Sin embargo nos llamará la atención lo siguiente: no se observará el espacio anterior en blanco de 100 píxeles. Esto es algo normal, no se trata de un error de InDesign.

Para lograr el efecto deseado tenemos que hacer una pequeña modificación en la hoja de estilos idGeneratedStyles.css.

La siguiente imagen muestra el cambio que debemos introducir en la linea 50: la propiedad padding-top sirve para controlar el espacio de relleno horizontal superior del elemento.

Introducir cambios en la hoja de estilos

Se deben seguir los siguientes pasos:

1. Cambiar la extensión del archivo de libro .epub por .zip
2. Descomprimir el archivo .zip original para obtener la estructura de archivos y carpetas del EPUB
3. Editar con Dreamweaver el archivo de hoja de estilos idGeneratedStyles.css (dentro de la carpeta OEBPS)
4. Cambiar la propiedad margin-top por padding-top y guardar los cambios en la hoja de estilos
5. Reconstruir el .zip
6. Cambiar la extensión del archivo .zip por .epub

Abra el nuevo EPUB con el visor de libros electrónicos de Calibre y observe los cambios:

Atención: se debe ser muy cuidadoso al escribir código en la hoja de estilos css, ya que cualquier error puede hacer que nuestro libro sea ilegible.