Problèmes d’affichage des ebooks

Simple constat que j’ai noté, à l’occasion de la création d’un livre électronique : les liseuses et applications de lectures d’ebooks ne donnent pas tous les mêmes résultats. On se croirait revenu à l’époque d’Internet Explorer 5…

Je suis en train de composer un livre de contes pour enfants, et je suis confronté à deux exigences :

  utiliser une police de caractère qui n’est pas usuelle
  insérer un saut de page avant et après une image.

Les tests pour ces deux contraintes ont donné quelques résultats surprenants :

Saut de page avant une image

Code

Pour cela, je créé une div dans laquelle je place mon image

<div class="illustration">
<img src="img/monimage.jpg" alt="mon image">
</div>

Avec dans les css les indications suivantes :

.illustration{page-break-before:always}

L’instruction page-break-before : always doit me créer un saut de page avant l’image.

Résultat :

Avec Calibre	Avec Ibook sur Iphone	Avec Ibook sur Ipad

Avec Epub Reader pour Firefox	Avec Readium pour Chrome

 Premier test avec calibre : tout fonctionne. Le saut de page se fait bien avant l’image
 Avec Ibook, l’application de lecture de l’Iphone : surprise : le saut de page n’est pas pris en conte
 Avec Ibook sur un Ipad : idem
 Avec epubreader, un plugin de lecture pour Firefox : le saut de page est pris en conte
 Avec Readium, un plugin de lecture pour Chrome : l’image ne s’affiche pas !

C’est tout de même le plus surprenant. IL y a peut-être un réglage que je n’ai pas fait, mais cela m’a tout de même surpris.

Police embarquée

code

Pour afficher les titres de mes chapitres, j’utilise une police de caractère non standard. Par l’intermédiaire de l’instruction @font-face, je « l’embarque » dans mon ebook.

Résultats :

Avec Calibre	Avec Ibook pour Iphone	Avec Ibook pour Ipad

Avec EpubReader pour Firefox	Avec Readium pour Chrome

 Avec calibre : ça va
 Avec Ibook pour Ipad : la bonne police s’affiche
 Avec Ibook pour Iphone : c’est pas top : la police s’affiche, mais elle est déformée.
 Avec epubreader : la police ne s’affiche pas !
 Avec Readium : la police s’affiche.

Conclusion

Si j’ai oublié quelque chose dans mes codes ou dans mes configurations, merci de me le signaler. L’écriture de cet article aura servi à cela.

Si je ne me suis pas trompé, je suis un peu surpris de ces bugs. Car ce ne sont pas des instructions compliquées. Si nous voulons que l’ebook se développe, il serait bon de fournir des lecteurs de qualité.

A l’époque d’Internet Explorer 5, il ne fallait pas se contenter de coder correctement un site, encore fallait-il le tester sur IE5, pour se rendre compte que, très souvent, il fallait bidouiller le code car le navigateur ne savait pas afficher un code propre. C’est un peu dommage sur l’on soit revenu à des problèmes semblables.