Rene Windegger

Year

2017

Tool

Javascript, Pablo, bootstrap.js, SVG

Generating a barcode for print can be a troublesome experience. You have to deal with different issues, when printing information, in a machine readable way.  A good way to deal with that issues is to use vector graphics for the preparation of the print. With vector graphics you can resize and scale the output to your need without sacrificing print quality.

While searching the internet for barcode generators the results are impressing. But there is one thing I wasn’t happy with. Every platform I looked at, is using a server side API to generate the actual image. When you have SVG in your arsenal you can easily think about letting the client handle the generation of the image.

What is a barcode?

A barcode is a great way to transfer information in a fast and analogue way. You can find barcodes everywhere during your daily live. This barcodes have many different uses but all are the same in the sense that they allow for information to be transported analogue. During the last years a large development towards 2D barcodes took place with QR being know by the general public. Depending on the encoding barcodes can store a lot of data or only a small set of data. EAN-13 is allowed to store 13 numbers. This numbers are GTIN numbers most of the time.

Where did I start?

For starters I took a look at different JavaScript SVG frameworks. Pablo‘s API offers an easy to use pool of methods based on the SVG definition. This makes it easy to debug issues with your output. Pablo also offers an API to save the generated SVG for later reuse.

To start the actual encoding I created an SVG that contains the different encoding tables. This tables are used to store all valid EAN-13 symbols and loaded with Pablo on demand. During the generation of the barcode, the generator uses this symbols when required and styles them according the input. When you share the link for the barcode you can give other people the option to grab a copy for their use as well.

The Result

After a few hours I was happy with the result and had a working client only barcode generation tool. You can find it at: https://barcode.windegger.wtf/.