Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Ein Faltblatt für Internet-Ausdrucker

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Ein Faltblatt für Internet-Ausdrucker

Der Adventskalender der Webkrauts startet wieder durch. Jeden Tag gibt es hier bis Weihnachten Tipps und Tricks. Hinter dem ersten Türchen zeigt Ralf Graf, wie der Ausdruck einer Website mit einer Handvoll CSS3-Befehle in ein praktisches Faltblatt verwandelt werden kann.

Internet-Ausdrucker finden wir nicht nur in Berliner Ministerien und Abgeordnetenbüros. Mitunter verspüren wir alle den Drang, die auf dem leuchtenden Schirm offerierte Weisheit handlich gedruckt Schwarz auf Weiß in die Tasche zu stecken.

Das Ausstatten einer Website mit einem Print-Stylesheet für vernünftig formatierte Ausdrucke sollte mittlerweile Standard für einen pfiffigen Webworker sein. Manchmal soll es aber mehr bzw. weniger sein, gerade in Sachen »in die Tasche stecken«. Wie z.B. bei Jeremy Keiths HTML5-Referenz. Druckt der Betrachtende diese aus, so darf er fortan auf dem Blatt Papier eine auf acht kleine Seiten zusammenfaltbare Taschenreferenz bewundern.

Jeremy Keiths HTML5-Referenz

Jeremy Keiths HTML5-Referenz

Damit das funktioniert, muss der Inhalt der Seite beim Druck »gegeneinander« angeordnet werden. Für solche Effekte hält CSS3 2D-Transformationen bereit, die auch auf Papier funktionieren. Zusammen mit einer absoluten Positionierung können wir damit Blockelemente in alle möglichen Richtungen drehen und Positionieren.

Werfen wir einen Blick auf das Print-Stylesheet der oben erwähnten kleinen HTML5-Taschenreferenz, so sehen wir, wie verblüffend einfach dieser Effekt zu erreichen ist. Die acht Seiten (Kästen in der normalen Browseransicht) werden absolut positioniert und dann gegeneinander nach rechts und links »umgekippt«, sprich, um 90 Grad gedreht mit "rotate". Da es sich nicht um Quadrate handelt, werden sie mit "translate" noch ein wenig verschoben:


/* rotated left */
#page1,
#page8,
#page7,
#page6 {
  -webkit-transform: translate(64.5px, -64.5px) rotate(-90deg);
  -moz-transform: translate(64.5px, -64.5px) rotate(-90deg);
  transform: translate(64.5px, -64.5px) rotate(-90deg);
  }

/* rotated right */
#page2,
#page3,
#page4,
#page5 {
  -webkit-transform: translate(-64.5px, -64.5px) rotate(90deg);
  -moz-transform: translate(-64.5px, -64.5px) rotate(90deg);
  transform: translate(-64.5px, -64.5px) rotate(90deg);
  }

Der Rest des Stylesheets kümmert sich lediglich um die absolute Positionierung.

Das ausgedruckte Faltblatt

Das ausgedruckte Faltblatt

Diese clevere Technik geht auf einen Artikel von Natalie Downe zurück, die auch einen HTML-/CSS-Rahmen für eigene Experimente mit solchen zu faltenden Achtseitern aus Webseiten auf Github zur Verfügung stellt.

Wie man an den Erweiterungen "-webkit" und "-moz" sehen kann, ist die "transform"-Eigenschaft natürlich ;) noch lange nicht in allen Browsern implementiert. Es funktioniert bisher nur Browsern auf Basis von Webkit und Gecko, also Safari, Firefox 3.5 oder Google Chrome. Und wie es nicht anders zu erwarten war, funktioniert das in allen Versionen des populären MS Internet Explorers überhaupt nicht.

"transform" bietet auch im zweidimensionalen Raum einiges Potenzial für eigene Experimente in der Ansicht auf Schirm und Papier. Weitere Informationen dazu findet man z.B. beim W3C und, knackig und knapp aufbereitet, auf dieser Übersicht bei Webmasterpro.

Kommentare

Webstandard-Team
am 01.12.2009 - 10:04

Einfache aber clevere Technik. Danke für den Tipp und auf hoffentlich weitere interessante Beiträge des Adventskalenders 2009!

Permanenter Link

Christian
am 01.12.2009 - 10:15

Leporello-/Zickzackfalz für’s Web, ist ja irre! :-)

Kannte zwar bereits Jeremy Keiths HTML5-Referenz, aber nicht diese raffinierte Druckstylesheettechnik.

Danke für den Tipp und auf viele weitere, tolle Adventskalender-Artikel!

Permanenter Link

Michel
am 01.12.2009 - 10:16

Sehr cool :)

Permanenter Link

Philipp
am 01.12.2009 - 11:19

Ich muss gestehen, ich bin ein bisschden baff ;-)

Werde jetzt mal den Drucker anschmeißen und staunen!

Permanenter Link

donvanone
am 01.12.2009 - 11:41

Noch einen Tacken besser wirds, wenn man die Falt-Technik (inkl. einem Schnitt) von PocketMod (nein, ich hab nix mit denen zu tun) benutzt, dann hat man wirklich ein kleines Heftchen.
Muss man die Seiten nur ein wenig anders anordnen, aber das ist dann ja kein Problem mehr.

Permanenter Link

Alex B.
am 01.12.2009 - 13:04

Eine sehr interessante, und für mich absolut neue, Technink. Und ich habe gleich ein Projekt der dies brauchen könnte!
Danke! Freue mich auf weitere Artikel!

Permanenter Link

Stephan
am 01.12.2009 - 22:03

Hab mich schon auf Euren Adventskalender gefreut!

Permanenter Link

Clumsy
am 01.12.2009 - 22:18

Werde ich morgen mal ausdrucken und schauen, inwiefern sich das lohnt oder ob da letztlich doch nichts neues drauf steht. ;)

Permanenter Link

hans blank
am 02.12.2009 - 17:04

Nette Idee - funtkioniert aber mit meinem FF 3.5 nicht wirklich. Da sind einige Zeilen angeschnitten...

Permanenter Link

Ben
am 02.12.2009 - 22:12

Pfiffige Idee. Gefällt mir.

Permanenter Link

Hendrik Jacob
am 06.12.2009 - 08:56

Joar ist nett ... aber so lange IE6 noch so verbreitet ist, brauch man doch nicht wirklich mit HTML5-only Elements anfangen, oder?!

Permanenter Link

Die Kommentare sind geschlossen.