En este capítulo de nuestro Manual editorial para hacer libros, contamos cómo se hace una Hoja de Estilo CSS personalizada con el fin de agregarla al libro electrónico cuando lo exportamos desde InDesign con formato ePub.
Con nuestro proyecto de libro ya creado en InDesign (un archivo “InDesign Book”, con extensión *.INDB), donde reunimos los diferentes documentos (archivos “InDesign Document”, con extensión *.IND) o lo que llamamos archivos-partes para armar nuestro libro electrónico, llega por fin la hora de exportar el libro al formato ePub, y en la ventana de exportación nos dan a elegir entre dos opciones: Generar CSS, o por el contrario Añadir Hoja de Estilo.
Escogeremos siempre: Añadir Hoja de Estilo.
En este momento dejamos añadido, al ePub exportado, aquel archivo de nuestra propia Hoja de Estilo CSS que tenemos preparado en nuestro ordenador con todos los formatos del libro y sus textos. Lo hacemos siempre así, al exportar cada nuevo ePub: buscamos y añadimos el mismo archivo de Hoja de Estilo CSS.
Una vez exportado nuestro libro electrónico, podemos cargar ese archivo ePub a la Biblioteca de nuestro Kindle (algo fácil de hacer, usando el software o programa gratuito Calibre), lo que nos permite comprobar cómo abre, cómo se ve y cómo fluye el texto, si funcionan bien las distintas reglas definidas en nuestra Hoja de Estilo, o si detectamos algún error, alguna característica en la apariencia del texto que debamos corregir.
A veces necesitaremos hacer varios retoques en nuestra Hoja de Estilo, volviendo a guardar los cambios, y volviendo a entrar al “InDesign Book" para exportar otra vez el ePub y añadir el mismo archivo de la Hoja de Estilo CSS, antes de que logremos finalmente una visualización del libro en el dispositivo electrónico que nos deje satisfechos.
En Ediciones Deslinde trabajamos a partir de una misma Hoja de Estilo CSS estándar para todos los libros electrónicos de todas las colecciones, de todos los géneros y formatos.
Sin embargo, el texto de una nueva obra, de una nueva edición, siempre puede demandar algún retoque especial en los valores que damos a las etiquetas de la Hoja de Estilo CSS. Por eso, cuando creamos un nuevo proyecto InDesign Book, empezamos por hacer una nueva copia del archivo de nuestra Hoja de Estilo CSS estándar, copia que guardamos en la carpeta de nuestro nuevo proyecto y que será la única sobre la que trabajaremos hasta el final de la edición. Es la misma copia que añadiremos siempre al exportar el proyecto en formato ePub, y a la que haremos una y otra vez los retoques necesarios hasta lograr una visualización óptima del libro, para poder por último publicar la edición definitiva en Amazon y en la tienda online de Ediciones Deslinde.
Otros capítulos de nuestro Manual editorial para hacer libros, antes de llegar aquí:
¿Cómo hacer la Hoja de Estilo CSS?
1- Reciclar una hoja de estilo CSS
Copiaremos un archivo Hoja de Estilo CSS que hayamos usado antes (y que funcionó), de otro libro publicado. Y pegaremos la copia en la carpeta "CSS" que habíamos creado dentro de nuestro proyecto InDesign Book: este será el archivo CSS que vamos a añadir cuando exportemos el ePub.
- Si es necesario, actualizaremos o rectificaremos la Hoja de Estilo CSS con cambios: o porque usamos nuevos estilos en este nuevo libro, o porque necesitamos variar el formato o aspecto de algún estilo.
No necesitamos crear desde el inicio una nueva Hoja de Estilo CSS cada vez que vamos a publicar un nuevo libro en formato electrónico. Ya tenemos en nuestra editorial un archivo CSS construido, que hemos ido puliendo sobre la experiencia, en concordancia con nuestro perfil editorial y en sintonía con el esquema de estilos (de párrafo y de carácter) personalizados que manejamos en Word y en InDesign. Al cabo, por tanto, no hará falta ser un desarrollador web o un especialista en programación para añadir a un nuevo ePub nuestra Hoja de Estilo CSS estándar que venimos usando en nuestra editorial, y si fuera necesario, modificarla o editarla, hacerle pequeñas adaptaciones.
Sublime Text 3 es el programa (gratuito) que preferimos para crear, para abrir o para editar el archivo de nuestra Hoja de Estilo CSS.
Encuentra aquí una copia de la Hoja de Estilo CSS estándar de Ediciones Deslinde (HojaDeEstiloCSSDeslinde).
2- Rectificar nuestra hoja de estilo CSS
Revisaremos la copia de la Hoja de Estilo CSS que estamos usando, para garantizar que no contenga errores. La mejor forma de comprobarlo es, después de exportar nuestro ePub, subirlo a nuestro Kindle o a cualquier dispositivo que usemos, navegar por sus páginas, tantear cómo nuestro libro se ve en la pantalla. Y solo en caso de ser necesario hacer las correcciones a nuestra Hoja de Estilo CSS.
- En especial, cuidaremos que los nombres de los estilos coincidan: los nombres de los estilos en el CSS, que coincidan con los que hemos usado en la maquetación, en el documento de la maquetación.
- Otro aspecto importante a revisar: las unidades de medida usadas en nuestra Hoja de Estilos CSS para definir los formatos. Preferimos que no sean unidades de medida con valores absolutos. Las unidades con valor absoluto o invariable, que no resultan flexibles o adaptables, son: los píxeles (px), los centímetros (cm), los milímetros (mm). / Y las preferidas unidades de medida relativas que, por el contrario, se adaptan a muchas variaciones tecnológicas, son: el porcentaje (%), em, rem.
3- Las reglas CSS
Dentro de la Hoja de Estilo CSS, escribiremos respetando las reglas del lenguaje css. Algunas básicas:
Comentarios: Los fragmentos de texto que coloquemos entre /* y */ serán ignorados por el navegador, no repercutirán en el uso del eBook ni causarás errores. Usamos estas anotaciones o aclaraciones para nosotros mismos, para entender las distintas partes del código y cómo se relacionas con las partes de la edición o del libro, y asimismo qué efectos provocamos en la lectura del eBook. Al escribir comentarios, debemos tener especial cuidado en colocar los signos de apertura y cierre: asterisco hacia adentro y raya oblicua hacia afuera.
Ejemplos de comentarios:
/* ------- ESTILOS DE CARÁCTER ------- */
/* -----JERARQUIZADOS: estilos de párrafo ----- */
/*esconde el texto, pero se mantiene la caja o bloque */
Nunca utilizar mayúsculas: Escribiremos todo lo que es el código en minúsculas. Esto no se aplica, por supuesto, a los comentarios.
¿Qué es una Hoja de Estilo CSS?
CSS es un lenguaje que se utiliza para definir el estilo y la presentación de un documento HTML. Una hoja de estilo CSS es un archivo de extensión *.CSS que, mediante lenguaje codificado para HTML, regula definiciones de formato (tipo de fuente, tamaño, color de la fuente, color de fondo, párrafos, sangría, etc) de las distintas etiquetas que forman una página *.HTML.
El CSS (Cascading Style Sheets = Hojas de estilo), se denomina estilos en cascada porque el código de esta Hoja se lee, se procesa y aplica automáticamente desde arriba hacia abajo.
En programación web, la Hoja de Estilo CSS es el archivo que controla la apariencia del texto y de los demás elementos (imágenes, etc.) que participan en un sitio web. Condiciona o define de manera homogénea cuál será la apariencia, cuáles serán los formatos, de las distintas etiquetas HTML que forman las página del sitio. Incluye definiciones de formato, como la tipografía, el tamaño, color, sangrías, espacio anterior o posterior, uso de capitulares, etc. Su principal ventaja radica en que permite regular un mismo aspecto para todas las páginas de un sitio web, así que, para controlar o modificar la visualización de cada página no tendremos que realizar los cambios uno a uno y en cada una de las páginas, sino que basta con definir tales cambios solamente dentro de esta Hoja de Estilo, dándole valores a los atributos o las propiedades de cada etiqueta. Después que creamos una Hoja de Estilo CSS y vinculamos todas las páginas del sitio web a este archivo, cualquier cambio que hagamos en nuestra Hoja de Estilo afecta instantáneamente la apariencia de todas las páginas vinculadas.
Hemos visto cómo funciona la Hoja de Estilo en Internet. Pues bien, un libro electrónico no es algo diferente a un sitio web (mejor dicho, es también un sitio, lo único que en miniatura), por eso la Hoja de Estilo CSS es la mejor forma de controlar cómo se verá o se leerá nuestro eBook en las pantallas de los distintos dispositivos electrónicos. La programación de la Hoja de Estilo CSS, y su funcionamiento, son tan iguales para la web como para los libros electrónicos.
Al llegar aquí, cuando maquetamos el eBook y preparamos su Hoja de Estilo CSS, comprendemos la importancia de haber trabajado desde que empezamos a marcar el libro en Word, aplicando los distintos estilos (de párrafo y de carácter), porque ahora esas marcas se convierten en el equivalente a las etiquetas HTML para internet. Nuestros estilos de párrafo y de carácter, los nombres exactos de tales estilos con que marcamos el texto del libro originalmente en Word, son ahora nuestras etiquetas en esta Hoja de Estilo CSS. En lenguaje HTML, los estilos de párrafo se convierten en etiquetas de bloque, y los estilos de carácter en etiquetas inline (dentro de línea, dentro de bloque), a las que, mediante la programación de la Hoja de Estilo CSS, podemos asignar atributos y valores que controlen el texto (ese mismo texto que, usando esos mismos nombres de estilos, primero lo maquetamos para imprimir en papel), adaptándolo ahora a las reglas de la lectura en pantallas electrónicas.
Dentro de esta Hoja de Estilo CSS es donde programamos los cambios y formatos adecuados para un texto que ya no se verá fijo como en un PDF, sino que se comportará de manera fluida adaptándose a las pantallas (el lector interactuando con el texto, podrá aumentar el tamaño de las letras y verá cómo las líneas del mismo párrafo se corren, por ejemplo): formatos que se reflejan al mismo tiempo en el aspecto de todas las páginas del libro electrónico. Nos servimos de una serie de Reglas CSS con que podemos definir los formatos del texto y las páginas.
¿Cuáles son las unidades de medida relativas?
Las unidades de medida relativas, y que preferimos aplicar como valores para definir los atributos del libro electrónico en la Hoja de Estilo CSS (con un diseño responsive: adaptable), son las siguientes:
% — El porcentaje es la unidad de medida que se usa por defecto en los elementos HTML (programación web), pues de manera predeterminada cada elemento de bloque usa un ancho del 100% (por eso cada página abierta, ocupa el 100% del ancho de la pantalla).
em — está basado en el elemento “padre”, o sea, en el párrafo al que se aplica. Si sabemos que 1em, es básicamente el tamaño de una letra “M” del elemento o texto al cual se esté aplicando esta medida, entonces comprendemos que, si a ese párrafo le damos un espacio anterior con unidad de medida o valor de 2em, tomará un margen superior (margin top) equivalente a dos letras M según el tamaño o cómo se visualiza esta letra dentro de ese mismo párrafo. / Recomendable para definir: tamaños de fuente, el alto de la línea, el interlineado, el espacio entre los párrafos.
rem — Viene de Root Em: “basado en la raíz”. Esta unidad de medida es muy similar a em, con la única diferencia de que no depende del elemento padre (el párrafo), sino del elemento raíz del documento. O sea, depende de la unidad de medida que tengamos prefijada en la raíz del documento. Si el texto normal en la raíz de nuestra Hoja de Estilo CSS está prefijado con un tamaño de 12px., por ejemplo, entonces si aplicamos a una sangría de un párrafo el tamaño 1rem, tomará una sangría equivalente a 12px, independientemente del tamaño en particular que tenga el texto de ese párrafo específico. / Recomendable para: aplicar a textos o formatos que no dependan del elemento padre, del párrafo o bloque donde están metidos.
auto — (automático: decidido por el dispositivo o el programa usado, en base a las demás reglas aplicadas en el entorno del libro). / recomendable para: márgenes.
¿Por qué preferimos usar unidades de medida relativas?
En la Hoja de Estilo CSS para nuestro libro electrónico, preferimos trabajar siempre con unidades de medidas relativas, propias de un diseño responsive [adaptable], o sea, medidas que puedan adaptarse mejor a diferentes dispositivos, sin importar las aplicaciones o los programas informáticos con que luego vaya a leerse nuestro libro electrónico, sin que signifique un obstáculo insalvable la diferencia entre las pantallas, sus medidas o sus calidades de resolución.
Es por eso que en la Hoja de Estilo CSS preferimos usar atributos basados en unidades de medida como promedios y proporciones, en vez de asignar valores absolutos: para garantizar mejor la consistencia de una apariencia controlada, agradable, con independencia de si los usuarios abren nuestro libro en un dispositivo con más o menos resolución, con más o menos ancho de pantalla.
Si asignáramos a un párrafo una sangría con medida exacta de 2cm o de 10px (valores absolutos), por ejemplo, siempre esa sangría sería la misma o trataría de verse exactamente igual, invariable en cualquier tipo de pantalla, y no permitiría al texto adaptarse o acomodarse inteligentemente según las distintas condiciones de los navegadores o de los equipos. Y no obtendríamos a veces el efecto más deseado, cuando el eBook se abriese en una pantalla con medidas radicalmente diferentes a las que hemos pensado o previsto.
En cambio, si a un atributo del texto asignamos un valor relativo como un porcentaje (%), por ejemplo: que el espacio anterior del párrafo consista en el 80% del tamaño del texto de ese mismo párrafo, así garantizamos mantener una misma lógica en la distribución de las medidas y los espacios, independiente del tamaño o la resolución de las distintas pantallas, porque la visualización de ese espacio anterior del párrafo va a cambiar (aumentar o disminuir) junto con el tamaño de visualización del mismo texto.
Regresar al inicio