Barcode (1D)

Demo & usage

More examples

<sv-barcode-1d value="SN00219874553301" symbology="code128" />

<sv-barcode-1d variant="inspect" value="4006381333931" symbology="ean13" />

<sv-barcode-1d variant="bare" value="SHIP-4471" symbology="code128" [requestedModuleWidth]="3" />

<sv-barcode-1d [value]="sku()" symbology="ean13" (encodeError)="onEncodeError($event)" />

<!-- EAN-13 at 100% magnification: the nominal 0.33 mm module. -->
<sv-barcode-1d value="4006381333931" symbology="ean13" [printModuleWidthMm]="0.33" />

<sv-barcode-1d
  [value]="sku()"
  symbology="ean13"
  [requestedModuleWidth]="width()"
  [devicePixelRatio]="dpr"
  (scanSizeWarning)="refuseTheJob($event)" />

When to use

• Printing a label, packing slip, shelf tag or ticket that a handheld scanner has to read.
• You have a GTIN, SKU or serial and need the symbol drawn correctly, including the check digit.
• For a 2D code holding a URL or a payload, use the QR Code instead.

Async states

• loading
• error
• retry

Outputs

Customization & theming

• Three symbologies: `code128`, `ean13`, `ean8`.
• Three variants: `labelled` (bars + human-readable line), `bare`, and `inspect` (module count, quiet zones, check character, snapped width and the subset-C saving).
• `requestedModuleWidth` + `devicePixelRatio` (snapped to whole device pixels; `widthAdjusted` says when it moved), `barHeight`, and `showQuietZone` to make the invisible margin visible.
• `encodeError` reports why a value could not be encoded; `loading` / `error` / `retry` for the async shells.
• `printModuleWidthMm` pins the printed X-dimension in millimetres, and the component's own `@media print` block forces `print-color-adjust: exact`, avoids a page break through the symbol, and hides the `inspect` report (a development aid, not part of the label).
• `scanSizeWarning` emits `{ xMm, widthMm, heightMm, magnification, minXMm, belowMinimum }` whenever the symbol falls under its symbology's floor. `svScanSize()` and `SV_BARCODE_MIN_X_MM` are exported for a pipeline that wants to check before rendering.

Best practices

• Do: Leave the quiet zones alone. They are part of the symbol — the scanner uses them to find the edges — not padding you can trim to fit.
• Do: Pass the 12-digit payload and let the component compute the check digit, or pass 13 and let it verify yours.
• Do: Handle `encodeError`: a refusal is a value that needs fixing before it is printed, not a rendering failure.
• Tip: Keep `requestedModuleWidth` at 2 or more for print. The component snaps it to whole device pixels; below one pixel per module no amount of snapping helps.
• Don't: Don't shrink the symbol until it fits. A barcode with the wrong check digit does not fail to scan — it scans as a different number.
• Do: Set `printModuleWidthMm` for anything that gets printed. It is the X-dimension, the only size a scanner has an opinion about, and it is the half of the geometry a CSS pixel cannot express.
• Do: Handle `scanSizeWarning` in a label pipeline. A symbol under the floor is a job to refuse, not a warning to log — the roll of stickers is already printed by the time anyone tries to scan one.
• Don't: Don't assume the print gate is a guarantee. Print quality, ink spread and scanner distance are outside a browser's reach; the component can only make sure the geometry it hands the printer is right.

Accessibility

• The symbol carries an accessible name naming the symbology, the encoded value and the check character — a scanner reads the bars, a person reads the label, and a screen reader gets both.
• A refusal is rendered as text stating what is wrong (e.g. "EAN-13 needs 12 digits; this has 11"), not as an empty box.
• EAN guard bars extend below the digit row, which is how a human recognises the symbol's start, end and midpoint.
• A symbol too small to scan renders a `role="status"` warning stating the measurement and the floor, so the problem is legible rather than left to a failed scan in a warehouse.