Print Avery labels using CSS and HTML

A client for whom I provide web services asked me if I could help her print barcode labels from their data.

Now, I’ve created Avery labels using Office, Illustrator, even Photoshop — but never using web technologies. You just don’t have a lot of control printing from your browser using CSS.

Or do you…? After all, we’ve always been able to specify real-world measurements such as “in” and “cm” using CSS.

I bought Avery 5160 labels because they seemed big enough to allow me to be a little sloppy while still providing many stickers per page.

A quick test proved that I could specify the page margins, label sizes, and gutter widths in inches. And both Firefox and IE allowed me to set the print margins to 0, leaving control of the layout to my CSS. Here’s what the print preview looks like from Firefox:

It’s not perfect, but it’s good enough.

Printing multiple pages turned out to be trickier. First, to prevent pages from breaking halfway across my labels, I inserted an empty div with the style rule “page-break-after” set to “always”.

Also, I had used the HTML body to set the margins. But the top of “page 2” doesn’t know anything about the HTML body’s top margin. There is some documentation on “paged media” but it felt like uncharted territory. Rather than fight it, I decided to let the browser — rather than the CSS — set the top margin. I had to convey that in some friendly instructions on my client’s launch page:

Before printing labels, use your browser’s print preview options to set the top print margin to 1/2 inch and all other print margins to 0 (zero).

Try printing a test page on plain paper first. Hold it up to the light behind a sheet of labels to make sure the bar codes line up with the stickers.

It worked great in Firefox and Internet Explorer — good enough for my client.

Once the concept was proven, I built a controller page that lets my client print a test sheet, blocks of real data, individual data points, and even “blank” labels to push the data past previously peeled stickers so that nothing is wasted.

Here’s a one-page example of the HTML and CSS used to create Avery 5160 labels. (HTML corrected thanks to Halty.)

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>HTML & CSS Avery Labels (5160) by MM at Boulder Information Services</title>
    <link href="labels.css" rel="stylesheet" type="text/css" >
    <style>
    body {
        width: 8.5in;
        margin: 0in .1875in;
        }
    .label{
        /* Avery 5160 labels -- CSS and HTML by MM at Boulder Information Services */
        width: 2.025in; /* plus .6 inches from padding */
        height: .875in; /* plus .125 inches from padding */
        padding: .125in .3in 0;
        margin-right: .125in; /* the gutter */

        float: left;

        text-align: center;
        overflow: hidden;

        outline: 1px dotted; /* outline doesn't occupy space like border does */
        }
    .page-break  {
        clear: left;
        display:block;
        page-break-after:always;
        }
    </style>

</head>
<body>

<div class="label"><img src="https://boulderinformationservices.files.wordpress.com/2011/08/barcode_sample.png" /><br>Human readable</div>
<div class="label"><img src="https://boulderinformationservices.files.wordpress.com/2011/08/barcode_sample.png" /><br>Human readable</div>
<div class="label"><img src="https://boulderinformationservices.files.wordpress.com/2011/08/barcode_sample.png" /><br>Human readable</div>
<div class="label"><img src="https://boulderinformationservices.files.wordpress.com/2011/08/barcode_sample.png" /><br>Human readable</div>
<div class="label">(Repeat 30 times)</div>
<div class="page-break"></div>

</body>
</html>
Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

25 Responses to Print Avery labels using CSS and HTML

  1. Halty says:

    Very cool. I love it. You need to assign the label class to the divs of the images in your sample, though.

  2. David Faltermier says:

    Very cool, indeed. Wouldn’t have thought to control the pagination as you did.

  3. Guy Brossy says:

    Hummm….I pasted your style from above and set the text with in the DIV from a database in a loop. I get your labels boxes, but the boxes expand (and therefore end up different widths) depending on the data. I am using an address block instead of uniform-sized barcode images and if the Name, or City, State & Zip are longer than a certain length, the box that your style steet draws expands in width. I have even included “max-width: 2.025in;” but it doesn’t stop the width expansion.

    Any ideas?

  4. Guy Brossy says:

    Nevermind! Wow … I noticed your comments were not in a format for our javascript pages, for a couple of your style lines are remmed out unintentionally. When I fixed them, the labels worked perfectly!

    Thanks.

  5. Bryan Plasters says:

    Worked fantastically!

  6. Tim says:

    Great code! Thanks for sharing. I am going to use this with Foxpro for DOS. I will use Foxpro to write a text file in HTML code and automatically insert names, addresses, etc from a Foxpro database. I can modify the above CSS for fonts, etc. Then I will open the file with my FireFox browser and print labels with a modern Okidata laser printer. This is an ideal way to get around the DOS printer problem and still use quite viable Foxpro and DOS programs. Thanks!

  7. Perfect. Now imagine the following situation:
    I print labels for the participants of an event, who signed up in advance do I print normally be using a text editor or by means of your code.

    Now, on the day of the event will be held inscriptions, and there is a label printer and the model will be used Avery 5160, with several labels per page, but will print just one label at a time, then the question is: Is there a way to specify in which row and column will leave the label? So that I can reuse several times the same page with unused labels.

    • Martin Mapes says:

      For my client, I let them choose a certain number of blank labels to include before the first “real” label was printed. It would be harder to specify row and column but it could be done.

    • Martin Mapes says:

      Peng, I simply inserted label DIVs without any IMG tags. For example, if you want to print the label on the second row, second column. You need to insert 4 blank label DIVs to nudge everything down.

  8. Norman D says:

    Thanks for the post – very helpful – I added barcodes with some jquery magic – and now you have a barcoding solution..
    http://barcode-coder.com/en/barcode-jquery-plugin-201.html
    $(“#bcTarget”).barcode(“PRODUCT-CODE”, “code39”,{barWidth:1, barHeight:40, showHRI: false});
    PRODUCT-CODE

  9. This is identical to a project I had with a client printing mailing labels! I set up a form to collect names and addresses and now can spit them onto this form and just have the clients print. Beautiful solution

    • Sammy says:

      I’ve been looking for a way to print address labels using a stand-a-lone website with the data stored in a mysql data base. Based on you post it seems that you may be doing something like what I desire to do. Can you offer any suggestions. Thank you.

  10. robin badart says:

    is there a ‘labels.css’ file that goes along with this html example? (link href). where does that come from?

  11. Alex Libman says:

    I’m using Avery 18160 labels. Been very frustrating to use a LibreOffice template, so I got the same idea of using HTML+CSS, where I could get everything inside a label div pixel-perfect. Also wrote JavaScript to take a page with 1 label and copy / position the other 29.

    But unfortunately I couldn’t get it to line up in height before my patience ran out. You can see the work-in-progress http://libman.org/stickers – I would really appreciate some suggestions for what I’m doing wrong…

  12. Scott says:

    Very much appreciated. I’m writing a web-based book conference solution for a non-profit and was dreading the drudgery of creating an easily printable book label generation system for a large number of users. Your CSS classes provided the structure necessary to shave hours off of the project. Thank you for posting.

  13. Eli Pesso says:

    You can add the following CSS in order to make the print margins default.
    That’s 0.50in on top, and 0px for the rest, as the tutorial said 🙂

    @page{
    margin: 0.50in 0px 0px 0px;
    }

  14. John Rasor says:

    Thanks, Eli Pesso. That worked.

  15. Jonathan says:

    Another option that gives you more control vs relying on user to set their browser print prefs correctly is to output a pdf that is properly formatted for your label sheets. You can use something like FPDF to create it. It allows to-the-mm control over layout. I did this successfully with standard Avery 5160 labels to print address labels and it worked beautifully.

  16. Pingback: Label Template | My Website

  17. monicus says:

    I know this is old by I read this looked over the comments and made Eli Pesso’s change and I am using javascript to replicate the lable so I only need to setup the first one and the rest are created on page load. Thanks everyone!

    HTML & CSS Avery Labels (5160) by MM at Boulder Information Services

    body {
    width: 8.5in;
    margin: 0in .1875in;
    }
    @page{
    margin: 0.50in 0px 0px 0px;
    }
    .label{
    /* Avery 5160 labels — CSS and HTML by MM at Boulder Information Services */
    width: 2.025in; /* plus .6 inches from padding */
    height: .875in; /* plus .125 inches from padding */
    padding: .125in .3in 0;
    margin-right: .125in; /* the gutter */

    float: left;

    text-align: center;
    overflow: hidden;

    outline: 1px dotted; /* outline doesn’t occupy space like border does */
    }
    .page-break {
    clear: left;
    display:block;
    page-break-after:always;
    }

    function doRep(){
    var mast = document.getElementById(“master”);
    var child=document.getElementById(“child”);

    var out=””;
    for (i=0;i<29;i++){
    out+="”+mast.innerHTML+”\n”;
    }
    alert(out)
    child.innerHTML=out;
    }

    Human readable

  18. Just learning CSS so I have a question. If I have php read my database and send back the results using AJAX or direct echo out from php code inside the html; if I use the same div in the html, will each be overlayed and only show the last one? If so, how do you handle that in a loop?
    Or can I create the html lines and like the example with my rows of data with the html markup. I know how to do that. Hope you can understand my question.

  19. Don’t think my post from yesterday went through. wanting to build 5160 name and address labels using php to extract the data from a mySql database. My question is, to echo in the divs, can loop through the data and use the same div and class name or will each be overridden except the last one. I haven’t used a lot of CSS and confused on this part.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s