Label printing with HTML and CSS. How to resize label and containers according to label height and width?

Question

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">&euro;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">&euro;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">&euro;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.

Saulo J · Answer 1 · 2021-04-04T23:55:10.793

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:

@media screen and (max-width: 600px) and (min-width: 200px) {
  #idOfdiv {
    font-size:15px;
  }

@media screen and (max-width: 800px) and (min-width: 601px) {
  #idOfdiv {
    font-size:20px;
  }
}

But thinking in your comment

I need to have the label, not change dimensions (in this case 5cm by 2.2cm), and all divs inside resize the font to fit exactly in the dimensions. If dimensions increase, the font increases so on so forth. I should only be able to change two variables, and the rest should be automatic. – John Agius Mar 31 at 6:15

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...

I need to have the label, not change dimensions (in this case 5cm by 2.2cm), and all divs inside resize the font to fit exactly in the dimensions. If dimensions increase, the font increases so on so forth. I should only be able to change two variables, and the rest should be automatic. — John Agius, Mar 31 '21 at 06:15

Label printing with HTML and CSS. How to resize label and containers according to label height and width?

1 Answers1