El archivo CSS

El libro digital por dentro (parte 2)

Como comentamos en la primera parte de El ePub por dentro (enlace), el archivo CSS es una hoja de estilos. Es decir, modifica el estilo del contenido presente en el archivo XHTML del libro.

El archivo CSS recoge todos las etiquetas, atributos y sus clases. La etiqueta, recordemos, es un elemento que determina qué clase de función hacen los componentes del archivo XHTML. Por ejemplo, la etiqueta <p> sirve para señalar los párrafos, la etiqueta <li> para señalar las listas. El atributo, por el otro lado, es un elemento que especifica la función de la etiqueta. Por ejemplo, el atributo «class» sirve para diferenciar dos etiquetas iguales: una <p> con sangría de una sin sangría. También, como comentamos en la anterior entrada, el archivo CSS también modifica estilográficamente otros elementos presentes en el archivo XHTML: tablas, imágenes, recuadros, fórmulas, etc.:

En la imagen que tenemos arriba vemos primero una clase descrita: «subtitulocentrado». Como veis, es una descripción muy clara y descriptiva: es preferente, pues cuando se corrija el libro, o en el caso de que haya un error, es más fácil detectar qué atributo pertenece a qué etiqueta. En este caso, la clase es de título, así que corresponde a un atributo que vaya del <h1> al <h6>. También vemos que se trata de un título centrado.

En la primera línea vemos que se define la familia tipográfica «font-family», y es la fuente YoungSerif. No es necesario añadir algunas fuentes, como la arial sans, pues los libros se suelen abrir por defecto en esta fuente. A veces no es necesario añadir fuentes, pues el lector puede añadir las que prefiera desde sus dispositivos o softwares. Sobre todo, si pensamos desde la accesibilidad, es muy arriesgado forzar una letra en el cuerpo de texto, pues esta puede dificultar la legibilidad. Lo recomendable es que, si queremos dar un toque estético al libro, mantener estas tipografías en títulos o aquellas secciones donde la letra se vea grande.

En la segunda línea se puede leer «font-size». Con este elemento determinamos el tamaño de la letra, en este caso. Como veis, está en 1,3em. Esta unidad es escalable y siempre depende de un elemento: por ejemplo, de la letra M. Si está está a 16px, 1em equivale a 16px. En el CSS podemos añadir más unidades de medida, como píxeles, pero en el ebook no es recomendable, pues son unidades estáticas: a no ser que sea conveniente para la estética y maquetación del libro. Otra unidad de medida son los porcentajes. Esta es recomendable para las imágenes: una imagen, por defecto, se encontrará al 100% de la pantalla. Si vamos reduciendo el porcentaje, la imagen se ajustará adecuadamente con respecto al tamaño de la pantalla.

En la tercera línea encontramos el «text-align». Este elemento determina la alineación del texto: a la izquierda, al centro, a la derecha o justificado. Como se trata de un título centrado, se añade «center».

Finalmente, especificamos el margen con «margin». En este ejemplo está puesto de una manera resumida, con las medidas seguidas: «1em 0 0.5em 0;». La primera unidad determina el margen de arriba «margin-top»; la segunda el margen de la derecha «margin-right»; la tercera el margen de abajo «margin-bottom» y, finalmente, la cuarta el margen de la izquierda «margin-left».

Aquí tenemos el resultado:

Referencias y enlaces de interés:

• Sobre las unidades de medida en el archivo CSS, por Francisco Aguilera G.https://franciscoamk.com/unidades-de-medida-en-css/

• Tutorial de CSS por el WC3: https://www.w3schools.com/css/default.asp