Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

News

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

    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;

Anzeige

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.

Finde einen Job, den du liebst

2 Reaktionen
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
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
Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Hinweis

Du hast gerade auf einen Provisions-Link geklickt und wirst in Sekunden weitergeleitet.

Bei Bestellung auf der Zielseite erhalten wir eine kleine Provision – dir entstehen keine Mehrkosten.


Weiter zum Angebot