Menu
I'm working on a small app where I can generate a list of barcodes. I have the correct fonts installed on my computer. Right now I am printing them directly to a webpage and it works properly in Chrome and IE 7, but not Firefox. Does anyone know what Firefox would be doing differently than IE and Chrome?
Here is my code:
<html>
<head>
<title>Barcode Font Test</title>
<style type="text/css" media="screen">
.barcode { font-family: "wasp 39 m", verdana, calibri; font-size: 36pt; }
</style>
</head>
<body>
<div class="barcode">*574656*</div>
</body>
</html>
EDIT: I probably should have mentioned that this is more of a personal project at the moment and not meant to be released to the world. While I will take a solution that works, I would like something that does not involve Javascript/Flash/etc.
668
The font used to generate the numbers in a Barcode made by Dynamic Barcodes is OCR-B-Digits - Version 1.0.
Barcode Font | dafont.com.
The Code 39 font is the easiest barcode symbology to use in Microsoft Office.
Different barcode types may have different capabilities. For example, Code 39 is a symbology that allows printing of upper-case letters and numbers, where Code 128 fonts allow both upper and lower-case letters, numbers, ASCII characters and functions.
There are several barcode formats. Some are simple and some can get very complex. One of the easiest to use, if it fits your application, is the 3 of 9 barcode. It is not compressed and there is a 1 to 1 relation to the chars in the barcode. There are two variants of this, numeric only and the extended set that includes alpha. I'll go forward with the asumption that you can use this format. (From your sample code, it looks like that's what you are using) For the easiest implementation, stick with the numeric only. Then, you will only require eleven chars (0-9 and the astrisk). Look at the definition of an existing 3 of 9 font. (For non-commercial use, search for a font called FREE3OF9. You can use that as the base for your app...)
Next, the tedious part - more work for you up front but displays in almost any browser. If you can't find any on-line, crerate a GIF (or BMP or PNG) image for each char. (Remeber to include the proper white-space on the right side of the char to distance it from the next char in line!) It only needs to be one pixel high. When the time comes to display the barcode, string the chars together as <IMG>'s that are next to each other. 3 of 9 requires that the chars in the barcode are surrounded or wrapped with an astrisk (it's the astrisk in the FREE3OF9 font anyway) on each end. Set the height of the <IMG>'s to something tall enough to suit your printout.
This way, no font installation required at the client, but most barcode decoders can read the resulting graphic.
Your example (*574656*) might look like this:
(well, not exactly like that - it's a solid graphic instead of a composition of several in-line single graphics, but you get the idea)
The individual numeric graphics look like this: (although, these are not "cleaned up" yet)
* 
0 
1 
2 
3 
4 
5 
6 
7 
8 
9 
and the code changes might look like this:
<html>
<head>
<title>Barcode Font Test</title>
</head>
<body>
<img src="3o9cb_ast.png" alt="*"/>
<img src="3o9cb_5.png" alt="5"/>
<img src="3o9cb_7.png" alt="7"/>
<img src="3o9cb_4.png" alt="4"/>
<img src="3o9cb_6.png" alt="6"/>
<img src="3o9cb_5.png" alt="5"/>
<img src="3o9cb_6.png" alt="6"/>
<img src="3o9cb_ast.png" alt="*"/>
</body>
</html>
I used SearchFreeFonts.com as a resource to refresh my memory of how 3 of 9 barcode chars were formatted. These graphics are initially from that site.
173
A simpler solution might be to generate images server side to generate the bar codes. That way you don't have to rely on the user having a font installed and you don't have to access the font in your html.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
