Sichere Breite in Pixel zum Drucken von Webseiten?

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?

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 ...

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...

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

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

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

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">

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 ...