Generate Barcodes with Microsoft TypeScript and Barcode Web Fonts


What is ConnectCode Barcode Web Fonts?

ConnectCode Barcode Web Fonts uses the Web Open Font Format (WOFF), an optimized font format recommended by World Wide Web Consortium (W3C), to deliver industry-compliant barcodes over Hypertext Markup Language (HTML) web pages. The solution of using fonts, instead of images, to generate barcodes over the web is efficient as it only requires a single font to be downloaded to the browser and multiple barcodes can be generated thereafter.

Barcode fonts also raster to the output device and are not limited to DPI (Dots per Inch) of the computer screen or image. This allows high quality barcodes that meet the requirements of all industry specifications to be created.

The web fonts are specified in HTML web pages using the Cascading Style Sheets (CSS) @font-face feature. The following illustrates a simple example of using barcode web fonts to generate a Code 39 barcode: 

      
<HTML>
<BODY>

<STYLE TYPE="text/css" media="screen,print">
  @font-face {
    font-family: CCode39_S3;
src: url("fonts/ConnectCode39_S3.woff") format("woff");
  }

  .barcode {font-family: 'CCode39_S3'; font-size: 32px}

</STYLE>

<div id="barcode">*12345678*</div>

</BODY>
</HTML>



The ".woff" file is a W3C compliant web font provided as part of ConnectCode Barcode Web Font’s solution. The complete solution also includes barcode fonts in the Embedded Open Type (EOT) and Open Type (OTF) formats to support backward compatibility for legacy browsers.

Note:

The barcode web fonts make use of JavaScript to generate check characters and other start/stop characters, a process known as encodation. This page describes the use of TypeScript and the generated JavaScript library to perform the encodation process.

What is Microsoft TypeScript?

Microsoft TypeScript is an open source programming language developed by Microsoft to address the issues developers faced when developing large-scale JavaScript applications. It is a typed superset of JavaScript with optional static typing, and object oriented capabilities such as modules, interfaces and classes.

The static typing nature of the language enables an Integrated Development Environment (IDE) to easily support features such as code navigation, refactoring, and IntelliSense. This provides developers with a significantly more productive development environment. The object oriented nature of the language enables developers to make use of decade proven techniques such as encapsulation, inheritance and modularity for building large scale systems.

As TypeScript ultimately compiles to plain JavaScript, it works with almost all existing Javascript libraries. All these factors contribute to the inevitable adoption of TypeScript for large scale Javascript application development.

What has Typescript got to do with the Barcode Web Fonts?

Many barcode symbologies require start/stop characters and sometimes check characters to be added as part of the barcode to comply with industry specifications. Some barcode specifications also have optimizing techniques for representing the input data efficiently. This entire process of converting input data to barcode characters and adding start/stop/check characters is commonly known as encodation.

ConnectCode provides the full barcode encodation library in TypeScript (with full source code). This provides users with the flexibility to decide for themselves on the various ways of integrating the barcode solution with their applications. For example, the TypeScript libraries can be directly integrated into a TypeScript project or the generated JavaScript (from the TypeScript source) can be deployed in a HTML web page. It is also easy to include the generated JavaScript in a server side Node.js or cloud application.

Supported Browsers

ConnectCode Certified
  • Internet Explorer 8 (Windows)
  • Internet Explorer 9 (Windows)
  • Internet Explorer 10+ (Windows)
  • Internet Explorer 11 (Windows)
  • Microsoft Edge+ (Both Desktop and Mobile)
  • Mozilla Firefox 22+ (Windows)
  • Opera 11+ (Windows)
  • Google Chrome 16+ (Windows)
  • Google Chrome 16+ (Mac OS X)
  • Safari 5.1+ (Mac OS X)
  • iOS 5.0+ Mobile Browser (iOS)
  • Windows Phone OS 8.0+ Mobile Browser (WP)
  • Android 3.1+ (Honeycomb) Mobile Browser (Android API Level 12+)
  • Mozilla Firefox Phone OS 1.0
+ Current and newer versions

Please note that you may have noticed that our web fonts solution works on many more browsers. However, we currently only provide technical support for the above-mentioned browsers.

Using the generated JavaScript Library with the Barcode Web Fonts

The following shows the complete source of a HTML web page creating a Code 39 barcode. 

   
<html lang="en">
<head>

<meta charset="utf-8" />
<title>TypeScript HTML App</title>
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="barcodescripts/barcode.js"></script>
<script src="barcodescripts/code39.js"></script>

<style type="text/css" media="screen,print">
        @font-face {
            font-family: CCode39;
src: url("barcodefonts/CCode39_S3_Trial.eot");
src: local("CCode39_S3_Trial"), 
	url("barcodefonts/CCode39_S3_Trial.otf") format("opentype"), 
        url("barcodefonts/CCode39_S3_Trial.woff") format("woff");
        }

div.barcodeData {
font-weight: normal;
            font-style: normal;
line-height: normal;
font-family: 'CCode39', sans-serif;
font-size: 32px;
        }
</style>

</head>
<body>

<h2>Code39 Barcode</h2>
<center>

<div class="barcodeData">12345678</div>
<div class="humanReadableText"></div>

</center>
<script src="app-code39.js"></script>
</body>

</html>



"barcode.js" is a JavaScript base class that provides common functionalities required for barcode generation. This is a file that will always need to be included in the HTML web page.

"code39.js" is the JavaScript file that performs generation of a Code 39 barcode. For other barcodes, please use the appropriate JavaScript file.

"app-code39.js" is the file that will specify parameters such as check character inclusion during the encodation process. The source of "app-code39.js" is shown below: var Code39 = net.connectcode.Code39; 

   
window.onload = function () {
varelementBarcode = document.getElementsByClassName("barcodeData");
varelementHumanReadableText = document.getElementsByClassName("humanReadableText");
for (var x = 0; x <elementBarcode.length; x++) {
	var barcode = new Code39(elementBarcode[x].innerHTML);
	var result = barcode.encode();
	var hrText = barcode.getHRText();
	elementBarcode[x].innerHTML = result;
	elementHumanReadableText[x].innerHTML = hrText;
}
};



The following JavaScript Methods are available on all barcode classes: 


encode() - encode and generate barcode characters 
getHRText() - return the Human Readable Text of a barcode


JavaScript Application Programming Interface


Codabar 
Javascript File - codabar.js
Javascript Class - Codabar(data)
data is of type string.

Code 39
Javascript File - code39.js
Javascript Class - Code39(data, checkDigit)
data is of type string and checkDigit is of type boolean.

Code39 Ascii
Javascript File - code39ascii.js
Javascript Class - Code39ASCII(data, checkDigit)
data is of type string and checkDigit is of type boolean.

Code93 
Javascript File - code93.js
Javascript Class - Code93(data, checkDigit)
data is of type string and checkDigit is of type boolean.

Code128 A 
Javascript File - code128a.js
Javascript Class - Code128A(data) 
data is of type string.

Code128 B 
Javascript File - code128b.js
Javascript Class - Code128B(data) 
data is of type string.

Code128 C 
Javascript File - code128c.js
Javascript Class - Code128C(data)
data is of type string.

Code128 Auto
Javascript File - code128auto.js
Javascript Class - Code128Auto(data)
data is of type string.

UCCEAN 
Javascript File - uccean.js
Javascript Class - UCCEAN(data, gs1Compliance) 
data is of type string and gs1Compliance is of type boolean.
By default, gs1Compliance is true. Set the value to false to support legacy systems.

I2of5 
Javascript File - i2of5.js
Javascript Class - I2of5(data, checkDigit)
data is of type string.

Industrial 2of5 
Javascript File - industrial2of5.js
Javascript Class - Industrial2of5(data, checkDigit)
data is of type string and checkDigit is of type boolean.

ITF14 
Javascript File - itf14.js
Javascript Class - ITF14(data, checkDigit, itfRectangle)
data is of type string, checkDigit is of type boolean itfRectangle is of type boolean. itfRectangle specifies whether to use a rectangle to fully enclose the ITF14 barcode as specified in the specifications.

Modified Plessy 
Javascript File - modifiedplessy.js
Javascript Class - ModifiedPlessy(data, checkDigit)
data is of type string and checkDigit is of type boolean.

EAN13 
Javascript File - ean13.js
Javascript Class - EAN13(data, hr)
data is of type string and hr is of type boolean. 
If a font with Embedded Human Readable Text (e.g. UPCEAN_HRBS3) font is used, the hr option must be set to true.

EAN8 
Javascript File - ean8.js
Javascript Class - EAN8(data, hr)
data is of type string and hr is of type boolean. 
If a font with Embedded Human Readable Text (e.g. UPCEAN_HRBS3) font is used, the hr option must be set to true.

UPCA 
Javascript File - upca.js
Javascript Class - UPCA(data, hr)
data is of type string and hr is of type boolean. 
If a font with Embedded Human Readable Text (e.g. UPCEAN_HRBS3) font is used, the hr option must be set to true.

UPCE 
Javascript File - upce.js
Javascript Class - UPCE(data, hr)
data is of type string and hr is of type boolean. 
If a font with Embedded Human Readable Text (e.g. UPCEAN_HRBS3) font is used, the hr option must be set to true.

EXT2 
Javascript File - ext2.js
Javascript Class - EXT2(data)
data is of type string. Embedded Human Readable Text (e.g. CCodeUPCEAN_HRBS3) fonts can be applied without any further options.

EXT5 
Javascript File - ext5.js
Javascript Class - EXT5(data)
data is of type string. Embedded Human Readable Text (e.g. CCodeUPCEAN_HRBS3) fonts can be applied without any further options.

GS1 Databar 14 
Javascript File - gs1databar14.js
Javascript Class - GS1Databar14(data, linkage)
data is of type string and linkage is of type boolean. If the linkage flag is set to false, then the GS1 Databar 14 stands alone, otherwise a 2D barcode component is associated with this GS1 Databar 14 barcode.


TypeScript Source

The complete source code of the TypeScript encodation library is provided in the ConnectCode Barcode Fonts package. Compilation of the source code requires Visual Studio 2013 - 2019 (or above) with TypeScript installed. This source or the generated JavaScript code can be embedded into any application projects as long as the ConnectCode Barcode Fonts license is adhered to. A copy of the license can be found at the following:

https://www.barcoderesource.com/connectcodelicense.shtml

Project File Location

<ConnectCode Barcode Fonts directory>\Resource\TypeScript\VS2013-2019

Important Project Settings

ECMAScript 5
Allow implicit 'any' types (Off)
AMD Module system

Implementation

All barcode classes in the TypeScript library implement the interface below. 

   

module net {
    export module connectcode {

        export interface Barcode {

            encode(): string;
getHRText(): string;

        }
}

With the interface, the library can be easily integrated while applying the different object oriented programming techniques.

The "encode" method converts the input data and adds the necessary start/stop/check characters. The "getHRText" method is used after the "encode" method and returns the Human Readable Text portion of the barcode.

TypeScript Application Programming Interface


Codabar 
TypeScript File - codabar.ts
TypeScript Class - Codabar(data: string) 

Code 39
TypeScript File - code39.ts
TypeScript Class - Code39(data: string, checkDigit: boolean=false) 

Code39 Ascii
TypeScript File - code39ascii.ts
TypeScript Class - Code39ASCII(data: string, checkDigit: boolean=false)

Code93 
TypeScript File - code93.ts
TypeScript Class - Code93(data: string, checkDigit: boolean=false)

Code128 A 
TypeScript File - code128a.ts
TypeScript Class - Code128A(data: string) 

Code128 B 
TypeScript File - code128b.ts
TypeScript Class - Code128B(data: string) 

Code128 C 
TypeScript File - code128c.ts
TypeScript Class - Code128C(data: string)

Code128 Auto
TypeScript File - code128auto.ts
TypeScript Class - Code128Auto(data: string)

UCCEAN 
TypeScript File - uccean.ts
TypeScript Class - UCCEAN(data: string, gs1Compliance: boolean=true) 
By default, gs1Compliance is true. Set the value to false to support legacy systems.

I2of5 
TypeScript File - i2of5.ts
TypeScript Class - I2of5(data: string, checkDigit: boolean=false)

Industrial 2of5 
TypeScript File - industrial2of5.ts
TypeScript Class - Industrial2of5(data: string, checkDigit: boolean=false)

ITF14 
TypeScript File - itf14.ts
TypeScript Class - ITF14(data: string, checkDigit: boolean=false, itfRectangle: boolean=false)
itfRectangle specifies whether to use a rectangle to fully enclose the ITF14 barcode as specified in the specifications.

Modified Plessy 
TypeScript File - modifiedplessy.ts
TypeScript Class - ModifiedPlessy(data: string, checkDigit: boolean=false)

EAN13 
TypeScript File - ean13.ts
TypeScript Class - EAN13(data: string, hr:boolean=false)
If a font with Embedded Human Readable Text (e.g. UPCEAN_HRBS3) font is used, the hr option must be set to true.

EAN8 
TypeScript File - ean8.ts
TypeScript Class - EAN8(data: string, hr:boolean=false)
If a font with Embedded Human Readable Text (e.g. UPCEAN_HRBS3) font is used, the hr option must be set to true.

UPCA 
TypeScript File - upca.ts
TypeScript Class - UPCA(data: string, hr:boolean=false)
If a font with Embedded Human Readable Text (e.g. UPCEAN_HRBS3) font is used, the hr option must be set to true.

UPCE 
TypeScript File - upce.ts
TypeScript Class - UPCE(data: string, hr:boolean=false)
If a font with Embedded Human Readable Text (e.g. UPCEAN_HRBS3) font is used, the hr option must be set to true.

EXT2 
TypeScript File - ext2.ts
TypeScript Class - EXT2(data: string)
data is of type string. Embedded Human Readable Text (e.g. CCodeUPCEAN_HRBS3) fonts can be applied without any further options.

EXT5 
TypeScript File - ext5.ts
TypeScript Class - EXT5(data: string)
data is of type string. Embedded Human Readable Text (e.g. CCodeUPCEAN_HRBS3) fonts can be applied without any further options.

GS1 Databar 14 
TypeScript File - gs1databar14.ts
TypeScript Class - GS1Databar14(data: string, linkage: boolean=false)
If the linkage flag is set to false, then the GS1 Databar 14 stands alone, otherwise a 2D barcode component is associated with this GS1 Databar 14 barcode.