Building a Label Printing Software using HTML, CSS and JavaScript

• Download source - 518.78 KB

Introduction

This article explores the use of JavaScript, HTML and CSS (Cascading Style Sheets) for label printing. More often than not, the first impression we hear is "Is that possible? I can't even get most web pages to print properly on my printer". We also know that HTML is designed to share information on a digital media such as the Internet and HTML is all about information accessibility; it’s never about printing. However, I also believe browsers technologies are converging to the point where a full-fledged label printing software on the web without the use of a document format like PDF, SVG or XPS, is possible.

Background

To start off, we should have a basic idea of what a label really is. The diagram below shows a simple 3x2 label.

We use this quite frequently, e.g. printing address labels, tagging warehouse items or labeling products. Usually information such as product name or ID gets printed on each label. Sometimes variable data are also printed on the labels, e.g. different addresses in a mailing list. Microsoft Word has also made popular the use of their mail-merge features to achieve label printing using Microsoft Word and Excel. Many well-known vendors have also provided pre-designed templates that work in Microsoft Word or customized label software.

With this basic understanding, let's delve into the details of using HTML and CSS for label printing. What we are going to do is use CSS absolute positioning. Absolute positioning allows us to indicate where an element should be placed with respect to its parent by specifying the location of the top and left hand corner of the element. We can imagine each element to be some kind of rectangular box which has information content.

Using the Code

The following is a CSS class defined for our labels.

.label {
    background<span class="code-none">:white<span class="code-none">;
    position<span class="code-none">:absolute<span class="code-none">;
    border-collapse<span class="code-none">:collapse<span class="code-none">; 
    width<span class="code-none">:4.00in<span class="code-none">; 
    height<span class="code-none">:3.33in<span class="code-none">;
    margin<span class="code-none">: 0.00in<span class="code-none">;
    padding<span class="code-none">: 0<span class="code-none">;
    left<span class="code-none">: 0.00in<span class="code-none">;
    top<span class="code-none">: 0.00in<span class="code-none">;
    border<span class="code-none">:1px solid black<span class="code-none">;
    border-style<span class="code-none">:dotted<span class="code-none">;
<span class="code-none">}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

We have specified a label with a width of 4 inches and height of 3.33 inches. We have also specified a "dotted" border so that we can easily see the outline of our labels. In our HTML file, we will use the label class above and specify an absolute position for each label by overriding the "left" and "top" field in the CSS class.

Next we need to specify a "paper" to contain our labels. We can use the following CSS class to define a letter sized paper of 8.5 inches by 11 inches.

.paper {
      position<span class="code-none">:relative<span class="code-none">;
      margin<span class="code-none">: 0.00in<span class="code-none">;
      padding<span class="code-none">: 0<span class="code-none">;
      left<span class="code-none">: 0.00in<span class="code-none">;
      top<span class="code-none">: 0.00in<span class="code-none">;
      width<span class="code-none">: 8.5in<span class="code-none">;
      height<span class="code-none">: 11.0in<span class="code-none">;
      border<span class="code-none">:1px solid black<span class="code-none">;
      border-style<span class="code-none">:dotted<span class="code-none">;
<span class="code-none">}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Our HTML File is simple, it looks like the following:

<div class="paper">
<div class="label" style="left:0.00in;top:0.00in;margin-left:0.156in;
	margin-top:0.5in">Test Label</div>
<div class="label" style="left:4.188in;top:0.00in;margin-left:0.156in;
	margin-top:0.5in">Test Label</div>
<div class="label" style="left:0.00in;top:3.33in;margin-left:0.156in;
	margin-top:0.5in">Test Label</div>
<div class="label" style="left:4.188in;top:3.33in;margin-left:0.156in;
	margin-top:0.5in">Test Label</div>
<div class="label" style="left:0.00in;top:6.66in;margin-left:0.156in;
	margin-top:0.5in">Test Label</div>
<div class="label" style="left:4.188in;top:6.66in;margin-left:0.156in;
	margin-top:0.5in">Test Label</div>
</div>

We specify the "left", "top", "margin-left" and "margin-top" fields of each label to lay out a total of 6 (3 rows x 2 columns) labels.

This does not look too difficult. With a little modification, we will be able to implement a label of different dimensions. If we use some JavaScript programming, we should be able to cater to almost all kinds of label combinations. We may even be able to design a WYSIWYG label and propagate different contents in the labels for printing.

The Problems

Now let's test the printing. Using my Internet Explorer 8 or Mozilla 3.0+, I printed my HTML page. Using a ruler, I measured the labels and discovered the label is smaller than what I have expected. What is wrong?

Basically, browsers like Internet Explorer and Mozilla Firefox now come with an option called "Shrink to Fit" to help you print web pages. This is a default behavior that we do not want for our label printing. If you are using Internet Explorer, uncheck the "Enable Shrink-to-Fit" option in "Page Setup". If you are using Mozilla, uncheck the "Shrink To Fit Page Width" option in "Print Options".

Let's print it again. The size is correct now. But the label does not look to be in the correct position. It looks shifted towards the right and downwards. So, what is the problem now?

The problem is with printer margins.

Go to Internet Explorer->Printer->Page Setup, or Mozilla->File->Page Setup, or Opera->File->Print Options.

In the Margin settings, set the following margins to zero.

Left:0, Right:0, Top:0, Bottom:0

Sometimes Internet Explorer will not allow you to input a zero margin, if this is the case, use the minimum margin provided by the browser. For Mozilla, the margin settings are in the "Margins & Header/Footer" tab.

After you are done with these settings, let's proceed to print again.

It is better now, but the labels are still shifted and not in the correct position. This is currently one of the basic problems that are stopping us from performing label printing using web technologies. However, we can overcome the problem by making some modifications to our HTML.

The Solution

Take the latest printout and use a ruler to measure the differences in position of the specified label and the actual printed one. Deduct the figures from the "margin-left" and "margin-top" in our HTML. Adjust the values until the printed label is at the position as the one specified in the HTML.

The Basis of Label Printing using HTML

The description above shows us how to print a label using HTML by making adjustments to the margins. We can think of this process as some kind of calibration for a label software on the web.

During the process of calibration, the user will be able to print out an HTML page with lines on specific locations on the paper. The difference of the actual locations of the lines with the ones specified will be the values we need in order to calibrate. For example, if I print a vertical line in the middle of a Letter page at 4.25 inches from the left side of the paper. When this line is printed out, it is actually printed out 4.5 inches from the left side of the paper. Then there is a difference of -0.25 inch that needs to be adjusted for our print layout. We make use of CSS margins to make these adjustments for our web printing.

The calibration values can also be stored in a persistent storage (e.g. text file) and the value will be automatically loaded the next time. Thus, users only calibrate once and they can print labels using HTML correctly thereafter. This process is similar to setting up a printer once and using it for printing subsequently.

Using JavaScript and jQuery to Create Different Types of Label

The JavaScript and jQuery code below shows how we can use CSS absolute positioning to create different types of labels.

function CreateTemplateInches(paperWidth,paperHeight,marginLeft,
   marginTop,labelWidth,labelHeight,numRows,numColumns,horizontalSpace,verticalSpace)
{
	var paper=$('<div class="paper"></div>');
	paper.css('width',paperWidth+'in');
	paper.css('height',paperHeight+'in');
	paper.appendTo('#container');

	var i=0,j=0;
	var posix=0,posiy=0;
	var numrows=numRows, numcolumns=numColumns;
	for (i=0;i<numrows;i++)
	{
		posix=0;
		posiy=i*(labelHeight+verticalSpace);

		for (j=0;j<numcolumns;j++)
		{
			posix=j*(labelWidth+horizontalSpace);
			var label=$('<div class=label></div>;');
			label.css('margin-left',marginLeft+'in')
			     .css('margin-top',marginTop+'in')
			     .css('width',labelWidth+'in')
			     .css('height',labelHeight+'in')
			     .css('left',posix+'in')
			     .css('top',posiy+'in');
			paper.append(label);
		}
	}
};

Points of Interest

Internet Explorer 7 (and onwards), Mozilla 3.0 (or maybe 2.0 and onwards), Safari 5 on the Mac, Opera 10 and the upcoming Google Chrome 6 all support a Page Setup with some enabling and disabling of the shrink options. We believe that the major browsers are converging to support a common set of printing capabilities. These browsers are also moving towards HTML5 with the support of CSS3, local storage, canvas and many more interesting capabilities. Label printing using HTML, CSS and JavaScript is definitely possible in the near future.

Open Source Project

If you like what you have read, you may be interested in taking a look at our open source project labelgrid label software. In this project, we attempt to build a full-fledged label printing software based on open technologies for the web like HTML, JavaScript and CSS. We believe browser technologies are converging to the point where a full-fledged label printing software on the web (without the use of a document format like PDF, SVG or XPS) is possible. Using HTML as the backbone also allows us to easily port labelgrid to the upcoming mobile platforms where third party plug-ins may not be available.

History

• 29^th June, 2010: Initial post to CodeProject