HTML to PDF Alignment issues

Aspose.PDF Product Family
1

Hi ,c#code.png (23.3 KB)
expected-result.pdf (58.5 KB)
result-generated.pdf (265.9 KB)

I need to convert HTML pages to PDF in windows desktop development. The Pdf is generated but the generated PDF had some alignment issues. I have attached the c# code, HTML code along with expected and obtained results.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <!--style_start-->
  <style type="text/css" media="all">
  
      @page {
        size: 3in 11in;
        margin: 0.1in 0 0.1in 0;
        background:   #ffffff;
  
      @bottom-center {
          content:element(footer)
        }
  
        @top-center {
          content: element(header)
        }
      }
      
  
      table {
        border-spacing: 0;
        border-collapse: collapse;
      }
      .pcs-itemtable {
        -fs-table-paginate: paginate;
      }
      img {
        page-break-inside: avoid;
       }
      #pageNumber:before {
        content: counter(page);
      }
  
     
  
      .pcs-template {
        font-family: ;
        font-size: 9pt;
        color: #000000;
      }
  
      .pcs-header-content {
        font-size: pt;
      color: ;
      background-color: ;
      }
      .pcs-template-body {
        padding: 0 0.2in 0 0.1in;
      }
      .pcs-template-footer {
        height: 0.1in;
      font-size: pt;
      color: ;
      padding: 0 0.2in 0 0.1in;
      background-color: ;
      }
      .pcs-footer-content {
      word-wrap: break-word;
      color: ;
      }
  
      .pcs-label {
        color: #000000;
      }
      .pcs-entity-title {
        font-size: 12pt;
        color: #000000;
      }
      .pcs-orgname {
        font-size: 10pt;
        color: #000000;
      }
      .pcs-customer-name {
        font-size: 9pt;
        color: #000000;
      }
      .pcs-eori-number {
        color: #333;
        margin: 0;
        padding-top: 10px;
      }
     .pcs-itemtable-header {
        font-size: 9pt;
        color: #000000;
        background-color: #ffffff;
      }
      .pcs-itemtable-breakword {
        word-wrap: break-word;
      }
      .pcs-taxtable-header {
        font-size: 9pt;
        color: #000000;
        background-color: #ffffff;
      }
      .breakrow-inside {
        page-break-inside: avoid;
      }
      .breakrow-after {
        page-break-after:auto;
      }
      .itemBody tr {
        page-break-inside: avoid;
        page-break-after: auto;
      }
      .pcs-item-row {
        font-size: 8pt;
        border-bottom: 1px solid #3c3d3a;
        background-color: #ffffff;
        color: #000000;
      }
      .pcs-item-sku {
        margin-top: 2px;
        font-size: 10px;
        color: #444444;
      }
      .pcs-item-desc {
          color: #000000;
          font-size: 8pt;
       }
      .pcs-balance {
        background-color: #ffffff;
        font-size: 14pt;
        color: #000000;
      }
      .pcs-totals {
        font-size: 9pt;
        color: #000000;
        background-color: #ffffff;
      }
      .pcs-notes {
        font-size: pt;
      }
      .pcs-terms {
        font-size: pt;
      }
      .pcs-header-first {
      background-color: ;
      font-size: pt;
      color: ;
          height: auto;
      }
  
     .pcs-status {
       color: ;
      font-size: 15pt;
      border: 3px solid ;
      padding: 3px 8px;
     }
     .billto-section {
         padding-top: mm;
         padding-left: mm;
       }
       .shipto-section {
         padding-top: mm;
         padding-left: mm;
       }
  
     @page :first {
       @top-center {
        content: element(header);
      }
        margin-top: in;
      }
  
      .pcs-template-header {
      padding: 0 0.2in 0 0.1in;
        height: in;
      }
  
      .pcs-template-fill-emptydiv {
        display: table-cell;
        content: " ";
        width: 100%;
      }
  
  
    /* Additional styles for RTL compat */
  
    /* Helper Classes */
  
    .inline {
      display: inline-block;
    }
    .v-top {
      vertical-align: top;
    }
    .text-align-right {
      text-align: right;
    }
    .rtl .text-align-right {
      text-align: left;
    }
    .text-align-left {
      text-align: left;
    }
    .rtl .text-align-left {
      text-align: right;
    }
    .float-section-right {
      float: right;
    }
    .rtl .float-section-right{
      float: left;
    }
    .float-section-left {
      float: left;
    }
    .rtl .float-section-left{
      float: right;
    }
  
    /* Helper Classes End */
  
    .item-details-inline {
      display: inline-block;
      margin: 0 10px;
      vertical-align: top;
      max-width: 70%;
    }
  
    .total-in-words-container {
      width: 100%;
      margin-top: 10px;
    }
    .total-in-words-label {
      vertical-align: top;
      padding: 0 10px;
    }
    .total-in-words-value {
      width: 170px;
    }
    .total-section-label {
      padding: 5px 10px 5px 0;
      vertical-align: middle;
    }
    .total-section-value {
      width: 120px;
      vertical-align: middle;
      padding: 10px 10px 10px 5px;
    }
    .rtl .total-section-value {
      padding: 10px 5px 10px 10px;
    }
  
    .tax-summary-description {
      color: #727272;
      font-size: 8pt;
    }
  
    .bharatqr-bg {
      background-color: #f4f3f8;
    }
  
    /* Overrides/Patches for RTL compat */
      .rtl th {
        text-align: inherit; /* Specifically setting th as inherit for supporting RTL */
      }
    /* Overrides/Patches End */
  
  
    /* Subject field styles */
    .subject-block {
        margin-top: 20px;
    }
    .subject-block-value {
        word-wrap: break-word;
        white-space: pre-wrap;
        line-height: 14pt;
        margin-top:5px;
    }
    /* Subject field styles End*/
  
  
    /* offline templates styles */
    th {
      text-align: inherit;
    }
    /* offline templates styles End*/
    .pcs-template {
    width:;
    }
    .pcs-receipt-custom-header {
     height: 0.1in;
    }
    .pcs-receipt-custom-footer {
     height: 0.1in;
    }
    .pcs-receipt-header {
    text-align: center;
    }
    .pcs-item-row {
    border-bottom: none;
    }
    .pcs-itemtable-header {
    border-top: 1px dashed #3c3d3a;
    border-bottom: 1px dashed #3c3d3a;
    }
    .pcs-balance td {
    border-top: 1px solid #3c3d3a;
    border-bottom: 1px solid #3c3d3a;
    }
    .pcs-receipt-header {
        padding: 0 0.2in 0 0.1in;
    }
    .rtl .pcs-receipt-header {
      padding: 0 0.1in 0 0.2in;
    }
    .pcs-receipt-body {
        padding: 0 0.2in 10px 0.1in;
    }
    .rtl .pcs-receipt-body {
      padding: 0 0.1in 10px 0.2in;
    }
    .pcs-receipt-body-fields::before {
      display: table;
      content: " ";
    }
    .pcs-receipt-body-fields::after {
      clear: both;
      display: table;
      content: " ";
    }
    .pcs-receipt-body-field {
      width: 47%;
      float: left;
      padding: 0px 3px 5px;
      position: relative;
      min-height: 1px;
      word-wrap: break-word;
    }
    .rtl .pcs-receipt-body-field {
      float: right;
    }
    .itemBody tr:first-child td, .pcs-totals tr:first-child td  {
        padding-top: 5px;
    }
    .itemBody tr:last-child td, .pcs-totals tr:last-child td  {
        padding-bottom: 5px;
    }
    .pcs-balance {
    text-transform: uppercase;
    font-size: 14pt;
    color: #000000;
    background-color: #ffffff;
    }
    .pcs-itemheader-section {
      padding:5px 0 5px 10px;
    }
    .rtl .pcs-itemheader-section {
      padding:5px 10px 5px 0;
    }
    .pcs-lineitem-column {
      text-align: right;
      word-wrap: break-word;
    }
    .rtl .pcs-lineitem-column {
      text-align: left;
      word-wrap: break-word;
    }
    .pcs-itemvalue-section {
      padding-left: 10px;
    }
    .rtl .pcs-itemvalue-section {
      padding-right: 10px;
    }
  
    /* Retail Premium template styles */
    .pcs-retail-fields-block {
      display: table;
      table-layout: fixed;
      width: 100%;
      padding: 10px 0px 5px;
      border-bottom: 1px dashed #3c3d3a;
      border-bottom: 1px dashed #3c3d3a;
    }
    .pcs-retail-fields-inner {
      display: table-row;
    }
    .pcs-retail-fields-label {
      display: table-cell;
      width: 50%;
      word-wrap: break-word;
      padding: 0px 3px 5px;
    }
    .pcs-retail-fields-value {
      display: table-cell;
      width: 50%;
      word-wrap: break-word;
      padding: 0px 3px 5px;
    }
    .pcs-retail-total {
      display: table;
      table-layout: fixed;
      width: 100%;
    }
    .pcs-retail-total-label {
      width: 60%;
      word-wrap: break-word;
      padding-right: 3px;
    }
    .pcs-retail-total-value {
      width: 40%;
      word-wrap: break-word;
    }
    .pcs-retail-border-tb {
      border-top: 1px dashed #3c3d3a;
      border-bottom: 1px dashed #3c3d3a;
    }
    /* Retail Premium template styles End*/
    .pcs-talign-center {
      text-align: center;
    }
    .pcs-wordwrap-bw {
      word-wrap: break-word;
    }
    .pcs-whitespace-pw {
      white-space: pre-wrap;
    }
    .pcs-entity-title {
      padding: 5px 0px;
      margin-top: 10px;
    }
    .pcs-documentqr-block {
      margin-left: auto;
      margin-right: auto;
      padding: 10px 0px;
      width: 100%;
      border-bottom: 1px dashed #3c3d3a;
    }
  </style>
   </head>
      <body> <!--style_end-->
  <div class="pcs-template pcs-receipt-container ">
      <div class="pcs-receipt-custom-header"></div>
      <div class="pcs-receipt-header">
          <div>
              <div style="margin-bottom: 15px;">
                  <img id="logo_content" style="width:px;height:px;" src="">
              </div>
  
              <div>
                  <div class="pcs-orgname"><b>vorganics</b></div>
  
                  <span>
                  <span id="tmp_org_address" class="pcs-whitespace-pw pcs-wordwrap-bw">Tamil Nadu 
  India
   
  Phone 79012345678
  Fax</span>
              </span>
              </div>
          </div>
      </div>
  
      <div class="pcs-receipt-body">
          <div class="pcs-entity-title pcs-retail-border-tb pcs-talign-center">TAX INVOICE</div>
  
          <div class="pcs-retail-fields-block">
              <div class="pcs-retail-fields-inner">
                  <div class="pcs-label pcs-retail-fields-label text-align-left">Invoice#</div>
                  <div class="pcs-retail-fields-value text-align-right">ct1-si37</div>
              </div>
  
              <div class="pcs-retail-fields-inner">
                  <div class="pcs-label pcs-retail-fields-label text-align-left">Date</div>
                  <div class="pcs-retail-fields-value text-align-right">20/04/2022</div>
              </div>
  
  
  
              <div class="pcs-retail-fields-inner">
                  <div class="pcs-label pcs-retail-fields-label text-align-left">P.O.#</div>
                  <div class="pcs-retail-fields-value text-align-right">ctr1-sb37</div>
              </div>
  
  
  
  
  
          </div>
          <div style="margin-top: 15px">
              <div class="pcs-label" id="tmp_billing_address_label">Bill To:</div>
              <div>
                  <span id="tmp_billing_address" class="pcs-whitespace-pw pcs-wordwrap-bw"><strong><span id="zb-pdf-customer-detail" class="pcs-customer-name">undefined</span></strong></span>
              </div>
          </div>
  
          <div style="margin-top: 15px">
              <div class="pcs-label" id="tmp_shipping_address_label">Ship To:</div>
              <div>
                  <span id="tmp_shipping_address" class="pcs-whitespace-pw pcs-wordwrap-bw">undefined</span>
              </div>
          </div>
  
          <table cellpadding="0" cellspacing="0" border="0" class="pcs-itemtable" style="width:100%;margin-top:15px;table-layout:fixed;">
              <thead>
              <tr style="height:32px;">
                  <td class="pcs-itemtable-header pcs-itemtable-breakword" id="" style="padding: 5px 0px 5px 0px;width: 1%;text-align: center;">
                    #
                  </td>
                  <td class="pcs-itemtable-header pcs-itemtable-breakword" id="" style="padding: 5px 10px 5px 10px;width: 43%;text-align: left;">
                    Item
                  </td>
                  <td class="pcs-itemtable-header pcs-itemtable-breakword" id="" style="padding: 5px 0px 5px 0px;width: 30%;text-align: right;">
                    Rate
                  </td>
                  <td class="pcs-itemtable-header pcs-itemtable-breakword" id="" style="padding: 5px 0px 5px 0px;width: 30%;text-align: right;">
                    MRP
                  </td>
                  <td class="pcs-itemtable-header pcs-itemtable-breakword" id="" style="padding: 5px 0px 5px 0px;width: 30%;text-align: right;">
                    Discount
                  </td>
                  <td class="pcs-itemtable-header pcs-itemtable-breakword" id="" style="padding: 5px 0px 5px 0px;width: 30%;text-align: right;">
                    Amount
                  </td>
              </tr>
              </thead>
  
              <tbody class="itemBody">
  
              <tr class="breakrow-inside breakrow-after">
                  <td class="pcs-item-row v-top pcs-wordwrap-bw pcs-talign-center">
                      1
                  </td>
  
                  <td class="pcs-item-row pcs-itemvalue-section v-top">
                      <span class="pcs-wordwrap-bw">colgate</span>
                      
                  </td>
  
  
  
  
  
  
  
  
  
  
                  <td class="pcs-item-row v-top pcs-lineitem-column">
                      <span id="tmp_item_rate">50</span>
                  </td>
  
                  <td class="pcs-item-row v-top pcs-lineitem-column">
                      <span id="tmp_item_rate">50</span>
                  </td>
  
                  <td id="tmp_item_discount" class="pcs-item-row v-top pcs-lineitem-column">
                      2.38
                  </td>
  
  
  
  
                  <td class="pcs-item-row v-top pcs-lineitem-column">
                      <span id="tmp_item_amount">47.5</span>
                  </td>
              </tr>
  
  
              <tr class="breakrow-inside breakrow-after">
                  <td class="pcs-item-row v-top pcs-wordwrap-bw pcs-talign-center">
                      2
                  </td>
  
                  <td class="pcs-item-row pcs-itemvalue-section v-top">
                      <span class="pcs-wordwrap-bw">PARACHUTE ADVANSED JASMINE 200ML</span>
                      
                  </td>
  
  
  
  
  
  
  
  
  
  
                  <td class="pcs-item-row v-top pcs-lineitem-column">
                      <span id="tmp_item_rate">75</span>
                  </td>
  
                  <td class="pcs-item-row v-top pcs-lineitem-column">
                      <span id="tmp_item_rate">75</span>
                  </td>
  
                  <td id="tmp_item_discount" class="pcs-item-row v-top pcs-lineitem-column">
                      5
                  </td>
  
  
  
  
                  <td class="pcs-item-row v-top pcs-lineitem-column">
                      <span id="tmp_item_amount">69.1</span>
                  </td>
              </tr>
  
              </tbody>
          </table>
  
          <div style="border-top: 1px dashed #3c3d3a;">
              <table width="100%" border="0" cellspacing="0" class="pcs-totals pcs-retail-total">
                  <tbody>
  
                  <tr>
                      <td class="text-align-right pcs-retail-total-label" valign="middle">Sub Total <br><span style="color:#000;font-size:10px;">(Tax Inclusive)</span></td>
                      <td class="text-align-right pcs-retail-total-value" valign="middle" id="tmp_subtotal">116.6</td>
  
                  </tr>
  
  
                  <tr>
                      <td class="text-align-right pcs-retail-total-label" valign="middle">CGST2.5</td>
                      <td class="text-align-right pcs-retail-total-value" valign="middle">1.13</td>
                  </tr>
                  <tr>
                      <td class="text-align-right pcs-retail-total-label" valign="middle">SGST2.5</td>
                      <td class="text-align-right pcs-retail-total-value" valign="middle">1.13</td>
                  </tr>
                  <tr>
                      <td class="text-align-right pcs-retail-total-label" valign="middle">CGST9</td>
                      <td class="text-align-right pcs-retail-total-value" valign="middle">5.27</td>
                  </tr>
                  <tr>
                      <td class="text-align-right pcs-retail-total-label" valign="middle">SGST9</td>
                      <td class="text-align-right pcs-retail-total-value" valign="middle">5.27</td>
                  </tr>
  
  
  
  
                  <tr>
                      <td class="text-align-right pcs-retail-total-label" valign="middle"><b>Total</b></td>
                      <td class="text-align-right pcs-retail-total-value" valign="middle" id="tmp_total"><b>₹116.6</b></td>
                  </tr>
  
                  <tr>
                      <td class="text-align-right pcs-retail-total-label" valign="middle" style="padding-bottom:5px;">Payment Made</td>
                      <td class="text-align-right pcs-retail-total-value" valign="middle" style="padding-bottom:5px;">(-) 116.6</td>
                  </tr>
  
  
                  <tr class="pcs-savings">
                      <td class="pcs-savings-label text-align-right" valign="middle">Total Savings</td>
                      <td class="pcs-savings-value text-align-right" valign="middle" id="tmp_balance_due">8.400000000000006</td>
                  </tr>
                  
                  </tbody>
              </table>
  
          </div>
      </div>
  </div>

      </body></html>

Thanks.

2

@vector2000

We were able to notice the issue while testing the scenario using Aspose.PDF for .NET 22.7. Hence, it has been logged as PDFNET-52196 in our issue tracking system. We will further look into its details and keep you posted with the status of its rectification. Please be patient and spare us some time.

We are sorry for the inconvenience.

3

@asad.ali

Any update on this issue?
We need to finalize the library for our product and proceed with the implementations. Can you kindly let us know the approximate ETA to solve this issue? So that we can decide and proceed accordingly.

4

@vector2000

The ticket has recently been logged in our issue tracking system and we are afraid that it is pending for an investigation. Please note that we resolve and fix issues on first come first serve basis in free support model. However, we have recorded your concerns and will surely inform you as soon as some progress is made in this regard. Please spare us some time.

We are sorry for the inconvenience.