8

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.

3
  • If it's a personal project why does it need to work cross-browser? Commented Oct 27, 2008 at 19:59
  • Cross-browser surely isn't a necessity. However, I primary use Firefox and did not understand why that was the only browser that was giving me problems. Commented Oct 27, 2008 at 20:17
  • I came across this collection of @Font Face Barcode Web Fonts by barcoderesource.com previously.
    – user1147075
    Commented Jan 13, 2012 at 6:20

9 Answers 9

8

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: 574656

(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 0

1 1

2 2

3 3

4 4

5 5

6 6

7 7

8 8

9 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.

0
5

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.

4

The Mozilla developers made a choice for symbol fonts to not work. You can enable them in the config as described in Getting Symbol Fonts to Work in Mozilla Firefox

1
  • This does not appear to work for Firefox 3. The author does not state which version(s) of Firefox this works for. Commented Oct 27, 2008 at 20:20
4

Much has changed since this question was originally asked. Today, it is fairly simple to use a barcode font on the web and render it directly.

Run the code snippet below to see a live example:

.barcode39 {
  font-family: 'Libre Barcode 39 Extended Text', cursive;
  font-size: 40px;
}
<link href="https://fonts.googleapis.com/css2?family=Libre+Barcode+39+Extended+Text&display=swap" rel="stylesheet">

<div class="barcode39">
 *hello world*
</div>

6
  • Did not worked in laravel with dom pdf Commented Mar 19, 2023 at 8:59
  • @PrahsantSharma are you saying that my example worked on an ordinary webpage, but that webpage did not translate to a PDF when using the laravel-dompdf package to convert it?
    – broc.seib
    Commented Mar 20, 2023 at 19:00
  • neither even worked on ordinary webpage nor to a pdf while using the laravel-dompdf package Commented Mar 21, 2023 at 5:30
  • The "Run code snippet" button above demonstrates that it should function correctly in a web page. If the laravel-dompdf package does not convert it, that is a separate issue from what the OP posted about.
    – broc.seib
    Commented Mar 21, 2023 at 16:25
  • I pasted in complete blank html page and still not worked, don't know how it is working here but not in a new html page. Commented Mar 23, 2023 at 4:31
3

At the company i'm working at now we use BarCode.dll of lesnikowski.com. It generates barcode images. It doesn't depend whether or not the font is installed on the client pc and works with all browser.

Hope this helps.

0
2

Using non-standard fonts on web pages is a big pain in the ass. To make it easier you can use sIFR or the new typeface.js.

Edit: This was valid 4 years ago when it was posted, but isn't anymore. I'll leave it here for posterity, but don't take it as a correct answer.

2
  • That's right, but it is not the problem that rodey experiences. He said he has that font installed on his computer and the question makes it seem that the tests he did were performed on his local machine.
    – hangy
    Commented Oct 27, 2008 at 18:31
  • Well, even with that being the case, my answer might benefit others who want a complete public-facing solution. Commented Oct 27, 2008 at 20:10
1

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

We have found that when they received new a PC, the fonts didn't work through any browsers. They had to open up a client application (like Word), choose a barcode font, and do some typing to "initialize" that font.

The best solution, I think, is to create a barcode image on the server on demand. The problem with this solution could be cleaning up old images. This solution requires more work up-front but pays off with less on-going issues and maintenance than the client side solution, in my opinion.

0

Fonts tend to have problems because it relies on the browser to do the rendering. Image is better. I use Morovia Barcode Active Lite to create barcodes from IIS.

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

1
  • No link leads to solution Commented Mar 19, 2023 at 8:57
-1

Just do this: http://davidscotttufts.com/2009/03/31/how-to-create-barcodes-in-php/ David created a super-simple way to implement bar codes. You will need the GD library running in MySQL. (MAMP & LAMP should already have this installed)

1
  • link leads to blank page Commented Mar 19, 2023 at 8:58

Not the answer you're looking for? Browse other questions tagged or ask your own question.