How to define the size of barcode objects

Barcodes and matrix codes are created through "barcode objects", which are a pdfChip specific custom type of <object>.

Such objects can be used in HYML content, inside SVG objects and inside SVG files (as of pdfChip 1.2, SVG files can be converted directly to PDF, without having to embed them in HTML).

Barcode object example

An example for the syntax of a barcode object is shown below:

    <object type="application/barcode">
        <param name="data" value="123456789012">
        <param name="type" value="EAN 13">
        <param name="modulewidth" value="0.33mm">
        <param name="barwidthreduction" value="10%">
        <param name="textplacement" value="none">
    </object>

Defining the size of a barcode or matrix code

In many usage scenarios, the exact size of a barcode or matrix code is important. There are several ways to define this size:

  • by providing a value for the "modulewidth" parameter (i.e. the width of smallest element in a barcode or the width or height of the smallest element in a matrix code)
  • by providing "width" and "height" attributes in the <object> tag

The  "width" and "height" attributes in the <object> tag values take precedence over the "modulewidth" parameter. Where it is necessary to define a certain for a barcode or matrix code but still let the "modulewidth" drive the actual size of the barcode or matrix code, "width" and "height" attributes should be present for the parent of the <object> tag.

Using "modulewidth" to define the size of an EAN code 

	<div>
		<object type="application/barcode" style="background-color: #eff;">
			<param name="data" value="123456789012">
			<param name="type" value="EAN 13">
			<param name="modulewidth" value="0.33mm">
			<param name="barwidthreduction" value="10%">
			<param name="quietzoneleft" value="10">
			<param name="quietzoneright" value="10">
			<param name="quietzoneunit" value="X">			
		</object>
	</div>

Using "width" style attribute to define the size of an EAN code 

	<div style="width: 50mm; height: 30mm; background-color: #fef">
		<object type="application/barcode" style="width: 70mm; height: 30mm; background-color: #eff;">
			<param name="data" value="123456789012">
			<param name="type" value="EAN 13">
			<param name="modulewidth" value="0.33mm">
			<param name="barwidthreduction" value="10%">
			<param name="quietzoneleft" value="10">
			<param name="quietzoneright" value="10">
			<param name="quietzoneunit" value="X">			
		</object>
	</div>    

Using "modulewidth" to define the size of an EAN code, while creating an area for the EAN code by setting the size of the parent <div> 

	<div style="width: 70mm; height: 30mm; background-color: #fef">
		<object type="application/barcode" style="background-color: #eff;">
			<param name="data" value="123456789012">
			<param name="type" value="EAN 13">
			<param name="modulewidth" value="0.33mm">
			<param name="barwidthreduction" value="10%">
			<param name="quietzoneleft" value="10">
			<param name="quietzoneright" value="10">
			<param name="quietzoneunit" value="X">			
		</object>
	</div>  

The example below shows the effect of the methods described above. An HTML file with the examples is attached below the figure.

defining_size_of_barcode.html