Gute Regeln für Druck css einrichten? [geschlossen]

Question

Ich suche nach irgendwelchen Vorschlag / Regeln / Führungen machen einen ordentlichen Druck CSS für, wenn eine Webseite gedruckt wird. haben Haben Sie noch zu bieten?

Answer 1

Hier sind einige allgemeine Druckformate zu verwenden, bessere Ausdrucke zu erhalten:

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

Die obere verhindert Seitenumbrüche innerhalb einer Tabellenzeile

Der Thead Stil macht alle Zeilen in der thead-Tag Wiederholung für jede Seite, dass die Tabelle über umspannt.

NoPrint ist eine Klasse ich etwas auf dem Bildschirm zu zeigen, verwenden, aber nicht in gedruckter Form.

Und Ich mag Linkfarben deaktivieren.

Answer 2

Eine Sache, die ich sicher in meinem Druck-Stylesheet setzen ist:

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

Dies schreibt den tatsächlichen Link neben Text zu verknüpfen, damit die Menschen, die das Dokument gedruckt werden, der Link ist wohl wissen, wurden zu gehen.

Ich habe auch meinen Körper Text ein wenig mehr lesbar für den Druck zu sein:

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

Answer 3

Zuerst diesen Artikel aus einer Liste lesen Apart ( http://www.alistapart.com/articles/ goingtoprint / ). Sie decken einen großen Teil der Grundlagen Sie suchen (erweiterte Links, Kalk, etc).

Verlassen Sie sich nicht auf Druckvorschau, stellen Sie sicher durch den gesamten Prozess zu gehen, wenn ein Drucklayout zu testen. Um Papier zu sparen SnagIt installieren oder das Microsoft XPS Document Writer verwenden. Verschwenden Sie können direkt auf ein Bild drucken und kein Papier.

Auch für lange Artikel, betrachten Sie Ihre Schriftart Serife ändern. Artikel im Web sind am einfachsten in sans-serif (Arial, Verdana), aber in Druck versucht Times New Roman oder Georgia zu lesen.

Answer 4

Sie haben diese alten, aber immer noch relevant Artikel von Eric Meyer rel="nofollow auf einer Liste auseinander.

Der Hauptpunkt ist, von neuem zu beginnen, explizit Grenzen setzen und Marging / padding auf 0, weißen Hintergrund, und „keine Anzeige“ auf jeden nicht wesentlichen für den Druck (wie bestimmte Menüs)

<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;
    }

Und gehen von dort aus.

Answer 5

Wenn Sie die Art von Druck definieren, haben Sie auf einem Papier zu denken und in physikalischen Einheiten.

• Stellen Sie die Ränder in Zentimetern (Zoll) und die Schriftgröße in Punkten (wie in Openoffice).
• Erstellen Sie eine Klasse wie ‚Bildschirm‘ oder ‚noprint‘ in der Lage sein, unerwünschte leicht zu entfernen Material.
• Vergessen Sie Fantasie farbigen Text. Schwarzer Text auf weißen Hintergrund.
• Denken Sie überflüssigen Bilder zu entfernen - sie nicht so gut in schwarz und weiß
aussehen könnten
• Entfernen von Links unterstreichen und damit die Links sane Text haben. Es sieht albern „check this page“ zu lesen, wo „der“ unterstrichen wird. Oder wenn Sie den href des Link unterstrichenen Text setzen, dann kann es sinnvoller sein, aber nicht so schön IMHO aussehen.

Answer 6

Achten Sie auf Hintergrundbilder und Farben. Ich denke, IE Standardverhalten ist nicht Hintergrundbilder oder Farben auszudrucken.