Background colors don't easily print

[seanyo]

The visual elements of the nametag are div backgrounds with rounded corners. Chrome doesn't print backgrounds and Firefox requires a setting change to print backgrounds.

Lets move to canvas elements to draw the nametag. This should help with printing in general, and will also let us look at canvas to image conversion for printed output as an option, since js PDF support looks weak.

I found three examples of drawing rounded corners with Canvas - any thoughts on which we should use or if we should do something different?

• http://js-bits.blogspot.com/2010/07/canvas-rounded-corner-rectangles.html
• http://www.netzgesta.de/corner/
• http://www.maierhofer.de/en/open-source/jquery-background-canvas-plugin.aspx

I haven't tested if these all print easily. I will do so and report the results here.

[ccharles]

As long as physical name tags are our ultimate goal I don't think that we should be doing rounded corners at all. This will be taken care of during printing onto rounded labels. We should aim to generate rectangular labels that bleed over the label boundaries.

[ccharles]

As I keep thinking about this I'm leaning more and more towards PDF for printing. PNG images are great for screen display, but aren't all that easy to put on paper reliably.

[seanyo]

@ccharles: Do we want to stick with styling divs or is canvas still a better direction for output to PDF?

[ccharles]

We'll need to experiment, but if we do want to go to PDF I'm pretty sure we'll want some server-side code. It should be pretty easy to provide some blank PDF templates and insert the text and avatar right into the PDF document when we serve it up.

[seanyo]

2 shell tools for html2pdf conversion:

• http://sites.google.com/site/torisugari/commandlineprint2
• http://code.google.com/p/wkhtmltopdf/

And a very expensive commercial tool :)

• http://www.princexml.com/overview/

[ccharles]

I wish these comments were threaded :-).

"commandlineprint2" isn't a shell tool, it's a Firefox extension that gets called on the command line. Looks pretty heavy.

"wkhtmltopdf" looks worth playing with.

PrinceXML is a very expensive tool, but it can give great results. We used it at my previous job, though I didn't personally work with it.

I'm not willing to shell out for it, though. You? ;-).

[seanyo]

I'd be willing to use the non-commercial license of PrinceXML.

However, I'm on board looking at free/open options first.

[seanyo]

Feature Request from @rgeddes: maintain the rounded corners for screen display because they're pretty. However, when we go to print display, drop them and let the physical sticker manage the border-share as per @ccharles' suggestion.

[ccharles]

I've reworked everything to be canvas-based, and print preview shows promising results in all browsers that I tested except for IE.

See commit 7b7e00c6bc48ec4174d427fd99a3b96bad03c07d

We will still need to do some work on sizing and placement if we plan to print onto label stock, but that's a separate issue IMO.