HTML/CSS Report - RTL Language - html

Question

I am not very expert at all when it comes to html layouts.
I am trying to generate an invoice report which looks exactly like this:
Print dimensions must be 13.9cm x 22.8 cm
but I am finding a very hard time since it's in Arabic, and Arabic is a pure nightmare in web development, and that's my first project in arabic.
I've tried pdfmake's angular library which gives a better way to produce such reports, but it does not support Arabic fonts :(!
So instead, I am trying to replicate the same layout in html/css:
which looks much uglier than the original; and it's hard to get the same page dimension on print here.
My html layout:
<div ng-if="printVar === true " style="width:13.9cm; height:22.8cm; border:1px solid black;">
<style>
.navbar-primary {
display: none !important;
}
.navbar {
display: none !important;
}
</style>
<h3 style="text-align: center"> شركة ففف فف ش.م.ل </h3>
<br>
<br>
<div style= "text-align: center;">
الدورة - شارع الضمان الاجتماعي - لبنان
هاتف: ٠١\فففف- فففف</div>
<hr>
<div style="margin:0px 30px 0px 20px; text-align: right">
<span style="float: right;">:المرجع</span> <span style="padding:20px"> {{reference}} </span> <br>
<span style="float: right;">:التاريخ</span> <span style="padding:20px"> {{datenow |date: "MM/dd/yy" }} </span> <br>
<hr>
<br>
<div style="margin:0px 30px 0px 20px; text-align: right">
<br>
<br> <span style="float: right;">رقم الشاحنة</span> <span style="padding:20px"> {{truckNumber}} </span>
<br>
<br> <span style="float: right;"> الشركة </span> <span style="padding:20px"> {{company}} </span>
<br>
<br> <span style="float: right;"> السائق </span> <span style="padding:20px">{{driverName}} </span>
<br>
<br> <span style="float: right;"> نوع البضاعة </span> <span style="padding:20px"> {{commodity}}</span>
<br>
<br> <span style="float: right;">شركة الشحن </span> <span style="padding:20px">{{freightCompany}}</span>
<br>
<br>
<br>
<div style="border:1px solid black;">
<br> <span style="float: right;"> :(الوزنة الأولى (كلغ</span> &nbsp&nbsp <span style="padding:20px"> {{firstWeight}} </span>
<br> {{firstWeightDate|date: "MM/dd/yy - hh:mm:ss"}}
<br> <br> <span style="float: right;"> :(الوزنة الثانية (كلغ </span> &nbsp&nbsp <span style="padding:20px"> {{secondWeight}} </span>
<br> {{secondWeightDate|date: "MM/dd/yy - hh:mm:ss"}}
<br>
<span style="float: right;">:الوزن الصافي </span> <span style="padding:20px"> {{secondWeight- firstWeight}} </span>
</div>
<br> <br> <br>
<div style= "width:150px; height: 110px; border:1px solid black; float:left; text-align:center; margin-right:60px" >
إمضاء المسؤول عن الموقع</div>
<div style= "width:150px; height: 110px ;border:1px solid black; float:left ;text-align:center" >
إمضاء السائق </div>
</div>
</div>
My questions:
What approach should I adopt to improve the layout and make it more similar to the original?
Is there a pdfmake alternative that supports arabic? I have tried pdfkit and jspdf and all are failing to produce arabic letters correctly, is there anyone who could make it with a rtl language with any of these libraries?

Answer 1

So when it comes to structuring something like this, I would recommend using either Flexbox or CSS Grid. It will handle quite a bit of the alignment on its own and, assuming your HTML is structured correctly, make a fairly good looking page.
I threw together a short example to help you get started using Flexbox. I would recommend reading up on it if this seems like the route you want to take.
h2,
h4 {
text-align: center;
}
.bordered {
border: 1px solid black;
}
.centered {
text-align: center;
display: block;
}
.container {
margin-bottom: 1em;
}
.row {
display: flex;
justify-content: space-between;
margin-bottom: 0.5em;
}
.row.right {
justify-content: flex-end;
}
.cell {
margin: 0 0.5em;
}
.expanded {
min-width: 45%;
height: 100px;
}
.sub-header {
border-left: none;
border-right: none;
padding: 0.5em 2em;
}
<div ng-if="printVar === true ">
<style>
.navbar-primary {
display: none !important;
}
.navbar {
display: none !important;
}
</style>
<h2> شركة ففف فف ش.م.ل </h2>
<h4>الدورة - شارع الضمان الاجتماعي - لبنان هاتف: ٠١\فففف- فففف</h4>
<div class="container bordered sub-header">
<div class="row">
<span class="cell"> {{datenow |date: "MM/dd/yy" }}</span>
<span class="cell">التاريخ</span>
<span class="cell">{{reference}}</span>
<span class="cell">المرجع</span>
</div>
</div>
<div class="container text-body">
<div class="row right">
<span class="cell">{{truckNumber}}</span>
<span class="cell">رقم الشاحنة</span>
</div>
<div class="row right">
<span class="cell">{{company}}</span>
<span class="cell">الشركة</span>
</div>
<div class="row right">
<span class="cell">{{driverName}}</span>
<span class="cell">السائق</span>
</div>
<div class="row right">
<span class="cell"> {{commodity}}</span>
<span class="cell">نوع البضاعة</span>
</div>
<div class="row right">
<span class="cell">{{freightCompany}}</span>
<span class="cell">شركة الشحن</span>
</div>
</div>
<div class="container bordered">
<div class="row">
<span>{{firstWeightDate|date: "MM/dd/yy - hh:mm:ss"}}</span>
<span>{{firstWeight}}</span>
<span>(الوزنة الأولى (كلغ</span>
</div>
<div class="row">
<span>{{secondWeightDate|date: "MM/dd/yy - hh:mm:ss"}}</span>
<span>{{secondWeight- firstWeight}}</span>
<span>الوزن الصافي</span>
</div>
</div>
<div class="row">
<div class="cell bordered expanded">
<span class="centered">إمضاء المسؤول عن الموقع</span>
</div>
<div class="cell bordered expanded">
<span class="centered">إمضاء السائق</span>
</div>
</div>
</div>