I have a very simple HTML document that is used as a cover sheet. It has three lines of text at specific font sizes for an OCR scanner to read.

Now I need to place a bar code image at the top as a header, but nothing else on the page must move or change, since the scanner looks for the lines of text within defined regions.

The bar code was provided to me as a PDF document. I have opened it in Photoshop and tried cropping, resizing, etc. many different ways, but the graphic is either too big, too small, makes the other two lines of text shrink, or the bar code gets pixelated.

What is the best technique to achieve this with minimal image distortion or degradation, and without affecting the font sizes of the three lines of text?

Is there an exact pixel dimension for an image to fix across an 8.5 x 11 piece of paper perfectly? I assumed that I could crop a slice of the PDF and avoid distortion if I know the exact pixel width of an 8.5 x 11 piece of paper?

<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript">
  function printpage() {
<body onload="printpage()">
<div style="font-family:Arial,sans-serif;text-align:center;">
  <div style="margin:0 0 100px 0;"><img src="~/images/scandivider2.gif" style="width:800px;" alt="" runat="server" /></div>
  <div style="font-size:40pt;margin:0 0 100px 0;"><%:Model.CollectionKey%></div>
  <div style="font-size:15pt;margin:0 0 100px 0;"><%:Model.StatusName.ToUpper()%></div>
  <div style="font-size:40pt;"><%:Model.StatusDate%></div>

1 answer


There are a lot of variables involved with printing from the web. From the type of printer that is being used to browser print preferences, many things are out of a designer's control.

For this reason there is no set pixel width for an 8.5 x 11 paper. The end user could have any number of different margin settings picked out for their printer making the width an unknown variable. Also the quality of the printer will determine how well the image prints.

The GIF format is not designed for printing. GIFs are designed for on-screen display only. Try switching your barcode image to a higher res JPG or even a PNG.

Answered almost 6 years ago by Artistic Abode