Resolved Questions

masonpai

some tag data enclosed before PDF417 barcode

Tagged With:-

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 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 it will have add some tag data before barcode font and extend the width of table containing barcode font. ( please refer tableBarcode02.pdf ).

We also have 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 table and why it will have such 1863px value ?
We need your help to dig into the details about this issue and make a good suggestion for us ...

05-29-25 11 day(s) ago

Report Abuse


Jacque	Best Answer Hello Mason, If you'd like to adjust the width of the <pre> tag that renders the PDF417 barcode, there are a couple of ways to do it. 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 take this into consideration when altering source code, as we cannot predict the amount of data being encoded and cannot guarantee the width does not affect it's 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 11 day(s) ago (0) (0) Report Abuse

Find Interesting

Email to Others

Bookmark

Subscribe to Answer Alert

Add Comment

No comments yet. Be the first to comment.

Other Answers (1)

masonpai

Hello support,

We have followed your instruction 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 can display OK ( no additional spaces ).

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

thanks !!

Mason Pai 06-05-2025

Posted 4 day(s) ago

(0)

Report Abuse

Categories

» Barcode Applications » Barcode Components ● Barcode FAQ » Barcode Fonts » Barcode Hardware ● Barcode Learning » Font Encoders ● General License Questions ● General Sales Questions » MICR & OCR Fonts » Other ● Product Updates » Saas Hosted Products

Email this question link to friends

Your comment on this question

Allows to add a link. Added links would only be converted to actual clickable link, when the domain of the link is white-listed by administrator.
Caption	:
Link URL	:	(Must starts with "http://")
Add \| Cancel

Allow to insert an image. Must be among the following file types - .jpg, .gif, .png & .bmp.
Image Url	:	Upload New (Image url must always starts with " http:// ")
Width	:	pixels (Must not be greater than 450px. Enter 0px for no resize)
Add \| Cancel

Allow to insert YouTube video. Insert the video embed code.
Embed Code	:
Add \| Cancel

Up to 5000 Characters are allowed. Current Count: 0

Your comment on this answer

Allow you to add a link. Added links would only be converted to actual clickable link, when the domain of the link is white-listed by administrator.
Caption	:
Link URL	:	(Must start with "http://" or "https://")
Add \| Cancel

Allow to insert an image. Must be among the following file types - .jpg, .gif, .png & .bmp.
Image Url	:	Upload New (Image url must always start with "http://" or "https://")
Width	:	pixels (Must not be greater than 450px. Enter 0px for no resize)
Add \| Cancel

Allow to insert YouTube video. Insert the video embed code.
Embed Code	:
Add \| Cancel

Up to 5000 characters are allowed. Current Count: 0

My Profile

You may answer and comment on any thread according to the Terms and Conditions.