Enterprise Software

Create barcodes on your Web pages using VML

Vector Markup Language (VML) gives developers the ability to create drawing objects to rich documents. Check out how Phillip Perkins uses VML to add another dimension to documentation by creating Code 3 of 9 barcodes to his document.

Dynamic HyperText Markup Language (DHTML) is now the standard for presentation in applications, primarily because you can create rich documents with minimal effort. Cascading Style Sheets (CSS) gives users the ability to further control the output of these documents. And, Vector Markup Language (VML) lets you add the ability to create drawing objects to these documents; while, Scalable Vector Graphics (SVG) is the standards approach to creating drawing objects.

See how I use VML to add another dimension to documentation by creating Code 3 of 9 barcodes to my document. (Note: The code in this article will work in Internet Explorer 5.0 and above.)

Understanding the Code 3 of 9 specification

Code 3 of 9 (or Code 39) is a specification for creating barcode symbols based on a 43 character alphabet. Each character is symbolized by a series of 5 bars and 4 spaces, which is a total of 9 elements. Of these 9 elements, 3 of the bars or spaces are wide while the other 6 are narrow. This is what gives the code its name (3 of 9 of the bars/spaces are wide).

Each symbol can be characterized by a pattern of narrow and wide elements such as wnnnnwnnw (which is the pattern for the character A). The 43 characters that are representable by Code 3 of 9 are: 0 through 9, A through Z, - (dash), . (period), $, /, +, %, and space. An asterisk marks the beginning and end of the barcode series. You can place a checksum at the end of the character series as a guarantee that the symbol is read appropriately. This is the remainder of the sum of the numeric equivalent of the characters divided by 43. Other details of the specification include bar/space width and symbol height. (I'm going to assume that I can represent one narrow element with a 1-pixel wide line/space and a wide element with a 3-pixel wide line/space.)

I'll place the barcode, which will consist of a series of <v:line> elements, in a <DIV> element. Instead of specifying the individual stroke weights of each line, I'll create the illusion of a wider line by adjoining consecutive lines in order to overcome the "interesting" math involved with stroke weights and positioning. The result is a nice, clean line and a nice, clean space. Listing A contains the code to create the barcode in the <DIV>.

In this simple example, the <BUTTON>'s onclick event handler runs the genBarCode() function. I pass the string 'CODE3OF9' as the content of the barcode symbol to create. After a bit of initialization, the checksum character is appended to the character string. The start and stop markers ("*") are prepended and appended to the character string too. Each character is used to get the pattern for the symbol. An "n" is appended to each character pattern string (except the last character) to create the narrow space element between each symbol. The pattern string is then stepped through to create the series of narrow and wide spaces/bars. If the increment is a 0 modulus of 2, a bar is created. Otherwise, the position of the next bar is increased by the stroke weight.

Keep your developer skills sharp by automatically signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday.

Editor's Picks