Printing a badge

Requirements

• Easy to use and configure by frontend developers
• Badge generation should be fast
• Create multi-paged PDFs with multiple badges in one file.
• People at home might self-print their badge

Current situation

The current situation is nicely summarized by Kerim. We currently use the fPDF library with manual scripting to tweak the margins, fonts etc.

Pros of PDF badges:

• single-file download
• less chrome when printing
• page breaks are easy

Cons of PDF badges:

• clogging when printing many files
• hard to maintain by front-enders

Alternatives

There are different ways to go here.

Keeping the current situation

Hard to maintain & change; problems with the fixed (non-flowing) manual fPDF layout.

SVG badge template

SVG is a standard for vector graphics based on XML. We might use a system where graphical designers design a badge in Illustrator or Inkscape, and export the file to SVG. Uploading it to Anymeta which then processes it, replacing certain template tags it finds with e.g. the users name, title, etc. It gives back a PDF file ready for printing.

It sounds nice but there might be problems with this solution:

• The actual rendering of the svg might be different depending on the svg version used.
• Text wrapping is not very well supported in SVG
• Used fonts might not be available on the server, thus creating sysadmin overhead of installing them.
• Template tags might be very complex and not understandable by designers / easily destroyed (e.g., if-statements)
• Loops are hard to do (e.g. printing a list of friends as listitems)

Direct HTML printing

Generally HTML is a nice and logical path to take. Every frontend developer knows how to do this, and this way all Anymeta's functionality is exposed through the template system.

Kerim looked into this but there are several problems:

• page breaks not being handled well
• no proper way to get rid of the margin that the browser generates

No problems with fonts, we can use the @font-face declaration to embed a custom font inside the HTML, ready for printing. However for self-printing we cannot rely this since not all browsers support it.

Offscreen HTML rendering into a PDF document

offscreen rendering of HTML might be the way to go.
A script can render a specially crafted page template with wkhtmltopdf . Again, @font-face can solve the sysadmin overhead of having to install all kinds of fonts on the server.

For different types of badges we create different base templates, with the help of CSS3 to rotate the different pages of the badge into the right position.

If we would need to generate multipage pdfs for use with multiple badges we would need an extra step using fPDF to combine the rendered HTML files.

Then there is the issue of timing. We have to do some tests to see if Anymeta is fast enough to handle the request, do several sub-requests (one for each to-be-customizes badge page), combine these results into one PDF file, and serve it back.

However it will probably always be faster than the current version, which is slow because the printers cannot handle landscape PDF files. In this solution we'll just always create portrait PDFs even if the content needs to be rotated.

Sysadmin note: For wkhtmltopdf we can use a separate webserver (one of the API servers) so that we only need to install it on one machine. It can be statically linked so it does not depend on X11 being installed.

Recommendation

I would suggest we go for the wkhtmltopdf + @font-face + fPDF for combining the rendered HTML into a final PDF file which can be folded.