I create a html page of a price tag and when i try to print the html page in a small scaled size the tag quality reduced. Html page is write it in zoho creator application and snippet and css are given blow. Actually i need to print the tag of size 60x45 size, i try to change font and sizes but those are not get applied while we getting the printout. Some of the tag a non familiar in my code because this code was written in zoho creator application.
<html>
<head>
//
<link rel="preconnect" href="https://fonts.googleapis.com">
//
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
//
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Schibsted+Grotesk&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.sec {
padding-left: 15px;
}
.code {
height: 65px;
width: 360px;
margin-left: 60px;
padding-bottom: 50px;
}
p
{
//letter-spacing: .7px;
margin : 0 ;
padding:0;
font-size:37px;
font-family: Arial ;
//font-family: helvetica;
//font-family : Verdana ;
//font-family: 'Schibsted Grotesk', sans-serif;
font-weight: 600;
// font-weight: bold;
}
.siz
{
font-size:50px;
}
.word{
word-spacing: 30px;
}
.price
{
font-size:50px;
}
img{
width: inherit;
//height: inherit;
height: 115px;
}
b{
font-family: Arial ;
// font-family: 'Schibsted Grotesk', sans-serif;
}
@page {
size : 1.77in 2.36in ;
}
</style>
</head>
<body>
<div class="sec">
<b>
<p style="padding-top: 10px; margin-top: -8px; letter-spacing: 2.5px; font-weight: 700;"> BRAND <b style="margin-left:55px; font-weight: 700; letter-spacing: 2.5px;">: ENGLISH COLOURS</b></p>
<p style="letter-spacing: 2.5px; font-weight: 700;"> PRODUCT <b style="margin-left:12px; font-weight: 700; letter-spacing: 2.5px;">: <%=product.Product_Name%></b></p>
<p style="letter-spacing: 2.5px; font-weight: 700;"> STYLE <b style="margin-left:70px; font-weight: 700; letter-spacing: 2.5px;">: <%=style.Style%> <%=variant.Variant%></b></p>
<p style="letter-spacing: 2.5px; font-weight: 700;"> SIZE <b style="margin-left:95px; font-weight: 700; letter-spacing: 2.5px;">:</b><b style="margin-left:0px;" class="siz"> <%=productSize.Size%></b></p>
<p style="letter-spacing: 2.5px; font-weight: 700;"> NET QTY <b style="margin-left:29px; font-weight: 700; letter-spacing: 2.5px;">: <%=product.Net_Quantity%> No.</b></p>
<p class="price" style="letter-spacing: 2.5px; font-weight: 700;"> MRP <b style="margin-left:-12px; letter-spacing: 2.5px;">₹ <%=product.MRP%></b></p>
</b>
<P style="font-size:30px; LETTER-SPACING: 2px; font-weight:600"> (Inclusive of all Taxes)</P>
<b>
<P style="margin-top: -1px; word-spacing: 2.5px; letter-spacing: 2.5px; font-weight: 700;"> Manufactured & Packed by:</P>
<P style="margin-top: -1px word-spacing: 2.5px; letter-spacing: 2.5px; font-weight: 700; "><%=manufacture.address_line_11%></P>
<P style="margin-top: -1px; word-spacing: 1.5px; letter-spacing: 1.5px; font-weight: 700;"><%=manufacture.address_line_21%>-<%=manufacture.postal_Code1%></P>
<P style="margin-top: -1px; word-spacing: 1.5px; letter-spacing: 1.5px; font-weight: 700;"> Under License From :</P>
<P style="margin-top: -1px; word-spacing: 1.5px; letter-spacing: 1.5px; font-weight: 700;"> <%=license.address_line_12%></P>
<P style="margin-top: -1px; word-spacing: 1.5px; letter-spacing: 1.5px; font-weight: 700;"> <%=license.address_line_22%> <%=license.postal_Code2%></P>
<P style="margin-top: -1px; word-spacing: 1.5px; letter-spacing: 1.5px; font-weight: 700;"> In case of any complaints:</P>
<P style="margin-top: -1px; word-spacing: 1.5px; letter-spacing: 1.5px; font-weight: 700;"> <%=email%></P>
<P style="margin-top: -1px; word-spacing: 1.5px; letter-spacing: 3px; font-weight: 700;"><%=website%></P>
<P style="margin-top: -1px; word-spacing: 1.5px; font-weight: 700;"> CODE : <%=product.Production_Code%></P>
<div class="code">
<img src=<%=URL%>>
</div>
</b>
</div>
</body>
</html>
Printed output are given below,Help on this printing issue
Add this to your CSS part (
<style>);Please adjust the property values as you feel appropriate. That is, since I don't have the aspect ratio of image, I have considered it as 1:1.
Hope you find this useful!