L’impression à votre façon
Par Derek Featherstone
Les développeurs web ont plusieurs méthodes pour faciliter l'impression de leur site. Grâce à une routine serveur ou à une feuille de style d'impression, la version imprimée peut se débarasser des images et de la navigation perdant leur sens une fois imprimées, voire afficher la page sur une colonne avec des polices et des tailles différentes.
Mais que se passe-t-il quand il n'y a pas de version imprimable, ou quand celle-ci comprend des pubs ou d'autres paramètres non souhaitables pour l'utilisateur ? C'est ici qu'entrent en jeu les feuilles de styles utilisateurs. Armé d'un minimum de connaissances CSS et de quelques outils de développement web, vous pouvez facilement créer votre propre version, formatée exactement selon vos désirs. Une fois la méthode acquise, vous l'utiliserez partout et vous ne reviendrez pas en arrière.
Pour l'instant, cette technique nécessite quelques outils spécifiques, mais à terme on pourra peut-être employer d'autres agents utilisateurs :
- Procurez-vous une copie de Mozilla Firefox si vous ne l'avez pas déjà.
- Installez la Barre d'Outil du Développeur Web de Chris Pederick ( Web Developer's Toolbar ) si ce n'est déjà fait.
Comment ça marche ?
Cette technique repose sur un certain nombre de postulats. L'un d'entre eux, et non le moindre, établit que tout site au contenu conséquent a recours à des systèmes de gabarits prévisibles pour tous ses articles (sur l'ensemble du site ou d'une rubrique). Une fois que vous avez situé le contenu dans le balisage, vous pouvez l'isoler et le formater pour qu'il apparaisse exactement comme vous le voulez.
La technique est vraiment simple dans son principe :
- Révéler la grille du site.
- Isoler l'élément (habituellement un
divou une cellule de tableau) qui abrite le contenu ciblé. - Utiliser CSS pour formater la page avec les tailles de caractères, largeurs et marges appropriées.
- Utiliser CSS pour ajuster la page en sélectionnant les parties à masquer ou à afficher.
- Sauvegardez les CSS pour plus tard afin de créer instantanément des impressions personnalisées.
L'étape la plus difficile est de repérer les sélecteurs CSS dont vous aurez besoin pour isoler les contenus souhaités — et ce n'est difficile que si le site utilise une structure de gabarits compliquée. Dans notre cas, nous allons commencer avec un exemple simple : le site Boxes and Arrows.
Passer le site aux rayons X
La Web Developer's Toolbar permet de passer facilement le site aux rayons X, révélant sa structure. Affichez la grille du site avec "Souligner les éléments de type bloc" ou "Souligner les cellules de tableaux". Ceci accompli, vous voudrez sans doute utiliser "Voir les détails des ID et des Class" à partir du menu "Divers". Votre page ressemble maintenant à quelque chose comme cela.
Isoler votre cible
Maintenant que nous pouvons voir où se trouve notre cible, nous avons besoin de l'isoler avec CSS. Pour le site Boxes and Arrows, nous avons de la chance — tout le contenu principal apparaît dans un div pertinemment nommé "contentBox". D'autres sites opposeront peut-être plus de résistance.
Une fois la cible identifiée, donnez-lui une couleur de fond différente ou changez les propriétés de bordure : il sera plus simple de la distinguer du reste de la page. Paramétrez le conteneur et tous ses éléments enfants pour qu'ils soient visibles, puis remontez en haut de votre zone de code et cachez tout le reste :
* {
visibility: hidden;
}
#contentBox * {
visibility: visible;
}
Formater à son goût
A ce stade, vous avez un bon noyau. Pour l'impression, il est judicieux d'inclure une largeur pour le conteneur principal. (nous utilisons 6,5 pouces (NDT : 15,24cm) par défaut, mais vous pouvez choisir un réglage adapté à votre imprimante et à ses marges).
Vous pouvez maintenant formater le texte en changeant les polices de caractères, les couleurs et les tailles comme bon vous semble. Pour Boxes and Arrows, le simple fait d'ajouter des styles pour les largeurs et certaines polices de caractères s'avère suffisant :
#contentBox * {
visibility: visible;
width: 6.25in;
}
p {
font-family: "Bitstream Vera Serif";
font-size: 10pt;
line-height: 14pt;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Bitstream Vera Sans";
}
Nettoyer si nécessaire
Maintenant vous pouvez cacher les autres éléments présents à l'écran que vous ne voulez pas imprimer. Dans le cas de Boxes and Arrows, nous avons ajouté les règles suivantes pour cacher quelques éléments mangeurs de place.
.figright, #readMore, #metainfo, #recent,
.twocol, .clear, .row, .hr {
display: none;
}
* img {
height: 0;
width: 0;
position: absolute;
}
Pour les images, régler la hauteur et la largeur à "0" et les positionner en absolu les retire du flux du document. Si nous avions simplement masqué les images, de grands espaces auraient pû apparaître dans la page, parce qu'elles prendraient toujours de la place dans l'écoulement du document. Évidemment nous ne voulons pas masquer les images dans tous les articles du site Boxes and Arrows, car certaines images sont essentielles à la compréhension des articles eux-mêmes.
Sauvegarder pour plus tard
Une fois que le rendu vous convient, sauvegardez votre feuille de style utilisateur. Enregistrez régulièrement votre CSS : la zone d'édition disparaît quand vous fermez la fenêtre d'Aperçu avant impression, et il faudra la recharger pour continuer vos modifications. Utilisez "Charger" pour importer votre fichier CSS dans la zone d'édition.
Maintenant que votre CSS est enregistrée, vous pouvez la réutiliser à tout instant pour le site concerné. Vous trouverez ci-dessous notre feuille de style enregistrée pour Boxes and Arrows :
* {
visibility: hidden;
}
#contentBox * {
visibility: visible;
width: 6.25in;
}
#contentBox {
margin-bottom: -9in;
}
p {
font-family: "Bitstream Vera Serif";
font-size: 10pt;
line-height: 14pt;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Bitstream Vera Sans";
}
.figright, #readMore, #metainfo, #recent,
.twocol, .clear, .row, .hr {
display: none;
}
* img {
height: 0;
width: 0;
position: absolute;
}
Autres trucs et astuces
Créer un peu d'espace : Il peut être difficile de faire la distinction entre un div, une table, ou autre. Créez une règle dans la zone d'édition pour placer des marges autour des différents conteneurs en fonction de la technique de mise en page utilisée sur le site.
table {
margin: 10px;
}
ou
div {
margin: 10px;
}
Cibler les éléments : Si vous avez des difficultés à identifier un élément dans la page, vous voudrez peut-être utiliser une des excellentes fonctions de la Web Developer's Toolbar : "Voir les informations sur les styles" depuis le menu "Information". Quand vous choisissez cette option, votre curseur se transforme en "réticule".
Passer sur les éléments de la page fera apparaître leur position dans l'arbre du DOM dans la barre de statut. C'est vraiment pratique pour les éléments profondément imbriqués dans la page.
Cibles difficiles : Les cellules de tableaux sans labels sont parfois difficiles à isoler. Nous allons ici créer notre jeu de règles le plus compliqué. Il affiche la seconde cellule dans la première ligne du troisième tableau de la page, en montrant les deuxième et troisième cellules, puis en cachant la troisième cellule avec la règle suivante. C'est complexe, mais ça fonctionne :
html body table+table+table tr td+td {
visibility: visible;
width: 6.5in;
}
html body table+table+table tr td+td+td {
visibility: hidden;
}
Compatibilité : Actuellement le module d'édition CSS de la Toolbar ne fonctionne pas sous Mozilla, parce que ce dernier n'implémente pas ses sidebars de la même manière que Firefox. Si votre préférence va à Mozilla, vous pouvez utiliser Firefox pour éditer et enregistrer le CSS, et ensuite choisir "Ajouter une feuille de style utilisateur" depuis le menu "Divers" pour appliquer les règles enregistrées.
http://www.alistapart.com/articles/printyourway/