CSS für den Druck auf Papier zusammengefasst

 (voussoir.net)
26 Punkte von GN⁺ 2024-03-04 | 2 Kommentare | Auf WhatsApp teilen
  • Ich arbeite im Unternehmen daran, Formulare, die bisher per Hand auf Papier/Excel mit HTML erstellt wurden, als webbasiertes Tool nachzubilden und zu ersetzen, und habe das deshalb zusammengefasst.
  • Erklärt die CSS-Grundlagen sowie einige Tipps und Tricks, um zu steuern, wie eine Webseite beim Drucken aussieht.

@page

  • @page ist eine CSS-Regel, mit der eine Website dem Browser Druckeinstellungen mitteilt.
  • @page umfasst das DOM; während das <html>-Element im Web durch die Bildschirmränder begrenzt ist, wird es beim Drucken durch @page begrenzt.
  • Die Einstellungen von @page entsprechen in etwa den Optionen, die man im Druckdialog des Browsers mit Ctrl+P erhält.

@media print

  • Es gibt die Media Query print, mit der sich Styles definieren lassen, die nur beim Drucken angewendet werden.
  • Für Header, Optionen und Hilfetexte für Nutzer, die nicht im Ausdruck erscheinen sollen, wird display:none hinzugefügt.

Breite, Höhe, Rand und Innenabstand

  • Dafür ist ein Verständnis des Box-Modells nötig; der Grund für @page margin: 0 ist, dass die Abstände lieber in den DOM-Elementen behandelt werden.
  • Es ist einfacher, sich zu merken, dass <html> das gesamte physische Papier einnimmt und sich die Ränder innerhalb des DOM befinden.

Positionierung von Elementen

  • Beim Entwerfen eines Dokuments werden Elemente mit geeignetem HTML/CSS platziert.
  • Wenn Rechtecke für Aufkleberbögen mit festen Abmessungen erstellt werden müssen oder Daten auf speziell vorbedrucktes Papier gedruckt werden sollen, kann auch absolute Positionierung verwendet werden.

Mehrseitige Dokumente und wiederholte Elemente

  • Wenn man einen Druckgenerator für tabellarische Daten wie Rechnungen schreibt und ein <table> auf die zweite Seite überläuft, dupliziert der Browser automatisch das <thead> am oberen Rand jeder Seite.
  • Mit JavaScript werden Tabellen in mehrere kleinere Tabellen aufgeteilt, um Seiten zu erzeugen.

Hoch-/Querformat

  • Nutzer können die @page-Regel bei Bedarf überschreiben.
  • Man kann separate <style>-Elemente für Hoch- und Querformat erzeugen und mit JavaScript zwischen ihnen umschalten.

Datenquelle

  • Es gibt mehrere Möglichkeiten, Daten auf die Seite zu bringen: Man kann alle Daten in URL-Parameter packen oder mit JavaScript über eine API Datensätze aus einer Datenbank abrufen.
  • Mit contenteditable können Nutzer vor dem Drucken noch kleine Änderungen vornehmen.

Meinung von GN⁺

  • Dieser Artikel bietet Webentwicklern einen nützlichen Leitfaden dazu, wie man CSS für den Druck schreibt. Besonders für Entwickler, die Webseiten in physische Dokumente umwandeln, dürfte er hilfreich sein.
  • CSS für den Druck ist oft ein vernachlässigtes Thema, aber da viele Unternehmen weiterhin wichtige Unterlagen drucken müssen, ist dieses Wissen wertvoll.
  • Der im Artikel vorgestellte technische Ansatz wirkt so, als sei er in realen Arbeitsumgebungen getestet und validiert worden, und bietet praktische Lösungen für konkrete Probleme.
  • Die Verwendung der CSS-Regel @page und der Query @media print ist wichtig, um beim Drucken von Webseiten Papiergröße und Ränder zu steuern; das sollten Webentwickler unbedingt kennen.
  • Der Artikel geht über ein grundlegendes Verständnis von Druck-CSS hinaus und liefert konkrete Beispiele und Tipps für die praktische Anwendung, was hilft, die Lücke zwischen Theorie und Praxis zu schließen.

Verwandte Beiträge

2 Kommentare

 
cosine20 2024-03-11

Beim nächsten Mal würde ich damit gern ein Toy-Projekt ausprobieren.
 
GN⁺ 2024-03-04
Hacker-News-Kommentare

  • Erläuterung zu bevorzugten Druckstilen auf einer persönlichen Website:

    • Abschnittsüberschriften werden nicht am Seitenende gedruckt, sodass der Inhalt nicht ohne Überschrift oben auf der nächsten Seite stehen bleibt.
    • Grafiken und Diagramme laufen nicht über den Seitenrand hinaus und werden vollständig auf einer Seite gedruckt.
    • Die URL von Hyperlinks wird mit ausgedruckt, damit Links nicht nur als unterstrichener Text erscheinen.

  • Erfahrung mit dem Setzen eines Buchs mit Pagedjs.org:

    • In der Vorschau gab es einige Bugs, aber die endgültige Ausgabe war perfekt, und im Vergleich zu InDesign sparte es drei Viertel der Zeit.
    • Wenn man sowohl mit HTML/CSS als auch mit InDesign vertraut ist, ist Pagedjs für lange Layouts die bessere Wahl.

  • Probleme beim Browser-Support für Druck-CSS:

    • Für einige Funktionen, etwa Fußnoten pro Seite in CSS, gibt es keine gleichwertige Unterstützung.
    • Es wird gefragt, ob es eine einfache HTML-Layout-Engine gibt, mit der man benutzerdefinierte CSS-Eigenschaften ausprobieren und diese Lücken schließen kann.

  • Wie einfach Drucken mit CSS ist:

    • Jede App kann HTML+CSS ausgeben und damit problemlos saubere und ansehnliche Druckdokumente vorbereiten.
    • CSS-Typografie in wenigen Minuten zu schreiben ist einfacher, als PostScript oder TeX zu lernen.

  • Die Browser-Unterstützung für Druck ist so schlecht, dass man native Apps bauen muss:

    • Derzeit muss man ein PDF herunterladen und dann drucken.
    • Eine Bitte an die Entwickler von Chrome/Blink, Safari/Webkit und Firefox/Mozilla, wenigstens zu ermöglichen, dass Hacks funktionieren.

  • Überlegungen zur Geschichte und zur aktuellen Lage von CSS:

    • CSS wurde ursprünglich mit Blick auf Printmedien entwickelt, aber die Browser-Unterstützung hinkt hinterher.

  • Wie man mit HTML & CSS Rechnungen und einige E-Books erstellt:

    • Vorgestellt wird die Nutzung von print-css.rocks und Weasyprint.

  • Erwähnung von paper-css, das zur PDF-Erzeugung über den Browser verwendet wurde.

  • Vorteile bei der Erstellung von Druckmaterialien mit HTML/CSS:

    • Für alles, was zur Erstellung von Druckmaterialien nötig ist, wird HTML/CSS verwendet.

  • Erfahrung damit, mithilfe von CSS-Techniken Profile eines sozialen Netzwerks in einem Druckformat bereitzustellen:

    • In einem sozialen Netzwerk für Fabrikarbeiter konnten Profile ausgedruckt werden.
    • Es wird auch die Erfahrung geteilt, einen Online-Editor für Workshops und Kurszertifikate gebaut zu haben.