some tag data enclosed before PDF417 barcode

Question

Hello support, We have tried to use the JavaScript PDF 417 Barcode Generator to create PDF 417 Barcodes in Web forms and convert them into 300 dpi PDFs. Some of html code to call the JS barcode function to create barcode fonts (please refer to barcodeHtml01.html ) as: <table class="Tb1" style="width:19cm"> <tr> <td> <div> <div id="barcode-font"></div> </div> </td> </tr> </table> bcodevalue = 534 * "1" var fontBarcode = IDAutomation_JavaScriptBarcode_PDF417( bcodevalue, 1,//'ApplyTilde': 1, 6,//'EccLevel': 8, 20,//'ColumnSpecify': 0, 10,//'RowSpecify': 0, 0,//'Truncate': 0, 1,//'ForceBinary': 0, 2,//'XYRatio': 0, 4.5,//'XDimensionPoints': 4, 3,//'ReturnType': 4, 3//'QuietZone': 3 ); document.getElementById("barcode-font").outerHTML = fontBarcode; We have found that it will need to add some tag data before the barcode font and extend the width of the table containing the barcode font. (Please refer to tableBarcode02.pdf ). We have also captured the additional tag data as : <div style="font-size:4.5px;line-height:4.5px;font-family:Consolas, Courier New, monospace;"> <pre style="padding:13.5px;background-color:#fff;width:1863px;"> We think <pre width:1863px> might be the cause for extending the width of the table, and why it will have such a 1863px value? We need your help to dig into the details about this issue and make a good suggestion for us ...

Jacque · Accepted Answer

Hello Mason,

If you'd like to adjust the width of the

tag that renders the PDF417 barcode, there are several ways to do so. The right solution will depend on your team’s preferences and your level of control over the codebase.

Option 1: Modify the Source Code

You can edit the uncompressed version of the IDAutomation_JavaScriptBarcode_PDF417.js file and then re-minify it for production use.

If you're using ReturnType == 3, we can point you to the part of the code where the width is set. However, you and your team will be responsible for deciding the appropriate width for your layout.

This option provides precise control but requires maintenance and testing.

Additionally, in many IDAutomation products, the width is intentionally large to allow for all the possible characters necessary for encoding; by editing the width, it may result in the barcodes not generating properly. Please consider this when altering source code, as we cannot predict the amount of data being encoded and cannot guarantee the width does not affect its generation.

Option 2: Override with CSS (No Source Changes)

Alternatively, you can override the output width using CSS. In this approach, you wrap the barcode output in a container and use a style rule to force the inner to inherit the desired width. I was able to create an example that set the container to an explicit width, then had the pre tag inherit that width.

Code in screenshot:

In the attached screenshot:

• A shows the rendered element in Chrome DevTools with a width of 204px, indicating that the CSS override has taken effect inside the 200px parent. The extra 4px comes from the padding still being passed down from the ‘Pre’ tag

• B highlights the outer with an inline style of width: 200px;

• C shows the applied CSS rule targeting #barcode-container pre and enforcing width: 100% !important;, which successfully limits the barcode width to the container size.

• D shows the extra padding from the pre tag

This method works without modifying the source JavaScript and is ideal for layout control via HTML/CSS.

We hope this information has been helpful. Let us know if you have any further questions.

masonpai · Answer

Hello support,

We have followed your instructions to modify our test HTML as follows:

1. Add a pre tag with width: 100% in style,

#barcode-font pre {
width: 100% !important;
max-width: 100%;
overflow-x: auto;
padding: none;
}

2. Using innerHTML to apply CSS style, document.getElementById("barcode-font").innerHTML = fontBarcode;

3. We have tested the new HTML and it displays OK ( no additional spaces ).

4. We also compared the new and old HTML and found that the PDF 417 barcode fonts are the same.

thanks !!

Mason Pai 06-05-2025


Jacque Best Answer Hello Mason, If you'd like to adjust the width of the <pre> tag that renders the PDF417 barcode, there are several ways to do so. The right solution will depend on your team’s preferences and your level of control over the codebase. Option 1: Modify the Source Code You can edit the uncompressed version of the IDAutomation_JavaScriptBarcode_PDF417.js file and then re-minify it for production use. If you're using ReturnType == 3, we can point you to the part of the code where the width is set. However, you and your team will be responsible for deciding the appropriate width for your layout. This option provides precise control but requires maintenance and testing. Additionally, in many IDAutomation products, the width is intentionally large to allow for all the possible characters necessary for encoding; by editing the width, it may result in the barcodes not generating properly. Please consider this when altering source code, as we cannot predict the amount of data being encoded and cannot guarantee the width does not affect its generation. Option 2: Override with CSS (No Source Changes) Alternatively, you can override the output width using CSS. In this approach, you wrap the barcode output in a container <div> and use a style rule to force the inner <pre> to inherit the desired width. I was able to create an example that set the container to an explicit width, then had the pre tag inherit that width. Code in screenshot: <body> <div id="barcode-container" style="width: 200px;"> <script> document.write(IDAutomation_JavaScriptBarcode_PDF417("some test data")); </script> </div> <style> #barcode-container pre { width: 100% !important; max-width: 100%; overflow-x: auto; padding: none; } </style> </body> In the attached screenshot: • A shows the rendered <pre> element in Chrome DevTools with a width of 204px, indicating that the CSS override has taken effect inside the 200px parent. The extra 4px comes from the padding still being passed down from the ‘Pre’ tag • B highlights the outer <div id="barcode-container"> with an inline style of width: 200px; • C shows the applied CSS rule targeting #barcode-container pre and enforcing width: 100% !important;, which successfully limits the barcode width to the container size. • D shows the extra padding from the pre tag This method works without modifying the source JavaScript and is ideal for layout control via HTML/CSS. We hope this information has been helpful. Let us know if you have any further questions. Posted 118 day(s) ago (0) (0) Report Abuse