Faites bonne impression

Depuis que je n’ai plus de connexion internet, je fréquente un cybercafé et j’imprime les articles intéressants que je trouve sur des sites, blogs ou forums. Je dois dire que c’est assez désagréable de lancer l’impression de dizaines de pages et se rendre compte que la disposition du contenu est complètement bousillée. Oui je sais, j’aurais dû faire un aperçu avant impression. Ou faire comme mon voisin de table: copier-coller dans un traitement de texte avant l’impression. Sauf que pour les conceptions à base de tableaux imbriqués c’est folklorique ! Tout cela me motive à élaborer une jolie feuille de style media="print".

J’ai repris quelques points intéressants:

  • Fond blanc — Ça semble une évidence mais ce n’est finalement pas si important. Les options par défaut des navigateurs impriment du texte noir sur fond blanc.
  • Couleur du texte — Le texte n’est pas vraiment noir mais plutôt en niveaux de gris. C’est important car une couleur très colorée et contrastée à l’écran peut avoir l’effet inverse en niveau de gris. C’est surtout dommage pour les titres de taille identique à celle du texte et mis en valeur par une couleur forte. Le mieux est de formater les titres avec d’autres attributs que la couleur: graisse, petites-capitales, corps…
  • Image de fond sémantique déclarée — Les options par défaut des navigateurs n’impriment pas les images de fond. Il est donc nécessaire de spécifier les images en fond qui ont du sens pour la compréhension du message. Ça peut vous paraître paradoxale puisque si l’image est en fond c’est qu’elle n’est pas jugée pertinente. Or, je suis tombé sur un article de Laurent Denis: « Mettre un titre en image et rester accessible »[¹] sur lequel les images d’exemples ne s’affichaient pas. J’avoue que ça reste quand même l’exception.
  • Police — Elle doit être adaptée à l’impression. Le Verdana ou le Georgia sont deux polices créées pour l’écran. Elles possèdent une grande hauteur d’œil et des caractères très larges par rapport à ceux utilisés dans l’édition. Aussi, le résultat à l’impression est meilleur avec une police à empattements. Ne pas oublier d’adapter la taille en points ou en valeurs relatives plutôt qu’en pixels.
  • Mise en page — Masquer le menu, pied-de-page, pub… avec la propriété diplsay="none". Inutile d’encombrer la page avec des éléments qui n’ont aucune raison d’être. Par contre, le logo du site ou la bannière contenant la dénomination du site ne sera pas superflus. La mise en page doit être également fluide plutôt que fixe. Il n’y aucune raison de restreindre l’espace d’impression. Une marge généreuse à gauche et une marge plus discrète à droite.
  • Adresses web, e-mails — On n’y pense pas mais sur le papier, les liens hypertextes perdent tout leur potentiel. Même si le lecteur est incapable de cliquer sur le lien, informez-le sur la page de destination. Les longues URL devraient être tranchées pour garantir un confort de lisibilité.
  • Abréviations et autres acronymes — Quand Laurent Denis titre: « Logo, span et CSS: la FIR et ses variantes » son public très spécialisé comprend les termes span et CSS mais sans doute pas FIR. La définition doit alors se retrouver dans la première occurrence. Inutile d’alourdir et encombrer le texte pour rien.
  • Publicité — Adsense, Adwords, bannières… ont certainement moins d’intérêt sur une page imprimée. Pensez à les désactiver pour gagner de la place dans la mise en page.

Sur les trois mois sans connexion, j’ai pris l’habitude d’imprimer les articles qui m’intéressent pour les lire tranquillement à mon domicile. J’ai repris quelques sujets qui posent problème à l’impression.

Peu de maîtrise sur la mise en page

Une feuille de style pour l’impression permet de masquer certains éléments pour optimiser la lecture sur papier. Toutefois cette maîtrise est relative et il arrive bien des cas où le résultat final est surprenant. Il n’est pas rare que j’imprime une première feuille blanche sur un site comme Pompage.net malgré tout sensibilisé à ces problèmes. Les paragraphes et les lignes solidaires ne sont pas pris en compte. Encore moins les veuves et orphelines. Ces aspects techniques sont, pour le moment, impossible à résoudre à l’aide d’une feuille de style. Plus embêtant, il n’est pas rare qu’en fin de page l’image ou la phrase soit complètement sectionnée horizontalement et rejetée à la page suivante. Imaginez un groupe d’amis en vacances dont les visages se trouvent sur la première feuille et les corps sur la suivante.

Pas de commentaires pour les blogs

Question à deux sous: à votre avis les commentaires s’impriment à la suite du billet ? Non ! en tout cas, ceux pour lesquels j’ai fait le test. Pour y arriver: une grosse sélection de haut en bas et on lance l’impression d’après la sélection. C’est franchement pas sexy comme technique mais ça marche plus ou moins bien.

Avant d’en arriver là, on pourrait se demander si les commentaires font ou non partie du billet. À cela je réponds que ce n’est pas une bonne question puisque je demande d’imprimer la page en entier. Pas la moitié, ou le quart mais TOUTE la page. Viendra peut-être le jour où on pourra cocher « avec commentaires ». Je trouve ce choix peu stratégique. Imprimer c’est quand même une démarche peu commune et volontariste. Il faut y trouver un intérêt. Dès lors, on peut se dire que les avis de la communauté nous intéresse également. Sur un blog comme Alsacréations, les interventions des uns et des autres sont souvent aussi pertinentes que le contenu de l’article.

Une date pour les articles de fond

La recherche sur le web nous amène parfois sur des articles de fond très intéressants. Il est pertinent d’ajouter la date de création pour permettre à l’internaute de juger de la fraîcheur du document ou se faire une idée du mois, de l’année. Elle aura d’autant plus d’importance lors d’un archivage.

Attention à l’affichage du code source

Toujours sur le blog d’Alsacréations, Raphaël utilise la balise pre pour y ajouter le code HTML. Dans un navigateur web, un ascenseur horizontal apparaît pour faire défiler le code. Par contre sur le papier, le code trop long est sectionné et du coup devient incompréhensible.

Forums… peut mieux faire

Il faut croire que le contenu des forums n’est pas destiné à être imprimé. Le résultat est trop souvent rogné à cause d’un encombrement de la page: un avatar trop grand, une citation, quelques retraits de paragraphes et voilà un contenu complètement illisible.

Liez les éléments qui ne peuvent pas être scindés

Indiquez l’interdiction de saut de page après un titre de section à l’aide de la propriété page-break-after: avoid. Ça vous évitera d’avoir un titre sur une page et le texte sur la page suivante.

Comment faire en pratique ?

La théorie est vue, passons à la pratique. Cette section est tirée en partie de l’article de Pieter Beulque: « Ten tips for better print style sheets ». La première chose à faire: vérifiez la présence d’une feuille de style destinée à l’écran (media="screen"). Ensuite, il suffit d’ajouter une CSS pour l’impression.

{code type=html}

{/code}

Pour supprimer les éléments inappropriés: navigation, moteur de recherche…

{code type=css}
#navbar, #sidebar, #footer {
display: none;
}
{/code}

Augmenter la largeur du texte…

{code type=css}
#content {
width: 100%;
margin: 0;
float: none;
}
{/code}

Afficher l’URL des liens hypertextes…

{code type=css}
a:link:after {
content:  » ( » attr(href) « ) « ;
}
{/code}

Afficher les intitulés des abréviations et acronymes…

{code type=css}
abbr[title]:after,acronym[title]:after {
content: » ( » attr(title) « ) « ;
}
{/code}

Faire ressortir les libellés des liens…

{code type=css}
a:link {
font-weight: bold;
color: #06c;
}
{/code}

Utiliser une taille de police adaptée à l’impression…

{code type=css}
p {
font-size: 12pt;
}
{/code}

Choisir un style de police pertinent…

{code type=css}
body {
font-family: Georgia, ‘Times New Roman’, serif;
}
{/code}

Vérifier le rendu final avant d’imprimer

Cette fois-ci c’est la bonne, vous avez décidé de passer à l’offensive et d’ajouter une CSS pour l’impression. Pour éviter de gaspiller du papier inutilement au fur et à mesure de l’ajout des règles, il est bon d’avoir une simulation à l’écran du résultat final sur le papier. Pour y arriver: Fichier > Aperçu avant impression.

À lire ailleurs: « Faire une feuille de style pour l’impression »

[¹] Le blog blog-and-bles.org n’est plus accessible.

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s