使用mpdf在PDF输出中使用样式跨度标签

Question

我需要设置p标记内的span标记的样式，以便使用mpdf库在PDF输出中实现以下目的：

预期的PDF输出：

方法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;
}

HTML上的当前输出符合预期，引号的位置正确。

但是，当我看到PDF时，引号位置不正确。

方法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);
}

结果是相同的。我得到了所需的HTML输出，但没有得到PDF输出。

我正在使用mPDF 7.0.2

非常感谢任何输入/帮助。

Answer 1

您可以尝试添加具有px值的border-top或vertical-align吗？应该适用于内联元素。

更新

我用mpdf尝试过，它对我有用，

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