De bonnes règles pour configurer print css? [fermé]

Question

Je suis à la recherche de suggestions / règles / guides pour réaliser un css d’impression décent pour l’impression d’une page Web. Avez-vous quelque chose à offrir?

Answer 1

Voici quelques styles d'impression généraux à utiliser pour obtenir de meilleurs impressions:

/* Print styles */
@media print 
{
    tr, td, th {page-break-inside:avoid}
    thead {display:table-header-group}
    .NoPrint {visibility:hidden; display:none}
    a {color:#000000}
}

Le premier empêche les sauts de page à l'intérieur d'une ligne de tableau

Le style thead fait en sorte que les lignes de la balise thead soient répétées pour chaque page du tableau.

NoPrint est une classe que j’utilise pour afficher quelque chose à l’écran, mais pas en impression.

Et j'aime bien désactiver les couleurs des liens.

Answer 2

Une chose que je m'assure de bien mettre dans ma feuille de style d'impression est:

a[href^="http://"]:after{
    content: " (" attr(href) ") ";
}

Ceci écrit le lien réel à côté du texte du lien afin que les imprimeurs sachent où le lien est supposé aller.

Je règle également le texte de mon corps pour qu'il soit un peu plus lisible pour l'impression:

body{
    font: 0.9em/1.5em Georgia, "Times New Roman", Times, serif;
}

Answer 3

Lisez tout d'abord cet article sur A List Apart ( http://www.alistapart.com/articles/ ça va / ). Ils couvrent beaucoup des bases que vous recherchez (liens étendus, blanchiment à la chaux, etc.).

Ne vous fiez pas à l'aperçu avant impression, assurez-vous de suivre l'intégralité du processus lors du test d'une mise en page. Pour économiser du papier, installez SnagIt ou utilisez le rédacteur de document Microsoft XPS. Vous pouvez imprimer directement sur une image sans gaspiller de papier.

Également pour les longs articles, envisagez de changer votre police en serif. Les articles sur le Web sont plus faciles à lire en sans-serif (Arial, Verdana) mais en version imprimée, essayez Times New Roman ou Georgia.

Answer 4

Vous avez cet article de Eric Meyer ancien et toujours pertinent sur une liste à part.

L’important est de recommencer à zéro, en définissant explicitement les marges et les marges / marges de remplissage à 0, en arrière-plan blanc et en "aucun affichage". à des éléments non essentiels à l'impression (comme certains menus)

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

body {
    background: white;
    }

#menu {
    display: none;
    }

#wrapper, #content {
    width: auto; 
    margin: 0 5%;
    padding: 0; 
    border: 0;
    float: none !important;
    color: black; 
    background: transparent;
    }

Et à partir de là.

Answer 5

Lorsque vous définissez le style d'impression, vous devez penser sur papier et en unités physiques.

• Définissez les marges en centimètres (pouces) et les tailles de police en points (comme dans OpenOffice).
• Créez une classe telle que 'screen' ou 'noprint' pour pouvoir supprimer facilement les éléments indésirables. matériel.
• Oubliez les textes de couleur fantaisie. Texte noir sur fond blanc.
• Pensez à supprimer les images superflues. Elles ne seront peut-être pas aussi belles en noir et blanc
• Supprimez le soulignement des liens et donnez-leur un texte sain. Il semble ridicule de lire "consulter cette page", où "cela". est souligné. Ou si vous mettez le href du lien après le texte souligné, alors il peut être plus utile mais ne semble pas aussi beau à mon humble avis.

Answer 6

Méfiez-vous des images et des couleurs d’arrière-plan. Je pense que le comportement par défaut d’IE n’est pas d’imprimer des images d’arrière-plan ou des couleurs.