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 : Method 1 : <...

问题:

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.


回答1:

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;
}
  • 发表于 2018-07-13 20:12
  • 阅读 ( 299 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除