Píldoras CSS para EPUB (1)

Vamos a compartir un poco de información acerca de cómo diseñar y convertir mejores libros electrónicos para el formato EPUB gracias al uso de los lenguajes HTML y CSS. Y para no empezar complicando mucho el asunto, esta primera píldora irá dedicada a todo un clásico de los EPUB: las versalitas.

Crear versalitas con CSS

En primer lugar debemos señalar que existe una propiedad CSS que permite que un texto adopte el formato de versalitas sin recurrir a ningún otro añadido. Se trata de la propiedad font-variant, que aplicada sobre un elemento textual cambia el formato de la letra a versalita:

[CodePen height=300 show=html href=vlJnE user=cuadratin ]

Por desgracia, la aplicación de esta propiedad está muy limitada en muchos dispositivos.

Así pues, tendremos que recurrir a otras opciones para poder representar un texto en versalitas de la forma más correcta posible. Lo que haríamos sería «engañar» al lector (y al software que reproduce el código) para aparentar un texto escrito en ese formato.
Una posible alternativa consiste en usar la propiedad text-transform: uppercase, si bien tendríamos que especificar dos detalles: en primer lugar, habría que reducir el tamaño del texto en cuestión para remedar las versalitas (mediante la propiedad font-size); en segundo, habría que dejar fuera de las etiquetas las letras mayúsculas, para que el resultado visual fuera correcto:

[CodePen height=300 show=html href=ayncj user=cuadratin ]

Sin embargo, nos encontramos de nuevo con la incompatibilidad de muchos lectores a la hora de interpretar correctamente la propiedad text-transform, por lo que tendremos que recurrir a la última alternativa.

Ésta consiste en marcar, de nuevo, el texto que queramos convertir en versalitas con una etiqueta <span> que defina el tamaño del texto (igual que vimos antes, con la propiedad font-size). Y después tendremos que convertir de forma manual todas las letras en caja alta, cuidando de que la etiqueta deje fuera las mayúsculas para que no se reduzca su tamaño. Si disponemos del texto original en un archivo de texto podremos hacerlo de forma más sencilla, normalmente mediante las herramientas de buscar y reemplazar.

[CodePen height=300 show=html href=kupFh user=cuadratin ]

Si trabajamos con un original en InDesign existe un script que nos puede venir muy bien para realizar este proceso: se llama GrepChangeCase y se puede descargar de forma gratuita aquí.

Espero que estas pistas os sirvan de ayuda.

Comparta sus opiniones