After spending some time developing the code for a label size of 5cm by 2.2cm, I have successfully printed it without any issues.
Now, my goal is to create a flexible solution that automatically adjusts font sizes and containers for various label sizes. The only variables I want to modify are the label size and width mentioned above, while keeping everything else in proportion.
<html lang="en">
<head>
<meta charset="utf-8">
<title>ENDEVOUR</title>
<link href="labels.css" rel="stylesheet" type="text/css">
<style>
// CSS styles for different elements and classes
</style>
</head>
<body onload="printFunction();">
<div class="label">
<span class="pharmacyBlock">
<p class="pharmacyname">STORE PHARMACY</p>
<img src="pharmacy-logo.jpg" class="pharmacyLogo" />
</span>
<p class="descriptionvalue">Product Description Here</p>
<p class="pricevalue">Price: $X.XX</p>
<p class="origindate">Origin and Date Here</p>
</div>
// More label content here...
<script>
function printFunction() {
var r = confirm("Do you want to open the print dialog now?");
if (r == true) {
window.print();
} else {
// close alert
}
}
</script>
</body>
</html>I'm looking for assistance in creating a solution that can adapt to any label size while maintaining its shape for printing purposes. Can anyone help me with this challenge?