Hi,
I have just finished preparing my HTML for the letterhead.
the A4 paper size is 210mm in width and 297mm in length.
the size of the letterhead I need is 210x40mm.
Here’s my HTML text and you can try it:
<!-- DEfines languages of content : English -->
<!-- Information about website and creator -->
<meta charset="UTF-8">
<meta name="viewport">
<!-- for make website responsive -->
<meta name="author">
<meta name="Adil Elamin">
<!-- To give information about author or owner -->
<meta name="description ">
<!-- to explain about website in few words -->
<title>GeeksforGeeks</title>
<!-- Name of website or content to display -->
<style>
@media all {
@page {
size: 210mm 40mm;
margin-top: 0mm;
margin-bottom: 0mm;
margin-left: 0mm;
margin-right: 0mm;
orientation: landscape;
}
body{
margin:0;
}
.root {
display: grid;
grid-template-columns: repeat(42, 5mm);
grid-template-rows: repeat(8, 5mm);
grid-column-gap: 0mm;
font-family: 'Courier New', Courier, monospace;
font-weight: normal;
font-size: small;
/* align-items: flex-start; */
border: 0px solid black;
/* width: 200mm;
height: 274mm; */
width: 100vw;
height: 100vh;
/* justify-content: center;
align-items: center; */
}
.logo {
grid-column-start: 2;
grid-column-end: 15;
grid-row-start: 2;
grid-row-end: 7;
}
.logo > img {
object-fit: fill;
width: 100%;
max-height: 100%;
}
.address {
grid-column-start: 16;
grid-column-end: 39;
grid-row-start: 2;
grid-row-end: 8;
text-align:center;
margin: 0;
padding: 0;
}
.passcodeCell {
width: 20mm;
height: 5mm;
align-content: center;
position: relative;
border: 0px solid black;
}
</style>
<div class="root">
<div class="logo">
<img src="http://agriculture.rikazsd.com/wp-content/uploads/2023/07/Rikaz-International-General-Trading-all-balck-logo.png">
</div>
<div class="address">
<div class="rikaz-name-en">
<h4 style="margin: 0; padding: 0;">
Rikaz International General Trading L.L.C
</h4>
</div>
<div class="rikaz-name-ar">
<h4 style="margin: 0; padding: 0; margin-bottom: 2mm;">
ريكاز انترناشونال للتجارة العامة ش.ذ.م.م
</h4>
</div>
<div class="rikaz-address-en">
<p style="margin: 0; padding: 0;">
Malik Al Naboodah real estate – Port Saeed A502 – Office No. 16 – Dubai, UAE. Email: Export@rikazsd.com - Mobile: +971-50-686-2660
</p>
</div>
<div class="rikaz-address-ar">
<p style="margin: 0; padding: 0;">
ملك شركة النابودة العقارية – ديرة بور سعيد – A502 مكتب رقم 16 – دبي, الإمارات العربية المتحدة
</p>
</div>
</div>
</div>
when I save my HTML Text in the Letterhead, the sign “>” gets changed into “>” automatically, so this is the result after I save my HTML Text in ERPNext as a letterhead:
<!-- DEfines languages of content : English -->
<!-- Information about website and creator -->
<meta charset="UTF-8">
<meta name="viewport">
<!-- for make website responsive -->
<meta name="author">
<meta name="Adil Elamin">
<!-- To give information about author or owner -->
<meta name="description ">
<!-- to explain about website in few words -->
<title>GeeksforGeeks</title>
<!-- Name of website or content to display -->
<style>
@media all {
@page {
size: 210mm 40mm;
margin-top: 0mm;
margin-bottom: 0mm;
margin-left: 0mm;
margin-right: 0mm;
orientation: landscape;
}
body{
margin:0;
}
.root {
display: grid;
grid-template-columns: repeat(42, 5mm);
grid-template-rows: repeat(8, 5mm);
grid-column-gap: 0mm;
font-family: 'Courier New', Courier, monospace;
font-weight: normal;
font-size: small;
/* align-items: flex-start; */
border: 0px solid black;
/* width: 200mm;
height: 274mm; */
width: 100vw;
height: 100vh;
/* justify-content: center;
align-items: center; */
}
.logo {
grid-column-start: 2;
grid-column-end: 15;
grid-row-start: 2;
grid-row-end: 7;
}
.logo > img {
object-fit: fill;
width: 100%;
max-height: 100%;
}
.address {
grid-column-start: 16;
grid-column-end: 39;
grid-row-start: 2;
grid-row-end: 8;
text-align:center;
margin: 0;
padding: 0;
}
.passcodeCell {
width: 20mm;
height: 5mm;
align-content: center;
position: relative;
border: 0px solid black;
}
</style>
<div class="root">
<div class="logo">
<img src="http://agriculture.rikazsd.com/wp-content/uploads/2023/07/Rikaz-International-General-Trading-all-balck-logo.png">
</div>
<div class="address">
<div class="rikaz-name-en">
<h4 style="margin: 0; padding: 0;">
Rikaz International General Trading L.L.C
</h4>
</div>
<div class="rikaz-name-ar">
<h4 style="margin: 0; padding: 0; margin-bottom: 2mm;">
ريكاز انترناشونال للتجارة العامة ش.ذ.م.م
</h4>
</div>
<div class="rikaz-address-en">
<p style="margin: 0; padding: 0;">
Malik Al Naboodah real estate – Port Saeed A502 – Office No. 16 – Dubai, UAE. Email: Export@rikazsd.com - Mobile: +971-50-686-2660
</p>
</div>
<div class="rikaz-address-ar">
<p style="margin: 0; padding: 0;">
ملك شركة النابودة العقارية – ديرة بور سعيد – A502 مكتب رقم 16 – دبي, الإمارات العربية المتحدة
</p>
</div>
</div>
</div>
the first HTML gets displayed correctly on the browser and you can try it by yourself, but the second HTML with > instead of > will not get displayed correctly either from the browser or after I convert the document into PDF. That means wkhtmltopdf never recognizes the > same as the browser.
here I am attaching three screenshots.
first, one running my HTML code from the browser which is correct:
the second one after I print the document but before I convert it to pdf in ERPNext.
and the Third one is after I convert it to PDF in which the sign > gets ignored.
any idea how can I work around this problem?
Thanks, a lot
