Imprimer correctement grâce au CSS

Publié le par PêUR

Combien de fois avez vous imprimé du premier coup un site ou blog sans tronquer une partie de ce dernier... Généralement il faut forcer l'impression en mode paysage, et encore parfois cela ne suffit pas!

Grâce à cet article, vous allez apprendre à utiliser les feuilles de styles media-specific qui vous permettront de donner le style que vous souhaitez à votre blog pour sa version imprimable

Sommaire:

Exemple
Créez votre feuille de styles pour l'impression
Quoi mettre dans cette feuille de styles?
Conseils sur le style et l'impression
Installer la feuille de styles d'impression sur votre blog
Cadeau Bonus: impression/sauvegarde pdf
Ressources

Imprimer l'article

 

Exemple

Imprimer cette page, et voyez la différence entre le format papier et le format écran!

Si vous ne savez pas comment imprimer (ben quoi?! Ça arrive!), cliquez ici pour lancer la fenêtre d'impression et cliquez sur le bouton  

Si vous n'avez pas d'imprimante, dans la barre d'outils de votre navigateur cliquez sur Fichier > Aperçu avant impression... et notez la différence.

 

Créez votre feuille de styles pour l'impression

Vous pouvez créer cette feuille de style avec le bloc-notes de windows ou tout autre éditeur de texte (UltraEdit, smallEditor, etc) en enregistrant votre fichier au format css. Pour cela dans la barre d'outils de l'éditeur, cliquez sur Fichier > Enregistrer sous.... Dans le champ Nom du fichier mettre print.css et dans le champ type choisissez: Tous les fichiers.

 

Quoi mettre dans cette feuille de styles?

Pour créer cette feuille de styles, il vous faut quelques connaissances en CSS, vous pouvez consulter certains des articles de cette liste afin de vous aider.

Vous devez y mettre le CSS que vous souhaitez voir appliquer à votre blog pour son impression.

A titre d'exemple, ci-dessous le CSS pour une impression en format A4, mode portrait, avec disparition des colonnes gauche et droite, de l'entête et du pied de page afin de ne conserver que la partie article. Ce code est valable pour un blog Over-Blog dont le modèle est supérieur ou égal à 204:

CSS

@page {
    size :21.0cm 29.7cm;
    margin: 5cm 10cm;
}
body {
    background: #fff;
}
#footer, #top, #leftnav, #rightnav {
    display:none;
}
#main {
    position: absolute;
    top:0;
    left: 0;
    width: 600px;
}

Attention, selon votre CSS, l'exemple ci-dessus est à adapter. Le mieux étant d'utiliser Firefox  et le plug-in WebDevelopper  pour voir en direct live l'effet de votre CSS sur votre blog.

 

Conseils sur le style et l'impression

Pour optimiser la lecture de votre blog à l'impression:

  • pensez à supprimer les fonds colorés de votre blog, si vous avez une couleur vive ou une image de fond, vous pouvez mettre un fond blanc en rajoutant la règle background: #fff
  • Si votre police est très claire, pensez à la contraster, pour l'impression une police noire est plus pratique, color: #000
  • Vous pouvez pensez à souligner vos liens si ce n'est pas le cas sur l'écran: a {text-decoration: underline;}
  • Vous pouvez agrandire la taille du titre des articles: .titreArticle {font-size: 14pt;}
  • Vous pouvez supprimer la partie "publié par ... dans ... commentaires (0) - trackbacks (0)" avec cette règle: .Option {display: none;}
  • Etc.

 

Installer la feuille de styles d'impression sur votre blog

Uploader le fichier print.css sur votre espace de stockage Over-Blog et relever son url complète que l'on désignera dans la suite de l'article par http://XXX/print.css.

Dans l'entête de votre blog, en mode source, insérer le code suivant:

HTML

<link media="print"
href="http://XXX/print.css"
type="text/css" rel="stylesheet" />

En veillant à mettre l'url complète préalablement relever de votre feuille de style d'impression.

Voilà, à chaque impression de votre blog, vos visiteurs se retrouvent avec un format papier lisible et optimisé pour ce support!!

 

Cadeau Bonus: impression/sauvegarde pdf

J'ai découvert récement un site très intéressant qui permet de générer des fichiers pdf de l'image de n'importe quel site ou blog. C'est un moyen intéressant pour proposer à vos lecteurs d'imprimer votre blog à partir d'un tel fichier... C'est aussi un bon moyen pour archiver certains de vos articles :)

Pour faire votre essai, c'est ici: HTML 2 PDF , pour voir le résultat avec cet article: téléchargez-moi

 

Ressources

 

Publié dans CSS

Pour être informé des derniers articles, inscrivez vous :

Commenter cet article

Alexandre 20/03/2007 12:08

Sa marche !! Merci ;)

PêUR 20/03/2007 12:51

:)

abbas 16/02/2007 00:24

Il y a comme un souci dans l'article imprimer correctement grâce au css tous les liens du debut men à la page d'acceuil de overblog

PêUR 16/02/2007 20:51

C'est corrigé, merci!

pierre 11/10/2006 10:09

pas besoin d'un deuxième fichier css:

précéder le css principal de:

@media screen {

à la fin, fermer l'accolade : }

ouvrir une secttion impression avec:

@media print {

mettre le css qu'on veut pour impression

refermer accolade }

PêUR 11/10/2006 22:20

Oui ce n'est pas obligé!

Guillaume 02/08/2006 18:06

Firefox (1.5), sous linux...

PêUR 02/08/2006 23:01

J'ai 9 pages (avec les commentaires) sous IE et FF avec XP. Je pense que ça doit être lié à FF sous linux ?!?!??

Guillaume 01/08/2006 16:41

Justement, moi je n'ai pas de saut de page du tout : seulement la premiere page ! C'est le cas si j'essaye d'imprimer cet article-la qui est trop long pour tenir sur une seule page.
Serais-ce un probleme de browser ?

PêUR 01/08/2006 22:49

Quel est ton navigateur?