Faites bonne impression avec Twitter Bootstrap

Faites bonne impression avec Twitter Bootstrap

Vous connaissez certainement les problèmes de rendu différent suivant les navigateurs lors de la conception d’un site Web. Et encore, aujourd’hui, les navigateurs réagissent plutôt de la même façon, si l’on ne considère pas certaines versions d’Internet Explorer.

Sachez qu’il y a pire : l’impression d’une page Web, qui dépend, en plus du navigateur, du système d’exploitation et du modèle d’imprimante.

Voyons quelques pistes pour essayer d’unifier le résultat sur papier avec Twitter Bootstrap.

Pourquoi imprimer ?

Avec la plupart des sites Web, il n’est pas question d’imprimer. Donc le problème ne se pose pas.

En revanche, si vous développez une application Web, ou un site dont certaines pages sont destinées à être imprimées (gestion d’étiquettes, bons de commande, factures, …), ces conseils vous seront certainement utiles.

Twitter Bootstrap ?

Faites bonne impression avec Twitter Bootstrap : le logoJ’utilise ici Twitter Bootstrap. Ce framework CSS, que j’avais présenté dans un autre article, ne facilite pas forcément la vie au moment de la gestion de l’impression.

En clair, ce n’est pas pour ses facultés en terme d’impression que j’ai choisi ce framework.

J’imagine que les difficultés rencontrées sont les mêmes avec les autres frameworks CSS.

Première approche

La première chose à faire pour que tout se déroule bien avec les fonctionnalités liées à l’impression de Twitter Bootstrap est de vérifier que le type de media n’est pas destiné aux écrans seuls dans la déclaration du fichier CSS.

Cette déclaration devrait être :

<link href="bootstrap/css/bootstrap.min.css" type="text/css" media="all" />

ou encore

<link href="bootstrap/css/bootstrap.min.css" type="text/css" />

Mais surtout pas :

<link href="bootstrap/css/bootstrap.min.css" type="text/css" media="screen" />

En effet, cette dernière méthode exclut Twitter Bootstrap au moment de l’impression.

Le système de grille responsive

Le système de Twitter Bootstrap 3 propose une approche différente de celle de la version que j’avais présentée.

Il est désormais possible de définir avec le même code, simplement en ajoutant des classes CSS aux attributs HTML, la manière d’afficher le contenu selon l’équipement utilisé.

Ainsi, on peut gérer facilement un affichage pour les smartphones, un autre pour les tablettes, un pour les petits écrans (ou les tablettes 10 pouces en mode paysage) et enfin un pour les grands écrans.

Faites bonne impression avec Twitter Bootstrap : le système de grilles
Le système de grilles de Twitter Bootstrap
Sachez que l’impression sur papier correspond à… l’affichage pour smartphone. Au premier abord, cela peut sembler bizarre : l’espace d’une feuille A4 correspond à la taille d’un téléphone 4 pouces. Bref.

Avec ce système, par exemple pour avoir deux colonnes sur une page, il est nécessaire d’utiliser la classe col-xs-6 sur chacune d’elles.

Pour rappel, le chiffre 6 de col-xs-6 indique qu’on utilise six divisions de la largeur totale qui contient douze divisions.

<div class="row">
  <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">Première colonne</div>
  <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">Deuxième colonne</div>
  <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">Troisième colonne</div>
  <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">Quatrième colonne</div>
</div>

Cette exemple affiche quatre (12 / 3) colonnes sur les écrans d’ordinateur (moyens et grands), trois colonnes (12 / 4) sur les tablettes et deux (12 / 6) sur les smartphones et à l’impression.

Cacher ou afficher des éléments à l’impression

Une classe de Twitter Bootstrap permet de cacher des éléments à l’impression ou encore de ne les afficher que dans ce cas.

Par exemple, pour cacher le filtre de sélection des articles à imprimer… à l’impression, il suffit d’utiliser la classe hidden-print :

<div class="hidden-print">Filtre de sélection...</div>

Pour afficher la date d’impression dans le cas contraire :

<div class="visible-print">09/12/2013</div>

Le container

Twitter Bootstrap propose une classe container qui permet d’ajouter des marges sur les écrans grands et moyens, ce qui évite de coller le contenu aux bords de la fenêtre. En revanche, la marge est nulle sur les écrans de moindre taille, et donc à l’impression.

Tout ça pour dire que vous pouvez utiliser librement cette fonctionnalité, elle ne perturbera pas vos impressions.

Ajouter des classes CSS spécifiques

Les conseils à partir d’ici ne concernent pas que Twitter Bootstrap, ils sont applicables à toutes les pages Web destinées à être imprimées, en utilisant un framework ou non.

Il est possible de créer des classes spécifiques à l’impression, en utilisant le media query print.

Par exemple, pour donner une taille de police différente aux <h2> dans le navigateur et à l’impression, dans le même fichier :

h2 { font-size: 24px; }
 
@media print {
  h2 { font-size: 16px; }
}

Vous pouvez également créer un fichier spécifique à chaque media. Avec le même exemple :

Le fichier commun style.css contient :

h2 { font-size: 24px; }

Le fichier dédié à l’impression print.css :

h2 { font-size: 24px; }

Et enfin, l’en-tête du fichier HTML qui met le tout en musique :

<link href="style.css" type="text/css" media="all" />
<link href="print.css" type="text/css" media="print" />

L’unité

Comme nos feuilles de papier sont mesurées en centimètres, et non en pixels, je vous conseille d’utiliser cette unité pour les hauteurs et les largeurs dans les feuilles de style. Selon votre habitude, vous pouvez également utiliser les pouces.

Par exemple :

.article {
  width: 5cm;
  height: 8cm;
}

Eviter de scinder du contenu sur deux feuilles

Si vous voulez que du contenu reste solidaire sur la même feuille, et éviter que celui-ci ne commence sur une feuille et ne se termine sur la suivante, vous pouvez l’indiquer facilement, grâce à la propriété CSS page-break-inside.

@media print {
  .dont-break { page-break-inside:avoid; }
}

Pour l’utiliser :

<div class="dont-break">
  <img src="image.jpeg" width="400" height="300" />
  <h3>Titre</h3>
  <p>Description</p>
</div>

Saut de page automatique

Vous pouvez également souhaiter changer de page, c’est-à-dire créer un saut de page à certains moments, grâce à la propriété CSS page-break-before.

Par exemple, pour que les titres de catégorie (<h2> avec un classe category) commencent en haut d’une nouvelle page :

@media print {
  h2.category { page-break-before: always; }
}

Le mot de la fin

Les techniques que nous avons vues pour améliorer l’impression, notamment avec Twitter Bootstrap ne donneront pas un résultat exempt de différences suivant la configuration, mais le plus gros est fait.

Pour la route, une dernière astuce, qui permet d’imprimer automatiquement l’URL des liens à la suite de leur ancre.

@media print{
  a:after {
    content:" (" attr(href) ") ";
  }
}

Cet article vous a été utile ? Partage it !

2 réflexions au sujet de « Faites bonne impression avec Twitter Bootstrap »

  1. C’est vrai qu’on ne pense pas toujours à adapter certaines de ses pages à l’impression! Je n’avais encore jamais vu d’article destiné à donner des conseils sur la mise en place du CSS pour optimiser l’impression! C’est très intéressant comme approche à vrai dire! Ce qui est pratique avec ce type d’optimisation, c’est qu’il n’est plus question de mettre en ligne un pdf téléchargeable dont la création du design peut être assez compliqué, avec une page web, il n’y a pas forcément de limites!
    Merci beaucoup pour cet article!

    1. Bonjour Franck,
      En effet, c’est complétement applicable à un blog, pour imprimer une liste d’articles ou un contenu et le lire à tête reposée, et même générer un PDF, avec l’impression vers PDF.
      David

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Si vous le souhaitez, renseignez le champ 'Nom' de cette façon : 'VotreNom@VotreMotClef' pour obtenir une ancre optimisée pour les moteurs de recherche.