Paramétrer l’impression de pages utilisant Bootstrap

Faites connaître ce billet :

Il m’arrive fréquemment de me programmer de petits utilitaires dont je conçois la partie graphique à l’aide de Bootstrap. Si vous ne savez pas ce que c’est, la définition donnée sur Wikipédia est sans doute la plus simple et la meilleure : « Twitter Bootstrap est une collection d’outils utile à la création de sites et d’applications web. C’est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option. C’est l’un des projets les plus populaires sur la plate-forme de gestion de développement GitHub. » J’utilise pour ma part essentiellement la feuille de style CSS qui est proposée, reprenant en fait la mise en forme globale de Twitter, complétée par une collection complète d’éléments très utiles que l’on a ainsi pas besoin de créer à partir de zéro (boutons, barres de progressions, mise en forme du texte, …). Je ne reviens pas dans cet article sur comment l’utiliser mais je m’arrête ici sur un point particulier : l’impression.

Le seul problème est bien évidemment que cela peut nécessiter quelques adaptations afin de faire correspondre cet outil au plus proche des besoins. J’ai été confronté à plusieurs problèmes liés à l’impression et à la gestion d’affichages différents (sur écran / sur papier) et n’ayant trouvé que peu d’explications sur internet pour m’en sortir, je me suis dit que partager les solutions que j’ai trouvées – singulièrement en français – pourrait être utile aux personnes dans la même situation que moi.

Dans ce billet je détaille :

  • Comment conserver les colonnes sur papier
  • Comment gérer la visibilité papier / écran
  • Comment conserver les couleurs lors de l’impression
  • Comment ajouter un saut de page (ou au contraire l’éviter)

Conserver les colonnes sur papier

Bootstrap permet très facilement de placer du contenu au sein de différentes colonnes à l’écran, qui se trouvent parfaitement alignées et pour lesquelles vous n’avez qu’à spécifier la largeur grâce à un chiffre de 1 à 12. C’est très pratique, sauf que le mode présent par défaut au sein de la documentation est automatiquement traduit sur papier en vertical, chaque colonne étant alors ajoutée après la suivante. Vous perdez donc l’aspect « côte à côte » de votre design.

La documentation précise bien que de nombreux types de colonne existent, avec pour effet l’affichage d’une colonne particulière lorsqu’on est sur le grand écran d’un ordinateur de bureau, et le chargement alternatif d’une autre colonne lorsqu’on est un petit écran de smartphone, il suffit pour cela de modifier les lettres md en les remplaçants par le paramètre souhaité, parmi de nombreuses possibilités. Il est même possible de combiner différents paramètres, une proportion s’appliquant sur grand écran et une autre s’appliquant sur smarphone. Ce que la documentation ne dit pas, c’est que des éléments comme la largeur… d’une feuille de papier sont aussi pris en compte pour gérer l’affichage des colonnes. C’est pourquoi des colonnes md ne seront pas affichées comme à l’écran sur une feuille A4 portrait.

L’astuce consiste ici à utiliser des colonnes de type xs. Cela affiche les colonnes telles que décidées quel que soit le périphérique utilisé pour afficher votre site ou application. Lorsque vous allez imprimer votre page, les proportions de vos colonnes seront conservées à l’identique et elle ne passeront plus les unes sous les autres.

Gérer la visibilité papier / écran

Pour obtenir un document qui soit professionnel en sortie de votre application web utilisant Bootstrap, il est impératif de masquer lors de l’impression tout ce qui est inutile (typiquement les boutons de contrôle, les informations inutiles, …) mais aussi de parvenir à ajouter du contenu qui ne sera visible que sur l’impression (et qui ne viendra pas embêter l’utilisateur sur l’écran). La feuille de style Bootstrap le permet grâce à des classes particulièresvisible-print-block pour les éléments que l’on ne veut voir que sur papier et qui sont masqués sur écran… et l’inverse hidden-print qui masque des éléments visibles à l’écran sur l’impression papier.

Ajouter des éléments de charte graphique (une entête avec logo, coordonnées, etc.) devient donc très simple, il suffit d’ajouter en début de page ce que vous souhaitez comme vous le souhaitez, il suffit d’ajouter la classe au sein de ce que vous voulez paramétrer. Par exemple, si plusieurs colonnes affiche votre logo et des coordonnées, il suffit d’ajouter la classe au calque div qui contient les colonnes.

Evidemment, ces deux classes peuvent être appliquées à tout ce qui peut être ajouté comme élément sur une page web : un div, un p, une img, un titre h1, ce qu’on veut, y compris un élément Bootstrap plus complexe en entier (un panel, etc). C’est exactement le même fonctionnement quand on souhaite obtenir le résultat inverse, il suffit d’ajouter la classe hidden-print à tout élément qu’on ne veut pas voir apparaître sur l’impression au final, mais qu’on veut bien sûr conserver à l’écran. J’ajoute au passage que la classe hidden existe, masquant l’élément concerné dans tous les cas (écran, impression, …). Il faut tout de même être prudent car les informations ou éléments masqués par cette technique restent tout de même visibles dans le code source de la page. Le navigateur a juste instruction de ne pas les afficher, ce qui veut pas dire qu’elles ne sont pas consultables facilement.

Les classes  visible-print-blockhidden-print, et hidden permettent donc de gérer facilement l’affichage de n’importe quel élément Bootstrap sur écran ou sur impression papier.

Conserver la couleur à l’impression

L’un des avantages les plus grands de Bootstrap est de proposer par défaut toute une série de mise en couleur des informations à partir d’une base simple : default, primary, info, warning, danger, success. Ce sont des classes « colorantes » qui s’appliquent à de nombreux éléments disponibles dans Bootstrap : boutons, lignes de tableaux, badges, étiquettes, messages d’alerte, etc. Le seul problème c’est qu’à l’impression, tout passe en noir et blanc et cocher la case « Graphiques d’arrière plan » n’y change rien. C’est tout de même très embêtant car toute la mise en valeur des informations que l’on peut réaliser de manière conditionnelle dans le code (mettre en rouge des lignes de tableau correspondant à des commandes en retard, hiérarchiser des importance, attirer l’attention sur des problèmes, …) disparaît et n’est pas récupérée sur papier.

La solution se trouve en fait dans la feuille de style de Bootstrap qui comporte toute une section spécifiquement dédiée aux paramètres d’impression : @media print. Elle comporte divers petits arrangements qui peuvent être pratiques… mais qui ne sont pas forcément souhaités dans votre rendu sur papier. Outre la suppression automatique des couleurs, elle prévoit par exemple l’ajout entre parenthèse de tout lien ou de toute explication donnée au sein d’une balise d’infobulle <abbr> ce qui peut vite devenir insupportable. Par exemple si vous montrez à l’écran « Lien vers le site Libération » avec un lien, l’impression Bootstrap va automatiquement écrire sur votre feuille de papier « Lien vers le site Libération (http://www.liberation.fr)« . Il vous suffit donc de passer en commentaire les paramètres qui correspondent à des fonctionnalités que vous ne souhaitez pas.

Dans la version que je vous montre ci-dessous, j’ai désactivé la neutralisation des couleurs, l’ajout entre parenthèse des URL des liens après les liens, et l’ajout entre parenthèses du contenu des infobulles après les acronymes détaillés via <abbr>.

La désactivation des fonctions que vous ne souhaitez pas lors de l’impression avec Bootstrap peut donc être obtenue simplement en transformant en commentaires les éléments concernés. Il suffit d’ajouter /*! avant et */ après. Cela vous permet de faire des essais (et de revenir en arrière si le résultat obtenu n’est pas le résultat souhaité). 

Ajouter un saut de page (ou l’éviter)

Enfin le dernier aspect qui me paraît utile par rapport à l’impression de pages générées avec Bootstrap, c’est la question des sauts de page. En effet, par défaut, Bootstrap met les éléments imprimables « bout à bout » sans se soucier des cassures qui peuvent alors apparaître. Par exemple lorsqu’on utilise l’élément « panel«  (encadré d’éléments avec un bandeau de titre, une bordure et éventuellement un pied d’encadré) il peut être embêtant de se retrouver avec un saut de page en plein milieu, surtout si l’objectif de la page est d’afficher sous forme de panel plusieurs résultats issus d’une requête en base de données, chaque résultat étant mis en forme au sein d’un nouveau panel. Il existe deux classes spécifiques que vous pouvez ajouter à Bootstrap, qui n’y sont pas présentes par défaut, et qui vous changeront la vie…

On créé ainsi deux classes nouvelles : sautdepageavant qui permet de forcer un saut de page juste avant d’afficher l’élément pour lequel on a ajouté cette classe, et pasdesautdepage qui force l’ensemble de l’élément à passer sur la page suivante si un saut de page devait tomber « au milieu ». L’utilisation en est alors très simple : <h2 class= »sautdepageavant »>Mon titre qui sera en haut d’une nouvelle page</h2> par exemple pour forcer le passage à une nouvelle page et si je reprends l’exemple d’un résultat affiché sous forme de panel<div class= »panel panel-default sautdepageavant »>Le contenu du panel</div> pour éviter que le panel se trouve « coupé » en plein milieu s’il commence en bas d’une page.

Là encore, ces deux classes peuvent fonctionner pour n’importe quel élément avec le même effet… et elles rendent donc des services bien pratiques.

Laisser un commentaire