A la hora de exportar un documento en formato EPUB desde Adobe InDesign, frecuentemente lo que más desconcierta al diseñador neófito en estos temas son los cambios en las unidades de medida.
En concreto, InDesign suele traducir todos los tamaños y distancias en unidades relativas. Concretamente, en «em», versus pixels o puntos.
La unidad em es una de las unidades relativas que se emplea en CSS junto con el %. Un em equivale a la anchura de la caja de la letra M mayúscula. De este modo, tanto en una página web HTML como en un eBook en formato EPUB dentro de un lector, al aumentar el tamaño del texto, también aumentan todas aquellas dimensiones especificadas en esta unidad relativa, proporcionalmente (aunque a veces esto varía según el modelo de e-Reader).
Bien, siguiendo con el ejemplo inicial, si exportamos en formato EPUB un documento sencillo de InDesign con sus correspondientes estilos de párrafo, encontramos luego que estos estilos se han traducido internamente al formato CSS:
Aquí se puede ver como los tamaños de texto, que en InDesign estaban definidos en pixels (o podrían haberlo estado en milímetros), se han traducido a em. En concreto, el estilo «normal» tiene un tamaño de 1.17em mientras que «títulos» tiene un tamaño de 2.5em.
Éstos son tamaños relativos pero ¿respecto a qué? Es decir, si todos los tamaños de todos los estilos de texto se han especificado en unidades relativas… ¿dónde está el tamaño de referencia?
En general, en diseño web, se toma como referencia el tamaño del texto raíz. Es decir, el tamaño del texto de la etiqueta body . Si en una página HTML, o mejor dicho, si en la hoja de estilos CSS de una página HTML especificamos un parámetro font-size para el body en unidades absolutas, algo así como:
body {
font-size:12px;
}
este tamaño es el de referencia. Por lo tanto, un estilo de párrafo que especifique un tamaño del texto de 2.5em:
p.titulo {
font-size:2.5em;
}
se traduce en un texto de tamaño de 30px.
Lo que sucede es que Adobe InDesign tiene la peculiaridad de exportar un HTML y CSS dentro del archivo EPUB resultante con ciertas características. Entre ellas, no se define CSS alguno para la etiqueta body, y se hace un uso extensivo de los estilos de clase aplicados básicamente a elementos DIV o P (párrafos), en lugar de recurrir a más variedad de etiquetas HTML (como por ejemplo, las H1, H2, …, CITE, HEADER, FOOTER, etc.)
Entonces, si no hay un tamaño base para el BODY en el CSS, y el resto de tamaños de todos los estilos están en unidades relativas… ¿Cuál es el tamaño de referencia?
Cuando exportamos un EPUB desde InDesign, aunque seleccionemos la opción de no exportar las modificaciones locales, es muy probable que incluya el estilo de párrafo «Párrafo Básico» (que no podemos eliminar en el panel de Estilos de Párrafo). Así que este estilo aparecerá también en el CSS del EPUB resultante, y es el que tiene el tamaño de texto font-size: 1em.
Esto la verdad no es un gran consuelo. Sobre todo si en todo nuestro libro no hay absolutamente nada marcado como «Párrafo Básico».
Lo que hay que conocer en este punto es cómo funciona el tamaño relativo expresado en unidades de em. Esta unidad es relativa al contexto en la cual está definida en el CSS. Es decir: si por ejemplo tenemos en nuestro HTML un contenedor DIV llamado «main», en el que se ha definido mediante CSS un font-size absoluto de 12px, ése será el tamaño «1em» de referencia para todo lo que haya dentro de ese contenedor. Así, si dentro de ese contenedor hay una serie de párrafos con un estilo de clase «destacado» que defina un tamaño de, por ejemplo, 1.17em:
#main p.destacado {
font-size:1.33em;
}
es lo mismo que decir que el tamaño del texto de esos párrafos será de unos 12 x 1.33 = 16px, independientemente del tamaño de texto que tenga el «body» (si es que está definido).
Si ese mismo estilo de párrafo (de clase en CSS) se definiera de manera autónoma a su contexto, es decir:
p.destacado {
font-size:1.33em;
}
el tamaño del texto de esos párrafos sería variable, dependiendo de dónde estuvieran colocados. Si hubiera un párrafo en estilo «destacado» dentro de un contenedor distinto que tuviera definido por CSS un font-size absoluto de 9px, ese texto de ese párrafo pasaría a tener un tamaño de 9 x 1.33 = 12px.
Más aún: si definidos otras medidas más allá del tamaño del texto, como podrían ser los espaciados (márgenes en CSS) de los párrafos, en unidades relativas de em, hemos de tener en cuenta de que estos espacios no son acumulables.
Imaginemos el caso de un EPUB (o una página web) que tiene definido un font-size de referencia en el BODY de 10px, es decir:
body {
font-size:10px;
}
Luego, tenemos dos contenedores (pueden ser dos DIVs, o dos párrafos) con estilos distintos. En HTML podría ser algo así:
mientras que el CSS podría ser algo como
body {
font-size:10px;
}
p.subcapitulo {
font-size: 2em;
margin-bottom: 1em;
}
p.normal {
font-size:1.2em;
margin-top:2em;
}
¿Cuál será la distancia real (en px) entre el párrafo «subcapitulo» y el normal a continuación?
La lógica nos podría llevar a pensar que sería la suma del espacio posterior (margin-bottom) del primer párrafo y el espacio anterior (margin-top) del párrafo siguiente en estilo normal. Es decir:
Espacio posterior del párrafo subcapítulo = 1em
Tamaño de 1em en el contexto del párrafo subcapítulo = 2em = 20px
+
Espacio anterior del párrafo normal = 2em;
Tamaño de 2em en el contexto del párrafo normal = 2 x 1.2em = 2.4em x 10px = 24px
o sea, 20 + 24 = 44 px de espaciado entre ambos.
Sin embargo, esto no es así. Cuando medimos el resultado con la ayuda de unos bordes de CSS y la aplicación Free Ruler (para Mac OS) en Sigil (o en ADE, o cualquiera similar), medimos 24 pixels:
La distancia que separará ambos párrafos será la más grande de entre el margin-top de uno y el margin-bottom del otro.
En CSS3 se ha añadido una medida relativa que siempre hace referencia a la raíz del documento (al «body») y esa unidad es el rem (a diferencia del em). Esta característica de momento no está presente en la mayoría de dispositivos lectores de EPUB, y se emplea más en diseño CSS para la web.
Si estás interesado en conocer más sobre este tema, o te gustaría aprender más a fondo los entresijos del HTML y el CSS relacionado con la maquetación de libros electrónicos en formato EPUB, te recomendamos el curso que impartimos «Edición de eBooks en formato Kindle y EPUB», que puedes consultar en nuestra pestaña de Formación.