使用 mpdf 在 PDF 输出中设置样式 span 标签

Question

我需要设置包含在 p 标签内的 span 标签的样式以使用 mpdf 库在 PDF 输出中实现以下效果：

预期 PDF 输出：

方法一：

<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 时，引号的位置不正确。

方法二：

<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

非常感谢inputs/help。

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

使用 mpdf 在 PDF 输出中设置样式 span 标签

Style span tag in PDF output using mpdf

html

css

position

alignment

mpdf

更新