Sichere Breite in Pixel zum Drucken von Webseiten?

Was ist die sichere Breite in pixel, um eine Webseite zu drucken?

Meine Seite beinhaltet zu großen Bildern und ich möchte sicherstellen, dass Sie nicht abgeschnitten werden, wenn Sie gedruckt werden.

Weiß ich über verschiedene browser Margen und US-Letter /DIN A4-Papier-Größen. Also haben wir standard-letter und ein paar Standard-DPI-Werte. Aber ich kann wandeln diese in pixel Werte angeben, im Bild " width " - Attribut?

Kommentar zu dem Problem

statt mit Breite in Pixel, die Sie verwenden sollten width:auto, die Anpassung von Inhalten Breite auf die Breite des Papiers Kommentarautor: lolotron

InformationsquelleAutor der Frage aemkei | 2008-11-26

73

Als für eine echte "Universelle Antwort" kann ich nicht bieten. Ich kann jedoch eine einfache und endgültige Antwort für manche Angaben...

670 PIXEL

Zumindest scheint dies eine sichere Antwort für Microsoft-Produkte. Ich lese viele Vorschläge, darunter 675, aber nach dem Test dieses mich 670 ist, was ich kam mit.

Alle DPI, margin-Probleme, hardware-Unterschiede beiseite, die Antwort auf diese Frage basiert auf der Tatsache, dass, wenn ich verwenden Sie die seitenansicht im IE9 (mit standard margins) – und LEGEN Sie DIE Druckgröße AUF 100% anstatt der Standard von "shrink to fit", alles auf die Seite passt, ohne abgeschnitten zu dieser Breite.

Wenn ich sende eine HTML-Mail an mich selber und empfangen mit Windows Live Mail 2011 (was Outlook Express wurde) und ich die Seite drucken auf 670 Breite – wieder alles passt. Dies gilt dann, wenn ich senden Sie es an eine tatsächliche Festplatte kopieren oder MS XPS-Datei (virtuelle Ausdruck).

Bevor ich experimentiert, und ich war mit einer beliebigen Breite von 700. In allen Szenarien, die oben erwähnt Teil der Seite war immer abgeschnitten. Wenn ich reduziert auf 670, alles hat perfekt gepasst.

Als für wie ich die Breite – habe ich nur eine primitive "wrapper" html-Tabelle und definiert die Breite 670.

Wenn Sie diktieren können, die Endbenutzer-software, die solche Angelegenheiten können einfach sein. Wenn Sie nicht (wie es normalerweise der Fall natürlich), die Sie testen können für Angaben wie, welche Browser Sie verwenden, etc. und fest die Lösungen für die wichtigsten. Zwischen IE und FF, Sie decken buchstäblich über 90% der web-Nutzer. In einigen anderen code für "alle anderen", die in der Regel scheint zu funktionieren und nennen es einen Tag...

InformationsquelleAutor der Antwort Jonathan
42

Es ist nicht so einfach wie das aussieht. Ich habe gerade laufen in eine ähnliche Frage, und hier ist was ich habe: Erstens, ein wenig hintergrund auf,wikipedia.

Nächsten in CSS, für Papier, Sie haben pt, das ist der Punkt, oder 1/72 Zoll. Also, wenn Sie wollen, um die gleiche Größe des Bildes auf dem monitor, müssen Sie zuerst wissen, die DPI/PPI des Monitors (in der Regel 96, wie bereits erwähnt auf den wikipedia-Artikel), dann konvertieren Sie es in Zoll, dann konvertieren Sie es in Punkte (geteilt durch 72).

Aber dann wieder, die Browser haben alle möglichen Probleme mit druckbaren Inhalt, zum Beispiel, wenn Sie versuchen, float css-tags, die Gecko-basierte Browser schneiden Sie Ihre Bilder Mitte der Seite verwenden, auch wenn Sie page-break-inside: avoid; auf Ihren Bildern (siehe hier, in der Mozilla bug-tracking-system).

Es ist (viel) mehr über das drucken aus einem browser in diesem Artikel auf A List Apart.

Darüber hinaus müssen Sie befassen Breite "Shrink to Fit" in der Druckvorschau, und die verschiedenen Papierformate und-Ausrichtungen.

Also entweder Sie finden Sie einfach heraus, ein gutes Bild, die Größe in Zoll, die ich meine Punkte, (7.1" * 72 = 511.2 so width: 511pt; würde für die Brief-Größe Papier) unabhängig von der pixel-Größe, oder gehen Breite prozentualen breiten und Basis Ihrer breiten Bild auf die Papiergröße.

Glück...

InformationsquelleAutor der Antwort Gyuri
15

Einer Lösung für das problem, das ich fand, war, legen Sie die Breite in Zoll. Ich habe bisher nur getestet/bestätigt diese Arbeit in Chrom. Es funktionierte gut für das, was ich wurde (zum ausdrucken einer 8,5 x 11 Blatt)
```
@media print {
    .printEl { 
        width: 8.5in;
        height: 11in;
    }
}
```
InformationsquelleAutor der Antwort jHouse
8

Für den Druck ich glaube nicht, legen Sie Breite und entfernen Sie alle Hindernisse, die halten Sie Ihr Druck-layout aus, die eine dynamische Breite. Das bedeutet, wenn Sie Ihr browser-Fenster kleiner und kleiner, kein Inhalt wird abgeschnitten/ausgeblendet, aber das Dokument wird einfach länger. Wie diese, können Sie sicher sein, dass der rest wird von den Drucker/pdf-creator.

Was über Elemente mit einer festen Breite, wie Bilder oder Tabellen?

Bilder

Optionen, die ich denken kann:
- skalieren Sie die Bilder unten in Ihre print-CSS auf eine Breite, die Sie annehmen können, passen in jedem Fall, verwenden Sie den öpnv nicht px (aber drucken müssen mehr Punkte/Einheit sowieso, also sollte kaum ein problem sein)
- ausschließen gedruckt
Tabellen
- entfernen Sie die Feste Breite
- Nutzung der Landschaft, wenn Sie wirklich haben Tabellen mit vielen Informationen
- keine Verwendung von Tabellen zu layout-Zwecken
- ausschließen gedruckt
- extrahieren von Inhalten, drucken Sie es als Absätze
http://www.intensivstation.ch/en/css/print/

oder andere google-Ergebnis für Kombinationen: CSS, print, media, layout

InformationsquelleAutor der Antwort markus
4

Drucker nicht versteht Pixel, die es verstehen, Punkte (pt in CSS). Die beste Lösung ist, um zu schreiben, ein extra CSS für den Druck, mit all der Maßnahmen, die in den Punkten.

Dann in deinen HTML-code, der im head-Abschnitt:
```
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<link href="style_print.css" rel="stylesheet" type="text/css" media="print">
```
InformationsquelleAutor der Antwort ARemesal
4

Einer Lösung, um sicherzustellen, dass die Bilder nicht beschnitten werden, wenn Sie gedruckt werden, in eine Web-Seite ist die folgende CSS-Regel:
```
@media print { 
  img { 
    max-width:100% !important;
  } 
}
```
InformationsquelleAutor der Antwort dontcallmedom
0

Bezweifle ich, es ist... Es hängt vom browser auf den Drucker (physische max dpi) und seinen Fahrer, auf Papier der Größe wie du (und ich könnte Sie drucken möchten, auf B5-Papier zu...), auf Einstellungen (landscape oder portrait?), plus Sie kann oft ändern die Skalierung (Prozentsatz), etc.

Lassen Sie die Benutzer Ihre Einstellungen verändern...

InformationsquelleAutor der Antwort PhiLho

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Bilder

Tabellen