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 :
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.
However when I see the PDF the quotes are not positioned correctly.
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.