Maquetando poesía en EPUB (1): Introducción

A raíz de un interesante debate técnico en un foro sobre cómo maquetar poemas en formato electrónico, he decidido dedicar una pequeña serie de artículos a esta materia. Aunque no es una tarea complicada, diseñar libros de narrativa electrónicos en formato EPUB 2 tiene sus intríngulis, más aún si se trata del género lírico, donde las diferentes métricas a respetar han de encajarse en un entorno de texto fluido al antojo del lector (dicho aquí «lector» en el sentido amplio, tanto la persona que lee como el aparato e-reader).

Así pues, me dispongo a desglosar paso a paso algunos aspectos de la maquetación de poemas en este formato, siguiendo un flujo de trabajo basado en Adobe InDesign CC y, por supuesto, en CSS; y enfocado tanto a e-readers de la clase de Adobe Digital Editions como iBooks para iPad/iPhone.

Éste sería el aspecto típico de un poema «en bruto» tal y como puede aparecer tras colocarlo desde un archivo de texto, Word, o copiando y pegando:

Al mostrar los caracteres ocultos podemos observar algo frecuente: cada verso es un párrafo, y la separación entre estrofas (el ejemplo de la imagen es un soneto) se hace así mismo con caracteres de párrafo. 

Aunque ésto no sea del todo incorrecto, el primer paso podría ser dejar cada estrofa en un solo párrafo, de tal modo que pudiéramos controlar el espaciado entre los mismos con el espacio después de párrafo en lugar de añadir párrafos vacíos.

Entonces, hay que realizar una primera limpieza del texto en InDesign, sustituyendo los caracteres de fin de párrafo de cada verso por saltos de línea forzados, y eliminando los que separan las estrofas. Es algo que se puede llevar a cabo fácilmente con la ayuda de Estilos GREP (opcion Buscar/Cambiar de InDesign):


Entonces, hay que realizar una primera limpieza del texto en InDesign, sustituyendo los caracteres de fin de párrafo de cada verso por saltos de línea forzados, y eliminando los que separan las estrofas. Luego, se puede crear y aplicar un estilo de párrafo para cada una de las estrofas, de tal modo que al final tendríamos algo como ésto:


Aquí, en la definición de dicho estilo de párrafo, aunque hayamos especificado en Opciones de Separación y Separación por sílabas que no queremos que las líneas se partan o que las palabras se rompan, al exportar en EPUB estos ajustes no tendrán efecto. He aquí el aspecto de dicho poema una vez que lo visualizamos en Adobe Digital Editions, a tamaño normal del texto:

Sin embargo, al aumentar el tamaño del texto y/o cambiar el tamaño de la ventana de ADE, para provocar el reflujo del texto habitual, obtenemos lo siguiente:

Que no es, claro está, el aspecto que deseamos, ya que han aparecido de todos modos particiones por sílabas que rompen los versos. 

En este punto, hay que realizar un sencillo retoque en los estilos CSS del libro EPUB. Con CSS es posible evitar dicha partición por sílabas de las palabras, pero en este caso queremos ir más allá, evitando que los versos se puedan llegar a partir incluso por palabras. Esto lo podemos conseguir añadiendo una propiedad adicional al estilo de párrafo CSS de las estrofas, en concreto:

white-space: nowrap;

Si usamos editores web como Adobe Dreamweaver, éste nos puede echar una mano a completar el código CSS sin errores de sintaxis:

Al introducir este cambio y volver a reconstruir el archivo EPUB, al visualizarlo con ADE y volver a forzar el reflujo de texto, obtendríamos algo como ésto:

es decir, antes que partirse, los versos quedarían ocultos por el margen derecho de la pantalla. 

Existen propiedades de estilos CSS muy útiles y específicas para el entorno de los libros electrónicos en formato EPUB, que puedes aprender a tu ritmo si lo deseas con el curso en vídeo que te ofrecemos en Publicar en Digital.

En próximas entregas de este artículo continuaremos explorando más detalles de la maquetación de poesía en EPUB, como por ejemplo las sangrías en los versos. ¡Hasta la próxima entrega entonces! 🙂











Apuntes Gratis (1)

En el mundo de la publicación de contenidos digitales hay mucho por aprender y a menudo se hace dificil escoger, o incluso qué se puede abarcar. Sin embargo, existen unos conocimientos que podríamos llamar «de base» que deberían formar parte de una cultura digital de fondo para todos aquellos diseñadores, maquetadores, editores, etc. que quieran meterse en este universo.


Es por eso que desde Publicar En Digital nos hemos decidido a hacer públicos una parte de los apuntes que desarrollamos para los cursos que impartimos. En esta ocasión aquí se incluye (incrustado y enlazado) el primer capítulo de los apuntes del curso «Desarrollo de Apps Editoriales para iPad» donde se aborda el tema (importante!) de la diversidad de las pantallas y lo necesario de contextualizar los desarrollos de contenidos.


Espero que os guste y os sirva de provecho… si vemos que la respuesta general es buena nos animaremos a publicar más contenidos!! También esperamos vuestras preguntas, comentarios o sugerencias!


En español:

En catalán:

Medidas y tamaños en CSS

Los libros electrónicos en formato EPUB usan, como las páginas web en HTML, estilos CSS. Es esta hoja de estilos CSS la responsable de aplicar un tamaño de letra a los diferentes párrafos, titulares, etc. así como determinar la medida de las imágenes, los márgenes, etc.


Ahora bien, existen multitud de varas de medir en CSS. Hay unidades que son absolutas (como el centímetro, el píxel) y otras que son relativas al tamaño de la pantalla o al tamaño de la tipografía. Si a esto le sumamos que hay multitud de tamaños de pantalla o visor, junto con otra disparidad de resoluciones de los diferentes dispositivos, el barullo con el que se enfrenta el diseñador a la hora de maquetar un libro electrónico o una página web puede llegar a ser considerable.


Para intentar arrojar algo de luz sobre este asunto, he preparado un pequeño experimento sobre medidas en diferentes unidades aplicadas a una hoja de estilos de un eBook. Pero antes, un breve repaso a las principales unidades de medida que se emplean en CSS:

  • Centímetros (cm), pulgadas (in) y  milímetros (mm): se emplean para maquetaciones en papel y quizá también para lectores de tinta electrónica
  • Puntos (pt): es por definición un píxel en una pantalla de resolucón 72 dpi, o sea, 1/72 de una pulgada. Las pantallas tienen una resolución aproximada a esta, pero difieren entre sí.
  • Píxels (px): un punto en una pantalla, sea cual sea su resolución
  • Eme (em): tradicionalmente en tipografía es la anchura de la caja de la letra EME, que es la más ancha de todas (en tipografías de ancho de caja variable). Es una unidad relativa entonces al tamaño de la tipografía, sea cual sea ésta.
  • Porcentaje (%): es una unidad relativa al tamaño del visor del documento. En una página web, es relativa la anchura (o altura) de la ventana del navegador. En un eBook, será relativa la anchura de la pantalla de visualización.
Para este experimento, lo que hice fue modificar la hoja de estilos CSS de un libro electrónico en formato EPUB. Concretamente, varié el margen interior del libro (el «padding») y le puse varios valores en varias medidas, en concreto: 3 em, 20%, 50px, 20 pt y 3 cm. 

A continuación, me puse a medir literalmente sobre la pantalla de mi ordenador y sobre la pantalla de mi lector de eBooks para comprobar sobre el terreno si los cambios que había introducido se correspondían con la realidad. Éste es el resultado de mi experimento:

CASO DE 3 em

Debido a que en la hoja de estilos, el tamaño de la tipografía estaba establecido a 1em, lo que hice fue literalmente colocar «emes» en el margen y contarlas, tanto en la pantalla del ordenador (usando Adobe Digital Editions, ADE) como en la pantalla del lector Cool-er; y variando el tamaño de la tipografía con los controles a tal efecto en ambos dispositivos.

En el caso de la combinación ordenador/ADE al 100% y 200% de tamaño de la tipo:

(tamaño natural)
(primer aumento)


podemos ver como efectivamente el margen mide 3em. En el caso del eReader la cosa cambió:

(tamaño natural)
(primer aumento)



aunque parece que el tamaño del margen se mantiene proporcional (1 cm vs. 1,5 cm medido directamente en pantalla), no es exactamente el tamaño de tres cajas de eme mayúscula.

CASO DE 20%

En el caso de un margen del 20%, es preciso tanto aumentar y disminuir el tamaño de la tipografía como el de la ventana del visor. Claro, esto no es posible para el eReader, ya que el tamaño de la pantalla es el que es y no se puede cambiar físicamente. En el caso del ADE, es el tamaño de la ventana de la apliación, así que es sencillo. 

  • Cool-er: el margen se mantiene idéntico para cualquier aumento de la tipografía. Midiendo la proporción con una regla entre el margen y la anchura de la pantalla, obtengo el cociente 1,8/9 cm = 20%. Perfecto. El porcentaje es la solución óptima para mantener siempre la misma anchura de margen para un libro dentro de un eReader.
  • ADE: Para el tamaño natural de tipografía y un tamaño arbitrario de la ventana, y midiendo en píxels, obtengo el cociente 118/600 (19,7%). Cambio el tamaño de la tipografía así como el tamaño de la ventana y obtengo el cociente 86/432 (19,9%). Perfecto nuevamente. El margen se mantuvo proporcional.
CASO de 50 píxeles

Aquí hay un pequeño problema: no se como medir píxeles en el eReader, ya que las medidas las hago con una regla normal y corriente, que va bien para hacer medidas relativas, pero no contar puntitos. En el caso del ordenador tengo una pequeña utilidad que es una regla virtual, que me deja medir en pulgadas, píxels y centímetros:
(midiento el tamaño de una EME) en píxels
Los resultados fueron los siguientes:

  • Ordenador/ADE: diferentes tamaños de ventana, diferentes aumentos, y siempre estaba ahí el margen de 50 píxels, clavado. Perfecto.
  • Cool-er: el margen se escala de manera proporcional a medida que aumento el tamaño de la tipografía. Esto no es obviamente lo que uno espera para una medida fijada en concreto. Además, las medidas que tomé sobre la pantalla (en cm.) no parecían guardar correlación con los 50 píxeles dados. Por ejemplo, para el tamaño natural, el margen fue de 1 centímetro. Teniendo en cuenta que la resolución de la pantalla del Cool-er es de 170 ppp (píxels por pulgada), un margen de 1 centímetro debería corresponder a un tamaño de 67 píxels, no de 50. Así que, de momento, misterio…

CASO de 20 PUNTOS

En este caso hay que tener en cuenta la resolución exacta del dispositivo. En el caso del Cool-er, como ya se mencionó antes, es de 170 ppp (píxels por pulgada). En el caso de mi MacBook de 13,3″ es de 96 ppp. 

Aquí me encontré con un caso similar al de los 50 px, es decir, midiendo píxeles en la pantalla del ordenador (nuevamente cambiando tamaños de tipo y ventana) me daba siempre 27 píxels. Teniendo en cuenta la resolución de mi pantalla, salen unos 20,3 puntos (el cálculo lo dejo como ejercicio al lector) bastante aproximado a los 20 puntos del estilo.

En el caso del Cool-er, me salen nuevamente medidas proporcionales, que cambian con el tamaño de la tipografía, pero que al intentar hacer el cálculo equivalente con la resolución de 170 pp me salen valores lejanos a los 20 puntos (40, 54, etc.)

CASO de 3 CENTÍMETROS

En un nuevo intento de fijar el margen del libro en un valor fijo y ahora además en una unidad «de papel», propuse a la hoja de estilos CSS un valor del padding de 3 cm. El resultado es el siguiente:

  • Ordenador / ADE: tamaño invariable medido de 113 píxels. A la resolución de pantalla dada, esto da efectivamente 3 cm (nuevamente dejo el cálculo como ejercicio). Perfecto.
  • Cool-er: nuevamente me encuentro con tamaños de margen variables y proporcionales al tamaño de la letra. Para el tamaño natural, mido 1,9 cm, para el primer aumento 3,3 cm, etc. Aquí está la prueba:
Conclusiones

Después de medir medir y medir, podemos sacar algunas conclusiones:

  1. La única manera de mantener un margen del libro fijo en el eReader es usar la unidad porcentaje (%). Casualmente, una opción que en el Adobe Digital Editions dependerá del tamaño de la ventana.
  2. El lector Cool-er (almenos) escala proporcionalmente otras medidas del documento además del tamaño de letra, cuando se pulsa el botón de cambiar ésta y parece que no respeta una medida fija, sea cual sea ésta. Esto concuerda con el comportamiento de las imágenes, que se escalan proporcionalmente aunque en la hoja de estilos tengan un tamaño fijo (cosa que no sucede en el ADE).
  3. Emplear la unidad EME (em) puede ser lo más óptimo ya que se adapta a cambios en el diseño que incluyan el uso de otra tipografía, aunque ésta no sea occidental.
Espero que este post os haya ayudado a entender un poco las unidades de medida en el mundo de la publicación de documentos digitales.