Imprimez le web avec Gutenberg

Aujourd'hui, le BlogDuWebdesign vous propose de découvrir Gutenberg, une ressource pour une tache inhabituelle mais malheureusement encore parfois nécessaire : imprimer le Web

Imprimer le web ?

Bien que cela puisse paraître absurde en 2016, oui le Web peut s'imprimer. Si les nouvelles générations à l'aise avec le dématérialiser auront tendance à toujours avoir le Web dans la poche, leurs parents auront encore parfois le reflex d'imprimer une page pour pouvoir emporter et partager une information, que ce soit un article, une page de contact ou encore une carte représentant un trajet.

Le seul problème avec ce fait est que le Web actuelle ne ressemble plus du tout à ce qu'il etait il y a encore 10 ans. Interactif, anime, les pages web tendent souvent plus vers une application ou une oeuvre artistique que vers un texte simple à imprimer.

Heureusement, la solution à ce problème existe dans le CSS depuis ses débuts, les CSS print. Avec eux, il est possible de voir l'impression comme une sorte de "format" supplémentaire a ajouté son site responsif, et de la même manière qu'il existe de nombreux frameworks CSS pour nous aider en responsive, il en existe un pour le print : Gutenberg.

Gutenberg, pour imprimer le Web

Gutenberg est un outil se composant d'un simple fichier CSS principale et de divers fichiers de thèmes, eux aussi sous la forme de simples fichiers CSS.

Pour l'installer, rien de bien complexe : Ajouter simplement le fichier principal ainsi que le thème de votre choix a votre page, et c'est tout !

Pour aller plus dans le detail, il vous sera possible d'insérer des pages-breaks ou de cacher (ou garder affiche) certains éléments particuliers avec des classes (comme par exemple la classe no-print qui permet comme son nom l'indique de cacher un element pour le print).

Cette ressource est évidemment open source et vous pourrez la retrouver sur Github.

Pour aller plus loin

Si le sujet vos intéresse ou que vous avez besoin de plus pour un projet précis, je vous propose la lecture de ces deux articles qui vous fourniront des personnalisations bien plus poussez (numérotation des pages, image de couverture, etc.)

Le premier article est un article du Smashing Magazine : Designing For Print With CSS

Enfin, découvrez une ressource a list apart : Printing a Book with CSS: Boom! . Cet article date de plus de 10 ans, mais reste un des plus complets à ma connaissance sur le domaine.