Crowd-based Publishing
Die Umgestaltung unserer Arbeitswelt aus dem Wohnzimmer heraus. Oder: Wenn die Webseite zum Pamphlet und ihr Ausdruck zum Flugblatt oder Buch wird. Spread the word!
Bottom-Up-Strategie: Crowd-based Publishing
Wie Nassim Taleb in seinem Werk zu Antifragilität klarstellt, verbreiten sich Gedanken und Botschaften dezentral und bottom up am durchdringensten, von unten nach oben. Von Grafiker*in zu Grafiker*in und von ihnen langsam aber sicher zu den großen Konzernen. Aus der schaffenden (Doppeldeutigkeit beabsichtigt) Branche heraus bauen wir den Druck auf, vom Proletariat her für mehr Open Source im Design. Diese Seite ist so konzipiert, dass sie von jeder und jedem auf dem nächstgelegenen Drucker ausgelassen, simpel gebunden und verbreitet werden kann. Als Flugblatt oder Buch. Das geschieht im Sinne eines offenen und gruppenbasierten publizistischen Handelns.
Wie das geht?
Klicke Dich durch die Kapitel, die dich am meisten interessieren und drücke auf das Druck-Icon in der oberen rechten Ecke (auf dem Smartphone ausgeblendet). Andernfalls kannst Du auch einfach den Druck-Befehl des Browsers nutzen. Automatisch wird die Anzeige der Webseite für den Druck optimiert und du kannst sie auslassen. Schnapp dir eine Heftklammer, eine Grafikklammer oder eine Büroklammer und fasse die ausgewählten (oder alle) Kapitel zusammen. Ab ins Bücherregal oder auf die Straße damit!
(Ab hier wird es nerdig)
Eine Programmiertechnik als Drucktechnik
Neben der Darstellung auf einem Monitor steuert CSS auch die Darstellung einer Webseite für den Druck. Mithilfe von Print-CSS-Einstellungen wurde diese Seite auch für den Druck optimiert. In den großen Zeiten des responsive Webdesign, also der sich anpassenden Webgestaltung über verschiedene Browsergrößen hinweg (für Handy, Tablet, Monitor) gerieten Druck-Styles mehr und mehr ins Hintertreffen. Hier setzt diese Lösung an, wir entstauben sie, nutzen sie als gestalterisches Mittel und verschaffen ihnen so vielleicht eine kleine Renaissance als neue Drucktechnik. Wenn auch Du Deine Webseite als gruppenbasiertes Buch publizieren möchtest, findest Du folgend Tipps und Tricks und ein quelloffenes Print-CSS-Template als Starthilfe.
CSS für das Papier – Druckeinstellungen für das Web
Warum braucht es Druckeinstellungen für Webseiten? Ist es nicht ohnehin aus ökologischer Perspektive überflüssig Webseiten auszudrucken? Sollten wir das Papier nicht sparen?
Tatsächlich kann ein Druck-CSS dazu beitragen, Papier zu sparen. Eine Webseite kann ausgedruckt werden und das wird sicherlich einmal geschehen. Ohne eine genauere Druckangabe verwendet der Browser seine Standardinterpretation der Seite für den Druck. Das führt nicht selten zu riesigen Bildern (die im Web vielleicht toll aussahen, jetzt aber Tinte fressen) und nicht selten werden auf dem Papier überflüssige Informationen wie Navigationen und Footer, manchmal sogar Werbeanzeigen mit ausgedruckt. Eine Druck-CSS verleiht Abhilfe und reduziert die Inhalte auf das Wesentliche – so werden aus etlichen Blättern Papier einige wenige. Make it simple and stupid.
Außerdem: Die Erfahrung der Benutzer*innen der Seite wird verbessert. An diesem Punkt setzt dieses Projekt an und widmet sich neben den klassischen Argumenten für eine CSS-Druckdatei auch der Frage, wie wir mit ihrer Hilfe aktiv gestalten können, wie eine Druck-CSS nicht nur ein verarbeitendes, sondern auch ein erweiterndes Gestaltungsmittel sein kann.
Technischer Hintergrund, Tipps und Tricks
Technisch ist eine Druck-CSS erst einmal keine Raketenwissenschaft. Mit dem Befehl @media print { STYLES } gibt man dem Browser an, dass es sich beim vorliegenden CSS um Druckeinstellungen, nicht um Screeneinstellungen handelt.
@media print { STYLES }weist den Browser an, dass es sich bei allen CSS-Angaben zwischen den geschwungenen Klammern um Styles für den Druck handelt<link rel="stylesheet" href="stylesheet-pfad.css" type="text/css" media="print">muss in der HTML- oder MD-Datei ergänzt und stylesheet-pfad.css angepasst werden, um ein neues Druck-CSS zu verknüpfennav, footer { display: none; }blendet Navigationsleisten und Footer im Druck aus; ich habe zudem die Klasse.dont-print { display: none; }ergänzt, mit der gezielt Elemente im Druck ausgelassen werdenimg { max-width: 8cm; }begrenzt die Größe aller ausgedruckten Bilder (spart Tinte und Papier)a:after { content: " (" attr(href) ") "; }schreibt im Druck hinter allen anderweitig versteckten Links die URLs aus@page { margin: 2.5cm; }setzt einen umlaufenden Seitenrand beim Druck; kann um-top / -left / -rightergänzt werden, beispielsweise steuert@page { margin-left: 3cm; }nur den linken Seitenrand@page { }kann um:leftund:rightfür Doppelseiten oder:firstfür ein Coverstyle ergänzt werden, also@page :first { }page-break-before: always/avoid;erzeugt am gewählten Ort einen Seitenumbruch, z.B. würdeh1 { page-break-before: always; }vor jeder Kapitelüberschrift (in Markdown eine Raute) einen Seitenumbruch setzen – natürlich klappt auchpage-break-after:- Alle Schriftgrößen sollten im Druck-CSS in Punkt-Werten neu definiert werden
- Natürlich können auch die meisten anderen CSS-Befehle eingesetzt werden, das eröffnet uns einen Gestaltungsspielraum
Download: Offenes Print-CSS-Template
Das folgende Print-CSS ist ein generisch gehaltenes Stylesheet, das die wichtigsten Angaben innehat. Darin werden für den Druck überflüssige Informationen wie Navigationen und Footer ausgeblendet, Bildgrößen begrenzt und Tinte gespart. Es ist ein Startpunkt, der ggf. auf die Semantik der Webseite angepasst werden muss und gerne ergänzt werden darf!