one year agoDinky 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.
This is awesome work. I've definitely going to use it in a project (I'll crowbar it in!).
Alex 21st May 2009 23:39
That's really cool! :)
Although translate(64.5px, -64.5px) rotate(-90deg); makes me instinctively reach for a matrix transform…and what do you know, matrix(a,b,c,d,e,f) does exactly that.
James Aylett 22nd May 2009 02:17
This is pretty awesome, I just need to tinker with the sizes to make it fit my bizarre US-letter paper. :/
dbt 22nd May 2009 07:54
That's pretty cool :)
Richard Terry 22nd May 2009 08:10
Looks OK in Firefox 3.5pre nightly, too:
s/-webkit-transform/-moz-transform/gJan! 22nd May 2009 08:48
Handcraft + geekery? Absolutely wonderful.
CSS at its finest
Mislav 22nd May 2009 09:14
Lovely. It should also work in Firefox 3.5 if you include "-moz-transform"
Jeremy Ruston 22nd May 2009 09:15
Awesome. Thanks a lot for the tip. I will try to enable this programatically for the wiki pages.
Thejesh GN 22nd May 2009 09:49
Hmmm - PocketMod is pretty cool, although it appears to only use "Letter" size, and not full A4. Presumably your version is doing full A4?
mrben 22nd May 2009 10:16
Ooh, was that my Xmas Da Vinci Code thing that inspired you? Anyway, nice work: love the whole PocketMod universe.
Hatmandu 22nd May 2009 10:32
Nice one! Here's my script for making a PDF pocketmod for a daily digest.
http://github.com/jwheare/digest/tree/master
I found the hardest part was getting stuff that's interesting and useful on a daily basis, and I don't have a printer, so I kinda lost interest :)
James Wheare 22nd May 2009 12:25
I'm also big fan on planning on paper. Wow, I just simple love your project! Great work!
Vladimir Carrer 22nd May 2009 12:34
Very cute.
Olly Willans 22nd May 2009 14:05
Since you're using Safari/Webkit, you could save yourself the IDs and selectors and take advantage of nth-child.
#book > div:nth-child(even) { /* rotate the other way */ }
#book > div:nth-child(1) { /* adjust position */ }
...and so on.
Very cool idea, all 'round. :)
Jonathan Snook 22nd May 2009 14:48
Very nice! I might have to look in to this more closely!
Richard, Peacock Carter 22nd May 2009 16:20
Thanks for the feedback everyone!
Jan and Jeremy - awesome that Firefox now does this! I have updated the css to use
-moz-transformas wellAndrew -you and Helen were indeed the inventive friends I was talking about :)
James - your pdf generating thing looks like a really cool project!
Jonathan - oooh yes I could indeed use nth child, that would really clean up the markup. I couldnt use odd and even to rotate though as its 1, 8, 7 and 6 that go one way and 2, 3, 4, and 5 that go the other.
Natalie 23rd May 2009 17:27
That is so cool Nat!
Nicole Sullivan 26th May 2009 19:20
That's realy cool!
cheers for sharing.
web design leeds 27th May 2009 14:51
I came here from tiddlypocketbook.com, which uses TiddlyWiki as a editor, and having both used the PocketMod folding technique to send a Christmas card one year off-and-on relied on a GTD version of TiddlyWiki for keeping track of things, I'm really happy to have discovered your breakthrough.
Thanks! The whole thing is very impressive (especially the mash-up stuff you put up at GitHub). I'll see how to use your technique to apply it directly to my own TiddlyWiki file (using the MonkeyGTD layout at tiddlyspot.com).
Roger Sperberg
Roger Sperberg 1st July 2009 18:56
You can use the
-webkit-transform-originproperty (and its -moz- equivalent; and see its documentation) instead of thetranslate()transform. That property controls the point of origin of the transform.-webkit-transform-origin: 50% 120.5px;should do the trick for all pages (120.5 is width / 2).Jorrit 6th September 2009 00:12
It is good that we are able to take the <a href="http://lowest-rate-loans.com">loans</a> and this opens completely new possibilities.
WintersCHANDRA19 16th March 2010 18:11
this is so sweet, thanks for sharing.
Pol Moneys 5th May 2010 11:36
this is so sweet, thanks for sharing.
Aşk Büyüsü Nasıl Yapılır 29th May 2010 11:53
full lace wigs 25th June 2010 04:29
full lace wigs 25th June 2010 04:29
allowing you to choose a color and style that fits your needs perfectly
payday loan online 14th July 2010 19:56
allowing you to choose a color and style that fits your needs perfectly.
fast payday loans 15th July 2010 12:39
Susancai 16th July 2010 09:54
stationary bikes 19th July 2010 07:24
beach wedding dresses
cheap wedding dresses
vintage wedding dress
white wedding dress
the wedding dress
wedding dress gowns
white wedding dresses
beach wedding dress
bridal wedding dress
short wedding dresses
www.loveweddingdresses.com
socks 20th July 2010 13:40
prom dress 21st July 2010 07:01
very good information thank you for this .
replica calvin klein watches 24th July 2010 04:27
Looked that has been too good, this material I look for a long time, thanks your share, I will pay a return visit frequently
<a href="http://www.chineseporcelainb2c.com">chinese porcelain</a>
chinese porcelain 26th July 2010 09:53
chinese porcelain 26th July 2010 09:56
chinese porcelain 26th July 2010 09:56
valve 26th July 2010 10:14
sswfnhtu 26th July 2010 10:15
I had got a dream to start my own commerce, however I did not have enough amount of cash to do this. Thank God my close dude told to take the personal loans. Thus I received the sba loan and made real my old dream.
credit loans 27th July 2010 10:07
* Computer and Gadget News
andrew shawn 27th July 2010 15:22
Browsing on Google for something else closely connected, regardless before i ramble on too much i would just like to state how much I cherished your post, I've added your web blog and also obtained your Feed, Again thank you very much for the article carry on the good work.
ny auto glass 27th July 2010 19:11
Golfbrand 30th July 2010 10:39
ChannelBlu 30th July 2010 14:53
well webkits are ok
virility ex 30th July 2010 20:04
I'am glad I stumled upon this! This is a great idea for my group. I sending this right now to all of them.....thanks for the info!
How to stop porn 30th July 2010 21:46
Great idea! I will try this on my next report.
Lifetime Hoops 30th July 2010 21:53
I like the video! I will try this out myself....thanks!
Southwest coupons 30th July 2010 22:00
Starscapes.com 2nd August 2010 09:33
Thanks for giving the such a informative blog . I really like our explanations described here.
idaho home security systems 2nd August 2010 19:31
<h1><a href="http://www.chanel-uk.net/chanel-ladies-white-ceramic-watch-h1181-p-17.html"><strong>Chanel Ladies White Ceramic Watch</strong></a>, Chanel Ladies White Ceramic Watch</h1><br><br />
<h1><a href="http://www.chanel-uk.net/chanel-ladies-white-ceramic-watch-h1336-p-18.html"><strong>Chanel Ladies White Ceramic Watch</strong></a>, Chanel Ladies White Ceramic Watch</h1><br><br />
<h1><a href="http://www.chanel-uk.net/chanel-ladies-white-ceramic-watch-h1337-p-19.html"><strong>Chanel Ladies White Ceramic Watch</strong></a>, Chanel Ladies White Ceramic Watch</h1><br><br />
Chanel Ladies White Ceramic Watch 3rd August 2010 01:43
wwe 3rd August 2010 08:27
kirk 3rd August 2010 14:41
That was as neat as the T shirt folding trick. awesome
J. Shelly 8th August 2010 15:30
That was one of the neatest tricks around thanks for sharing.
James Shelter 8th August 2010 15:31
Thank God my close dude told to take the personal loans. Thus I received the sba loan and made real my old dream.
save fuel 9th August 2010 16:54
I find it difficult to subscribe RSS feeds, bookmark this site anyway I have is a very useful and complete information.
elliptical for sale 10th August 2010 10:24
Since you're using Safari/Webkit, you could save yourself the IDs and selectors and take advantage of nth-child.
#book > div:nth-child(even) { /* rotate the other way */ }
#book > div:nth-child(1) { /* adjust position */ }
...and so on.
Very cool idea, all 'round. :)
stun gun 11th August 2010 01:16
James 11th August 2010 09:11
<a href="http://www.shoeinstore.com/">vibram fivefingers</a> hot sale, you will find <a href="http://www.shoeinstore.com/">vibram five fingers</a> at our website. welcome to place an order of <a href="http://www.shoeinstore.com/">fivefingers</a> shoes.
vibram fivefingers 13th August 2010 10:17
nice well writing on a paper is mcuh better then a computer as it is much quiker to find and read.
Digest It Colon Cleanse Review 13th August 2010 16:11
This was a great post. I could never write something as good
Binaural Beats 13th August 2010 22:51
Acuvue Advance Astigmatism 15th August 2010 07:16
hogard 15th August 2010 18:14
Hopkins 15th August 2010 18:14
Barren 15th August 2010 18:15
Stephen 15th August 2010 18:16
great blog post! I am so thrilled reading this article. thank you!
Replica rolex 16th August 2010 07:23
This is awesome thank you.
stun gun 17th August 2010 02:48
I don't too much about, but I ever seeing her concert and that's really amazing.
http://www.esleepmasters.com/Swimming_Pools_s/2352.htm
henz 17th August 2010 16:32
I really enjoyed your blog post. I bookmarked your page so I that can keep track of your future post.
best home insurance 17th August 2010 19:56
Coach outlet 18th August 2010 21:10
huu 18th August 2010 21:12
Vibram FiveFingers 19th August 2010 21:47
Mobile Glass 20th August 2010 14:34
david r 21st August 2010 09:54
louis vuitton speedy 35 22nd August 2010 09:23
louis vuitton 22nd August 2010 15:25
lv wallets 22nd August 2010 17:51
Great post! My Group will love this.Thanks for the info.
Idol Lash Review 22nd August 2010 17:56
BrandongT77 23rd August 2010 12:00
Toe shoes, more and more popular the last two years, five finger shoes makes you closer to the earth and your surroundings that you will not find in conventional shoes, vibram five fingers shoes can stimulate the soles of the feet muscles; promote blood circulation, but also five finger shoes to improve the range of activities, five finger shoes multisport shoes may be a good choice to bring one when you are on travel, because they are luggage friendly and does not occupies too much space on your bag, five fingers vibram to our earth in a traditional way shoes are not available together, so that they become more flexible, dashing.
five finger shoes 26th August 2010 07:10
You know that prada handbags are more and more popular in those years. It’s a highly popular that with the improvement of Prada into a new style, prada shoulder bags will definitely attract your eye，prada hobos to its unique design also deeply loved by everyone. Different Prada handbags styles to bring you a different style atmosphere, prada totes in the Italian upper classes have a high reputation and prestige, prada top handles values embodied in everyday life has always been regarded as extraordinary enjoyment, prada handbags is definitely your best choice.
prada handbags 26th August 2010 07:14
It’s a highly popular that with the improvement of louis vuitton handbags into a new style. It is high-quality materials and craftsmanship cans not the other package products and, louis vuitton bags can easily make a vote on the pursuit of people go crazy. Recently, Adidas are the best seller for businessmen, adidas shoes flavor restoring ancient ways, and do so strong technological innovations. Many NBA players like adidas sneaker, its style and quality are the best.
louis vuitton handbags 26th August 2010 07:14
Toe shoes, more and more popular the last two years, five finger shoes makes you closer to the earth and your surroundings that you will not find in conventional shoes, vibram five fingers shoes can stimulate the soles of the feet muscles; promote blood circulation, but also five finger shoes to improve the range of activities, five finger shoes multisport shoes may be a good choice to bring one when you are on travel, because they are luggage friendly and does not occupies too much space on your bag, five fingers vibram to our earth in a traditional way shoes are not available together, so that they become more flexible, dashing.
five finger shoes 26th August 2010 07:20
You know that prada handbags are more and more popular in those years. It’s a highly popular that with the improvemen http://www.amandashoeswholesale.com/ wholesale shoes
dollar items 26th August 2010 09:48
Dona 26th August 2010 18:13
Steve 26th August 2010 18:13
Brad 26th August 2010 18:15
Peter 26th August 2010 18:15
Good post,This was exactly what I needed to read today! I am sure this has relevance to many of us out there.
one dollar hats 27th August 2010 09:48
PB wallhack 27th August 2010 22:26
JeremyNath 28th August 2010 07:51
lv 29th August 2010 18:19
This was one of the best blogs i viewed all day...thank you everyone for your great comments.
rabbit hutch 29th August 2010 23:04
louis vuitton 30th August 2010 07:26
Tony 30th August 2010 10:28
john 30th August 2010 10:28
Steve 30th August 2010 10:29
Morgan 30th August 2010 10:30
It really is a concident that a lot of people like this because i for one am a massive fan of this type of stuff and you just made my day, thankyou very much.
watch Resident Evil afterlife online 1st September 2010 08:30
Thank for the info! My daughter will love making these!
Southwest coupons 2nd September 2010 00:18
Really trustworthy blog. Please keep updating with great posts like this one. I have booked marked your site and am about to email it to a few friends of mine that I know would enjoy reading..
vibram five fingers 2nd September 2010 00:45