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:
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.
- 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.
- 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…
- 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:
- 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.
- 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).
- 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.