Geek Answers Handbook

Web pages and barcode fonts

I am working on a small application where I can generate a list of barcodes. I have the correct fonts installed on my computer. Right now I am printing them directly on a web page and it works correctly in Chrome and IE 7, but not in Firefox. Does anyone know what Firefox will do 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: Probably I should have mentioned that at the moment this is more of a personal project, not intended to enter the world. Although I will make a decision that works, I would like something that does not include Javascript / Flash / etc.

+7
css cross-browser fonts xhtml barcode
source share
8 answers

A simpler solution could be to create a server side image for creating barcodes. Thus, you do not need to rely on the user who has the font installed, and you do not need to access the font in your html.

+3
source share

There are several barcode formats. Some of them are simple, and some can become very complex. One of the easiest to use if it suits your application is 3 out of 9 barcodes. It does not compress and has a 1 to 1 ratio with barcode characters. There are two options for this, only a numerical and advanced set that includes alpha. I will continue to consider that you can use this format. (From your sample code, this seems to be what you are using). For the simplest implementation, stick to numerical data only. Then you will need only eleven characters (0-9 and astriisk). Look at the definition of an existing font 3 of 9. (For non-commercial use, find a font called FREE3OF9. You can use it as a base for your application ...)

Further, the tedious part is more work ahead of you, but is displayed in almost any browser. If you cannot find any online, collapse the GIF image (or BMP or PNG) for each char. (Remember, to include the correct free space on the right side of char to separate it from the next char in the line!). It should be only one pixel. When it's time to display the barcode, connect the characters together as <IMG> that are next to each other. 3 out of 9 requires that the characters in the barcode be surrounded or wrapped with astrisk (this is like the astric in the font FREE3OF9) at each end. Set the height of the <IMG> high enough to fit your printout.

Thus, the client does not need to install fonts, but most barcode decoders can read the received graphic file.

Your example ( *574656* ) might look like this: 574656 http://img390.imageshack.us/img390/9168/574656vx9.png

(well, not exactly like that - it's solid graphics, not a composition of several built-in graphic images, but you get the idea)

Individual digital graphics look like this: (although they have not yet been "cleared")

* *

0 0 http://img390.imageshack.us/img390/9618/3o9bc_0.png

1 1 http://img390.imageshack.us/img390/4474/3o9bc_1.png

2 2 http://img390.imageshack.us/img390/4571/3o9bc_2.png

3 3 http://img390.imageshack.us/img390/4702/3o9bc_3.png

4 4 http://img390.imageshack.us/img390/8272/3o9bc_4.png

5 5 http://img390.imageshack.us/img390/9127/3o9bc_5.png

6 6 http://img390.imageshack.us/img390/3672/3o9bc_6.png

7 7 http://img390.imageshack.us/img390/7348/3o9bc_7.png

8 8 http://img390.imageshack.us/img390/2807/3o9bc_8.png

9 9 http://img390.imageshack.us/img390/2862/3o9bc_9.png

and 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 update my memory about how 3 out of 9 barcode characters are formatted. This graphic is originally located on this site.

+6
source share

Mozilla developers have chosen so that character fonts do not work. You can include them in the configuration as described in Obtaining Symbol Fonts to Work in Mozilla Firefox

+4
source share

In the company I'm working on, we use BarCode.dll from lesnikowski.com. It generates barcode images. It does not depend on whether the font is installed on the client computer and works with all browsers.

Hope this helps.

+3
source share

Using custom fonts on web pages is a big pain in the ass. To make things easier, you can use sIFR or the new .js font .

Edit: This was indeed 4 years ago when it was published, but was no longer. I will leave it here for posterity, but do not take it as the right answer.

+2
source share

We have the same problem in my company. Fortunately, only 1-2 people will ever need to use barcode fonts.

We found that when they received the new PC, the fonts did not work in any browsers. They needed to open a client application (for example, Word), select a barcode font and do some typing to “initialize” this font.

The best solution, I think, is to create a barcode image on the server on demand. A problem with this solution may delete old images. In my opinion, this solution requires more work, but pays off with less ongoing problems and maintenance than a client-side solution.

+1
source share

Fonts have problems because they use a browser to render. The image is better. I am using Morovia Barcode Active Lite to create barcodes from IIS.

barcode example http://www.morovia.com/activex/active-demo/barcode.asp?Symbology=7&ShowHRText=1&NarrowBarWidth=20&BarHeight=750&Message=0+07+70007+07723

+1
source share

Just do the following: http://davidscotttufts.com/2009/03/31/how-to-create-barcodes-in-php/ David created a super-simple way to implement barcodes. You will need a GD library running in MySQL. (MAMP and LAMP must already be installed)

0
source share

More articles:


All Articles