21 déc. 2013

Remplacer Word par HTML5

Je ne suis pas un adepte des outils de bureautique. Dès que l'on passe d'un OS à l'autre, les résultats sont catastrophiques : le formatage est systématiquement mis à mal. S'il existex des solutions déjà éprouvées tels LaTeX, leurs formats est un nouvel apprentissage ralentissant la création.

Ma solution est de passer par HTML5. En effet, depuis CSS 2.1, il est possible d'appliquer des propriétés pour les sauts de pages à l'impression (page-break-after, page-break-inside, ...). Avec CSS 3, les media queries permettent de sélectionner les propriétés qui seront utilisées en fonction du média de rendu (screen et print, dans notre cas). Un seul document, une mise en page adaptée en fonction du rendu. Cela rappelle sérieusement le RWD, non ?

Mais voilà, après, il faut produire son fichier de sortie. Un PDF généralement. Comment faire rentrer cela dans une chaîne de production automatisée pour éviter les multiples combinaisons de touches et d'ajustements spécifiques ?

Ma solution préférée est d'utiliser PhantomJS.

Pour ceux, qui ne le connaisse pas, c'est un navigateur sans fenêtre de rendu. Quoi, mais ça ne sert à rien ? Et bien si, vous avez bien lu. Un navigateur sans fenêtre de rendu. On l'utilise pour tester les développements web ou hybrides en y injectant ses tests sous la forme de directives en JS. On peut alors vérifier si les éléments ont été rendus proprement, en combien de temps, et on peut faire des sorties sous plusieurs formats pour vérifier les régressions d'une version à l'autre. Les sorties sont du type PNG, JPEG, ... et PDF !

Et oui, c'est là que ça devient intéressant. Toute page web peut être rendue sous la forme d'un PDF via une simple ligne de commande :
phantomjs rasterize.js dist/index.html mon_impression.pdf A4
  • rasterize.js est le petit script injecté permettant l'impression, disponible ici avec quelques explications supplémentaires.
  • dist/index.html est votre page à imprimer.
  • mon_impression.pdf est le fichier PDF qui sera créé.
  • A4 est le format sélectionné et vous pouvez en changer comme bon vous semble.
Et voilà. Une petite intégration avec votre gestionnaire de tâches préférés, Grunt pour ma part, et vos fichiers sont créés à la volée dès que vous changez une virgule ou une couleur de fond.