Search code examples
htmlcsspositionalignmentmpdf

Style span tag in PDF output using mpdf

I need to style the span tag enclosed inside a p tag for quotes to achieve the following in PDF output using mpdf library :

Expected PDF Output :

enter image description here

Method 1 : 

<blockquote>
  <p>
    <span class="quote-open">“</span>
    A good hockey player plays where the puck is. A great hockey player plays where the puck is going to be.
    <span class="quote-close">”</span>
  </p>
</blockquote>

blockquote p {
    font-size: 10pt;
    line-height: 1.625rem;
}
blockquote .quote-close, blockquote .quote-open {
  position: relative
  font-size: 18pt;
  top: 4pt;
}

Current Output on HTML is as expected with the placement of the quotes correct.

enter image description here

However when I see the PDF the quotes are not positioned correctly.

enter image description here

Method 2:

<blockquote>
  <p>
    <span class="quote-open">“</span>
    A good hockey player plays where the puck is. A great hockey player plays where the puck is going to be.
    <span class="quote-close">”</span>
  </p>
</blockquote>

blockquote p {
    font-size: 10pt;
    line-height: 1.625rem;
}
blockquote .quote-close, blockquote .quote-open {
  position: absolute
  font-size: 18pt;
}
.quote-open {
  transform: translate(-105%,0.065em);
}
.quote-close {
  transform: translate(20%,0.12em);
}

The result is same. I get the desired output in HTML but not on PDF.

I am using mPDF 7.0.2

Any inputs/help is very much appreciated.

Solution

  • Can you try adding border-top or vertical-align with a px value? should work for inline elements.

    Update

    I tried this with mpdf and it works for me,

    blockquote .quote-close, blockquote .quote-open {
  /*position: relative
  font-size: 20pt;
  top: 14pt;*/
  color: blue;
  font-size: 50px;
  vertical-align: -10px;
}