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.

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.