Ein Leitfaden zum Stand der Druckvorlagen im Jahr 2018

Heute möchte ich auf ein Thema zurückkommen, das bereits in der Vergangenheit im Smashing Magazine behandelt wurde – das Thema des Print-Stylesheets. In diesem Fall spreche ich vom Drucken von Seiten direkt aus dem Browser. Es ist eine Erfahrung, die zu Frustration führen kann, wenn riesige Bilder (und sogar Werbung) ausgedruckt werden. Nur manchmal macht es jedoch ein wenig Freude, wenn eine schön optimierte Seite mit einem Minimum an Tinte und Papier aus dem Drucker kommt und dafür sorgt, dass alles gut lesbar ist.

In diesem Artikel wird untersucht, wie wir diese zweite Erfahrung am besten schaffen können. Wir werden einen Blick darauf werfen, wie wir Druckstile in unsere Webseiten integrieren sollten, und uns die Spezifikationen ansehen, die nach dem Drucken wirklich zur Geltung kommen. Wir informieren uns über den Stand der Browserunterstützung und wie Sie unsere Druckstile am besten testen können. Ich gebe Ihnen dann einige Hinweise, was zu tun ist, wenn ein Druck-Stylesheet für Ihre Druckanforderungen nicht ausreicht.

Schlüsselstellen für Druckunterstützung

Wenn Sie noch keine Druckstile auf Ihrer Website implementiert haben, gibt es einige wichtige Stellen, an denen ein solides Druckerlebnis für Ihre Benutzer hilfreich sein wird. Beispielsweise möchten viele Benutzer nach einem Kauf oder einer Buchung eine Transaktionsbestätigungsseite ausdrucken, selbst wenn Sie Details per E-Mail senden.

Alle Informationen, die Ihr Besucher außerhalb seines Computers verwenden möchte, sind ebenfalls ein guter Kandidat für ein gedrucktes Stylesheet. Am häufigsten drucke ich Rezepte. Ich könnte sie auf mein iPad laden, aber es ist oft bequemer, das Rezept einfach auszudrucken und während des Kochens an die Kühlschranktür zu hängen. Andere solche Beispiele könnten Wegbeschreibungen oder Reiseinformationen sein. Wenn Sie ins Ausland reisen und nicht immer Zugriff auf Daten haben, können diese Ausdrucke von unschätzbarem Wert sein.

Auch Nachschlagewerke aller Art werden oft gedruckt. Für viele Menschen ist die Möglichkeit, Notizen auf Papierkopien zu machen, die beste Art zu lernen. Auch hier bedeutet dies, dass die Informationen in einem Offline-Format zugänglich sind. Wir fragen uns leicht, warum Menschen Webseiten drucken möchten, aber unsere Aufgabe besteht oft darin, Inhalte zugänglich zu machen – im besten Format für unsere Besucher. Wenn dieses beste Format auf Papier gedruckt wird, wen sollen wir dann bestreiten?

Warum sollte diese Seite gedruckt werden?

Eine gute Frage, die Sie stellen sollten, wenn Sie entscheiden, welche Inhalte in das Druck-Stylesheet aufgenommen oder ausgeblendet werden sollen, lautet: „Warum druckt der Benutzer diese Seite?“ Nun, vielleicht gibt es ein Rezept, das sie beim Kochen in der Küche befolgen oder beim Einkaufen mitnehmen möchten, um Zutaten zu kaufen. Oder sie möchten nach dem Ticketkauf eine Bestätigungsseite als Buchungsnachweis ausdrucken. Oder vielleicht möchten sie, dass eine Quittung oder Rechnung gedruckt (oder als PDF gedruckt) wird, um sie entweder in Papierform oder elektronisch in den Konten zu speichern.

Die Verwendung des gedruckten Dokuments in Betracht zu ziehen, kann Ihnen helfen, eine Druckversion Ihrer Inhalte zu erstellen, die in dem Kontext, in dem sich der Benutzer befindet, am nützlichsten ist, wenn er sich auf diesen Ausdruck bezieht.

Arbeitsablauf

Sobald wir uns entschieden haben, Druckstile in unser CSS aufzunehmen, müssen wir sie unserem Workflow hinzufügen, um sicherzustellen, dass wir bei Änderungen am Layout diese Änderungen auch in die Druckversion einbeziehen.

Hinzufügen von Druckstilen zu einer Seite

Um ein „Druck-Stylesheet“ zu aktivieren, sagen wir dem Browser, wozu diese CSS-Regeln dienen, wenn das Dokument gedruckt wird. Eine Möglichkeit, dies zu tun, besteht darin, ein zusätzliches Stylesheet mit dem <link> -Element zu verknüpfen.

 <link rel="stylesheet" media="print" href="print.css">

Diese Methode hält Ihre Druckstile von allem anderen getrennt, was Sie vielleicht für aufgeräumter halten, aber das hat Nachteile.

Das verlinkte Stylesheet erstellt eine zusätzliche Anfrage an den Server. Darüber hinaus kann diese schöne, ordentliche Trennung von Druckstilen von anderen Stilen einen Nachteil haben. Während Sie darauf achten können, die einzelnen Stile zu aktualisieren, bevor Sie live gehen, kann das Stylesheet leiden, weil es außer Sichtweite und damit aus dem Sinn ist – letztendlich wird es nutzlos, wenn Funktionen zur Website hinzugefügt werden, sich aber nicht in den Druckstilen widerspiegeln.

Die alternative Methode zum Einfügen von Druckstilen besteht darin, @media auf die gleiche Weise zu verwenden, wie Sie CSS für bestimmte Haltepunkte in Ihrem responsiven Design einschließen. Diese Methode hält das gesamte CSS für ein Feature zusammen. Stile für schmale bis breite Haltepunkte und Stile für den Druck. Neben Funktionsabfragen mit @supports fördert dies eine Art der Entwicklung, die sicherstellt, dass das gesamte CSS für eine Designfunktion zusammengehalten und gepflegt wird.

 @media print { }

Bildschirm-CSS überschreiben oder separate Regeln erstellen

In den meisten Fällen werden Sie wahrscheinlich feststellen, dass das CSS, das Sie für die Bildschirmanzeige verwenden, mit ein paar kleinen Anpassungen für den Druck funktioniert. Daher müssen Sie nur CSS für den Druck schreiben, um Änderungen an diesem grundlegenden CSS vorzunehmen. Sie können eine Schriftgröße oder -familie überschreiben, andere Elemente im CSS jedoch in Ruhe lassen.

Wenn Sie wirklich völlig separate Stile für den Druck haben und mit einer leeren Tafel beginnen möchten, müssen Sie den Rest Ihrer Website-Stile in eine Medienabfrage mit dem Schlüsselwort screen einschließen.

 @media screen { }

In diesem Sinne, wenn Sie Media Queries für Ihr Responsive Design verwenden, dann haben Sie diese möglicherweise für den Bildschirm geschrieben.

 @media screen and (min-width: 500px) { }

Wenn Sie möchten, dass diese Stile beim Drucken verwendet werden, sollten Sie das Schlüsselwort screen entfernen. In der Praxis stelle ich aber oft fest, dass wenn ich „mobile first“ arbeite, das einspaltige mobile Layout eine wirklich gute Ausgangsbasis für mein Printlayout ist. Durch die Medienabfragen, die die komplexeren Layouts nur für den Bildschirm einbringen, muss ich viel weniger Stile für den Druck überschreiben.

Fügen Sie Ihre Druckstile zu Ihren Musterbibliotheken und Stilrichtlinien hinzu

Um sicherzustellen, dass Ihre Druckstile als integraler Bestandteil des Website-Designs angesehen werden, fügen Sie sie zu Ihrem Styleguide oder Ihrer Musterbibliothek für die Website hinzu, falls Sie eine haben. Auf diese Weise wird immer daran erinnert, dass die Druckstile vorhanden sind und dass jedes neu erstellte Muster eine entsprechende Druckversion haben muss. Auf diese Weise verleihen Sie den Druckstilen als erstklassiger Bürger Ihres Designsystems Sichtbarkeit.

Grundlagen von CSS für den Druck

Wenn es darum geht, das CSS für den Druck zu erstellen, gibt es drei Dinge, die Sie wahrscheinlich tun werden. Sie möchten Inhalte ausblenden und nicht anzeigen, die beim Drucken irrelevant sind. Möglicherweise möchten Sie auch Inhalte hinzufügen, um eine Druckversion nützlicher zu machen. Möglicherweise möchten Sie auch Schriftarten oder andere Elemente Ihrer Seite anpassen, um sie für den Druck zu optimieren. Werfen wir einen Blick auf diese Techniken.

Inhalte ausblenden

In CSS besteht die Methode zum Ausblenden von Inhalten und zum Verhindern der Generierung von Feldern darin, die Eigenschaft display mit dem Wert none zu verwenden.

 .box { display: none; }

Using display: none blendet das Element und alle seine untergeordneten Elemente aus. Wenn Sie also eine als Liste gekennzeichnete Bildergalerie haben, müssen Sie diese beim Drucken nur ausblenden, indem Sie display: none auf ul setzen.

Dinge, die Sie möglicherweise ausblenden möchten, sind Bilder, die beim Drucken unnötig wären, Navigation, Werbefelder und Bereiche der Seite, die Links zu verwandten Inhalten anzeigen, und so weiter. Wenn Sie sich darauf beziehen, warum ein Benutzer die Seite möglicherweise druckt, können Sie entscheiden, was entfernt werden soll.

Inhalte einfügen

Möglicherweise gibt es einige Inhalte, die beim Drucken der Seite angezeigt werden können. Sie könnten einige Inhalte zur display: none in einem Bildschirm-Stylesheet und in Ihrem Druck-Stylesheet anzeigen. Darüber hinaus können Sie jedoch CSS verwenden, um Inhalte anzuzeigen, die normalerweise nicht auf dem Bildschirm ausgegeben werden. Ein gutes Beispiel hierfür wäre die URL eines Links im Dokument. In Ihrem Bildschirmdokument würde ein Link normalerweise den Linktext anzeigen, auf den dann geklickt werden kann, um diese neue Seite oder externe Website zu besuchen. Wenn gedruckten Links jedoch nicht gefolgt werden kann, kann es hilfreich sein, wenn der Leser die URL sehen könnte, falls er den Link zu einem späteren Zeitpunkt besuchen möchte.

Dies erreichen wir durch die Verwendung von CSS Generated Content. Generierter Inhalt gibt Ihnen die Möglichkeit, Inhalte per CSS in Ihr Dokument einzufügen. Beim Drucken wird dies sehr nützlich.

Sie können eine einfache Textzeichenfolge in Ihr Dokument einfügen. Das nächste Beispiel zielt auf das Element mit einer wrapper -Klasse ab und fügt davor die Zeichenfolge „Die neueste Version dieser Informationen finden Sie unter www.mysite.com“ ein.

 .wrapper::after { content: "Please see www.mysite.com for the latest version of this information."; }

Sie können jedoch Dinge einfügen, die bereits im Dokument vorhanden sind, ein Beispiel wäre der Inhalt des Links href . Wir fügen generierten Inhalt nach jeder Instanz von a mit einem href -Attribut hinzu und der Inhalt, den wir einfügen, ist der Wert des href -Attributs – das der Link sein wird.

 a[href]:after { content: " (" attr(href) ")"; }

Sie können den neueren CSS-Selektor :not verwenden, um interne Links auszuschließen, wenn Sie dies wünschen.

 a[href^="http"]:not([href*="example.com"]):after { content: " (" attr(href) ")"; }

Weitere nützliche Tipps wie diesen finden Sie in dem Artikel „Ich habe Print-Stylesheets total vergessen“ von Manuel Matuzovic.

Erweitertes Druckstyling

Wenn Ihre gedruckte Version sauber auf eine Seite passt, sollten Sie in der Lage sein, relativ einfach ein Druck-Stylesheet zu erstellen, indem Sie die Techniken des letzten Abschnitts anwenden. Sobald Sie jedoch etwas haben, das auf mehrere Seiten gedruckt wird (und insbesondere wenn es Elemente wie Tabellen oder Abbildungen enthält), stellen Sie möglicherweise fest, dass Elemente auf neue Seiten in suboptimaler Weise umgebrochen werden. Möglicherweise möchten Sie auch Dinge über die Seite selbst steuern, z. B. die Randgröße ändern.

CSS hat eine Möglichkeit, diese Dinge zu tun, aber wie wir sehen werden, ist die Browserunterstützung lückenhaft.

Ausgelagerte Medien

Die CSS Paged Media Specification wird mit der folgenden Beschreibung ihrer Rolle geöffnet.

„Dieses CSS-Modul legt fest, wie Seiten generiert und angeordnet werden, um fragmentierte Inhalte in einer Seitenpräsentation aufzunehmen. Es fügt Funktionen zur Steuerung von Seitenrändern, Seitengröße und -ausrichtung sowie Kopf- und Fußzeilen hinzu und erweitert den generierten Inhalt, um die Seitennummerierung und das Ausführen von Kopf-/Fußzeilen zu ermöglichen.“

Der Bildschirm ist ein kontinuierliches Medium ; Wenn es mehr Inhalt gibt, scrollen wir, um ihn anzuzeigen. Eine Aufteilung in einzelne Seiten ist nicht vorgesehen. Sobald wir drucken, geben wir auf eine Seite mit fester Größe aus, die in der Spezifikation als Seitenmedien bezeichnet wird. Die Paged Media-Spezifikation befasst sich nicht mit der Fragmentierung von Inhalten zwischen Seiten, dazu kommen wir später. Stattdessen werden die Funktionen der Seiten selbst betrachtet.

Wir brauchen eine Möglichkeit, auf eine einzelne Seite @page , und wir tun dies, indem wir die @page-Regel verwenden. Dies wird ähnlich wie ein normaler Selektor verwendet, indem wir auf @page und dann CSS schreiben, das von der Seite verwendet werden soll. Ein einfaches Beispiel wäre, den Rand auf allen Seiten zu ändern, die beim Drucken Ihres Dokuments erstellt werden.

 @page { margin: 20px; }

Sie können bestimmte Seiten mit :left und :right -Spread-Pseudoklassen-Selektoren ansprechen. Die erste Seite kann mit dem Pseudo-Klassenselektor :first angesteuert werden und durch Seitenumbrüche verursachte Leerseiten können mit :blank ausgewählt werden. So legen Sie beispielsweise nur auf der ersten Seite einen oberen Rand fest:

 @page :first { margin-top: 250pt; }

So legen Sie einen größeren Rand auf der rechten Seite einer linken Seite und der linken Seite einer rechten Seite fest:

 @page :left { margin-right: 200pt; } @page :right { margin-left: 200pt; }

Die Spezifikation definiert die Möglichkeit, Inhalte in die erstellten Ränder einzufügen, jedoch scheint kein Browser diese Funktion zu unterstützen. Ich beschreibe dies in meinem Artikel über das Erstellen von Stylesheets für die Verwendung mit druckspezifischen Benutzeragenten, Designing For Print With CSS.

CSS-Fragmentierung

Während sich das Paged Media-Modul mit den Seitenboxen selbst befasst, beschreibt das CSS-Fragmentierungsmodul, wie Inhalte zwischen Fragmentainern unterbrochen werden . Ein Fragmentainer (oder Fragmentcontainer ) ist ein Container, der einen Teil eines fragmentierten Flusses enthält. Dies ist ein Fluss, der, wenn er an einen Punkt gelangt, an dem er überlaufen würde, in einen neuen Behälter bricht.

Die Kontexte, in denen Sie derzeit auf Fragmentierung stoßen, sind in Seitenmedien, also beim Drucken, und auch wenn Sie ein mehrspaltiges Layout verwenden und Ihre Inhalte zwischen Spaltenboxen umbrechen. Die Fragmentierungsspezifikation definiert verschiedene Regeln zum Aufbrechen von CSS-Eigenschaften, die Ihnen eine gewisse Kontrolle darüber geben, wie Inhalte in diesen Kontexten in neue Fragmente aufgeteilt werden. Es definiert auch, wie Inhalte in der CSS Regions-Spezifikation unterbrochen werden, obwohl dies derzeit nicht browserübergreifend verwendbar ist.

Und wo wir gerade von Browsern sprechen, die Fragmentierung ist im Moment ein bisschen chaotisch in Bezug auf die Unterstützung. Die Browser-Kompatibilitätstabellen für jede Eigenschaft auf MDN scheinen hinsichtlich der Unterstützung genau zu sein, es ist jedoch erforderlich, die Verwendung dieser Eigenschaften sorgfältig zu testen.

Ältere Eigenschaften von CSS2

Zusätzlich zu den break-* Eigenschaften von CSS Fragmentation Level 3 haben wir page-break-* Eigenschaften, die aus CSS2 stammen. Genauer gesagt wurden diese durch die neueren break-* -Eigenschaften ersetzt, da diese allgemeiner sind und in den verschiedenen Kontexten verwendet werden können, in denen Breaking stattfindet. Es gibt keinen großen Unterschied zwischen einer Seite und einem Multicol-Umbruch. In Bezug auf die Browserunterstützung gibt es jedoch eine bessere Browserunterstützung für die älteren Eigenschaften. Dies bedeutet, dass Sie diese möglicherweise zum jetzigen Zeitpunkt verwenden müssen, um das Brechen zu kontrollieren. Browser, die die neueren Eigenschaften implementieren, sollen die älteren als Alias ​​verwenden, anstatt sie zu löschen.

In den folgenden Beispielen werde ich sowohl die neue als auch die alte Eigenschaft zeigen, wo sie existiert.

break-before und break-after

Diese Eigenschaften behandeln Umbrüche zwischen Boxen und akzeptieren die folgenden Werte, wobei der Anfangswert auto ist. Die letzten vier Werte gelten nicht für ausgelagerte Medien, sondern für Multicol und Regionen.

• auto
• avoid
• avoid-page
• page
• left
• right
• recto
• verso
• avoid-column
• column
• avoid-region
• region

Die älteren Eigenschaften page-break-before und page-break-after akzeptieren einen kleineren Wertebereich.

• auto
• always
• avoid
• left
• right
• inherit

Um immer einen Seitenumbruch vor einem h2 -Element zu verursachen, würden Sie Folgendes verwenden:

 h2 { break-before: page; }

So vermeiden Sie, dass ein Absatz von der unmittelbar vorangehenden Überschrift abgelöst wird:

 h2, h3 { break-after: avoid-page; }

Die ältere Eigenschaft page-break-* immer einen Seitenumbruch vor einem h2 :

 h2 { page-break-before: always; }

So vermeiden Sie, dass ein Absatz von der unmittelbar vorangehenden Überschrift abgelöst wird:

 h2, h3{ page-break-after: avoid; }

Auf MDN finden Sie Informationen und Anwendungsbeispiele zu den Eigenschaften:

• Vorher brechen
• Pause nach
• Seitenumbruch davor
• Seitenumbruch nach

break-inside

Diese Eigenschaft steuert Umbrüche innerhalb von Boxen und akzeptiert die Werte:

• auto
• avoid
• avoid-page
• avoid-column
• avoid-region

Wie bei den beiden vorherigen Eigenschaften gibt es einen Alias page-break-inside von CSS2, der die Werte akzeptiert:

• auto
• avoid
• inherit

Vielleicht haben Sie zum Beispiel eine figure oder eine table und möchten nicht, dass eine Hälfte davon auf einer Seite und die andere Hälfte auf einer anderen Seite landet.

 figure { break-inside: avoid; }

Und wenn Sie die ältere Eigenschaft verwenden:

 figure { page-break-inside: avoid; }

Auf MDN:

• Einbruch
• Seitenumbruch innen

Waisen und Witwen

Die Fragmentation-Spezifikation definiert auch die Eigenschaften orphans und widows . Die Eigenschaft orphans definiert, wie viele Zeilen unten auf der ersten Seite verbleiben können, wenn Inhalte wie ein Absatz zwischen zwei Seiten umgebrochen werden. Die widows -Eigenschaft definiert, wie viele Zeilen oben auf der zweiten Seite verbleiben dürfen.

Um zu verhindern, dass am Ende einer Seite eine einzelne Zeile und auf der nächsten Seite eine einzelne Zeile oben angezeigt wird, können Sie daher Folgendes verwenden:

 p { orphans: 2; widows: 2; }

Die widows und orphans Eigenschaften werden gut unterstützt (die fehlende Browser-Implementierung ist Firefox).

Auf MDN:

• Witwen
• Waisen

box-decoration-break

Die letzte im Fragmentation-Modul definierte Eigenschaft ist box-decoration-break . Diese Eigenschaft legt fest, ob Rahmen, Ränder und Auffüllung den Inhalt unterbrechen oder umbrechen. Die akzeptierten Werte sind:

• slice
• clone

Wenn mein Inhaltsbereich beispielsweise einen grauen 10-Pixel-Rand hat und ich den Inhalt drucke, wird dies standardmäßig so gedruckt, dass der Rand auf jeder Seite fortgesetzt wird, er wird jedoch nur am Ende des Inhalts umgebrochen . Wir machen also eine Pause, bevor wir zur nächsten Seite gehen und fortfahren.

Wenn ich box-decoration-break: clone verwende, werden der Rahmen und alle Auffüllungen und Ränder auf jeder Seite vervollständigt, wodurch jede Seite einen grauen Rand erhält.

Derzeit funktioniert dies nur für Paged Media in Firefox, und Sie können mehr über Box-Decoration-Break auf MDN erfahren.

Browser-Unterstützung

Wie bereits erwähnt, ist die Browserunterstützung für Paged Media und Fragmentation lückenhaft. Bei der Fragmentierung kommt hinzu, dass Breaking für jede Layoutmethode spezifiziert und implementiert werden muss. Wenn Sie gehofft haben, Flexbox oder CSS Grid in Druck-Stylesheets zu verwenden, werden Sie wahrscheinlich enttäuscht sein. Sie können die Chrome-Fehler für Flexbox und Grid überprüfen.

Der beste Vorschlag, den ich im Moment geben kann, ist, Ihre Druck-Stylesheets einigermaßen einfach zu halten. Fügen Sie Fragmentierungseigenschaften hinzu – einschließlich sowohl der alten page-break-* -Eigenschaften als auch der neuen Eigenschaften. Akzeptieren Sie jedoch, dass diese möglicherweise nicht in allen Browsern funktionieren. Und wenn Sie den Mangel an Browserunterstützung frustrierend finden, sprechen Sie diese Probleme mit Browsern an oder stimmen Sie für bereits angesprochene Probleme. Insbesondere die Fragmentierung sollte als Vorschlag und nicht als Befehl behandelt werden, auch wenn sie unterstützt wird. Es wäre möglich, so genau anzugeben, wo und wann etwas brechen soll, dass es fast unmöglich ist, die Seiten zu gestalten. Sie sollten davon ausgehen, dass Sie manchmal suboptimal brechen können.

Testen von Druck-Stylesheets

Das Testen von Druck-Stylesheets kann ziemlich langweilig sein und erfordert normalerweise die wiederholte Verwendung der Druckvorschau oder das Drucken in ein PDF. Browser-DevTools haben uns dies jedoch etwas erleichtert. Sowohl Chrome als auch Firefox haben eine Möglichkeit, nur die Druckstile anzuzeigen.

Feuerfuchs

Öffnen Sie die Entwicklersymbolleiste und geben Sie an der Eingabeaufforderung media emulate print ein.

Chrom

Öffnen Sie DevTools, klicken Sie auf das Symbol mit den drei Punkten und wählen Sie dann „Weitere Tools“ und „Rendering“. Sie können dann Drucken unter CSS-Medien emulieren auswählen.

Dies ist nur beim Testen von Änderungen am CSS-Layout, versteckten oder generierten Inhalten hilfreich. Es kann Ihnen bei der Fragmentierung nicht helfen – Sie müssen dafür drucken oder in PDF drucken. Es erspart Ihnen jedoch einige Hin- und Rückfahrten zum Drucker und kann Ihnen helfen, bei der Entwicklung neuer Teile der Website zu überprüfen, ob Sie immer noch die richtigen Dinge verbergen und anzeigen.

Was tun, wenn ein Druck-Stylesheet nicht ausreicht?

In einer idealen Welt hätten Browser beim direkten Drucken aus dem Browser mehr von der Paged Media-Spezifikation implementiert, und die Fragmentierung wäre konsequenter und gründlicher implementiert. Es lohnt sich sicherlich, die Fehler, die Sie beim Drucken aus dem Browser finden, bei den betroffenen Browsern anzusprechen. Wenn wir nicht verlangen, dass diese Dinge behoben werden, bleibt die Behebung mit niedriger Priorität.

Wenn Sie ein hohes Maß an Druckunterstützung benötigen und CSS verwenden möchten, müssen Sie derzeit einen druckspezifischen Benutzeragenten wie Prince verwenden. In meinem Artikel „Gestalten für den Druck mit CSS“ erläutere ich ausführlich, wie Sie CSS verwenden können, um Bücher bei der Ausgabe an Prince zu formatieren.

Prince kann auch auf Ihrem Server installiert werden, um schön gedruckte Dokumente mit CSS im Web zu erstellen, aber es hat einen hohen Preis. Eine Alternative ist ein Server wie DocRaptor, der eine API zusätzlich zur Prince-Rendering-Engine anbietet.

Es gibt Open-Source-HTML- und CSS-to-PDF-Generatoren wie wkhtmltopdf, aber die meisten verwenden Browser-Rendering-Engines, um die Druckausgabe zu erstellen, und haben daher die gleichen Einschränkungen wie Browser, wenn es um die Implementierung der Paged Media- und Fragmentation-Spezifikationen geht. Eine Ausnahme ist WeasyPrint, das eine eigene Implementierung zu haben scheint und etwas andere Funktionen unterstützt, obwohl es in keiner Weise so voll ausgestattet ist wie etwas wie Prince.

Weitere Informationen zu Benutzeragenten für den Druck finden Sie auf der Seite print-css.rocks.

Andere Ressourcen

Aufgrund der Tatsache, dass sich das Drucken aus CSS in den letzten Jahren wirklich sehr wenig weiterentwickelt hat, sind viele ältere Ressourcen im Smashing Magazine und anderswo immer noch gültig. Einige zusätzliche Tipps und Tricks finden Sie in den folgenden Ressourcen. Wenn Sie einen nützlichen Druckworkflow oder technischen Tipp entdeckt haben, fügen Sie ihn den Kommentaren unten hinzu.

• „Ich habe Print-Stylesheets total vergessen“, Manuel Matuzovic, UX Collective
• „Druck-Stylesheet-Ansätze: Blacklist vs. Whitelist“, Chris Coyier, CSS-Tricks
• „Das perfekte Druck-Stylesheet“, Andreas Hecht, Noupe
• „So richten Sie ein Druck-Stylesheet ein“, Christian Krammer, Smashing Magazine
• „5 leistungsstarke Tipps und Tricks für Druckstilvorlagen“, Dudley Storey, Smashing Magazine