2009-04-28 5 views
4

Wie kann ich einen CSS-Stil codieren, um bestimmte Seitenränder für eine Webseite beim Drucken zu erzwingen, und für IE und Firefox gültig sein?CSS-Formatierung A4-Druck

Antwort

4

Verwenden Sie den Medientyp "Drucken" (@media print).

Legen Sie keine feste Breite und keine maximale Breite fest. Mach den Inhalt stattdessen flüssig. Wenn Sie eines mit (px, em, pt, cm) angeben, werden Sie immer auf das eine oder andere Problem stoßen, da verschiedene Browser unterschiedliche Ränder hinzufügen.

A4, Brief, A3, es geht dich nichts an. Dein Dokument ist nicht wichtig. Der Benutzer kann Ihr Dokument auf jedem verfügbaren Papier ausdrucken, weil Ihr Inhalt flüssig ist.

Find some tips about css for print here.

+1

In vielen Fällen kümmern wir uns um die Seitengröße, da die Kopf-/Fußzeile der Seite und die zugehörige CSS-Implementierung seit Jahren noch Bestand haben. Es gibt keinen Standard für ein gut formatiertes HTML-Dokument, ansonsten serverseitig PDF. –

+0

Ich stimme mit Dennis überein. Manchmal möchte Ihr Kunde nur ein A4-Blatt Papier drucken. Sie legen einfach Ihre Größen wie in dieser Antwort fest: http://stackoverflow.com/a/16650459/291557. Ich hoffe, Sie werden Ihrem Kunden nicht sagen: "Sie sehen, in CSS, das Dokument ist nicht auf die Größe. Es fließt nur, auch wenn Zeilen brechen und Dinge über die Seiten verteilt sind. Wir entwerfen für universelle Größen." –

0

Eine Abhilfe ist, statt SVG zu verwenden. Mit SVG, können Sie so etwas wie folgt verwenden:

<svg width="19cm" height="26.5cm" viewBox="0 0 1900 2650" xmlns="http://www.w3.org/2000/svg" version="1.2"> 

Dann einfach sicher, dass Sie alle Ihre Elemente sind in Ihrer 1900x2650 Ansicht.

Leider bedeutet dies "Neuerstellen" Ihrer Seite in SVG, was ziemlich unangenehm ist. Es scheint jedoch notwendig zu sein. HTML & CSS-Lösungen können nicht garantieren, dass Inhalte nicht auf mehrere Seiten übertragen werden, auf denen Sie beabsichtigt haben, dass es sich um eine einzelne Seite handelt.