Grow your CSS skills. Land your dream job.

Gift Message Printer

Published by Chris Coyier

We have a client who sells a product in which customers specify a gift message when they check out. The site has been very successful for them and orders are coming faster than expected. The have been hand-writing the notes thus far, which, in nerd words, doesn't scale well.

When I heard about the problem, the obvious solution was to stop handwriting them. Maybe they'll lose some of that homegrown flair, but it's also less weird. This isn't a handwritten note from one person to another, it's a typed note form one person re-written by an intermediary to a third person. Besides, my idea for a solution involves a handwriting style font anyway!

View Demo   Download Files

Could you do this just as easily from desktop software? Of course. But this way (just like the editable invoice) means you can do it from any computer without worrying about whether you have the template or the right fonts or whatever else.

Copy and Paste

The idea is simple. A webpage with a big textarea on it. The textarea is set in a fun handwritten font. The gift messages that come across in the receipt emails can be copy and pasted right into it.

Adjust size

Because gift messages can be long, short, and anywhere in between, I thought it would be helpful to be able to resize the text on the fly.

Video

Just because quick screencasts are often best for explaining things...

 

View Demo   Download Files

 

Comments

  1. Nice trick, you are a true programmer who helps to reduce work and have time to rest. Saying.. programmers are lazy species who always tries to find a way to reduce the effort so they can have more time to rest and programm.

  2. This is kinda Off Topic because your just showing a technical possibility but why keep the handwriting font if the handwritting is lost anyway? You know «the medium is the message» and all that crap :)

  3. Kyle Kinnaman
    Permalink to comment#

    I did something similar for my brother. He printed, folded and laminated multiple custom luggage tags for about 200 college athletes. This beats the crap out of making 200+ custom psd’s…

    Rather than fight scrollbars and max sizes I used discrete text inputs and gave him the option to style each as he saw fit. For a quick evening’s work I was pretty pleased with myself. Try printing one to PDF to see how they came out (double sided).

    http://usabledesignworks.com/dev/bagtag/

    • Great idea :) I find the font works in Ie8 but the layout doesn’t. The layout works in Firefox but the font doesn’t show up even though it’s installed.

    • Kyle Kinnaman
      Permalink to comment#

      Because it was a one-off thing I could explicitly tell my brother to use Firefox and not have to hack it for IE. I would never have publicized the link but Chris seems to keep working on the same kind of stuff I am…

      Odd that the font doesn’t work for you – it works for me in 3.1.17 and 3.5.x on Win, Mac and Linux.

      Anyway – it was a quick hack that got its intended job done. Feel free to play with it as you see fit (and if you find a better way to do it, please educate me…).

    • Awesome. I love ideas like this. I could even see having the page take URL params like /dev/bagtag/?first=Kyle&last=Kinnaman so theoretically those could be created from Excel or something and all they would have to do is click, adjust, print.

      SIDE NOTE:
      Yeah I was using Typekit at first for a cool looking handwritten font I found. But it wouldn’t print. So then I was looking for a way to force Typekit fonts to print but didn’t get very far. Then I decided, hey, maybe I’ll just use an @font-face font and I can make sure it’s set @print media too and it should work, and it did, but the REAL reason it printed is that I also installed the font locally. Doh! Anyway, like Kyle said, these are kind of ONE-OFF solutions for specific people, so you can do very specific stuff like that (like have them install the font and use a specific browser)

  4. Hi Chris. Just wanted to tell you this doesn’t work in IE8. The font doesn’t wrap. (It works in IE8 compatibility mode though). Any idea on that?

    • Permalink to comment#

      That is definitely a weird bug in IE8. The text even duplicates when you scale the size up and down.

      I downloaded the example and messed with it a bit, and you can fix it by removing “display: block” from the textarea, and changing the width for the textarea to 100%. Then, just wrap the textarea in a centered div that has a width of 600px. Seems to be the “display: block” combined with width that causes the issue. Maybe there’s an easier fix, but this seems to do the trick.

  5. Permalink to comment#

    Great idea Chris. You could maybe rotate the textbox a few degrees with CSS3 to give it more of a hand-written feel (inspired from image below demo and download buttons)

  6. Permalink to comment#

    well, printing won’t work in firefox 3.6.x @ windows – font is switched to default…

    • Printing with @font-face doesn’t work for me in Firefox Mac either, yet it worked in the screencast – I guess Chris has the font installed locally?

    • Kyle Kinnaman
      Permalink to comment#

      I had the same issue on my project (see above). I originally was using Cufon but it doesn’t print either. I had to use @font-face but that does require that you have the font installed locally (so for my project I gave a font download link).

      If you’re using this as an in-house thank you note system as Chris intended, you could easily push the necessary fonts out to all your staff.

  7. Akshay
    Permalink to comment#

    Loved the quick Screencast idea..

    P.S – Try having better resolution video next time.

  8. Permalink to comment#

    You should sell this solution to Amazon. This is so simple but not used.

  9. Permalink to comment#

    Feel this would benefit from some text-align choices, imo the bulk of any gift card / greeting card text tends to be centralised.

    Bound to save time though and a great tool, next step’s just to eliminate the copy & paste and get it generated straight from the site o/c

    • Yeah I’m thinking for the real client, passing the entire gift messages as a param in the URL might be the ticket, so they can just click without having to copy and paste.

    • Kyle Kinnaman
      Permalink to comment#

      If you’re using this internally, that’s perfectly reasonable. If you leave the URL parameters visible to the world you could have a bit of a problem, like CNN did: http://bit.ly/9e5MXQ. I would POST and sanitize thoroughly.

  10. Nice Idea Chris but you mention scalability!

    Surely to make this even more “scalable” why would you not incorporate it straight into the “admin control panel” of the website so it automatically creates the “hand written” note? You could use URL parameters to get the desired effect?

    note.php?msg=Happy+Birthday+Gramps

    I just feel the whole copy and paste thing isn’t needed? I’m interested to hear your thoughts!

  11. Permalink to comment#

    great stuff……..loved it

  12. Another Seinfeld fan checking in. Festivus for the rest of us!

    Very nifty custom fix. As a bonus, maybe you could include the script you wrote here: http://css-tricks.com/set-font-size-based-on-word-count/

    You probably wouldn’t want to use it as a replacement for the jQuery UI slider, but it would certainly complement it nicely :)

  13. Chris, I love the way you find new and interesting ways to play with the tools available. It’s a quicker solution for you as a designer to include niceties like UI sliders, showing the experience with @font-face and then increasing turn around for those who want to experience something like this.

    Also if it really got some momentum you could have the person writing those cards provide you with some hand written glyphs, in which you could make a font with.

    In turn, the personality would not be lost (well only a smidge) as someone pointed out upstairs.

  14. Permalink to comment#

    You are one clever son of a gun. Nice work. Makes me want to create my own problem to fit your solution.

  15. i haven’t seen this kind of work previously.. This is awesome effort made…

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".