Forum Moderators: phranque
Since the beginning of the year I've been using CSS to define layouts for a variety of label types. Since I began my quest to conquer the label I've had a few people ask how it was done. Hopefully this information will be found by the next person faced with creating a label for the first time. To begin I'll post the style sheets that I used for 3 different label applications. There is a product label that we apply to our widgets. There is a shipping address label and finally a custom layout. Following the style sheets I'll post a little info about how I used them.
Mailing Label
First is the 2" x 4" Mailing Label. There are 10 sheets
per page. In the first example I'm laying out 2 different
images to create a label. Call them PRODUCT and NAME.
I've defined 20 absolute positions, 2 for each label.
<style type="text/css" media="all">
/* Top and Bottom margin are 1/2 inch (1.27cm), side margins are 1/8 inch (.32cm) */
@page { margin: 2cm; }
/* -------------------------- PRODUCT IMAGES -------------------- */
.imgA1 { position:absolute; top: 7px; left: 0px; z-index: 1; }
.imgA2 { position:absolute; top: 7px; left: 500px; z-index: 1; }
.imgA3 { position:absolute; top: 250px; left: 0px; z-index: 1; }
.imgA4 { position:absolute; top: 250px; left: 500px; z-index: 1; }
.imgA5 { position:absolute; top: 495px; left: 0px; z-index: 1; }
.imgA6 { position:absolute; top: 495px; left: 500px; z-index: 1; }
.imgA7 { position:absolute; top: 730px; left: 0px; z-index: 1; }
.imgA8 { position:absolute; top: 730px; left: 500px; z-index: 1; }
.imgA9 { position:absolute; top: 970px; left: 0px; z-index: 1; }
.imgA10 { position:absolute; top: 970px; left: 500px; z-index: 1; }
/* ------------------------- NAME IMAGES ----------------------- */
.imgB1 { position:absolute; top: 17px; left: 130px; z-index: 3; }
.imgB2 { position:absolute; top: 17px; left: 635px; z-index: 3; }
.imgB3 { position:absolute; top: 260px; left: 130px; z-index: 3; }
.imgB4 { position:absolute; top: 260px; left: 635px; z-index: 3; }
.imgB5 { position:absolute; top: 510px; left: 130px; z-index: 3; }
.imgB6 { position:absolute; top: 510px; left: 635px; z-index: 3; }
.imgB7 { position:absolute; top: 742px; left: 130px; z-index: 3; }
.imgB8 { position:absolute; top: 742px; left: 635px; z-index: 3; }
.imgB9 { position:absolute; top: 980px; left: 130px; z-index: 3; }
.imgB10 { position:absolute; top: 980px; left: 635px; z-index: 3; }
</style>
This is my Shipping Address Label. It's a bit longer. The first set of definitions is for the return address in the upper left corner of each label. There are four lines on each label. The label positions are identified as A1 thru A10, with A1 being the top left label and A2 the top right label.
Following the return address is the Shipping address. There are six spaces defined for the ship to address:
<style type="text/css" media="all">
@page { margin: 2cm; }
/* -------------- RETURN ADDRESS -------------- */
/* Label 1 */
.line1A1 { position:absolute; top: 7px; left: 0px;}
.line2A1 { position:absolute; top: 20px; left: 0px;}
.line3A1 { position:absolute; top: 33px; left: 0px;}
.line4A1 { position:absolute; top: 45px; left: 0px;}
/* Label 2 */
.line1A2 { position:absolute; top: 7px; left: 500px;}
.line2A2 { position:absolute; top: 20px; left: 500px;}
.line3A2 { position:absolute; top: 33px; left: 500px;}
.line4A2 { position:absolute; top: 45px; left: 500px;}
/* Label 3 */
.line1A3 { position:absolute; top: 250px; left: 0px;}
.line2A3 { position:absolute; top: 265px; left: 0px;}
.line3A3 { position:absolute; top: 280px; left: 0px;}
.line4A3 { position:absolute; top: 295px; left: 0px;}
.line1A4 { position:absolute; top: 250px; left: 500px;}
.line2A4 { position:absolute; top: 265px; left: 500px;}
.line3A4 { position:absolute; top: 280px; left: 500px;}
.line4A4 { position:absolute; top: 295px; left: 500px;}
.line1A5 { position:absolute; top: 495px; left: 0px;}
.line2A5 { position:absolute; top: 510px; left: 0px;}
.line3A5 { position:absolute; top: 525px; left: 0px;}
.line4A5 { position:absolute; top: 540px; left: 0px;}
.line1A6 { position:absolute; top: 495px; left: 500px;}
.line2A6 { position:absolute; top: 510px; left: 500px;}
.line3A6 { position:absolute; top: 525px; left: 500px;}
.line4A6 { position:absolute; top: 540px; left: 500px;}
.line1A7 { position:absolute; top: 730px; left: 0px;}
.line2A7 { position:absolute; top: 745px; left: 0px;}
.line3A7 { position:absolute; top: 760px; left: 0px;}
.line4A7 { position:absolute; top: 775px; left: 0px;}
.line1A8 { position:absolute; top: 730px; left: 500px;}
.line2A8 { position:absolute; top: 745px; left: 500px;}
.line3A8 { position:absolute; top: 760px; left: 500px;}
.line4A8 { position:absolute; top: 775px; left: 500px;}
.line1A9 { position:absolute; top: 970px; left: 0px;}
.line2A9 { position:absolute; top: 985px; left: 0px;}
.line3A9 { position:absolute; top: 1000px; left: 0px;}
.line4A9 { position:absolute; top: 1015px; left: 0px;}
.line1A10 { position:absolute; top: 970px; left: 500px;}
.line2A10 { position:absolute; top: 985px; left: 500px;}
.line3A10 { position:absolute; top: 1000px; left: 500px;}
.line4A10 { position:absolute; top: 1015px; left: 500px;}
/* ------------- SHIP ADDRESS --------------- */
/* Label 1 */
.line1B1 { position:absolute; top: 60px; left: 50px; font-size:14pt}
.line2B1 { position:absolute; top: 85px; left: 50px; font-size:14pt}
.line3B1 { position:absolute; top: 110px; left: 50px; font-size:14pt}
.line4B1 { position:absolute; top: 135px; left: 50px; font-size:14pt}
.line5B1 { position:absolute; top: 160px; left: 50px; font-size:10pt}
.line5B1-A { position:absolute; top: 160px; left: 250px; font-size:10pt}
/* Label 2 */
.line1B2 { position:absolute; top: 60px; left: 550px; font-size:14pt}
.line2B2 { position:absolute; top: 85px; left: 550px; font-size:14pt}
.line3B2 { position:absolute; top: 110px; left: 550px; font-size:14pt}
.line4B2 { position:absolute; top: 135px; left: 550px; font-size:14pt}
.line5B2 { position:absolute; top: 160px; left: 550px; font-size:10pt}
.line5B2-A { position:absolute; top: 160px; left: 750px; font-size:10pt}
/* Label 3 */
.line1B3 { position:absolute; top: 320px; left: 50px; font-size:14pt}
.line2B3 { position:absolute; top: 345px; left: 50px; font-size:14pt}
.line3B3 { position:absolute; top: 370px; left: 50px; font-size:14pt}
.line4B3 { position:absolute; top: 395px; left: 50px; font-size:14pt}
.line5B3 { position:absolute; top: 420px; left: 50px; font-size:10pt}
.line5B3-A { position:absolute; top: 420px; left: 250px; font-size:10pt}
.line1B4 { position:absolute; top: 320px; left: 550px; font-size:14pt}
.line2B4 { position:absolute; top: 345px; left: 550px; font-size:14pt}
.line3B4 { position:absolute; top: 370px; left: 550px; font-size:14pt }
.line4B4 { position:absolute; top: 395px; left: 550px; font-size:14pt}
.line5B4 { position:absolute; top: 420px; left: 550px; font-size:10pt}
.line5B4-A { position:absolute; top: 420px; left: 750px; font-size:10pt}
.line1B5 { position:absolute; top: 565px; left: 50px; font-size:14pt}
.line2B5 { position:absolute; top: 590px; left: 50px; font-size:14pt}
.line3B5 { position:absolute; top: 615px; left: 50px; font-size:14pt}
.line4B5 { position:absolute; top: 640px; left: 50px; font-size:14pt}
.line5B5 { position:absolute; top: 665px; left: 50px; font-size:10pt}
.line5B5-A { position:absolute; top: 665px; left: 250px; font-size:10pt}
.line1B6 { position:absolute; top: 565px; left: 550px; font-size:14pt}
.line2B6 { position:absolute; top: 590px; left: 550px; font-size:14pt}
.line3B6 { position:absolute; top: 615px; left: 550px; font-size:14pt}
.line4B6 { position:absolute; top: 640px; left: 550px; font-size:14pt}
.line5B6 { position:absolute; top: 665px; left: 550px; font-size:10pt}
.line5B6-A { position:absolute; top: 665px; left: 750px; font-size:10pt}
.line1B7 { position:absolute; top: 800px; left: 50px; font-size:14pt}
.line2B7 { position:absolute; top: 825px; left: 50px; font-size:14pt}
.line3B7 { position:absolute; top: 850px; left: 50px; font-size:14pt}
.line4B7 { position:absolute; top: 875px; left: 50px; font-size:14pt}
.line5B7 { position:absolute; top: 900px; left: 50px; font-size:10pt}
.line5B7-A { position:absolute; top: 900px; left: 250px; font-size:10pt}
.line1B8 { position:absolute; top: 800px; left: 550px; font-size:14pt}
.line2B8 { position:absolute; top: 825px; left: 550px; font-size:14pt}
.line3B8 { position:absolute; top: 850px; left: 550px; font-size:14pt}
.line4B8 { position:absolute; top: 875px; left: 550px; font-size:14pt}
.line5B8 { position:absolute; top: 900px; left: 550px; font-size:10pt}
.line5B8-A { position:absolute; top: 900px; left: 750px; font-size:10pt}
.line1B9 { position:absolute; top: 1040px; left: 50px; font-size:14pt}
.line2B9 { position:absolute; top: 1065px; left: 50px; font-size:14pt}
.line3B9 { position:absolute; top: 1090px; left: 50px; font-size:14pt}
.line4B9 { position:absolute; top: 1115px; left: 50px; font-size:14pt}
.line5B9 { position:absolute; top: 1140px; left: 50px; font-size:10pt}
.line5B9-A { position:absolute; top: 1140px; left: 250px; font-size:10pt}
.line1B10 { position:absolute; top: 1040px; left: 550px; font-size:14pt}
.line2B10 { position:absolute; top: 1065px; left: 550px; font-size:14pt}
.line3B10 { position:absolute; top: 1090px; left: 550px; font-size:14pt}
.line4B10 { position:absolute; top: 1115px; left: 550px; font-size:14pt}
.line5B10 { position:absolute; top: 1140px; left: 550px; font-size:10pt}
.line5B10-A { position:absolute; top: 1140px; left: 750px; font-size:10pt}
</style>
Custom Layout
Whew! Ok, there's one more I'd like to add. This is a custom Avery Label 8986. The layout is 3 across and 10 down, for 30 labels per sheet. I've used the same 2 image approach for this layout that I used in the first example. This was a custom layout with the customer logo at the top and a product name beneath that. There are 60 absolute positions defined, two for each label.
<style type="text/css" media="all">
@page { margin: 2cm; }
/* ---------------------- CUSTOMER LOGO --------------------------- */
/* Row 1 */
.imgA1 { position:absolute; top: 20px; left: 25px; z-index: 1; }
.imgA2 { position:absolute; top: 20px; left: 360px; z-index: 1; }
.imgA3 { position:absolute; top: 20px; left: 690px; z-index: 1; }
/* Row 2 */
.imgA4 { position:absolute; top: 140px; left: 25px; z-index: 1; }
.imgA5 { position:absolute; top: 140px; left: 360px; z-index: 1; }
.imgA6 { position:absolute; top: 140px; left: 690px; z-index: 1; }
/* Row 3 */
.imgA7 { position:absolute; top: 260px; left: 25px; z-index: 1; }
.imgA8 { position:absolute; top: 260px; left: 355px; z-index: 1; }
.imgA9 { position:absolute; top: 260px; left: 690px; z-index: 1; }
.imgA10 { position:absolute; top: 380px; left: 25px; z-index: 1; }
.imgA11 { position:absolute; top: 380px; left: 355px; z-index: 1; }
.imgA12 { position:absolute; top: 380px; left: 690px; z-index: 1; }
.imgA13 { position:absolute; top: 500px; left: 25px; z-index: 1; }
.imgA14 { position:absolute; top: 500px; left: 355px; z-index: 1; }
.imgA15 { position:absolute; top: 500px; left: 690px; z-index: 1; }
.imgA16 { position:absolute; top: 620px; left: 25px; z-index: 1; }
.imgA17 { position:absolute; top: 620px; left: 355px; z-index: 1; }
.imgA18 { position:absolute; top: 620px; left: 690px; z-index: 1; }
.imgA19 { position:absolute; top: 740px; left: 25px; z-index: 1; }
.imgA20 { position:absolute; top: 740px; left: 355px; z-index: 1; }
.imgA21 { position:absolute; top: 740px; left: 690px; z-index: 1; }
.imgA22 { position:absolute; top: 860px; left: 25px; z-index: 1; }
.imgA23 { position:absolute; top: 860px; left: 355px; z-index: 1; }
.imgA24 { position:absolute; top: 860px; left: 690px; z-index: 1; }
.imgA25 { position:absolute; top: 980px; left: 25px; z-index: 1; }
.imgA26 { position:absolute; top: 980px; left: 355px; z-index: 1; }
.imgA27 { position:absolute; top: 980px; left: 690px; z-index: 1; }
.imgA28 { position:absolute; top: 1100px; left: 25px; z-index: 1; }
.imgA29 { position:absolute; top: 1100px; left: 355px; z-index: 1; }
.imgA30 { position:absolute; top: 1100px; left: 690px; z-index: 1; }
/* --------------------------- NAME --------------------------- */
/* Row 1 */
.imgB1 { position:absolute; top: 55px; left: 65px; z-index: 3; }
.imgB2 { position:absolute; top: 55px; left: 400px; z-index: 3; }
.imgB3 { position:absolute; top: 55px; left: 730px; z-index: 3; }
/* Row 2 */
.imgB4 { position:absolute; top: 170px; left: 65px; z-index: 3; }
.imgB5 { position:absolute; top: 170px; left: 400px; z-index: 3; }
.imgB6 { position:absolute; top: 170px; left: 730px; z-index: 3; }
/* Row 3 */
.imgB7 { position:absolute; top: 295px; left: 65px; z-index: 3; }
.imgB8 { position:absolute; top: 295px; left: 400px; z-index: 3; }
.imgB9 { position:absolute; top: 295px; left: 730px; z-index: 3; }
.imgB10 { position:absolute; top: 415px; left: 65px; z-index: 3; }
.imgB11 { position:absolute; top: 415px; left: 400px; z-index: 3; }
.imgB12 { position:absolute; top: 415px; left: 730px; z-index: 3; }
.imgB13 { position:absolute; top: 530px; left: 65px; z-index: 3; }
.imgB14 { position:absolute; top: 530px; left: 400px; z-index: 3; }
.imgB15 { position:absolute; top: 530px; left: 730px; z-index: 3; }
.imgB16 { position:absolute; top: 650px; left: 65px; z-index: 3; }
.imgB17 { position:absolute; top: 650px; left: 400px; z-index: 3; }
.imgB18 { position:absolute; top: 650px; left: 730px; z-index: 3; }
.imgB19 { position:absolute; top: 775px; left: 65px; z-index: 3; }
.imgB20 { position:absolute; top: 775px; left: 400px; z-index: 3; }
.imgB21 { position:absolute; top: 775px; left: 730px; z-index: 3; }
.imgB22 { position:absolute; top: 895px; left: 65px; z-index: 3; }
.imgB23 { position:absolute; top: 895px; left: 400px; z-index: 3; }
.imgB24 { position:absolute; top: 895px; left: 730px; z-index: 3; }
.imgB25 { position:absolute; top: 1015px; left: 65px; z-index: 3; }
.imgB26 { position:absolute; top: 1015px; left: 400px; z-index: 3; }
.imgB27 { position:absolute; top: 1015px; left: 730px; z-index: 3; }
.imgB28 { position:absolute; top: 1135px; left: 65px; z-index: 3; }
.imgB29 { position:absolute; top: 1135px; left: 400px; z-index: 3; }
.imgB30 { position:absolute; top: 1135px; left: 730px; z-index: 3; }
</style>
A few final words. First, the positions indicated in these definitions are relative to my usage of the style sheets. You may need to fine tune them to your own needs. To anyone practiced in the art of label design it should be obvious that my positions are not 100% accurate. These are 'eyeball' layouts. Poor old man doesn't even own a ruler.. I have researched pixel to inch conversions and that info is available on the web if you must have it.
One sad truth appears to be that you cannot center text in a space when that space is defined with an absolute position. I tried and failed.. That's the primary reason I used images for product names. Each image was created and the name properly centered in the image.
Finally, here is the info about the images used in the first example. This could be useful if you want to calculate your own positioning.
Product Image - W 400px x H 200px Resolution 300 DPI
Name Image - W 50px x H 200px Resolution 300 DPI
So there you have it, easy Avery Labels with CSS. I'll follow up with a few code snippets to show how easy it is to start printing from any label or position. What fun is it if you can't use it!
cheers,
Mr Bo
I'm not going to post the solution here since it is something of a competitve edge for me, but will give some hints.
Tables didn't work because the spacing of the table was not consistent with the layout of the labels. Some rows needed to be wider than others and it was amess.
The real answer was found with the Page Setup, which couldn't be controlled from the web browser without an ActiveX or other intrusive component.
I also used absolute position CSS, but ran mine through a looper, calculating the next position on the fly based on the database data.
Here's the final hint: The ultimate problem with printing labels from a web browser resided NOT with the page setup, the CSS or the browser type itself. The ultimate challenge lay with the printer itself.....8)
To be completely honest, I still have the original table structure in my scripts. It really serves no purpose other than to help me visualize the page positions.
believe I've solved the problem.Do tell us!
I'm not going to post the solution here
dang!
real answer was found with the Page Setup
I'm still working on a follow-up, but it looks pretty boring right now...
I set all the margins to 0 in Page Setup. Then I used CSS to add the padding to the page myself. I got the padding values from MS Word label template. If you create the template, then check the page settings in MS it will say what are the margins (in inches). And CSS does support values specified in inches (
padding: 2in;). Then you can click on the cell of the template table and go into properties and it will tell you the exact size in inches as well. Same thing for vertical/horizontal gaps.
I used just a simple table for this. I didn't have a problem with partially used labels. I needed to print many pages of the same stuff.
thanks txbakers - i guess i went down your route recently after wasting a lot of time, i had to set the printer settings locally before even thinking about anything else! so i'm glad i wasn't just being dumb!
- also i can only use one particular browser (any would have done) but for me opera,ie and firefox all print slighly differently with my style sheet.
once i'd done that it was simple, set the page size, format the addresses from the db in the normal way, and use very simple div stacked ontop of each other - two across for 10 labels a page, with a bit of tweaking could even use up part sheets of labels via a web form to select 'empty' divs!
of course when i had to print some labels VERY accurately eg where it was essential to 'center' the text on the label precisely, there was a bit of tweaking but it worked.
ps. oh thanks for a very detailsed post gp
