Barcode Tool Guide

The barcode tool makes the linear barcodes found in shops and warehouses, checks what you type as you type it, and understands barcodes that carry data inside them. This guide covers each part of it, from choosing a symbology to writing layouts of your own.

Making a barcode

Choose Make, pick a symbology, and type the data. The barcode redraws on every keystroke. When the data cannot be encoded, the field is marked and a line under it says why. When you supply a check digit that is wrong, the tool shows the right one and offers a button that puts it in.

The symbologies, and what each takes, are these:

Symbology Used for Data
EAN-13 Products worldwide 12 digits, or 13 with the check digit
EAN-8 Small packages 7 digits, or 8 with the check digit
UPC-A Products in North America 11 digits, or 12 with the check digit
UPC-E Small North American packages 6 digits, 7 with the number system (0 or 1), or 8 with the check digit
GS1-128 Logistics labels and data-carrying codes Element strings such as (01)09501101530003(17)271231(10)LOT42A
ITF-14 Shipping cases 13 digits, or 14 with the check digit
Interleaved 2 of 5 Numeric codes printed by a store or warehouse An even number of digits
Code 128 Internal labels Any printable ASCII character
Code 39 Older internal labels Capital letters, digits, and - . space $ / + %
Codabar (NW-7) Membership cards, coupons, libraries Digits and - $ : / . +, between start and stop characters A to D
QR Code Links, receipts, mobile coupons Any text, including Unicode

Some symbologies have options under the data field. Interleaved 2 of 5, Code 39 and Codabar can add a check character, Codabar lets you choose its start and stop characters, and ITF-14 draws its bearer bars unless you turn them off. For an EAN-13, the line under the barcode names the country or range of its GS1 prefix, so 480 reads as the Philippines and 20 to 29 as in-store codes.

A QR Code's option is its error-correction level. L recovers about 7% of a damaged symbol, M about 15%, Q about 25% and H about 30%, and each step up makes the symbol larger for the same data. The line under the symbol gives its version (1 to 40), its size in modules and the level. With the structure highlight on, the three finder patterns get a colored frame. The frame sits on light modules only, so the code still scans with it showing. The QR encoding itself comes from Project Nayuki's QR Code generator library (MIT License).

Highlights

The check boxes under the barcode control what is marked. Check digits colors the check characters purple. Guards, start and stop marks the fixed patterns at the ends and in the middle of the symbol. With a layout, Field colors gives each field its own color. The marks are bands drawn below the bars and colors on the printed digits; the bars themselves stay black, because a scanner sees red bars as white and would not read them.

Saving and links

Save SVG saves the barcode sized in millimetres, at the module width you choose. For EAN and UPC codes, 0.33 mm is the nominal size, and the standard allows from 80% to 200% of it. Save PNG saves an image at 300 dots per inch. Saved barcodes leave out the highlights unless you tick Highlights in downloads, so they are ready to print and scan. Copy link copies an address that reproduces the barcode exactly, layout and field values included.

Both open the site's file dialog, which saves into your home directory (~) on this site, the same files the terminal, Files and the Editor see. Download instead, beside the dialog's buttons, puts the file on your computer. Your home directory lives in this browser and holds only text, so an SVG can be kept there but a PNG is always downloaded.

Layouts: data inside a barcode

Many retail barcodes carry more than a single number. An in-store code for loose produce holds an item and a price, a coupon holds a discount type and a value, and a receipt holds a store, a register, a date and a transaction. A layout names those fields. With one chosen, the tool shows a box for each field, builds the barcode from them, colors each field in the symbol, and writes a line explaining the result.

The Layout menu lists six demonstration layouts. They are invented for this guide, but each follows a common pattern: a price-embedded item, a weight-embedded item, a GS1-128 logistics label, a receipt lookup code, a Codabar membership card, and a store coupon.

The layout format

A layout is JSON. A file holds a list of them, and the tool's editor works on one at a time. This is a complete file with one layout: 

{
  "format": "pc-barcode-layouts",
  "version": 1,
  "layouts": [
    {
      "id": "shelf-price",
      "name": "Shelf price label",
      "symbology": "ean13",
      "description": "An in-store code carrying a department, an item and a price.",
      "explain": "Department {dept:meaning}, item {item}, at {price}.",
      "fields": [
        { "id": "prefix", "name": "Prefix", "type": "fixed", "values": ["24"], "color": "blue" },
        { "id": "dept", "name": "Department", "type": "enum",
          "values": { "1": "produce", "2": "bakery", "3": "deli" }, "color": "orange" },
        { "id": "item", "name": "Item", "type": "number", "length": 4, "color": "gray" },
        { "id": "price", "name": "Price", "type": "decimal", "length": 5, "decimals": 2, "color": "green" }
      ],
      "sample": { "dept": "2", "item": "318", "price": "4.75" }
    }
  ]
}

Fields follow one another in order, and each field's length decides where the next one starts, so a layout never states positions. The tool shows positions counted from 1. For EAN, UPC and ITF-14 layouts the fields cover the data before the symbology's own check digit, which the tool adds.

A layout has these keys:

Key Meaning
id Letters, digits and hyphens, unique among your layouts.
name The name shown in the menu.
symbology One of ean13, ean8, upca, upce, gs1-128, code128, itf, itf14, code39, codabar or qr.
fields The fields, in order.
description Optional text shown above the fields.
explain Optional template for the line under the barcode.
options Optional symbology options, such as {"start": "A", "stop": "B"} for Codabar or {"check": true}.
hri Optional. The printed line: "data" (the default), "none", or a template.
sample Optional field values filled in when the layout is chosen.

Every field has an id, a name and a type. It may also have a color (blue, gray, orange, green, purple, teal, red or gold) and a description. These are the types:

Type What it holds Keys
fixed One of a set of literal values, such as a prefix. The first is the default. values
number Digits, padded with zeros on the left to its length unless pad is "none". length, pad
text Characters the symbology allows, of an exact length or up to a maximum. Only the last field may vary in length, except in GS1-128. length or maxLength
date A calendar date, checked for real, in a format built from dd, mm, yy and yyyy. format
decimal A number with implied decimal places, typed as 12.50 or as raw digits. length, decimals, prefix, suffix
enum A code from a table, each with a meaning. values, an object of code to meaning
check A check digit the tool computes over other fields. algorithm, over

A check field's algorithm is one of these:

  • gs1-mod10 is the EAN and UPC method.
  • luhn is used on payment and membership cards.
  • mod11 uses weights 2 to 7 from the right and writes a result of 10 as 0.
  • 7dr is the remainder after dividing the number by 7.
  • 7dsr is 7 less that remainder, so a remainder of 0 gives 7.
  • gs1-price4 and gs1-price5 are the price check digits of the GS1 General Specifications (sections 7.9.3 and 7.9.4), which guard a four- or five-digit price inside a variable-measure code. Each covers exactly that many digits.

By default a check covers every earlier field. List field ids in over to cover only some, and these may come after the check, since the GS1 price check digit stands in front of the price it guards. The demonstration layout Price with a price check digit shows how that looks.

In an explain template, {price} is a field's formatted value, {price:raw} is its encoded digits, and {dept:meaning} is an enumeration's meaning. An hri template takes {field} and {field:unpadded}, the latter dropping leading zeros, which suits a store number printed without them.

GS1-128 layouts

In a GS1-128 layout, a field with an ai key starts a new element string with that Application Identifier, and a field without one continues the element before it. That lets a GTIN be split into its digits and its check digit: 

{ "id": "gtin",  "name": "GTIN", "type": "number", "length": 13, "ai": "01" },
{ "id": "check", "name": "GTIN check", "type": "check", "algorithm": "gs1-mod10", "over": ["gtin"] },
{ "id": "best",  "name": "Best before", "type": "date", "format": "yymmdd", "ai": "15" }

The tool inserts the separators GS1 requires after variable-length elements. Company-internal AIs 91 to 99 are accepted with any structure you give them.

Reading a barcode back

Choose Read and paste a scanned value. Every layout whose shape fits is tried: its length must match, and its fixed fields must match exactly. Each match is shown as a table of fields with their positions, encoded values and meanings, together with any problems, such as a check digit that does not add up or a date that does not exist. The best match comes first, and Open in Make loads it into the fields.

Without a matching layout, the tool still says what it can. It checks an EAN-13 and names its prefix, recognizes a UPC-A, an EAN-8 or a UPC-E, and lays out GS1 element strings with each AI named and its dates and weights formatted. Paste GS1 data with the AIs in parentheses.

Your own layouts

The Layout menu chooses a layout. The commands for making and keeping layouts are in the tool's window menu, at the left of its title bar, or on the tool's own page in the Commands menu above it.

New layout opens the layout editor beside the barcode with an empty layout, and Edit opens it with the layout on show. A demonstration can't be changed, so editing one makes a copy. While the editor is open, the form on the left shows the layout you are editing, so you can type test values into its fields and watch the barcode change. Each field is a row you can open to change its type, length and color, or to move or delete it. Save layout checks the layout, lists anything wrong, and refuses an identifier another layout already has. Cancel puts the tool back as it was.

New layout from JSON and Edit this layout as JSON let you write the format by hand instead. Save this layout as saves the chosen layout as a file, and Save all layouts as saves every layout, the demonstrations included, as one file. Open layouts reads such a file back, skipping the demonstrations it already has. All three use the site's file dialog, with your home directory first; From your computer and Download instead, beside its buttons, work with files on your own disk.

Your layouts are kept in the file ~/barcode-layouts.json in your home directory, an ordinary file that you can open in the Editor, copy or delete like any other; the Barcode Scanner reads the same file. The tool writes it the first time you save a layout, and a change you make to it in the Editor or the terminal reaches an open tool straight away. If the file can't be read, the tool says why and leaves it alone until you put it right. Your home directory lives in this browser, so the layouts stay when you close it, but they belong to that one browser on that one device, and clearing the site's data or using Forget this browser's data in the settings removes them. This site never receives them.

Keeping layouts in a file

In Edge and Chrome, the tool can also keep your layouts in a JSON file on your own disk. Create a linked layouts file saves them to a new file, and Link an existing layouts file links one you have, adding in any layouts that were only in your home directory. From then on every change is written to that file. Put it in a folder that syncs, such as OneDrive, and the same layouts follow you to each computer. After the browser restarts it asks once for permission to use the file again; the tool shows a Reopen button for that. Unlink stops writing to it and leaves the file where it is.

When two computers change the same file at once, the last one to save wins, so edit layouts on one machine at a time.

Read the comments on this article