Sichere Breite in Pixel zum Drucken von Webseiten?


85

Was ist die sichere Breite in Pixel zum Drucken einer Webseite?

Meine Seite enthält große Bilder und ich möchte sicherstellen, dass sie beim Drucken nicht abgeschnitten werden.

Ich kenne verschiedene Browser-Ränder und US Letter / DIN A4-Papierformate. Wir haben also die Standardbuchstabengröße und einige Standard-DPI-Werte erhalten. Aber kann ich diese in Pixelwerte konvertieren , um sie im Bildattribut anzugeben width?


3
Verwenden Sie stattdessen die Breite in Pixel, width:autoum die Breite des Inhalts an die Breite des Papiers anzupassen
Marko Vranjkovic

Antworten:


89

Eine echte „universelle Antwort“ kann ich nicht geben. Ich kann jedoch eine einfache und endgültige Antwort auf einige Einzelheiten geben ...

670 PIXEL

Zumindest scheint dies eine sichere Antwort für Microsoft-Produkte zu sein. Ich habe viele Vorschläge gelesen, einschließlich 675, aber nachdem ich dies selbst getestet habe, habe ich mir 670 ausgedacht.

Abgesehen von allen DPI-, Randproblemen und Hardwareunterschieden basiert diese Antwort auf der Tatsache, dass bei Verwendung der Druckvorschau in IE9 (mit Standardrändern) die Druckgröße auf 100% eingestellt wird und nicht die Standardeinstellung "Anpassen verkleinern". passt alles auf die Seite, ohne bei dieser Breite abgeschnitten zu werden.

Wenn ich mir eine HTML-E-Mail sende und sie mit Windows Live Mail 2011 (wie Outlook Express wurde) erhalte und die Seite mit einer Breite von 670 drucke, passt wieder alles. Dies gilt, wenn ich es an eine tatsächliche Hardcopy oder eine MS XPS-Datei sende (virtueller Ausdruck).

Bevor ich experimentierte, verwendete ich eine beliebige Breite von 700. In allen oben genannten Szenarien wurde ein Teil der Seite abgeschnitten. Als ich auf 670 reduzierte, passte alles perfekt.

Wie ich die Breite einstelle - Ich habe gerade eine primitive "Wrapper" -Html-Tabelle verwendet und deren Breite auf 670 definiert.

Wenn Sie die Software des Endbenutzers diktieren können, können solche Angelegenheiten einfach sein. Wenn Sie dies nicht können (wie dies normalerweise der Fall ist), können Sie nach Einzelheiten wie den von ihnen verwendeten Browsern usw. testen und die Lösungen für die wichtigen Browser fest codieren. Zwischen IE und FF decken Sie buchstäblich etwa 90% der Webbenutzer ab. Geben Sie einen anderen Code für "alle anderen" ein, der im Allgemeinen zu funktionieren scheint, und nennen Sie ihn einen Tag ...


Ich möchte nur einen Kommentar hinzufügen, dass FF und IE zum Zeitpunkt dieser Antwort möglicherweise einen Anteil von 90% an den verwendeten Browsern hatten (ich halte es für unwahrscheinlich, dass Google fast jeder Person, die mit einer anderen Person gesucht hat, Chrome anbietet Browser, der imo im Moment ein besserer, leichterer Browser ist), aber es ist unwahrscheinlich, dass dies immer noch der Fall ist, wenn sich Trends ändern und sich ein Browseranteil häufig wie jeder andere Marktanteil ändert.
Chris

Dies beantwortet die Frage, obwohl es offensichtlich komplizierter ist als eine einfache px-Größe.
Rune711

45

Es ist nicht so einfach wie es aussieht. Ich bin gerade auf eine ähnliche Frage gestoßen, und hier ist, was ich bekommen habe: Zuerst ein kleiner Hintergrund auf Wikipedia .

Als nächstes haben sie in CSS für Papier einen ptPunkt oder 1/72 Zoll. Wenn Sie also die gleiche Bildgröße wie auf dem Monitor haben möchten, müssen Sie zuerst die DPI / PPI Ihres Monitors kennen (normalerweise 96, wie im Wikipedia-Artikel erwähnt), dann in Zoll konvertieren und dann in konvertieren Punkte (durch 72 teilen).

Andererseits haben die Browser alle möglichen Probleme mit druckbaren Inhalten. Wenn Sie beispielsweise versuchen, Float-CSS-Tags zu verwenden, schneiden die Gecko-basierten Browser Ihre Bilder in der Mitte der Seite, auch wenn Sie Seitenumbruch verwenden: Vermeiden ;; auf Ihren Bildern (siehe hier im Mozilla-Bug-Tracking-System ).

In diesem Artikel auf A List Apart erfahren Sie (viel) mehr über das Drucken über einen Browser .

Außerdem müssen Sie in der Druckvorschau die Breite "Auf Anpassung verkleinern" sowie die verschiedenen Papierformate und -ausrichtungen berücksichtigen.

Entweder Sie finden nur eine gute Bildgröße in Zoll, ich meine Punkte (7,1 "* 72 = 511,2, width: 511pt;würde also für Papier im Letter-Format funktionieren), unabhängig von der Pixelgröße, oder Sie gehen über die prozentuale Breite der Breite und stützen Ihre Bildbreiten auf dem Papierformat.

Viel Glück...


Es fiel mir tatsächlich leichter, nur eine PHP Image GD-Version des Materials zu erstellen, das ich drucken wollte (Postkarten, Flyer usw.). Ich habe gerade Informationen aus einer Datenbank eingegeben und sie hat sich entsprechend neu formatiert. Ich habe nur das Pixelverhältnis korrekt gehalten. 4x6 Postkarte (350dpi) == 2135x1435 px
Michael J. Calkins

19

Eine Lösung für das Problem, das ich gefunden habe, bestand darin, die Breite nur in Zoll einzustellen. Bisher habe ich dies nur in Chrome getestet / bestätigt. Es funktionierte gut für das, wofür ich es verwendete (um ein 8,5 x 11 Blatt auszudrucken)

@media print {
    .printEl { 
        width: 8.5in;
        height: 11in;
    }
}

5
Sie berücksichtigen die Seitenränder nicht. Oder die Möglichkeit von A4-Papierformaten.
Blazemonger

1
Das war perfekt für mich, es macht so viel Sinn.
Leedotpang

@Blazemonger mit @media print, können Sie diese einstellen. Sie können size: letteroder einstellen size: A4. smashingmagazine.com/2015/01/designing-for-print-with-css
J.Ko

@ J.Ko Das war nicht der Punkt; Es ist der Endbenutzer, der möglicherweise entweder A4- oder Briefpapier verwendet, und der CSS-Designer kann nicht sicher sein, welches dem Benutzer zur Verfügung steht.
Blazemonger

10

Zum Drucken stelle ich keine Breite ein und entferne keine Hindernisse, die verhindern, dass Ihr Drucklayout eine dynamische Breite hat. Das heißt, wenn Sie Ihr Browserfenster immer kleiner machen, wird kein Inhalt ausgeschnitten / ausgeblendet, sondern das Dokument wird nur länger. Auf diese Weise können Sie sicher sein, dass der Rest vom Drucker / PDF-Ersteller erledigt wird.

Was ist mit Elementen mit fester Breite wie Bildern oder Tabellen?

Bilder

Optionen, die mir einfallen:

  • Skalieren Sie die Bilder in Ihrem Druck-CSS auf eine Breite, von der Sie annehmen können, dass sie in jedem Fall passen. Verwenden Sie pt nicht px (aber für den Druck werden sowieso mehr Punkte / Einheiten benötigt, sodass dies kaum ein Problem sein sollte.)
  • vom Druck ausschließen

Tabellen

  • Entfernen Sie die feste Breite
  • Verwenden Sie Querformat, wenn Sie wirklich Tabellen mit vielen Informationen haben
  • Verwenden Sie keine Tabellen für Layoutzwecke
  • vom Druck ausschließen
  • Inhalte extrahieren, als Absätze drucken

http://www.intensivstation.ch/en/css/print/

oder ein anderes Google-Ergebnis für Kombinationen aus: CSS, Druck, Medien, Layout


2
Aber was ist mit Elementen mit fester Breite wie Bildern und Tabellen?
Aemkei

5

Eine Lösung, um sicherzustellen, dass Bilder beim Drucken auf einer Webseite nicht geschnitten werden, besteht in der folgenden CSS-Regel:

@media print { 
  img { 
    max-width:100% !important;
  } 
}

4

Ein Drucker versteht keine Pixel, er versteht Punkte (pt in CSS). Die beste Lösung besteht darin, ein zusätzliches CSS zum Drucken zu schreiben, bei dem alle Maße in Punkten angegeben sind.

Geben Sie dann in Ihrem HTML-Code im Kopfbereich Folgendes ein:

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

Für Bilder sind jedoch die in Pixel angegebenen Breiten- und Höhenattribute erforderlich. Ich muss PT-Werte basierend auf dem DPI-Standard und der Dimension des Druckers in Pixel konvertieren.
Aemkei

Dann muss man mit den Bildcontainern spielen ... oder Versuch und Irrtum anwenden;) Ich denke jedoch, dass die Verwendung von zwei getrennten CSS-Dateien, eine für den Bildschirm und eine für den Druck, eine gute Praxis ist.
ARemesal

1
Geben Sie dem <img>Tag einen Surroundig, <div>der Div bekommt Breite und Höhe in Punkt und der IMG bekommtwidth:100%; height:100%;
Hafenkranich

0

Ich bezweifle, dass es eines gibt ... Es hängt vom Browser, vom Drucker (physische maximale Auflösung) und seinem Treiber, von der Papiergröße ab, wie Sie hervorheben (und ich möchte möglicherweise auch auf B5-Papier drucken ...), von den Einstellungen ( Querformat oder Hochformat?), und Sie können häufig den Maßstab (Prozentsatz) usw. ändern.
Lassen Sie die Benutzer ihre Einstellungen anpassen ...

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.