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
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.
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
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:
- Entre las lineas 40 y 59, el conjunto de reglas css que controlan el formato de los capítulos
- Todas las reglas están encerradas entre llaves { } y se separan entre sí por un punto y coma ;
- Cada regla está compuesta por una propiedad y un valor, separados por los dos puntos :, por ejemplo color:#000000
- La línea 47 contiene la regla margin-bottom:30px; que controla el espacio inferior
- La línea 50 contiene la regla margin-top:100px; que controla el espacio superior
- 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:
- Cambiar la extensión del archivo de libro .epub por .zip
- Descomprimir el archivo .zip original para obtener la estructura de archivos y carpetas del EPUB
- Editar con Dreamweaver el archivo de hoja de estilos idGeneratedStyles.css (dentro de la carpeta OEBPS)
- Cambiar la propiedad margin-top por padding-top y guardar los cambios en la hoja de estilos
- Reconstruir el .zip
- 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.
