Add a barcode to the PDF output

A barcode is a data pattern that machines can read. Customers can scan barcodes with a barcode scanner or their smartphone camera. Encoding information such as product details, inventory numbers, or website URLs can be helpful. Adding barcodes helps you easily capture the data, enhances the customer experience, and facilitates better data management and security.

You can create a style for the barcode. and use it to insert a barcode in a page layout. You can apply the style to a sample barcode in the desired page layout.

This tutorial helps you to add barcodes in the PDF output.

Steps to generate a barcode

To generate a barcode, perform the following steps:

Update the template’s CSS to render a barcode value

Modify the layout.css file to render a barcode during the PDF generation. Various barcode types like ‘qrcode’ and ‘pdf417’ are supported. For more details, view Barcode types.

...
.barcode {
-ro-replacedelement: barcode;
-ro-barcode-type: code128;
-ro-barcode-size: 100%;
-ro-barcode-content: content();
object-fit: contain;
margin-top: 2mm;

}
...

Use the CSS style to generate the barcode

You can generate the barcode in different ways. Some of the examples are as follows:

Example 1

Add a barcode placeholder in the template header and apply the style:

You can view the barcode on generating the output PDF using the template, which includes the page layout. Once you have performed the previous steps, you can generate the PDF output with a barcode.

The following screenshot displays a sample barcode in a PDF output.

{width="700"}

Example 2

Modify the Common.plt file in the Basic template to add a barcode after the project title.

To create a barcode for an ISBN number, add an ISBN number. Then use the ISBN number to generate the barcode.

...

  <div data-region="header">
    <p class="chapter-header"><span data-field="project-title" data-format="default">Project Title</span> </p>
    <p><span class="barcode">978-1-56619-909-4</span></p>
  </div>
}
...

Example 3

To create a barcode using the map metadata:

Use any metadata present in the <topicmeta> element of a DITA map to display as a barcode. Ensure to use the correct XPath. For example, you can add a <resourceid> in the <topicmeta> of a DITA map.

In the following example, the resource ID serves as the main input to generate the barcode.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE map PUBLIC "-//OASIS//DTD DITA Map//EN" "technicalContent/dtd/map.dtd">
<map id="GUID-3c330691-4dac-4020-904a-d2d6246aeeb1-en">
  <title>Barcode Sample</title>
  <topicmeta>
    <resourceid id="7a5bda1c-b1db-4fd8-8763-a731e2e8abba">
    </resourceid>
  </topicmeta>
  <topicref href="GUID-139f6c64-bea3-4f17-8b22-ee131557e249-en.dita" type="topic">
  </topicref>
</map>

You can use the resource ID in a page layout as follows:

  <div data-region="header">
    <p class="chapter-header"><span data-field="project-title" data-format="default">Project Title</span> </p>
    <p><span class="barcode" data-field="metadata" data-format="default" data-subtype="//resourceid/@id">Resource ID (barcode)</span></p>
  </div>
}

Barcode types barcode-types

Some of the commonly used barcodes are as follows: