Transformer un site web en un livre

Le livre sur Django rédigé de manière collaborative entre les auteurs de Django et les internautes est disponible en ligne sous la licence GNU Free Documentation. Il est publié en ligne sous forme d’une série de pages HTML… Pas très pratique pour le lire tranquillement dans le canapé… J’ai donc décidé de l’imprimer…

J’aurais pu me contenter de l’imprimer en utilisant la fonction imprimer de mon butineur favoris, mais :

  • Le résultat n’aurait pas été très bon…
  • Ça n’aurait pas été très marrant…

J’ai décider d’utiliser les fonctions du CSS pour faire quelque chose de potable… Le CSS, on l’utilise souvent pour afficher des choses à l’écran, mais on l’utilise rarement pour imprimer. Pourtant, dans sa version 3 (qui n’est malheureusement pas assez supporté par les butineurs), on peut avoir un contrôle assez précis de ce que l’on imprime.

On peut par exemple gérer les entêtes et pieds de pages, les pages recto/verso, les sauts de page, la numérotation des chapitres et figures, les notes en pieds de page, etc…

Mais si les navigateurs ne supporte pas comme il faut le CSS 3, quel est l’intérêt de tout ça… Et bien, il existe un outils (propriétaire, mais gratuit pour un usage personnel) nommé prince, qui permet de générer un PDF à partir d’un fichier HTML et qui comprend correctement le CSS 3… Parfait, donc à l’attaque…

En premier lieu, je me suis fait un scripts python pour extraire le contenu des différents chapitres du livre depuis le site djangobook.com. Ce script utilise le module BeautifulSoup, qui permet une manipulation aisé des fichiers HTML (un peu à la manières des fonctions de manipulation du DOM en javascript). Le script récupère successivement toutes les pages, extrait le contenu du div ayant la classe « yui-b » et aglomère le tout dans un fichier res.html.

Le fichier ainsi généré est loin d’être conforme xhtml, c’est pour cela qu’un deuxième script se charge de le rendre un peu plus conforme, mais aussi de générer les liens correspondant à la table des matières.

A partir de là, j’obtiens un fichier html à peu près correct (il y a encore plein de balises avec des id identiques…). Je peux donc y appliquer un CSS pour l’imprimer. Je suis parti du fichier CSS donner dans l’excellent article sur A List Appart. J’ai modifier la taille des pages, les marges, et la façon d’afficher les illustrations, les légendes ou les notes. Au bout d’une heure de tatonement, je suis parvenu à obtenir le résultat suivant, et je suis plutôt content de moi…

Update 20/02/2008 : J’ai fait quelques corrections…

(2 commentaires)

  1. T’aime bien te prendre la tete puyb, néanmoins l’extraction avec les images, j’avoue c’est fort.

    • Puyb on 31 décembre 2007 at 17:57
    • Répondre

    Tu sais, j’ai mis à peine 3 heures, et ce, malgré les tâtonnement lié à mon manque de maîtrise des fonctions avancées CSS que j’ai utilisé. Ce n’est pas énorme par rapport à l’impression manuelle des 28 chapitres (avec un résultat de mauvaise qualité), et c’est un gain de temps énorme par rapport à une mise en page correcte réalisée en WYSIWYG avec OOo…

Laisser un commentaire

Your email address will not be published.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.