The following is the code I have managed to come up with for label size 5cm by 2.2cm. It prints perfectly.
I need to be able to have it print for other sizes as well, automatically resizing fonts and containers. The only 2 variables I want to change are the label size and label width as above. The rest need to be in a relationship with them.
<html lang="en">
<head>
<meta charset="utf-8">
<title>ENDEVOUR</title>
<link href="labels.css" rel="stylesheet" type="text/css">
<style>
body {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
width: 5.000000cm;
height: 2.200000cm;
}
.label{
margin: 0;
padding-top: 10.000000px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10.000000px;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
width: 4.800000cm;
height: 1.900000cm;
font-family: Century Gothic;
font-size: 9.000000px;
font-weight: bold;
float: left;
text-align: Left;
overflow: hidden;
}
.page-break {
clear: left;
margin: 0;
padding: 0;
border: 0;
outline: 0;
display:block;
page-break-after:always;
}
.pharmacyBlock {
display:block;
}
.pharmacyLogo {
margin-left: 5.000000px;
display: inline-block;
width: 15.000000px;
height: 15.000000px;
}
.pharmacyname {
margin: 0;
padding: 0;
border: 0;
outline: 0;
display:inline-block;
font-family: Century Gothic;
font-size: 12.000000px;
line-height: 5px;
}
.descriptionvalue {
margin: 0;
margin-left: 0%;
margin-top: descriptionMargin%;
padding: 0;
border: 0;
outline: 0;
display:block;
font-family: Century Gothic;
font-size: 9.000000px;
text-overflow: ellipsis;
white-space: pre;
line-height: 5px;
}
.pricevalue {
margin: 0;
margin-left: 20.000000%;
margin-top: 5.000000%;
padding: 0;
border: 0;
outline: 0;
display:block;
font-family: Century Gothic;
font-size: 12.000000px;
line-height: 5px;
}
.origindate {
margin: 0;
margin-left: 0%;
margin-top: 5.000000%;
padding: 0;
border: 0;
outline: 0;
display:block;
font-family: Century Gothic;
font-size: 9.000000px;
line-height: 5px;
}
</style>
</head>
<body onload="printFunction();">
<div class="label">
<span class="pharmacyBlock">
<p class="pharmacyname">STORE PHARMACY</p>
<img src="https://i.imgur.com/L1Zfjan.jpeg" class="pharmacyLogo" />
</span>
<p class="descriptionvalue">FLUANXOL 0.5MG X 60 TABS </p>
<p class="pricevalue">€5.78</p>
<p class="origindate">AGENT310321 VAT: 0% Inv: 487021</p>
</div>
<div class="page-break"></div><div class="label">
<span class="pharmacyBlock">
<p class="pharmacyname">STORE PHARMACY</p>
<img src="https://i.imgur.com/L1Zfjan.jpeg" class="pharmacyLogo" />
</span>
<p class="descriptionvalue">RODOGYL X 20 TABS * </p>
<p class="pricevalue">€6.49</p>
<p class="origindate">AGENT310321 VAT: 0% Inv: 487021</p>
</div>
<div class="page-break"></div><div class="label">
<span class="pharmacyBlock">
<p class="pharmacyname">STORE PHARMACY</p>
<img src="https://i.imgur.com/L1Zfjan.jpeg" class="pharmacyLogo" />
</span>
<p class="descriptionvalue">MATERNA DHA 24X34G (NESTLE) </p>
<p class="pricevalue">€13.49</p>
<p class="origindate">AGENT310321 VAT: 0% Inv: 487021</p>
</div>
<div class="page-break"></div>
<script>
function printFunction() {
var r = confirm("Do you want to open the print dialouge now?");
if (r == true) {
window.print();;
} else {
// closes alert
}
}
</script>
</body>
</html>Can anyone help me come up with something I can use for any label size? The label is meant to be printed and so it must keep its shape.
The answer to your question can be achieved with media queries, a popular technique for delivering different style rely on the size of screen, orientation of screen and so on.
Here a link to more information: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
May setting somethink like:
But thinking in your comment
Is necessary use Javascript to your front-end resize font rely the container's width, being it's dependent of breakpoint.
But before, see this answer: Font scaling based on width of container
Will probably solve the problem...