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.