Skip to content

EAN

Jump to bottom
Bunlong VAN edited this page Jun 5, 2020 · 1 revision

About EAN

EAN comes in a variety of forms, most commonly used is EAN-13 (GTIN-13) that is used on world wide to marking the identity of products.

useBarcode supports the formats EAN-13, EAN-8 and UPC as well as the barcode addons EAN-5 and EAN-2.

Supported modes

useBarcode("#barcode", "5901234123457", {format: "EAN13"});
useBarcode("#barcode", "123456789999", {format: "UPC"});
useBarcode("#barcode", "96385074", {format: "EAN8"});
useBarcode("#barcode", "54495", {format: "EAN5"});
useBarcode("#barcode", "53", {format: "EAN2"});

Addon EAN-5 / EAN-2

EAN-5 and EAN-2 is addon barcodes an is always used combined with EAN-13 or EAN-8. The advanced useBarcode syntax can be used to add these addons to the barcodes.

useBarcode("#barcode")
  .EAN13("1234567890128")
  .blank(20)  // An blank creates a space between the barcodes
  .EAN5("12345", {height: 85, textPosition: "top", fontSize: 16})
  .render();

EAN-13 + EAN-5

flat options for EAN-13, EAN-8 and UPC

EAN-13, EAN-8 and UPC barcodes is most often used with "guard bars". If you don't want these and instead a flat rendering you can specify the flat option and skip the guard bars.

useBarcode("#barcode", "1234567890128", {
  format: "ean13",
  flat: true
});

flat EAN-13

lastChar options for EAN-13

EAN-13 is sometimes printed with with a character after the barcode, most common is the > character. This is supported in useBarcode with the lastChar option.

useBarcode("#barcode", "1234567890128", {
  format: "ean13",
  lastChar: ">"
});

lastChar example

OCR-B font

When creating an EAN or UPC barcode it is standard to use the OCR-B font. Most variants of this font is not free. There are free versions but none that (we have found) that have the correct license to be able to include in the useBarcode repository.

When using a custom font with useBarcode you can specify the font with @font-face and then do the useBarcode call. Note that the font has to be loaded before the generation can be made correctly.

useBarcode("#canvasBarcode", "123456789012", {
  format: "EAN13",
  font: "OCRB",
  fontSize: 18,
  textMargin: 0
});

Barcode with OCR-B font

Check digits

EAN-13, UPC and EAN-8 all have the last digit being a check digit to verify the content that is encoded. This digit is considered a part of the number and useBarcode will verify it before generating the barcode.

If the last digit of these barcodes are not specified it will automatically be calculated and added.

useBarcode("#barcode", "96385074", {format: "EAN8"});
// These two are generating identical barcodes
useBarcode("#barcode", "9638507", {format: "EAN8"});
Clone this wiki locally