Recien­te­mente estuve con­si­de­rando varias téc­ni­cas para mos­trar grá­fi­cas en libros EPUB con la mejor cali­dad posi­ble. Casi todas son invia­bles debido a la falta de soporte, inclu­yendo las que serían idea­les: SVG o lien­zos HTML5. Pero lo que más lamenté fue des­car­tar una de mis dos solu­cio­nes que usa­ban solo CSS.

El pro­blema gene­ral a resol­ver es tener una grá­fica que se ajusta a la anchura de página (width: 100%) con la mejor cali­dad de ima­gen posi­ble. La mayo­ría de los libros elec­tró­ni­cos en cir­cu­la­ción en 2011 no uti­li­zan un algo­ritmo de inter­po­la­ción; cuando el tamaño de la ima­gen es dis­tinto al tamaño de página se limi­tan a dupli­car o supri­mir filas/columnas de píxe­les. Esto hace que el texto incluido en la ima­gen sea más difí­cil de leer, sobre todo si el tamaño de texto es pequeño y el tamaño de página es infe­rior al de la imagen:

La solu­ción que que­ría imple­men­tar requiere CSS3 y soporte para posi­tion: abso­lute. Por des­gra­cia, el están­dar EPUB para el que están pre­pa­ra­dos los erea­ders en cir­cu­la­ción no incluye CSS3 y muchos igno­ran tam­bién el posi­cio­na­miento absoluto.

El truco con­siste en colo­car la ima­gen sin texto den­tro de un div (cuyo tamaño se ajus­tará al de la ima­gen) y posi­cio­nar el texto de forma abso­luta den­tro del div usando por­cen­ta­jes. Para ajus­tar el tamaño del texto emplea­mos media que­ries con el argu­mento min-width:

.figura {
   width: 100%;
   position: relative;
}
.figura img {
   width: 100%;
}
.figura .dato {
   position: absolute;
   font-size: 11px;
}
@media (min-width: 601px) {
   .figura .dato { font-size: 13px; }
}
@media (min-width: 701px) {
   .figura .dato { font-size: 14px; }
}
@media (min-width: 801px) {
   .figura .dato { font-size: 15px; }
}
@media (min-width: 901px) {
   .figura .dato { font-size: 16px; }
}
@media (min-width: 1025px) {
   .figura .dato { font-size: 17px; }
}

Para el código de ejem­plo he puesto los datos en divs, pero se podrían usar lis­tas u otras eti­que­tas más semánticas.

<div class="figura">
   <img src="..">
   <div class="dato" style="top: 10%; left: 20%;">1737,48</div>
   <div class="dato" style="top: 10%; left: 30%;">1234,56</div>
   <div class="dato" style="top: 10%; left: 40%;">845,12</div>
</div>

En teo­ría, al usar CSS3 debe­ría­mos poder usar la ima­gen como fondo para el div del envol­to­rio. En la prác­tica el soporte para CSS3 suele ser incom­pleto, por lo que pode­mos dis­po­ner de min-width para las media que­ries y no de imá­ge­nes de fondo escalables.