JavaScript Font Encoders

  • JavaScript Font and Encoder with GS1-Code128 ExampleGenerate barcodes with fonts from a single native JavaScript file.
  • Supports Linear and 2D barcode symbologies including Code 128, GS1, Code 39, Codabar, MSI, ITF, USPS IMb, UPC, EAN, PDF417, Data Matrix & QR Code.
  • Includes compressed and uncompressed source code.
  • May be used with JQuery and supports optional HTML Element ID references.
  • Compatible with Apache Cordova and Adobe PhoneGap, including the use of Cordova in Visual Studio.
  • Each symbology is provided in a single JavaScript file to minimize file size and load times.
  • Barcode options may be changed within the top of the referenced .js file or as function parameters.
  • May be used in any application compatible with JavaScript and fonts, including WOFF Barcode Web Fonts.
  • Includes advanced support for GS1, ISBT, and HIBC.
  • Included with any Developer License to any of the IDAutomation Barcode Font Packages.

Index:

Order Fonts

(JavaScript Font Encoders listed in Chart 1 are provided with all Developer License to any of the IDAutomation Barcode Font Packages.)

JavaScript Integration

The JavaScript Font Encoders listed in Chart 1 are provided with a developer license to any of the IDAutomation Barcode Font Packages.

  1. Extract the files from the compressed zip file.
  2. Several files are provided for different barcode types (Symbologies) and purposes. Use the file that represents the symbology that is needed. This tutorial will use the Code 128 symbology, which is in the file named IDAutomation_Uni_C128.js. HTML example files are also provided and may be referred to as necessary.
    Two files are also provided for various purposes:
    1. symbology.js - the primary compressed file to use in production.
    2. symbology.uncompressed.js - the uncompressed source code of the primary file.
  3. Open the application or IDE where the barcode is to be integrated.
  4. Add the following line at the top of the file just before the </head> line to load the appropriate JavaScript file:
    <script language="JavaScript" src="IDAutomation_Uni_C128.js"></script>
  5. Add a script where the barcode is to appear, which is the file name without the ".js":
    <script type="text/javascript">
    document.write(IDAutomation_Uni_C128(DataToEncode))
    </script>
  6. Modify "DataToEncode" to equal what is to be encoded in the barcode. This may be accomplished with a variable, a dynamically generated webpage, or another product such as JQuery, which is used in this code example:
    <div id="Barcode_Font"> </div>
    <script type="text/javascript">
       $(document).ready(function() {    
       $("#encode").click(function(e) {      
       barcodetext = $("#datatoencode").val();     
       $("#Barcode_Font").html(IDAutomation_Uni_C128(barcodetext));   
    }); 
       });
    </script>
    JQuery is also used with the HRI object from this product in the GS1 Element String HRI Verification Tool.
  7. Display the result with the required barcode font to generate the correct barcode. This may be accomplished using CSS and Web Fonts or using CSS with locally installed fonts. For example, the following CSS and HTML format data to the font:
    <script language="JavaScript" src="IDAutomation_Uni_C128.js"></script>
    <style type="text/css">
    .barcodefont1 {font-family: "IDAutomation Uni M", "IDAutomationGS1 46"; font-size: 200%; }
    </style>
    ...
    <span class="barcodefont1"> <script type="text/javascript">
    document.write(IDAutomation_Uni_C128("www.idautomation.com"))
    </script> </span>
    ...
  8. Print or display the result to verify that the barcode is generated. If a scanner is needed to verify barcodes, IDAutomation offers several barcode scanners. It is normal to view some distortion of the barcode on the screen because of low screen resolution. However, the barcodes should be accurate when printed or viewed on high-resolution screens.

JavaScript Encoders & Required Barcode Fonts

Chart 1. Available JavaScript Font Encoders.

Linear Font Encoders
Barcode Type JavaScript Font Encoder Required Font
Code-128 (Auto Mode) IDAutomation_Code128.js IDAutomationC128
Code-128 Sets IDAutomation_Code128a.js
IDAutomation_Code128b.js
IDAutomation_Code128c.js
IDAutomationC128
Code-39 IDAutomation_Code39.js, IDAutomation_Code39Mod43.js IDAutomationC39
Code-93 IDAutomation_Code93.js  IDAutomationC93
Codabar IDAutomation_Codabar.js IDAutomationCB
EAN-13 IDAutomation_EAN13.js IDAutomationUPCEAN
EAN-8 IDAutomation_EAN8.js IDAutomationUPCEAN
Interleaved 2 of 5 IDAutomation_ITF.js, IDAutomation_ITFMod10.js IDAutomationI25
UPC-A IDAutomation_UPCa.js IDAutomationUPCEAN
UPC-E IDAutomation_UPCe.js IDAutomationUPCEAN
USPS IntelligentMail (IMb) IDAutomation_USPS_IMb.js IDAutomationPOSTNET
or IDAutomationIMB
not applicable IDAutomation_SpliceText.js not applicable
not applicable IDAutomation_GS1_HRI.js not applicable
Universal, GS1, and DataBar Font Encoders
Barcode Type JavaScript Font Encoder Required Font
Code-128 IDAutomation_Uni_C128.js, IDAutomation_Uni_C128a.js, IDAutomation_Uni_C128b.js, IDAutomation_Uni_C128c.js IDAutomation_Uni
or IDAutomation_GS1
Code-39 IDAutomation_Uni_C39.js IDAutomation_Uni
or IDAutomation_GS1
Codabar IDAutomation_Uni_Codabar.js IDAutomation_Uni
or IDAutomation_GS1
Interleaved 2 of 5 IDAutomation_Uni_ITF.js IDAutomation_Uni
or IDAutomation_GS1
MSI / Plessey IDAutomation_Uni_MSI.js IDAutomation_Uni
or IDAutomation_GS1
USPS IntelligentMail IDAutomation_USPS_IMb.js IDAutomation_Uni
2D Font Encoders
Barcode Type 2D Function Methods | Notes Required Font
Data Matrix IDAutomation_DataMatrix.js IDAutomation2D or IDAutomationDMatrix
QR-Code IDAutomation_QRCode.js IDAutomation2D
PDF417 IDAutomation_PDF417.js IDAutomation2D or IDAutomationPDF417

Barcode Properties

Barcode properties may be modified within the top of the referenced .js file or by a function parameter.

Top of the .js file Example:
Top of the .js file Modification Example

Function Parameter Example:
Function Parameter Modification Example

The following is an explanation of popular properties:

  • ApplyTilde - Processes the tilde character for special functions such as encoding functions, encoding ASCII characters directly,  or generating GS1-128, GS1-DataMatrix, or GS1-QRCode symbols.
  • IDElement - is an optional parameter that can place the returned image into the referenced div id element.
    <div id="html5_barcode_font"></div>
    ...
    <script type="text/javascript">
       document.write(IDAutomation_Uni_C128.js("123456789012",'html5_barcode_font'));
    </script>
  • HTML - returns <br> for carriage returns in 2D symbologies when set to "1", this is the default setting. Set to "0" to use CR & LF for carriage returns.
  • GS1 Encoding Options - The FNC1 may be encoded with ~202 or the ASCII 202 character Ê in GS1-128 and with ~1 in GS1-DataMatrix or GS1-QRCode when the tilde option is enabled. The FNC1 may also be encoded by surrounding the AI in parentheses.
  • HRI Options - When using IDAutomation_GS1_HRI.js, multiple GS1 fixed-length element strings are automatically displayed.
    Examples:
    GS1-128 encoding: ~20201095011010209171719050810ABCD1234
    GS1-128 JavaScript Example
    GS1-DataMatrix encoding: ~101095011010209171719050810ABCD1234
    GS1-DataMatrix JavaScript Example
  • Tilde Options - enabling ApplyTilde or ProcessTilde will allow the following calculation options where ?? is the number of digits before the tilde to include in the calculation:
    • ~m?? calculates a MOD10 check character, commonly used for GS1.
      Example: ~2020000801234999999999~m17  HIBC JavaScript Example
      Encodes: (00) 008012349999999997
    • ~f?? calculates a MOD43 check character, commonly used for HIBC.
      Example: +A123BJC5D6E71~f14
      Encodes: +A123BJC5D6E71G
    • ~i?? calculates a MOD37-2 check character, commonly used for ISBT.
      Example: G123412654321~i13
      Encodes: G123412654321L
    • ~k?? calculates a MOD37-2 check character in brackets, commonly used for ISBT manual entry. This option will not encode the check character within the barcode.
      Example: G123412654321~k13
      Encodes: G123412654321 [L]

Order Fonts

(JavaScript Font Encoders listed in Chart 1 are provided with any Developer License to any of the IDAutomation Barcode Font Packages.)

Support

Free product support may be obtained by reviewing the knowledgebase articles documented below and by searching the resolved public forum threads. Priority phone, email, and forum support are also provided via several contact methods within 30 days of purchase. Support after this complimentary period may be received with an active one-year Level 2 Support & Upgrade Subscription for the corresponding font package.