Webkrauts: Für mehr Qualität im Web.

Artikel

Ein Faltblatt für Internet-Ausdrucker

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.

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.

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.

Zum Autor

Ralf Graf verdient seit 13 Jahren seine Brötchen mit dem Web. Er lebt und arbeitet in Karlsruhe als freier Webentwickler. Weil er zu faul zum Frickeln ist, setzt er auf Webstandards und Ruby On Rails.

Info:

Ein Faltblatt für Internet-Ausdrucker ist Beitrag Nr. 654

Autor:

Ralf Graf am 1. Dezember 2009 um 10:00

Kategorie:

Adventskalender 2009

Kommentare

Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.

1. 1.
   

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

   Kommentar von Webstandard-Team - 1. Dezember 2009 um 10:04

2. 2.
   

   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!

   Kommentar von Christian - 1. Dezember 2009 um 10:15

3. 3.
   

   Sehr cool

   Kommentar von Michel - 1. Dezember 2009 um 10:16

4. 4.
   

   Ich muss gestehen, ich bin ein bisschden baff

   Werde jetzt mal den Drucker anschmeißen und staunen!

   Kommentar von Philipp - 1. Dezember 2009 um 11:19

5. 5.
   

   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.

   Kommentar von donvanone - 1. Dezember 2009 um 11:41

6. 6.
   

   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!

   Kommentar von Alex B. - 1. Dezember 2009 um 13:04

7. 7.
   

   Hab mich schon auf Euren Adventskalender gefreut!

   Kommentar von Stephan - 1. Dezember 2009 um 22:03

8. 8.
   

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

   Kommentar von Clumsy - 1. Dezember 2009 um 22:18

9. 9.
   

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

   Kommentar von hans blank - 2. Dezember 2009 um 17:04

10. 10.
    

    Pfiffige Idee. Gefällt mir.

    Kommentar von Ben - 2. Dezember 2009 um 22:12

11. 11.
    

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

    Kommentar von Hendrik Jacob - 6. Dezember 2009 um 08:56

Kommentar-Feed für diesen Beitrag

Die Kommentarfunktion ist zur Zeit leider deaktiviert.