Barcode Tools & Techniques (Part 3)

The final weblog entry in the current Code 128 Barcode series is about the finishing touches that had to be put on the Code 128 Barcodes to get them to be client-sided. This is useful if you want to generate HTML files that stand alone and can be placed on a memory stick or other media without having the browser rush back to the web server to pick up a bunch of graphics files. The real data behind each barcode is the PNG graphic that is represented by its Base 64 encoding.

Base 64 conversion is a very old technique for mapping the contents of a binary file into a subset of ASCII. This allows us to move binary information back and forth over communication channels without inadvertently triggering unwanted behavior on either side of the interface. You can assume that binary data contains bytes and words in all bit combinations under the sun. Some of these combinations can be reserved to invoke functions within the sending or receiving program.

Because we want to transfer the raw data back and forth without invoking functions we have to “mask” all of the special combinations behind data that is highly unlikely to be used by any but the most extreme programmers to trigger functions.

So the Base 64 encoding scheme utilizes characters that are fairly innocuous in byte streams and are not likely to be altered in transit by the sending or receiving application. Namely, it uses upper and lower case letters found in the English alphabet, numbers and a few characters used in mathematics (+, / and =). Base 64 encases binary data in a stream of these characters meant for human consumption by laying a message’s bits out end to end and having a CPU look up 6 bits at a time out of a table of 64 characters. On the receiving side, the computer looks the characters up in a table and builds three bytes (24 bits) out of the bits that it finds. This technique allows a lossless transfer of binary information between two systems at a relatively small (33.3%) amount of overhead.

Base 64 is important for our barcodes because it is what enables them to be client-side barcodes. In other words, we can create barcodes in a web browser without having any connection to the internet. You might think that’s not important, but when your computer is considered “down” because its connection to the internet is “down” then I would say that you are underutilizing your processing power. The enabling technique is to have the barcode “font” embedded in the webpage without having to download auxilliary files from a server which may or may not be operational onto a client platform which may or may not think these auxilliary files are a secure thing.

If you take a close look at the Code 128 Barcode page, you’ll find that each symbol has its binary data (the PNG files generated with the technique illustrated in the last installment) represented in Base 64. We explain this to the browser by the codewords in the ‘src’ field “data:image/png;base64,”. The rest of the data is the binary information of each code symbol represented in Base 64.

I suppose I could have rifled through old hard drives and tape backups to find the source code for a utility that I wrote in the C programming language many years ago to encode/decode Base 64. Instead, I spent about an hour and a half online with a Base 64 encoding website and individually encoded each of the 107 symbols.

After I had all the Base 64 encoded data, I spent another two hours or so prettying up the HTML encoding for all the images and adding the fly-over text, etc. In all, it probably took me ten hours to create and test these barcodes over the course of a week. I hope that you find them fun, amusing and/or useful. Feel free to try this technique in your own application.

In our next installment we’ll introduce an idea that will make all this ultimately more useful by supporting many more symbologies as well as 2D barcoding schemes. Until next time, thank you for tuning in.