A colorful grey world

Barcodes and SVG

Recently, I looked in possible solutions with a friend to generate “3of9 barcodes”. He wanted no dependency aside PHP itself, which excluded GD. The point is to print barcodes, not dump them to the screen, and so required a printable solution.

So I tought about sIFR: simply dump a good font (1, 2, …) in a flash animation.

Of course that failed because of flash’s inerent inability to be printed (seems to be rendered at the browser’s screen resolution, then scaled).

The next thing I looked into, was SVG.

It actually works pretty well, in some browsers:

• Google Chrome can’t show or print it: missing thin lines;
• Internet Explorer requires Adobe’s SVG plugin, will be discontinued in January 2009, but it prints OK;
• The bounding box has a fixed size and it’ll scale the render to fit it (keeping the proportions);
• IE won’t scale correctly if we just specify the height or the width;
• inlined SVG in IE is a pain (everything with IE is always a pain, so it’s consistent with itself);
• There seems to be a new player: RENESIS, still in development, haven’t toyed with it;
• Firefox is just perfect;
• Safari is OK, but…
• it seems to cache SVG in a very weird way;
• the bounding box has a fixed size and it’ll clip the render to the box;
• Opera is perfect on screen, but renders it in a web size then scales it when printing, and so is unusable.

Here’s a sample, with the styles “border: 1px solid #bbb;“, which will render OK in Firefox and Opera:

Each character has 9 lines of which 3 are thicks, plus a thin line at the end. The render I made has thick lines 3 times larger than thin ones, so to render “*GREYWORLD.NET*”, we have 240 units wide ( (3 * 3 + 7 * 1) * 15 chars).

The render is at “1.5cm” of height, corresponding to 40 units, so it’ll be 9.0 cm wide.

Here’s the same sample, with “height: 1.5cm; width: 9.0cm”, which should render OK in safari and IE:

Still missing Google Chrome… the barcode is totally unusable: the thin lines won’t appear. Anyway, I have other things to do so I won’t look into this.

You can get/see the code here, but be warned: nothing of this has been tested and this is mostly a quick hack, not proper coding.

• Code39.php: colorized, plain;
• barcode_svg.php: colorized, plain

The code is based on the description of 3of9 found here.

I’ve also looked at Pear’s Image_Barcode implementation (real well done, like all Pear libraries (sarcasm: it fills the canvas with white, then draw both black and white lines, and if the thick line is defined to be 3 pixels wide, it’ll draw 3 black/white lines in a row instead of a rectangle)).

Anyway, ultimately, this was rejected because of the dependancy on external plugins in IE (hey IE, SVG is standard, all the world supports it, why don’t you? And btw, why won’t you support CSS correctly? :P).