Я совсем не эксперт, когда дело доходит до html-макетов.
Я пытаюсь создать отчет о счете-фактуре, который выглядит точно так:
Размеры печати должны быть 13,9 см x 22,8 см.
но мне очень тяжело, так как он на арабском языке, а арабский — это настоящий кошмар в веб-разработке, и это мой первый проект на арабском языке.
Я попробовал библиотеку angular pdfmake, которая дает лучший способ создания таких отчетов, но она не поддерживает арабские шрифты :(!
Поэтому вместо этого я пытаюсь воспроизвести тот же макет в html/css:
что выглядит гораздо уродливее оригинала; и здесь трудно получить тот же размер страницы при печати.
Моя html-раскладка:
<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>    <span style="padding:20px"> {{firstWeight}} </span>
<br> {{firstWeightDate|date: "MM/dd/yy - hh:mm:ss"}}
<br> <br> <span style="float: right;"> :(الوزنة الثانية (كلغ </span>    <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>
Мои вопросы:
Какой подход я должен использовать, чтобы улучшить макет и сделать его более похожим на оригинал?
Есть ли альтернатива pdfmake, поддерживающая арабский язык? Я пробовал pdfkit и jspdf, и все они не могут правильно воспроизвести арабские буквы, есть ли кто-нибудь, кто мог бы сделать это с помощью языка rtl с любой из этих библиотек?