News

Gutenberg.css: Schnelle Druckansicht für deine Website ohne CSS-Kenntnisse

Gutenberg.css nimmt dir die manuelle Arbeit komplett ab. (Bild: Pixabay.com)

Mit der Hilfe von Gutenberg.css definierst du mit wenig Zeitaufwand eine nahezu perfekte Druckausgabe für deine Website. Dazu benötigst du nicht mal Kenntnisse im Umgang mit CSS. Der Erfinder des Buchdrucks hätte vermutlich seine wahre Freude daran gehabt.

Gutenberg.css: Drei Themes, drei verschiedene Ergebnisse

Fabien Sa, Entwickler bei Quarkdev aus der Schweiz, stellt eine CSS-Lösung für das immer noch aktuelle Problem der Print-Darstellung deiner Website vor. Gutenberg.css, so der Titel der Projekts, kannst du auf Github kostenlos herunterladen und völlig frei verwenden, da es unter der liberalen MIT-Lizenz steht.

Um es zu verwenden, bindest du die zentrale Datei Gutenberg.css in deine Dokumente ein und lässt ihr noch eines der drei mitgelieferten Themes folgen. Das sieht dann etwa so aus:

<link rel="stylesheet" href="dist/gutenberg.css" media="print">
<link rel="stylesheet" href="dist/themes/oldstyle.css" media="print">

Sa gibt seinem knapp 11 Kilobyte schlankem Stylesheet drei unterschiedliche Layouts mit, die er als book.css, modern.css und oldstyle.css bezeichnet. Du kannst dir anhand der Namensgebung eine Vorstellung davon machen, was dich optisch jeweils erwartet.

Da die Stylesheets mit dem Zusatz media="print" eingebunden werden, ist klar, dass sie sich lediglich dann auswirken, wenn der Besucher deiner Website die Druckfunktion des Browsers nutzt, um die Informationen auszudrucken.

Links ohne Gutenberg.css, Mitte und rechts mit Gutenberg.css. (Screenshot: Github)

Links ohne Gutenberg.css, Mitte und rechts mit Gutenberg.css. (Screenshot: Github)

Zusätzliche Eingriffe deinerseits sind nicht erforderlich, aber möglich. So wirst du mit einiger Sicherheit einzelne Elemente deiner Seite von der Druckdarstellung ausnehmen wollen. Das gelingt ganz einfach unter Verwendung der Klasse no-print. Bei längeren Texten wirst du Einfluss darauf nehmen wollen, wann der Seitenumbruch auf eine neue Druckseite erfolgt. Dazu fügst du dem Element, das auf der neuen Seite ganz oben erscheinen soll die Klasse page-break hinzu.

Sollte es im Ausnahmefall mal erforderlich sein, auch den Hintergrund deiner Website in den Druck mit aufzunehmen, so kannst du sogar das erreichen. Du musst hierzu jedoch eine Ergänzung im CSS vornehmen:

-webkit-print-color-adjust: exact;
print-color-adjust: exact;

Es gibt sie noch, die Internetausdrucker

Generell versucht Gutenberg.css die semantische Logik in der Darstellung zu erhalten, egal für welches Theme du dich entscheidest. Formatierungen, die im Standarddruckprozess verloren gingen, erhält Gutenberg.css, was der Lesbarkeit des Ausdrucks deutlich zugutekommt. Sa verwendete SCSS zur Entwicklung seiner Lösung.

Gutenberg.css befindet sich in reger Entwicklung. Die letzten Updates datieren von vor etwas mehr als zwei Wochen. Der Bedarf an Lösungen für das stilsichere Ausdrucken digitaler Inhalte ist ungebrochen.

Worauf setzt du, wenn es um die Druckdarstellung deiner Website geht? Drüben bei Dr. Web stellte Andreas Hecht vor einiger Zeit seinen eigenen diesbezüglichen Vorschlag vor.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

2 Kommentare
Kevin

Das ist ziemlich nützlich, danke für das Teilen!

Ich vergesse das nämlich gerne die Seite für den Drucker zu optimieren. :)

Antworten
Bastian
Bastian

Die Aussage: „in reger Entwicklung“ ist total falsch. Es gibt insgesamt 3 Commits im Repo, der letzte commit auf die scss-Basisdaten ist von vor einem Jahr. Keine Vor 19 Tagen wurde lediglich ein release angelegt und ein Build-Prozess hinzugefügt.

https://github.com/BafS/Gutenberg/graphs/contributors

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.