So erstellen Sie CSS zum Drucken eines Etiketts

9

Wenn ein Benutzer meiner Website auf die Schaltfläche "Etikett drucken" klickt, wird er an eine Seite gesendet, auf der nur das Etikett auf einem weißen Hintergrund angezeigt wird und das Druckdialogfeld geöffnet wird. Meine Frage ist, wie man das CSS für dieses Etikett "denkt", so dass es auf die volle Papierbreite gedruckt wird, egal welches Papier es ist (US, A4, ...).

Sollte ich Prozent verwenden, um alles zu klassifizieren, Kästchen, Ränder, ...? ems für Schriftarten? oder Punkte? Sollte ein css-Reset zuerst verwendet werden?

Gibt es eine gute Ressource im Internet für diese Art von CSS-Anwendung?

Update: Ich habe es mit fließenden Abschnitten und prozentualen Breiten gemacht, die auf normalem Papier gut aussehen. Überlegen Sie sich diese Frage also geschlossen.

    
Nicolas Cadilhac 06.10.2011, 13:47
quelle

3 Antworten

1

Ich schätze, der Trick besteht darin, das Layout so flüssig wie möglich zu gestalten. Und vermeide die Verwendung von px als Maß. Hier ist ein guter Artikel: CSS Design: Going to Print

    
Lycha 24.10.2011 21:32
quelle
0

Es könnte eine ziemliche Herausforderung sein, alles richtig zu skalieren, wenn Ihr Etikett verschiedene Datenbereiche enthält.

So würde ich ein einzelnes SVG-Bild erzeugen und skalieren. SVG wurde für die Skalierung entwickelt, während (X) HTML den Inhalt abhängig von der Auflösung neu fließen lässt.

SVG ist nur ein paar XML-Dateien, die direkt in Ihren HTML-Code eingebettet werden können. hier für Beispiele.

    
Louis Somers 24.10.2011 01:29
quelle
0

Vermeiden Sie die Verwendung von position: absolute / fixed, float: links / rechts.

Pt eignet sich am besten für Druckschriftarten, obwohl es meistens nicht wirklich wichtig ist.

    
AntoxaGray 24.10.2011 18:11
quelle

Tags und Links