Отчет HTML / CSS - язык RTL

Question

Я совсем не эксперт, когда дело доходит до макетов HTML.

Я пытаюсь создать отчет по счету, который выглядит примерно так:

Размеры печати должны составлять 13,9 см х 22,8 см

но я нахожусь в очень тяжелом положении, так как он на арабском языке, а арабский - это настоящий кошмар в веб-разработке, и это мой первый проект на арабском.

Я пробовал угловую библиотеку 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>   &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>

Мои вопросы:

• Какой подход мне выбрать, чтобы улучшить макет и сделать его более похожим на оригинал?

• Есть лиальтернатива pdfmake, которая поддерживает арабский язык? Я пробовал pdfkit и jspdf, и все они неудачныДля правильного создания арабских букв, есть ли кто-нибудь, кто мог бы сделать это на языке RTL с любой из этих библиотек?

Answer 1

Поэтому, когда дело доходит до структурирования чего-то подобного, я бы рекомендовал использовать Flexbox или CSS Grid .Он самостоятельно справится с выравниванием и, если ваш HTML-код структурирован правильно, создаст довольно привлекательную страницу.

Я собрал небольшой пример, чтобы помочь вам начать использовать Flexbox.Я бы порекомендовал почитать об этом, если это похоже на маршрут, по которому вы хотите идти.

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>