Other Barcodes

Pick a kind of barcode in the Splash tab and type what it holds. Tap to scan it.

Barcodes came before QR codes. Code 128 packs any plain text into bars and spaces one to four modules wide, with a check symbol worked out modulo 103. EAN-13 and UPC-A hold the numbers on things in shops, with a check digit from weights of 3 and 1, and quiet zones of blank space either side.

Here those three are drawn by Splashery's own code, and Data Matrix and Aztec, two square codes of their own, come from the open-source ZXing library. Tap to sweep a scanner's red line across. The splash reads its own picture back to check that it scans.

Code 128, EAN-13 and UPC-A are drawn by Splashery's own code; their bar patterns, check digits and quiet zones match the published rules and worked examples, our bars match an independent encoder's bar for bar, and every symbol reads back in an independent reader. Data Matrix and Aztec come from the open-source ZXing for JavaScript library and read back in a second, independent reader.

1. Correct

   Code 128's check symbol is the start value plus each symbol's value times its position, modulo 103.¹

   The encoder sums the start value and each value times its place and takes the remainder by 103; the test reproduces Wikipedia's worked example (PJJ123C in code set A gives 54) and a code set C example.

2. Correct

   Code 128's 107 patterns are each six bars and spaces adding up to 11 modules, and the stop pattern seven adding up to 13; start B is 211214 and the stop 2331112.¹

   The table holds each pattern's widths; the test checks every sum, that all 107 differ, and that whole symbols equal BWIPP's (bwip-js) bar widths where the choice of code sets has one obvious form.

3. Correct

   Code 128 needs a quiet zone of at least 10 modules on each side.¹

   Every Code 128 symbol gets 10 blank modules either side.

4. Correct

   The EAN-13 and UPC-A check digit makes the weighted sum (weights 3 and 1, from the right) a multiple of 10.²³⁴

   gs1Check weights the digits 3, 1, 3, … from the right and returns what brings the sum to a multiple of 10; the test reproduces Wikipedia's worked examples (400638133393 gives 1; UPC-A 03600029145 gives 2; ISBN 978-0-306-40615 gives 7) and rejects a wrong check digit.

5. Correct

   EAN-13 encodes its first digit in the pattern of L and G codes of the left half, then six R codes, between guard bars 101, 01010 and 101: 95 modules.²

   eanBits builds the 95 modules from the L, G and R tables and the first digit's parity pattern; the test checks the bars equal BWIPP's for three numbers and that zxing-cpp reads them back.

6. Correct

   A UPC-A code is an EAN-13 code with a leading 0, and needs a quiet zone of at least 9 modules each side.³

   upcA encodes 0 followed by its 12 digits as EAN-13 and adds 9 blank modules either side; the test checks its bars equal BWIPP's UPC-A bars.

7. Not yet checked

   EAN-13 needs a quiet zone of 11 modules on the left and 7 on the right.

   ean13 adds 11 blank modules before the symbol and 7 after it.

8. Close

   The default numbers are not any real product's: EAN-13 2001234567893 and UPC-A 401234567893 are in ranges kept for a store's own use.³²

   The defaults start with 200 (EAN-13) and number system 4 (UPC-A).

9. Correct

   The Data Matrix and Aztec symbols are real and readable.⁵

   They come from ZXing for JavaScript's DataMatrixWriter and AztecCodeWriter (Data Matrix forced square); the tests read them back with zxing-cpp, an independent implementation, and the splash reads its own picture with zxing-js.

1. 1Code 128, Wikipedia
2. 2International Article Number, Wikipedia
3. 3Universal Product Code, Wikipedia
4. 4ISBN, Wikipedia
5. 5ZXing for JavaScript, GitHub, zxing-js

Simplified

The human-readable line under Code 128 uses Splashery's small 5 × 7 bitmap letters; characters the font lacks show as a middle dot (the bars still hold them).

Simplified

The splash draws EAN-13 and UPC-A bars 60 modules tall and the digits in the usual places; the exact printed heights and the OCR-B type of real labels are not copied.

Made in Splashery. Its code is MIT.

This link opens it in the Playground. To put it on your own page, add the element and one script tag. Every option.