Code 128 Barcode

I was challenged to produce the Automotive Industry Action Group’s (AIAG) shipping label for my employer. Figure 1 is a scanned label from a newsletter published in 1987. The AIAG has an updated standard (B-10, Trading Partner Labels Implementation Guideline). We’ll be generating a current model of AIAG B-10 in a future blog.

AIAG Shipping Label
Figure 1, AIAG shipping label

For the purposes of this installment of the barcode web log, the label is reproduced to enable a closer look at the challenge presented. According to the specification, the label was to be 4″ high and 6″ wide. If we were using a roll label printer those dimensions would be reasonable. Because I wanted to create my software for the Apple LaserWriter Plus, that seemed wasteful to me at the time.

The least expensive label stock for our application was full sheet 8½” by 11″, but that meant our label had to be 4¼” high and 5½” wide in order to fit 4 labels per page. After a discussion with our customer on a deviation, they agreed that our dimensions would be okay, provided the barcodes passed the validation equipment.

As it turned out, this still presented a technical difficulty. The purchase order number field shared a table row with the quantity field. The quantity field was not problematic. Its maximum width was 6 characters and fit in the table cell nicely using the Code 39 barcode specified by the AIAG standard. The purchase order number was something else. It was required to support 9 characters. As perfectly centered in the table cell as I could position the barcode with PostScript, the label field would not scan.

For illustration only. The actual label pictured here was fixed and did scan quite well.
Figure 2, Quiet zone illustration

My inability to get the purchase order number field to scan was a result of insufficient “Quiet Zone”. See Figure 2. Quiet Zone is the amount of space to the left and right of a barcode. That blank space is necessary for the scanning hardware to locate the start and end of the barcode. In the interest of saving the trees that they make label stock from, I had narrowed the label to the point that there was not enough room in the purchase order number field’s table cell for enough white space.

What made this challenge simple to overcome is the technique I used to produce the barcodes. Because the computer sees barcodes as a series of dots and dashes separated by wide and short pauses, it is not necessary to draw lines or rectangles and calculate distances between them based upon their thickness. I specified the representation of a bar in the computer’s native binary, and let the printer’s firmware do the scaling.

For example, the code 39 character ‘*’ which is used for a start and stop character (you’ll see it on the left and right of every code 39 barcode) is represented by a dot, followed by a long pause, another dot, followed by a short pause, then a dash, followed by a short pause, dash, short pause, dot and short pause. Because code 39 dashes are exactly 3 times as long as the dots and the pauses have the same ratio and lengths, the binary representation of the ‘*’ is 1000101110111010 or 0x8BBA in hexadecimal.

When you ask a 300 dots per inch printer to generate this pattern at 1:1 scale, you get a blip of ink 0.053 inches in width and 0.003 inches in height. In other words, the dot will be slightly larger than the period at the end of this sentence. However, if you use the printer’s built in scaling mechanism to increase the height by a factor of 200 and the width by a factor of 100, the code 39 ‘*’ character magically appears. And it appears as close to perfect as the printer is able to produce it.

But, what if your barcode is too large? Simply change the horizontal scaling to 95 or 90 or 85, until it is at the perfect width. Because the barcode is defined at it’s smallest possible dimensions and the printer scales height and width independently, you will end up with a perfectly readable barcode until you reach the limits of the hardware to create discernible lines and dashes. As it turns out, I could almost fit two purchase order number barcodes side by side in the table cell in Figure 1 before the barcodes would no longer scan. Time to fix “problem”: less than a minute.

This works in the opposite direction. You can create a barcode that fills an entire sheet of paper that is readable from several feet away. The limiting factor is the power of the laser in the scanning equipment.

As promised, at the end of this article is the entire Code 128 symbology in ‘PNG’ form. PNG stands for Portable Network Graphics and is the format that many web graphics are saved in. PNG should be used in barcode representation on web pages because it uses a lossless form of compression.

Skip over the code.

Code 128 Images

<img
alt=" 00,A:{space},B:{space}"
title=" 00,A:{space},B:{space}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ACZgAK8Ah/KrWu0AAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 01,A:{!},B:{!}"
title=" 01,A:{!},B:{!}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ADJgAMcAkzbyVIUAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 02,A:{"},B:{"}"
title=" 02,A:{"},B:{"}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ADMgAIkAVNpZKLAAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 03,A:{#},B:{#}"
title=" 03,A:{#},B:{#}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AGzgAbsBTSy3tVMAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 04,A:{$},B:{$}"
title=" 04,A:{$},B:{$}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AG5gAT8AzywIxNsAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 05,A:{%},B:{%}"
title=" 05,A:{%},B:{%}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AHZgAU8A14QQtCsAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 06,A:{&},B:{&}"
title=" 06,A:{&},B:{&}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AGbgAa8BR3bWdIcAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 07,A:{'},B:{'}"
title=" 07,A:{'},B:{'}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AGdgATEAyJ/9LboAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 08,A:{(},B:{(}"
title=" 08,A:{(},B:{(}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AHNgAUkA1ElZCJAAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 09,A:{)},B:{)}"
title=" 09,A:{)},B:{)}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ADbgAU8BF7jR/SQAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 10,A:{*},B:{*}"
title=" 10,A:{*},B:{*}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ADdgANEAmOlGw3wAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 11,A:{+},B:{+}"
title=" 11,A:{+},B:{+}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ADtgANkAnJf6lqYAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 12,A:{,},B:{,}"
title=" 12,A:{,},B:{,}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AExgAPsArevKOWsAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 13,A:{-},B:{-}"
title=" 13,A:{-},B:{-}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AExgAPsArevKOWsAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 14,A:{.},B:{.}"
title=" 14,A:{.},B:{.}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AGYgAO8Ah9WahQgAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 15,A:{/},B:{/}"
title=" 15,A:{/},B:{/}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AEZgAO8Ap7Gr+L8AAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 16,A:{0},B:{0}"
title=" 16,A:{0},B:{0}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AGJgAScAw0BJukMAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 17,A:{1},B:{1}"
title=" 17,A:{1},B:{1}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AGMgAOkAhBjTObMAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 18,A:{2},B:{2}"
title=" 18,A:{2},B:{2}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ADGgAQUA0nI/mr0AAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 19,A:{3},B:{3}"
title=" 19,A:{3},B:{3}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ADRgAMsAlQDS68kAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 20,A:{4},B:{4}"
title=" 20,A:{4},B:{4}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ADYgAI8AVxcQlAsAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 21,A:{5},B:{5}"
title=" 21,A:{5},B:{5}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ACNgAKkAhD/i5lYAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 22,A:{6},B:{6}"
title=" 22,A:{6},B:{6}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ADFgAMUAksTlwtMAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 23,A:{7},B:{7}"
title=" 23,A:{7},B:{7}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ABIgAEcAM15OsZIAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 24,A:{8},B:{8}"
title=" 24,A:{8},B:{8}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ABZgAI8Ad3Mh6bwAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 25,A:{9},B:{9}"
title=" 25,A:{9},B:{9}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ABpgAJcAex9glyQAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 26,A:{:},B:{:}"
title=" 26,A:{:},B:{:}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ABsgAFkAPP9Gc7EAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 27,A:{;},B:{;}"
title=" 27,A:{;},B:{;}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ABNgAIkAdL5oVQcAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 28,A:{<},B:{<}"
title=" 28,A:{<},B:{<}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ABlgAJUAeu13AXIAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 29,A:{=},B:{=}"
title=" 29,A:{=},B:{=}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ABmgANUAuu+cptkAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 30,A:{>},B:{>}"
title=" 30,A:{>},B:{>}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ACTgASsBBUqoTAAAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 31,A:{?},B:{?}"
title=" 31,A:{?},B:{?}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ACcgAHEASO3IFhoAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 32,A:{@},B:{@}"
title=" 32,A:{@},B:{@}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ADkgAJUAWolGfMUAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 33,A:{A},B:{A}"
title=" 33,A:{A},B:{A}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AFzgAZsBPUCFhSIAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 34,A:{B},B:{B}"
title=" 34,A:{B},B:{B}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AHTgAcsBVYSvxaMAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 35,A:{C},B:{C}"
title=" 35,A:{C},B:{C}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AHcgAREAmJf+YHwAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 36,A:{D},B:{D}"
title=" 36,A:{D},B:{D}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AE7gAX8BL1PJL4YAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 37,A:{E},B:{E}"
title=" 37,A:{E},B:{E}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AHLgAccBU7KPeu8AAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 38,A:{F},B:{F}"
title=" 38,A:{F},B:{F}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AHOgAYkBFLOchfoAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 39,A:{G},B:{G}"
title=" 39,A:{G},B:{G}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AC7gAT8BDxDJjdQAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 40,A:{H},B:{H}"
title=" 40,A:{H},B:{H}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ADrgAVcBG9SQg7wAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 41,A:{I},B:{I}"
title=" 41,A:{I},B:{I}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ADugARkA3CEgzsgAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 42,A:{J},B:{J}"
title=" 42,A:{J},B:{J}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AEjgAXMBKWXpkMoAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 43,A:{K},B:{K}"
title=" 43,A:{K},B:{K}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AE4gAL8Ab/wIRqkAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 44,A:{L},B:{L}"
title=" 44,A:{L},B:{L}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AHIgAQcAk0hK94UAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 45,A:{M},B:{M}"
title=" 45,A:{M},B:{M}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AETgAWsBJQmo7lIAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 46,A:{N},B:{N}"
title=" 46,A:{N},B:{N}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AEcgALEAaE/9r8gAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 47,A:{O},B:{O}"
title=" 47,A:{O},B:{O}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AHEgAQUAkrpdYdMAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 48,A:{P},B:{P}"
title=" 48,A:{P},B:{P}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ABEgAEUAMqxZJ8QAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 49,A:{Q},B:{Q}"
title=" 49,A:{Q},B:{Q}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AC4gAH8AT149/3sAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 50,A:{R},B:{R}"
title=" 50,A:{R},B:{R}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ADogAJcAW3tR6pMAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 51,A:{S},B:{S}"
title=" 51,A:{S},B:{S}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ACLgAScBA3yI80wAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 52,A:{T},B:{T}"
title=" 52,A:{T},B:{T}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ACOgAOkAxNCxwt0AAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 53,A:{U},B:{U}"
title=" 53,A:{U},B:{U}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ACIgAGcAQzJ8geMAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 54,A:{V},B:{V}"
title=" 54,A:{V},B:{V}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ABTgAQsA9dI5zhAAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 55,A:{W},B:{W}"
title=" 55,A:{W},B:{W}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ABcgAFEAOIH6JmsAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 56,A:{X},B:{X}"
title=" 56,A:{X},B:{X}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AB0gAF0APsAYWVwAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 57,A:{Y},B:{Y}"
title=" 57,A:{Y},B:{Y}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ABLgAQcA8+QZcVwAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 58,A:{Z},B:{Z}"
title=" 58,A:{Z},B:{Z}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ABOgAMkAtLyD8qwAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 59,A:{[},B:{[}"
title=" 59,A:{[},B:{[}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ABygANsAvSurj8MAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 60,A:{\},B:{\}"
title=" 60,A:{\},B:{\}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ABCgAMMAsUfq8VsAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 61,A:{]},B:{]}"
title=" 61,A:{]},B:{]}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ADegAREA2F+cmxIAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 62,A:{^},B:{^}"
title=" 62,A:{^},B:{^}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AA6gAL8Ar9nSPucAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 63,A:{_},B:{_}"
title=" 63,A:{_},B:{_}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AFngAZUBOoSyrDgAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 64,A:{NUL},B:{`}"
title=" 64,A:{NUL},B:{`}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AF5gAR8Av0A69KoAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 65,A:{SOH},B:{a}"
title=" 65,A:{SOH},B:{a}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AGngAbUBSuiAnEkAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 66,A:{STX},B:{b}"
title=" 66,A:{STX},B:{b}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AG8gAQEAkGqGy8gAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 67,A:{ETX},B:{c}"
title=" 67,A:{ETX},B:{c}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AHpgAVcA2+hRyrMAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 68,A:{EOT},B:{d}"
title=" 68,A:{EOT},B:{d}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AHsgARkAnOlCNaYAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 69,A:{ENQ},B:{e}"
title=" 69,A:{ENQ},B:{e}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AE3gAX0BLqHeudAAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 70,A:{ACK},B:{f}"
title=" 70,A:{ACK},B:{f}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AE9gAQEAsA63tn8AAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 71,A:{BEL},B:{g}"
title=" 71,A:{BEL},B:{g}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AGXgAa0BRoTB4tEAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 72,A:{BS},B:{h}"
title=" 72,A:{BS},B:{h}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AGegAXEBCIQNu1AAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 73,A:{HT},B:{i}"
title=" 73,A:{HT},B:{i}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AHlgAVUA2hpGXOUAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 74,A:{LF},B:{j}"
title=" 74,A:{LF},B:{j}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AHmgAZUBGuCD0Y8AAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 75,A:{VT},B:{k}"
title=" 75,A:{VT},B:{k}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AD2gAR0A3h5+5CUAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 76,A:{FF},B:{l}"
title=" 76,A:{FF},B:{l}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ADXgAU0BFkrGa3IAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 77,A:{CR},B:{m}"
title=" 77,A:{CR},B:{m}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AAigALMAqe/ygasAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 78,A:{SO},B:{n}"
title=" 78,A:{SO},B:{n}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AD1gAN0AnqikvEsAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 79,A:{SI},B:{o}"
title=" 79,A:{SI},B:{o}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AHCgAYMBEUj1hg0AAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 80,A:{DLE},B:{p}"
title=" 80,A:{DLE},B:{p}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AFhgARMAuXYaS+YAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 81,A:{DC1},B:{q}"
title=" 81,A:{DC1},B:{q}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AGhgATMAyRooe5cAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 82,A:{DC2},B:{r}"
title=" 82,A:{DC2},B:{r}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AGwgAPsAjY/7RNwAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 83,A:{DC3},B:{s}"
title=" 83,A:{DC3},B:{s}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AENgAOkApHziRAQAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 84,A:{DC4},B:{t}"
title=" 84,A:{DC4},B:{t}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AGFgASUAwrJeLBUAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 85,A:{NAK},B:{u}"
title=" 85,A:{NAK},B:{u}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AGGgAWUBAqmuuv8AAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 86,A:{SYN},B:{v}"
title=" 86,A:{SYN},B:{v}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AAtgAHkAbPdFPncAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 87,A:{ETB},B:{w}"
title=" 87,A:{ETB},B:{w}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AA1gAH0AbsgbFJoAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 88,A:{CAN},B:{x}"
title=" 88,A:{CAN},B:{x}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AA2gAL0ArivFqLEAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 89,A:{EM},B:{y}"
title=" 89,A:{EM},B:{y}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ACQgAGsARQRcPq8AAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 90,A:{SUB},B:{z}"
title=" 90,A:{SUB},B:{z}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ACEgAGUAQsBrF7UAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 91,A:{ESC},B:{{}"
title=" 91,A:{ESC},B:{{}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AAkgADUAKgRBVzQAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 92,A:{FS},B:{|}"
title=" 92,A:{FS},B:{|}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AFDgAYMBMSzE+7oAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 93,A:{GS},B:{}}"
title=" 93,A:{GS},B:{}}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AFwgANsAfQ5x940AAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 94,A:{RS},B:{`}"
title=" 94,A:{RS},B:{`}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AHQgAQsAlX5qSMkAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 95,A:{US},B:{DEL}"
title=" 95,A:{US},B:{DEL}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AELgAWcBIz+IUR4AAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 96,A:{FNC 3},B:{FNC 3}"
title=" 96,A:{FNC 3},B:{FNC 3}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AEOgASkA5Mo4HGoAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 97,A:{FNC 2},B:{FNC 2}"
title=" 97,A:{FNC 2},B:{FNC 2}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AArgAPcA6xWIfUkAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 98,A:{Escape B},B:{Escape A}"
title=" 98,A:{Escape B},B:{Escape A}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AAugALkArBSbglwAAAAASUVORK5CYII=" width="20" height="50"><img
alt=" 99,A:{Switch C},B:{Switch C}"
title=" 99,A:{Switch C},B:{Switch C}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AEQgAKsAZaZph30AAAAASUVORK5CYII=" width="20" height="50"><img
alt="100,A:{Switch B},B:{FNC 4},C:{Switch B}"
title="100,A:{Switch B},B:{FNC 4},C:{Switch B}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AEIgAKcAY5BJODEAAAAASUVORK5CYII=" width="20" height="50"><img
alt="101,A:{FNC 4},B:{Switch A},C:{Switch A}"
title="101,A:{FNC 4},B:{Switch A},C:{Switch A}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ABQgAEsANWhuDt4AAAAASUVORK5CYII=" width="20" height="50"><img
alt="102,A:{FNC 1},B:{FNC 1},C:{FNC 1}"
title="102,A:{FNC 1},B:{FNC 1},C:{FNC 1}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AAogADcAK/ZWwWIAAAAASUVORK5CYII=" width="20" height="50"><img
alt="103,{Start A}"
title="103,{Start A}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AC9gAMEAkBQ+aMgAAAAASUVORK5CYII=" width="20" height="50"><img
alt="104,{Start B}"
title="104,{Start B}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AC3gAT0BDuLeG4IAAAAASUVORK5CYII=" width="20" height="50"><img
alt="105,{Start C}"
title="105,{Start C}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ACxgALsAjajKmzkAAAAASUVORK5CYII=" width="20" height="50"><img
alt="106,{Stop}"
title="106,{Stop}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAABAQMAAAA/57ZEAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ADigARMA2dpJzT8AAAAASUVORK5CYII=" width="20" height="50">

Code 128 Barcode Anatomy

In the previous installment of the barcode web log, the Code 128 barcode images were revealed. At the top of the page in the navigation bar, is a link to a web page containing only the complete Code 128 set. I would like to walk you through an example of how you can use it. It would be helpful if you brought the code down to a local HTML file and are able to edit along as we proceed.

I recommend UltraEdit as a text editor from IDM Computer Solutions, Inc. They have a very intelligent editor that allows the editor to configure itself to specific behaviors based on the file type being edited. You may use whatever text editing facility that comes with your operating system. The screen captures that I have placed in this article will show text as it appears in UltraEdit, but the information is easily manipulated in any text editor.

Terminology will be important here. The final word on terminology in the world of HTML is the World Wide Web Consortium. If you are unfamiliar with basic HTML-related terminology a little time spent in this tutorial will prove valuable.

Image Tags
Figure 1 – Image Tags

Let’s review the construction of each image by turning first to Figure 1. The first thing to point out here is that the ‘<img …>’ tag itself is oddly placed. This is due to a tendency of web browsers to insert spacing (where it can do harm) between images. If each line started with the first four characters equal to ‘<img’ there would be a space between the barcodes. By design, barcode characters need spacing between them. But the space the browser inserts is not programmatically controllable. I’m pointing this out because any space that the browser inserts between bars will interfere with the barcodes’ “scanability”. Watch for this and never begin a line in the file with the ‘<img’ tag, unless it is the first bar pattern in the barcode.

Alt Attribute
Figure 2 – Alt Attribute

With that out of the way, we begin dissection of the image. The first element to discuss is the “alt=” attribute. See Figure 2. For each image, an alternate text exists. This text is placed in the location that the bar graphic would appear if graphics were turned on in the browser. You will see the alternate text when the display of graphics is turned off as part of the browser’s configuration. You may also see alternate text in place of some graphics if your internet connection is extremely slow, but you won’t see these alternates in that case. Can you guess why? Selecting an example from the file, ‘alt=” 00,A:{space},B:{space}”’ stands for the first Code 128 code which corresponds to the space character in Code A and Code B sets.

Title Attribute
Figure 3 – Title Attribute

In Figure 3, we see the “title=” attribute highlighted. It allows you to control fly-over text. When your mouse pointer hovers over a graphic, the title text for that graphic is displayed as fly-over text.

Source Attribute
Figure 4 – Source Attribute

As you can see by examining Figure 4, the ‘src=”data:image/png;base64,iV…’ attribute is quite obviously the essence of the distinguishing data that explains the bar pattern in graphical form to the browser. This data deserves further explanation. The actual source for most graphical images in a browser are files external to the displayed HTML file. The ‘src=’ normally points the browser to this file, somewhere in the file system on the web server. For the purposes of these Code 128 barcodes, however, the data is embedded within the ‘src=’ attribute itself.

The ‘src=’ attribute value is further divided by the data type (image/png) and data value (the format is base64 encoding and the remaining characters represent the actual data). If you examine the actual data closely, you’ll see that all barcodes but the Stop code have strikingly similar actual data strings. There are 14 bytes after the sequence ‘z/A’ and before the sequence ‘AAAASUV’ that vary from code to code. We will find this useful in a later installment of this column. For now, please note it as a curiosity that is not totally unexpected.

Dimensions
Figure 5 – Dimensions

Finally, after the encoded data string, we have the last two attributes modifying the ‘<img’ tag. These are the attributes that require the browser to do all of our work for us. The ‘width=’ and ‘height=’ attributes scale our tiny barcode bitmaps into something visibly obvious and scanable. These attributes are the barcode’s dimensions and for any barcode string, the dimension that controls width must be identical within the barcode.

Code 128 Mechanics

Included in the menu bar at the top of this page is a button entitled “Code 128 Barcode” You can use the web page it references to view the entire HTML Code 128 barcode. The barcode images are segregated into their own web page to enable you to copy the HTML out of the browser and into a text file.

Utilizing the barcodes in your own browser to “spell” your own messages requires you to learn a few techniques to satisfy the rules of your browser and the scanning equipment needed to interpret your barcodes.

In this article, I’ll walk you through the creation of a complete barcode that scans when the page is printed to paper. When we are finished, you will have the mechanics and source for creating an embedded barcode into any web browser. I’ll start right now calling this the ‘brute force method’ which is how I know it. It is cumbersome and prone to error and not the leanest way to do barcodes in a web browser. In future web log installments, I will demonstrate automation of this manual method via spreadsheet and JavaScript. However, I feel that it is important for you to follow along and try to manipulate the text yourself to help you understand the process.

Code 128 is a somewhat complicated symbology. There are not enough unique symbols to assign one symbol to each represented character. In order to get around this, you may consider Code 128 to contain three separate symbologies. These are distinguished by three start codes Start A, Start B and Start C. The same stop character is used for all three “sub-symbologies”.

103,{Start A} 40,A:{H},B:{H} 69,A:{ENQ},B:{e} 76,A:{FF},B:{l} 76,A:{FF},B:{l} 79,A:{SI},B:{o} 75,A:{VT},B:{k}106,{Stop}

The above barcode, in Code 128A reads “H[ENQ][FF][FF][SI]”. That’s a capital letter ‘H’, followed by an ASCII control character that meant “enquiry” to teletype devices. Unfortunately, I can’t tell you what [ENQ] did to teletypes, but if you have a Windows program that uses <Ctrl-E> to eliminate all the data on your hard disk, I would avoid scanning this barcode into any window within that application. The next two bars will generate the ASCII character [FF], which I can tell you induces a teletype to advance its output to where it thinks the top of the next page is. The ASCII control character [SI] signaled the teletype to Shift In to its native character set after it had been shifted out to an alternate character set. A barcode scanner generates a key signal equivalent to the keyboard combination <Ctrl-O> when it read [SI], which is what causes the “Open file…” dialog box to open in Microsoft Office and many other applications.

104,{Start B} 40,A:{H},B:{H} 69,A:{ENQ},B:{e} 76,A:{FF},B:{l} 76,A:{FF},B:{l} 79,A:{SI},B:{o} 76,A:{FF},B:{l}106,{Stop}

The second barcode in this section reads, quite simply, “Hello” in Code 128B. That’s more like it, right?

105,{Start C} 40,A:{H},B:{H} 69,A:{ENQ},B:{e} 76,A:{FF},B:{l} 76,A:{FF},B:{l} 79,A:{SI},B:{o} 77,A:{CR},B:{m}106,{Stop}

The last barcode in this section is Code 128C, which utilizes most of the symbols to represent a two digit numeral. This technique allows the Code 128 barcode symbology to encode numeric-only information quite compactly. The barcode above is interpreted as the 10 digit number “4069767679”. If you have a numeric field with an odd number of digits, there are ways to “shift” to Code 128A or Code 128B for one character and use those character sets’ single digit representations.

For example, if the number I wanted to represent was the 9-digit number “406976767”, I would encode it {105 40 69 76 76 101 23}.

At the end of all three of the example barcodes above, was code 106. This is the universal code for Stop, and signals a barcode reader to evaluate the barcode up to that point and convey the information to the host software.

Just before the Stop code is the checksum code. The checksum is calculated using modulo arithmetic of the running weighted total of the values in the string including the value of the Start codes. Modulo arithmetic is a fancy way of saying that the result we want from a division operation is the remainder.

Let’s use our sample barcode for the middle example (code 128B) above to explain the calculation of the checksum. Use the fly-over text to view the values of the separate images, or view the source on this page to follow along.

Source Code for the Code 128B "Hello"
Source Code for the Code 128B “Hello”

The checksum is calculated by adding the multiple of a character’s value by its position in the barcode with the exception of the start code. While the start code’s position is ‘1’, so is the position of the first character following the start code. So the start code and the first byte of data (‘H’) are multiplied by the number 1 (104×1 + 40×1 = 144). The following 4 bytes get an incrementally higher multiplier (69×2 + 76×3 + 76×4 + 79×5 = 1065). Summing it all up together we get 1209.

Now comes the fun part. We divide the result by 103 (1209 ÷ 103 = 11.737864077670). Next we throw away the portion of the result to the left of the decimal point, leaving only the fraction or remainder and multiply that by 103 (103 × 0.737864077670 = 76). The checksum character for the Code 128B string “Hello” is 76 or lowercase ‘l’.

Now it is time for your homework. Take the HTML source, and find all the letters for your first name. Start a ‘.html’ file of your own with the image line code for Start B (104). Add the image line from the HTML source file for each letter in your name. Calculate the checksum using the technique outlined above and the values embedded first in the alt and title fields of each image. Don’t forget to multiply by that positional weighting. Copy the image line for the value you calculated as the checksum and finally add the Stop (106) image line.

Open the file in your web browser, print it out, get it scanned.

Code 128 Prototype


The Microsoft Excel spreadsheet embedded just above is a user-friendly tool to produce your own barcodes. Instructions on exactly how to use it follow. In short, modify the string, adjust the bar width (I recommend minimum of 8), the bar height, switch to the “HTML” worksheet, copy every line to a text editor and save the resulting file as an ‘.htm’ or ‘.html’ file. Open the file in your browser, and print. Rinse, repeat. At this time, the spreadsheet is downloadable, with no restrictions to copy.

It is redistributable, provided you don’t take steps to make it non-redistributable. The rights are protected by a Creative Commons Attribution-ShareAlike 3.0 Unported License.Creative Commons License
Code 128 Barcode Spreadsheet Tool by Brian P. Anderson is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. The output from the tool (the embedded images you copy from the “HTML” worksheet after the string, width and height fields have been filled in) is not copyrighted in any way.

You will find that, as long as you do not change the formatting significantly, you are able to embed the contents of the “HTML” worksheet into any web page anywhere you could embed a picture. Amaze your family and friends. Create labels for your book or record collection. Place static Code 128 barcodes within your business documents and on your web forms. Have fun.

I am saving the JavaScript code that does what the spreadsheet does for a later article, but if you know JavaScript or any other programming language, feel free to use this spreadsheet as a prototype and create your own dynamic script to create barcodes of any string passed to it.

104,{Start B} 51,A:{S},B:{S} 65,A:{SOH},B:{a} 77,A:{CR},B:{m} 80,A:{DLE},B:{p} 76,A:{FF},B:{l} 69,A:{ENQ},B:{e} 85,A:{NAK},B:{u}106,{Stop}

In the introductory web log, I showed a sample barcode. Since it doesn’t cost me anything extra, I’ll reproduce it here. If you print then scan the barcode above this paragraph, your scanner will interpret that Code 128 barcode as the word “Sample”.

I went through a rather inefficient process to create the barcode. I’ll outline it now.

  1. Come up with what you want your barcode to “say”.
  2. Lookup the letters in a table to find the Code 128 equivalent values.
  3. Open the HTML page containing all Code 128 barcodes in a text editor.
  4. Copy the lines from the editor for each value into a fresh ‘.htm’ file.
  5. Calculate the checksum using modulo arithmetic.
  6. Make sure you include the proper Start, Stop and Checksum codes.
  7. Save the fresh file containing only the codes you want in your message.
  8. Open and print the file from your browser.

Quite the rigmarole, eh? If all you want to do is create Code 128 barcodes, you’ll need the ‘.htm’ file that contains all the image strings, a table that indexes the proper code to the ASCII character that you want to represent and knowledge on how to compute the checksum.

Since the calculation of the checksum, table lookup and string concatenation are all capabilities of your garden-variety spreadsheet, I’ve included a spreadsheet that simplifies the entire process. It operates by taking three inputs from the user and creating the resulting necessary text in the “HTML” worksheet.

It is really as simple as that. Click on the “switch to start” link on the Copyleft tab or navigate to the ‘Start Here’ tab. Enter whatever you want to say in cell E4 (that’s the one that originally contains the phrase “Try another string.”). Switch to the “HTML” tab or worksheet. There you will find your HTML image tags. place the cursor on the first ‘<img’ tag in the upper left corner and use the <Shift> key in conjunction with the down-arrow key to select the contents of the “HTML” worksheet. Once all of the image information is selected, copy to the clipboard and paste into your favorite text or HTML editor.

Now try this with your own information.  If you know someone with a scanner, try using it to scan at different height and width parameters.  While the height can vary within the bar, varying the width parameter will make it unreadable.

 

Leave a Reply