Si ya ha publicado un libro en formato ePub –o se ha informado al respecto–, sabrá lo heterogéneo que es el mercado de lectores digitales y lo difícil que es conseguir que los libros se muestren de forma consistente en la mayoría de dispositivos. Para tratar de controlar el aspecto de un ePub se suele utilizar una de estas dos aproximaciones:
- Crear la versión más sencilla posible de un ePub, de forma que sea compatible con el mayor número de visores, aunque ello suponga perder características disponibles en los lectores más avanzados
- Crear un ePub específico para cada plataforma, aprovechando características únicas de cada dispositivo, pero asumiendo los gastos de desarrollo y mantenimiento de versiones que conlleva.
En el siguiente artículo vamos a proponer una tercera vía: la creación de un único archivo que se adapte a las características del dispositivo en la que se muestra. Este método se basa en la capacidad de CSS para dar formato al contenido HTML/XHTML del libro. El “truco” consistirá en la creación de un CSS que “sepa” cómo adaptar el contenido a cada uno de los lectores. Para ver un ejemplo de lo que podemos llegar a conseguir, visite la siguiente página .
Media queries: el CSS adaptable
¿Qué es una media query? Básicamente se trata de una forma de determinar cómo debe mostrarse el contenido en función de las características particulares de un dispositivo. Según la definición oficial de la entidad W3C:
[quote]Una media query consiste en un tipo de dispositivo (media) y cero o más expresiones que comprueban el estado de las características particulares de ese dispositivo. Entre las características que pueden utilizarse en una media query están las propiedades “ancho”, “alto” y “color”. Mediante el uso de media queries, la presentación del contenido puede adaptarse a un rango específico de dispositivos de salida sin necesidad de modificar el propio contenido.[/quote]Por ejemplo, una web cuyo contenido está pensado para ser impreso puede utilizar dos hojas CSS: una para adaptar el formato de la página a la pantalla del ordenador y otra para adaptarla a un formato imprimible, sin modificar en ningún caso el contenido HTML. Observe el siguiente código:
<link rel="stylesheet" type="text/css" media="screen" href="pantalla.css"> <link rel="stylesheet" type="text/css" media="print" href="impresora.css">
La pantalla del ordenador utilizará la hoja pantalla.css y la versión para impresor la hoja impresora.css. En el caso de un ePub, este código debería aparecer en la sección <head> de cada una de las páginas XHTML que lo componen y sería necesario incluir ambas hojas de estilo. Existe la posibilidad de utilizar media queries en una única hoja de estilos, con lo que el trabajo y gestión de nuestros ePub se simplificará enormemente.
En el caso de HTML4 y CSS2, la lista completa de valores media type soportados es la siguiente: «aural«, «braille«, «handheld«, «print«, «projection«, «screen«, «tty«, «tv«. La propiedad «all» se utiliza para indicar que la hoja de estilos se aplica a todos los dispositivos de salida.
Cuando se trata de HTML5 y CSS3, el usuario puede crear valores media type adicionales siempre que se atenga a la sintaxis correcta. La mayoría de los lectores digitales utilizan por defecto el valor media="screen", pero existen otras opciones. Por ejemplo, las nuevas directrices de publicación de Amazon añaden dos valores que permiten adaptar el contenido a sus dispositivos : amzn-mobi (para los lectores de tinta electrónica) y amzn-kf8(para su nuevo lector tipo tablet, Kindle Fire). Se puede utilizar también "not" precediendo el nombre del dispositivo para referirse a todos los lectores excepto el mencionado. Por ejemplo, el valor media="not amzn-kf8" se refiere a cualquier dispositivo excepto el Kindle Fire.
En el siguiente ejemplo, tenemos tres reglas CSS, una común para todos los lectores, otra específica para Kindle y la última dirigida a Kindle Fire:
p {
text-align: left;
}
@media amzn-mobi{
p.firstline {margin-top:10px;text-indent:-20px;}
}
@media amzn-kf8{
p.firstline {margin-top:2em; margin-left:2em; text-indent: -2em;}
}
Recuerde que las reglas CSS se «leen» de arriba abajo. Por eso, es conveniente empezar con las reglas genéricas, dirigidas a todos los dispositivos, y acabar con las específicas para cada lector digital mediante el uso de media queries. En el siguiente ejemplo vamos a especificar una regla concreta para el iPad. Puesto que entra en conflicto con la regla genérica, la colocaremos debajo de ésta, de forma que sea la última que lea el iPad y, por lo tanto, la que aplique al texto:
p {
text-align: left; color: #000;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){
p.firstline {margin-top:10px;text-indent:-20px}
}
Observe que para especificar una regla que leerá el iPad nos basamos en las dimensiones de su pantalla, 1024x768px. Cualquier tablet que tenga las mismas o mayores dimensiones aplicará la regla.
Características (media features) de los dispositivos
Los diferentes lectores digitales pueden definirse por sus características (media features) únicas. Las siguientes normas se aplican cuando las utilizamos en una declaración CSS:
- Las propiedades se utilizan en las declaraciones para dar información sobre cómo presentar un documento. Las características se utilizan en expresiones para describir los requerimientos del dispositivo de salida.
- En determinadas características podemos utilizar de forma opcional los prefijos «
min-» o «max-» para expresar «mayor o igual que» o «menor o igual a». - Una propiedad requiere siempre un valor para formar una declaración. Sin embargo, una característica no necesita un valor, aunque puede utilizarlo.
- Una propiedad puede aceptar valores complejos, como el resultado de un cálculo, mientras que una característica se limita a un único valor: una palabra clave, un número o un número con un identificador de unidad (1px).
Características (media features) que pueden utilizare en una media query para ePub
El siguiente listado muestra las características útiles para determinar el dispositivo su orientación:
- width ancho de pantalla del dispositivo de lectura utilizado para mostrar la página. Suele ser inferior a la propiedad
device-width, puesto que parte de la pantalla la ocupan los márgenes y otros elementos como barras de desplazamiento y controles de navegación. - height alto de pantalla del dispositivo de lectura utilizado para mostrar la página. Suele ser inferior a la propiedad
device-heightpuesto que parte de la pantalla la ocupan los márgenes y otros elementos como barras de desplazamiento y controles de navegación. - device-width ancho de pantalla físico del dispositivo. Sería equivalente a la resolución de la pantalla completa, independientemente del tamaño dedicado a mostrar la pagina.
- device-height alto de pantalla físico del dispositivo. Sería equivalente a la resolución vertical de la pantalla completa, independientemente del tamaño dedicado a mostrar la pagina.
- orientation orientación. Los valores pueden ser
portrait(alto o vertical) ylandscape(horizontal o apaisado). - aspect-ratio Relación de aspecto de la página, calculada mediante la división del ancho (
width) por el alto (height) . - device-aspect-ratio relación de aspecto de la pantalla del dispositivo, calculada mediante la división del ancho de pantalla (
device-width) por el alto de pantalla (device-height). En un iPad es de 4:3 (1024/768 = 4/3). - resolution resolución de la pantalla del dispositivo, medida en densidad de pixeles por pulgada cuadrada.
Test de características media query
¿Cómo puede saber qué características soporta un determinado dispositivo? Muy fácil. Abriendo el siguiente archivo en el navegador web de su dispositivo.
Si su lector no incorpora navegador Web, descargue este pequeño eBook. Se trata de la versión ePub del archivo anterior.
Conclusión
La mayoría de los dispositivos de lectura actuales, al menos los basados en tinta electrónica, sólo soportan la especificación ePub 2.0.1, basada en CSS2 y, por lo tanto, no reconocen las reglas media queries. IBooks de Apple y Amazon son, por el momento, dos honrosas excepciones. Sin embargo, con la especificación ePub 3.0 ya finalizada, es de prever que a lo largo de este año y principios del siguiente los fabricantes actualicen sus dispositivos.
Gracias al modo en que se interpretan las hojas de estilo en cascada (CSS), podemos diseñar libros complejos que se «degraden» con gracia en dispositivos más sencillos. Una de las características más notorias de esta tecnología es que las reglas CSS no soportadas se ignoran
1 comentario.
[…] la hoja de estilos CSS para que ésta se adapte a los diferentes dispositivos (consulte este artículo para más […]