Outils pour utilisateurs

Outils du site


articles:demos:bumblebee_book_reader_1

Liseuse de livre numérique en ligne #1

Robot Reading by Von HoldtBossant dans le monde du livre et le livre numérique étant de plus en plus présent j'ai été amené plusieurs fois a me demander comment je pourrais afficher des livres numériques dans un navigateur. Sachant qu'il existe grosso-modo deux format principaux de livres numérique epub et pdf j'ai fini après quelque réflexion par me lancer dans deux proof of concept : web-book-reader (le code source est disponible sur github

Ces liseuses ne sont que des prototypes et ne sont pas complètes mais permettent d'afficher des livres d'exemple. Attention certains de ces livres ne sont ni dans le domaine publique, ni sous licence libre et je n'en ai pas les droits d'exploitation, ils ne sont la que comme des exemples ;) (Lorsque j'aurais un peu de temps je tacherais de les remplacer par d'autres livres un peu plus libres ;-) )

Liseuse Pdf

Le pdf n'est à mon sens pas un format réellement adapté au livre numerique, il est pour moi le symbole d'une difficulté d'adaptation du monde di livre papier (le pdf en est l'image exacte) au numérique. Toujours est il qu'il reste un bon moyen de mettre en place rapidement une offre, et qu'il n'est donc pas inintéressant de se demander comment l'afficher dans un navigateur.

Après quelques réflexions et tests j'ai fini par choisir de tout simplement exporter chaque page du pdf a afficher au format jpg et svg a l'aide des outils GNU/linux pdftoppm et pdf2svg. Pourquoi ne pas uniquement utiliser le format svg ? Simplement parce-que certains navigateurs supportent encore mal le svg et que pour par exemple afficher une miniature, le svg n'est pas très performant.

Pour mon proto. j'ai choisi de de pré-extraire les données du pdf sur mon serveur, pour n'avoir ensuite plus qu'a développer à l'aide de javasript(jQuery) et HTML5 un viewer mimant le comportement d'une liseuse de pdf “traditionnelle”. (Dans un projet réel il pourrait être intéressant de les extraire à la volée.) J'ai pour cela développe un petit script python chargé d'extraire des images de toutes les pages mais aussi d'extraire la table des matière du pdf à l'aide de la librairie pdfminer.

Fonctionnalités du prototype de liseuse pdf ?

Ce que permet la démo :

  • Affichage page par page, ou en double page.
  • Navigation a l'aide d'une Table des matières.
  • Navigation à l'aide de la liste des miniatures.
  • Navigation a l'aide du clavier.
  • Navigation a l'aide de la molette de la souris.
  • Navigation a l'aide des boutons Page précédente, Page suivante, Première page, Dernière page.
  • Taper directement le numéro de la page que l'on souhaite visualiser
  • Modifier le zoom de la page vers l'avant, vers l’arrière, ou utiliser un zoom automatiqe.
  • Sélection de la qualité :
    • Image (jpeg)
    • Vectoriel (svg)

Ce que ne permet pas la démo :

  • Sélectionner le texte
  • Cliquer sur les liens
  • Jouer du son ou de la vidéo

Ce qui pourrait être Amélioré :

  • Améliorer les performance générales
  • Rendre compatible avec IE (au moins le version 9)
  • Utiliser le cahce du navigateur pour permettre une lecture offline.
  • Convertir les pdf en epub3 fixed layout et ainsi mixer les deux liseuses.

Exemples :

Liseuse Epub

Les fichiers epub sont de simples fichier ZIP contenant des pages HTML, tous les fichiers (image,css,video, ..]] nécessaires à ces pages HTML, ainsi qu'un fichier de métadonnées décrivant le contenu et la navigation du livre. Sachant cela, il est facile de se rassurer sur les possibilité d'afficher le contenu d'un livre epub dans un navigateur (à condition que le navigateur supporte les fonctionnalités HTML(5) utilisées dans l'epub).

Tout comme pour le prototype pdf j'ai choisi de pré-extraire les epub présentés sur le disque du serveur, l’idéal pourrait être d'utiliser une librairie tel que zip.js afin de ne plus avoirs besoin du serveur.

L’affichage par-contre d'avère un peu plus complexe que pour le pdf. En effet les epub (la démo ne supporte pour le moment qu'epub 2.0) n'ayant pas un layout fixe le nombre de “page” n'est pas fixe. De plus l’affichage d'une page html contenue dans l'epub de façons traditionnelle, c'est à dire avec un ascenseur pour naviguer dans la page, n’était pas satisfaisante. J'ai donc cherché comment mettre en place un systeme de pagination plus adapté au concept du livre.

J'ai pour cela décidé de charger chaque fichier html du livre dabs une iframe, et d'appliquer à ces pages une feuille de style css particulière utilisant le layout column de css3 pour simuler le concept de page. Il ne restait plus ainsi qu'à mettre en place un système de navigation positionant ces iframes de façons à afficher la zone souhaitée. Un second traitement est effectué sur les pages html de l'epub afin de gérer correctement les liens (internes et externe), d’empêcher les images de ne dépasser des pages, etc …

Le systeme de pagination fonctionne finalement relativement bien sous firefox, mais la spécification CSS3 étant encore en cours de rédaction les comportement ne sont pas les même sous chrome ou safari et l'affichage n'est pas correct (même si le principe fonctionne) et cela ne fonctionne pas du tout sous IE.

L'autre problématique étant de charger toutes les pages au démarrage n'est pas très performant.

Fonctionnalités du prototype de liseuse epub ?

Ce que permet la démo :

  • L'affichage d'un epub en mode double page.
  • La navigation dans le livre via une table des matière
  • La navigation dans les pages à l'aide de boutons Précédent, Suivant, Première page et Dernière page.
  • La navigation dans les pages a l'aide du clavier et de la molette de la souris
  • Le changement de taille de la police de caractère du livre
  • L'utilisation de liens interne pour naviguer dans le livre
  • L'ouverture des liens externe dans de nouvelles fenêtres/onglets.

Ce qui pourrait être à améliorer :

  • Revoir le chargement des pages et améliorer les performances
  • Revoir la compatibilité avec webkit (chrome et safari)
  • Réfléchir à un mode “ascenseur” pour les navigateur ne supportant pas le layout colonnes CSS3
  • Utiliser le cache navigateur pour mettre en place une lecture hors ligne
  • Permettre au lecteur de sélectionner le nombre de pages visibles (1, 2 3)
  • Permettre au lecteur, non seulement de changer la taille des caractères mais aussi la police et la taille des marges.
  • Développer le support d'EPUB3 :
    • Mettre en place un systeme convertissant le fichier de navigation epub2 vers celui de la norme epub3 et utiliser ainsi toujours cette version
    • Lier cette liseuse a la version pdf pour afficher les epub en fixed layout (spec à étudier)

Bien sur respecter finement les règles d'affichage spécifiées dans la norme epub a l’intérieur du navigateur demanderait énormément plus de travail mais je pense que ce principe permettrait déjà d'afficher de façons très correcte bon nombre de livre en epub.

Exemples :

Quelques liens

articles/demos/bumblebee_book_reader_1.txt · Dernière modification: 17/12/2012 23:45 de bumblebee