• Dinky pocketbooks with WebKit transforms

  I'm a big fan of stuff written on paper. My computer is covered in useful post-it notes, and I do a lot of planning on paper at the start of every client-side build.

  On my desk at work is a piece of paper written in felt tip that I pass around to my co-workers on occasion. It's a reference document for how we check projects out of subversion, upload to live and some basic terminal commands for people who are unfamiliar in that environment.

  This was a great opportunity to break out my favourite paper folding technique, where an A4 page becomes an 8 page booklet. I first learnt about this from a Christmas card I received a few years ago from some very inventive friends.

  Brian Suda happened to be in the office that day and pointed me to a cool Flash interface for creating these, pocketmod.com. He also suggested that it would be possible to build these using just HTML and CSS with CSS3 transforms, currently supported by Safari and WebKit.

  Inspired, I did exactly that.

  Here's the demo.html (no transforms, so I can easily preview the pages) - the transforms are applied by the print stylesheet, so hit "print preview" to see them. Alternatively, visit demo.html?print to preview the print stylesheet directly in your browser.

  Just in case you aren't running Webkit or Safari, here's what the print output looks like:

  

  Each "page" has a set width and height (241x370 px) and is absolutely positioned, but the real magic happens with the CSS3 transforms in the print stylesheet:

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

  It's not enough just to rotate 90 or -90 degrees. This works fine if you are rotating something that is square because the rotation happens around the centre point. I wanted to rotate the rectangles around the corner to ensure they fitted snugly inside their parent container. The solution was to shift the position using a translate() transform. I could have done this with position: relative, but I opted for a transform since I was already using -webkit-transform for the rotation. 64.5px is worked out as (height - width) / 2.

  You can fill each page with whatever you like, but make sure it fits or it will be clipped by the overflow: hidden applied to the page. The only required markup is as follows:

  <div id="book">
    <div id="page1" class="page"></div>
    <div id="page2" class="page"></div>
    <div id="page3" class="page"></div>
    <div id="page4" class="page"></div>
    <div id="page5" class="page"></div>
    <div id="page6" class="page"></div>
    <div id="page7" class="page"></div>
    <div id="page8" class="page"></div>
  </div>

  I surround textual content with a <div class="inner"> to apply sensible padding without affecting the width of the page.

  There are currently two special page types. An empty page with lines (suitable for hand-written notes) is achieved by applying a class of lines:

  <div id="page5" class="page lines"></div>

  The second special page uses the Google Static Maps API. The API takes a bunch of name value pairs, which I decided to represent using a definition list. On load, pages with the class gmap are scanned for definition lists, which are then hidden and replaced by an image constructed from the definition terms.

  <div id="page4" class="page gmap">
    <dl>
      <dt>center</dt>
      <dd>50.8197155,-0.1365716</dd>
      
      <dt>key</dt>
      <dd>insert your Google Maps API key here (get one here)</dd>
      
      <dt>zoom</dt>
      <dd>13</dd>	
    </dl>
  </div>

  I use Simon's www.getlatlon.com to find the correct values.

  Aside from these special pages, I've included styles for the HTML usual suspects - lists, tables, headings, pre etc. To make a todo list, simply apply a class of todo to a <ul> or an <ol>. To make a blank todo list, just use blank list items.

  Once you've constructed and printed your dinky booklet masterpiece, you'll need to fold it. Here's a nifty video from pocketmod.com showing how:

  I've published the code on GitHub, so please feel free try it out yourself or fork it and have a play. Let me know what you think.

  [… 715 words]

  Posted at 11:22 pm 20 Comments

  • css
  • css3
  • paper
  • pocketbooks
  • webkit

Thursday, 21st May 2009

2009 » May » Thursday, 21st

Tag cloud

css css3 paper pocketbooks webkit