Cosas Interesantes: Solucionando los problemas de ADOBE MOBILE READER con los floats en las cabeceras de capítulo de los ePUB según las BBPP LARdT 1.0 (Cap. 09)

Una de las características más reconocibles de los ePUB que hacemos siguiendo las BBPP LARdT 1.0 (“Buenas Prácticas de LARdT para un ePUB decente”) son las cabeceras de capítulo tipo “feedbooks”; donde encerramos en una caja los componentes de dichas cabeceras.
Cómo podéis apreciar en el PAPYRE 6S ALEX que según creo utiliza una implementación del lector FBREADER, las cabeceras de capítulo quedan bastante bien. Además con la numeración en romano resultan muy apropiadas al libro, una novela de la serie de Marco Licinio Cato de Simon Scarrow.

Cabeceras en el PAPYRE 6S ALEX

VER PRESENTACIÓN

DESCARGAR TODO

Como podéis apreciar en las fotos el parser diferencia entre las cabeceras de capítulo y el cuerpo del texto; y aplica el zoom del tamaño de fuente únicamente a este último componente; lo cual es genera una experiencia de lectura bastante buena.

ADOBE te da sorpresas, sorpresas te da ADOBE, ¡Ay Dios!
snapshot_18

Pedro Navajas, dixit. Pero resulta que si el lector de tu dispositivo está basado en una implementación del ADOBE MOBILE READER, la historia es distinta. ADOBE no distingue entre las cabeceras y el cuerpo del texto (hasta aquí, todo normal). Pero en el momento que empezamos a aplicar el zoom al texto, las cabeceras de capítulo crecen igual que el resto y…

AMR sin clearfloats

VER PRESENTACIÓN

DESCARGAR TODO

…se descuajeringa un tanto la cosa. Vemos que la fuente del número de capítulo crece a un tamaño mayor que la caja que la contiene, lo cual pone en marcha un mecanismo poco virtuoso. No sólo el texto de la cabecera del capítulo sale de su caja, sino que además desaparece en parte por el margen izquierdo (el opuesto adonde estaba referenciado el número de capítulo en romanos). El “XXXVIII” se queda en “XXXV”
Pero lo que es muchísimo peor aun es que rebosa también hacia abajo sobre las primeras líneas del cuerpo del texto y se come al menos la primera línea del capítulo.
No es la primera sorpresa que nos depara el ADOBE MOBILE READER.

La solución, un nuevo estilo CSS “clearfloats”
Pero si algo bueno tiene el ePUB es que depende de una hoja de estilos CSS. Y en el CSS se puede hacer casi de todo. Lo más elemental sería impedir que se pierda parte del texto del capítulo. Para ello, añadiremos a la hoja de estilo CSS de las BBPP LARdT 1.0 un nuevo estilo que vamos a llamar (con bastante poca imaginación) “clearfloats”.

.clearfloats {    clear: both;}

Como al fin y al cabo la caja de la cabecera del capitulo es un “float” lo que debemos asegurarnos es que sus efectos en el formato no se prolonguen más allá del límite del propio objeto (la caja), junto con el texto “rebosado”. Y eso es justo lo que estamos haciendo con el comando
clear: both

limpiar los efectos en ambos sentidos, vertical y horizontal.
Tendremos que aplicar dicho estilo al primer párrafo del capítulo, para que se “detengan” los efectos. Y lo haremos dentro de etiquetas <div>

   1: <body>   2:   <h3 id="heading_id_2"><span class="chapterHeader"><span class="translation serif">Capítulo</span> <span class="count serif">XXXVIII</span></span></h3>   3:     4:   <div class="clearfloats">   5:     <p class="MsoNormal"><span class="none">Cato soltó la cantimplora y se puso en pie rápidamente al tiempo que gritaba las órdenes:</span></p>   6:   </div>

Para ver el efecto más claramente aquí tenéis los pantallazos, podéis comprobar como en este caso la primera línea del primer párrafo del cuerpo del texto es empujada hacia abajo en vez de ser sobrescrita como en el caso anterior.