How to create printing labels in php?

Question

I've generated some labels using HTML and CSS which I intend to print onto to pre-printed label paper. The labels should have a fixed width of 45mm * 35mm, which I've set in CSS, but when printed they come out at different sizes.

I've also tried converting the HTML to a PDF using HTML to PDF, but this hasn't helped. What am I doing wrong?

My Html:

<html>
<head>
<style>
    @media screen , print {
body {
    margin: 0;
    border: 0.264583333mm solid green;
}
.table_style {
    width: 100%;
}
.table_style td {
    text-align: left;
    padding: 0 0 3.175mm 5.291666667mm;
}
.space {
    height: 2.645833333mm;
}
.div_print {
    width: 63mm;
    height: 37.735416667mm;
    margin-top: 3.735416667mm;
    border-width: 1px;
    border-style: solid;
    border-color: red;
}
.part_dec_print {
    font: 3mm arial;
    text-align: left;
    padding-left: 1.5875mm;
    height: 8.5mm;
}
.p_tag {
    height: 100%;
    vertical-align: middle;
    padding-top: 1.5875mm;
}

.qty_span {
    padding-top: 1.5875mm;
}
.part_print {
    font: 6.5mm arial;
    height: 6.5mm;
    text-align: left;
    padding-left: 1.5875mm;
}
.bar_print {
    padding-left: 3.96875mm
}
.qty_print {
    font: 6.5mm arial;
    text-align: center;
    height: 6.5mm;
}
.date_print {
    font: 2mm arial;
    text-align: right;
    padding-right: 4.645833333mm;
    margin-top: 4.995833333mm;
    height: 2mm;
}
}
</style>
</head>
<body cz-shortcut-listen="true">
<div class="div_print">
    <div class="part_dec_print">
        <div class="p_tag">REAR FABRIC SCVR</div>
    </div>
    <div class="part_print">PZQ22-12100</div>
    <div class="bar_print">
        <img alt="testing" src="http://anybarcode_image_here201x29.png">
    </div>
    <div class="qty_print">1</div>
    <div class="date_print">23A4</div>
</div>

Please post your html and css code - there's almost certainly an error, as if you've set the css to show the labels at a certain physical size, they will - but without seeing your code it's impossible to know where you've gone wrong. I can say that converting it to a PDF won't help, as PDF conversion works similarly to printing (on some systems it's known as Print PDF rather than Save As), so any errors that occur on printing will also occur when saving as a PDF. — Sinister Beard, Jan 23 '14 at 09:14
That code works fine - all of the boxes are the same size. If you want to have them defined on an A4 sheet of paper, for example, you may want to include a container div which is the size of your paper, and use float: left on the labels to get more than one in a row, but otherwise I can't see what's wrong with it. — Sinister Beard, Jan 23 '14 at 09:28
The pre printed label is single column one and it is a roll type. here just print the html page in chrome and firefox and compare both print outs it definitely varies. For comparison just repeat the div_print container few more times for more labels. and I need millimeter level accuracy. if it varies even by 1mm the label alignment will change when I print more labels — Kanagu, Jan 23 '14 at 09:57
Ahhh, that wasn't in the original question. It was worded as though the individual DIVs were changing on page, not that the whole page looked slightly different per browser. Answer below. — Sinister Beard, Jan 23 '14 at 10:00

score 2 · Answer 1 · edited May 23 '17 at 12:30

2

If the problem is differences between browsers (as I think it is now from your comments), then the issue is that your widths include fractional measurements, e.g. 4.645833333mm.

Each browser round decimals slightly differently as discussed here - there's no guaranteed away around it other than to not include fractional widths.

edited May 23 '17 at 12:30

Community

1
1

answered Jan 23 '14 at 10:03

Sinister Beard

3,570
12
59
95

Yes you are right, the browsers doesn't give specific height and width even though for the rounded values – Kanagu Jan 24 '14 at 04:21
No, As I choose to go with browser specific css as a solution, may be generating pdf using imagemagick is also a better solution – Kanagu Jan 24 '14 at 09:33
...but my answer was what led you to that decision? And was the correct answer to the question? – Sinister Beard Jan 24 '14 at 09:46

score 0 · Answer 2 · answered Aug 28 '15 at 18:39

0

What about creating a PDF in PHP (with something like dompdf) and then styling the PDF so it has the correct widths and heights for your label cells. The PDF and styled formatting should always be the same size no matter the browser.

answered Aug 28 '15 at 18:39

Sean Gallagher

94
1
9

score 0 · Answer 3 · answered Apr 09 '19 at 10:27

0

From device preferences, you have to set page size according to your label and it will work. I just did it for TSC TA210 device!

page size css never work in this case! it will print lots of empty label for you.

answered Apr 09 '19 at 10:27

Prakash Malviya

38
6

2

Could you add working code that you used in your solution? That will help the question author more than a pure theoretical explanation. – SaschaM78 Apr 09 '19 at 11:06
Thanks for your answer! We've a guide [How to write a good answer](https://stackoverflow.com/help/how-to-answer). It would be great if you could improve your contribution. Thanks! – David Apr 09 '19 at 12:11

How to create printing labels in php?

My Html:

3 Answers3