EAN-13 barcode in a PDF: sizing and quiet zones

Where the symbol comes from

This API renders HTML to PDF. It does not generate barcodes, so the EAN-13 symbol itself is produced by an encoder in your own stack and placed in the markup, either as inline SVG or as a data URI. That split matters more than it sounds: the encoders are mature and correct, and almost every barcode that will not scan failed for a layout reason rather than an encoding one. Everything below is about the layout half.

What it can encode

Exactly thirteen digits and nothing else. Twelve are data, made up of a prefix, a company number and an item reference, and the thirteenth is a check digit. There is no variable length, no letters and no way to add a field.

The check digit, and who computes it

The thirteenth digit, a modulo 10 check over the first twelve with alternating weights of 1 and 3. It is part of the number, not an artefact of the symbol, so it appears in your database and on your invoices. If your data has twelve digits, one of them is missing rather than the check being optional.

Size and quiet zone

The two measurements that decide whether a scanner accepts the symbol, and the two most often lost when a design is adjusted to fit.

• X-dimension: 0.330mm at 100 percent magnification, giving a symbol of 37.29 by 25.93mm. The permitted magnification range is 80 to 200 percent, so the X-dimension can fall to 0.264mm and rise to 0.660mm. Below 80 percent the symbol is out of specification and retailers can and do reject it.
• Quiet zone: Asymmetric, and this catches people: 11 times the X-dimension on the left and 7 on the right. That is roughly 3.6mm and 2.3mm at full size. The right-hand quiet zone is marked on many printed symbols by a chevron, which exists purely to stop a designer trimming it off.

Where it is used

• retail products scanned at a point of sale, anywhere outside North America
• books, through the ISBN prefix, and periodicals through ISSN
• any product a supermarket will put on a shelf, where the retailer's own specification usually applies on top

Placing it in the markup

The quiet zone is padding on the container rather than part of the encoder's output, so it survives a change of encoder. Dimensions are in millimetres, because a bar width is a physical measurement and a percentage makes it depend on whatever the container happens to be.

<figure class="ean13">
  <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i..." alt="EAN-13 5012345678900">
</figure>

<style>
.ean13 {
  margin: 0;
  /* Asymmetric quiet zone: 11X left, 7X right. At 100% that is 3.63mm
     and 2.31mm. Rounding both to the same number to make the CSS tidy
     is how the left zone ends up short. */
  padding-left: 3.7mm;
  padding-right: 2.4mm;
}
.ean13 img {
  /* 100% magnification. Scale this pair together or not at all: the
     symbol has a defined aspect and truncating the height is a
     specification breach, not a design choice. */
  width: 37.29mm;
  height: 25.93mm;
  display: block;
}
</style>

What goes wrong on paper

Truncating the bar height to fit a design. A shortened EAN-13 still scans on a handheld scanner pointed straight at it, and fails at a supermarket's omnidirectional slot scanner, which relies on the bar height to catch the symbol at an angle as the product moves. It is the single most common reason a product is rejected at a retailer's barcode verification.

First thing to check when it will not scan

Confirm the magnification is inside 80 to 200 percent, then measure the left quiet zone. Designers shrink EAN symbols to fit packaging more often than any other symbology, and the left quiet zone is the first thing the packaging eats.

Vector, not a bitmap

Encode to SVG wherever the encoder offers it. A rasterised barcode is resampled when the PDF is printed, and at 203 or 300 dots per inch the bar edges land between printer dots, so the ratio of bar to space drifts by a fraction of a millimetre. That fraction is the whole tolerance. An SVG stays vector inside the PDF and is rendered at the printer's own resolution, which removes the entire failure mode. Where a bitmap is unavoidable, generate it at the final physical size and set image-rendering so nothing smooths the edges.

Frequently asked

Other symbologies

Codes of the same kind, and one from each of the other kinds.