Frage Sichere Breite in Pixel zum Drucken von Webseiten?


Wie groß ist die Sicherheitsbreite 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 Papiergrößen. Also haben wir Standard-Letter-Größe und einige Standard-DPI-Werte. Aber kann ich diese in konvertieren? Pixel Werte, die im Bild angegeben werden sollenwidth"Attribut?


75
2017-11-26 11:19


Ursprung


Antworten:


Was eine echte "universelle Antwort" betrifft, kann ich keine anbieten. Ich kann jedoch eine einfache und definitive Antwort für einige Details geben ...

670 PIXEL

Zumindest scheint dies eine sichere Antwort für Microsoft-Produkte zu sein. Ich lese viele Vorschläge, einschließlich 675, aber nach dem Testen dieser 670 ist, was ich mir ausgedacht habe.

All die DPI, Margin Probleme, Hardware-Unterschiede beiseite, diese Antwort basiert auf der Tatsache, dass, wenn ich Druckvorschau in IE9 (mit Standard-Margen) verwenden - und SET DRUCKGRÖSSE AUF 100% anstatt der Vorgabe von "verkleinern zu passen" passt alles auf die Seite, ohne bei dieser Breite abgeschnitten zu werden.

Wenn ich eine HTML-E-Mail an mich selbst sende und sie mit Windows Live Mail 2011 erhalte (was Outlook Express wurde) und drucke ich die Seite mit 670 Breite - wieder passt alles. Dies gilt, wenn ich es auf eine aktuelle Hardcopy oder eine MS XPS-Datei (virtueller Ausdruck) sende.

Bevor ich experimentierte, benutzte ich eine willkürliche Breite von 700. In allen oben erwähnten Szenarien wurde ein Teil der Seite abgeschnitten. Als ich auf 670 reduziert habe, passt alles perfekt.

Wie für die Breite ich eingestellt - ich habe nur eine primitive "Wrapper" HTML-Tabelle und definiert seine Breite auf 670.

Wenn Sie die Software des Endbenutzers diktieren können, können solche Dinge einfach sein. Wenn Sie nicht können (wie es normalerweise der Fall ist), können Sie nach bestimmten Daten suchen, zB welche Browser sie benutzen, usw. und die Lösungen für die wichtigen fest codieren. Zwischen IE und FF werden Sie buchstäblich etwa 90% der Internetnutzer abdecken. Setzen Sie einen anderen Code für "alle anderen" ein, der im Allgemeinen zu funktionieren scheint und es einen Tag nennt ...


76
2018-06-18 14:18



Es ist nicht so einfach wie es aussieht. Ich stoße gerade auf eine ähnliche Frage, und hier ist, was ich habe: Zunächst ein kleiner Hintergrund Wikipedia.

Weiter, in CSS, für Papier, haben sie pt, was Punkt ist, 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 (dividiere durch 72).

Aber andererseits haben die Browser alle Arten von Problemen mit druckbaren Inhalten, zum Beispiel, wenn Sie versuchen, Float CSS-Tags zu verwenden, werden die Gecko-basierten Browser Ihre Bilder auf der Seite schneiden, auch wenn Sie Seitenumbruch verwenden: vermeiden ; auf deinen Bildern (siehe hier, in der Mozilla Bug-Tracking-System).

Es gibt (viel) mehr über das Drucken von einem Browser in diesem Artikel auf Eine Liste Apart.

Außerdem müssen Sie in der Druckvorschau die Breite "Shrink to Fit" und die verschiedenen Papierformate und -ausrichtungen angeben.

Entweder du erfindest einfach eine gute Bildgröße in Zoll, ich meine Punkte, (7.1 "* 72 = 511.2 also width: 511pt; würde für das Papier im Letter-Format funktionieren, unabhängig von der Pixelgröße, oder Breite prozentual Breiten, und basieren Sie Ihre Bildbreiten auf der Papiergröße.

Viel Glück...


43
2017-12-11 21:24



Eine Lösung für das Problem, das ich gefunden habe, war, die Breite in Zoll zu setzen. Bisher habe ich das 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;
    }
}

15
2017-11-09 22:54



Zum Drucken setze ich keine Breite und entferne alle Hindernisse, die dafür sorgen, dass dein Drucklayout keine dynamische Breite hat. Das heißt, wenn Sie Ihr Browser-Fenster kleiner und kleiner machen, wird kein Inhalt ausgeschnitten / ausgeblendet, aber das Dokument wird einfach länger. So können Sie sicher sein, dass der Rest vom Drucker / PDF-Creator gehandhabt wird.

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

Bilder

Optionen, die ich mir vorstellen kann:

  • skaliere Bilder in deinem Print-CSS auf eine Breite, die du in jedem Fall annehmen kannst, benutze pt nicht px (aber Print wird sowieso mehr Punkte / Unit benötigen, also dürfte das kein Problem sein)
  • vom Ausdruck ausschließen

Tabellen

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

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

oder irgendein anderes Google-Ergebnis für Kombinationen von: CSS, Druck, Medien, Layout


8
2017-11-26 11:34



Ein Drucker versteht keine Pixel, er versteht Punkte (pt in CSS). Die beste Lösung besteht darin, ein zusätzliches CSS zum Drucken mit all seinen Maßeinheiten in Punkten zu schreiben.

Dann, in Ihrem HTML-Code, im Kopfbereich, setzen Sie:

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

4
2017-11-26 11:55



Eine Lösung, die sicherstellt, dass Bilder beim Drucken auf einer Webseite nicht abgeschnitten werden, ist die folgende CSS-Regel:

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

4
2018-02-23 14:24



Ich bezweifle, dass es einen gibt ... Es hängt vom Browser ab, vom Drucker (physisch max dpi) und seinem Treiber, vom Papierformat, wie Sie darauf hinweisen (und ich möchte vielleicht auch auf B5 Papier drucken ...), von Einstellungen ( Querformat oder Hochformat?), und Sie können oft die Skalierung (Prozent) usw. ändern.
Lass die Nutzer ihre Einstellungen anpassen ...


0
2017-11-26 11:32