Тег диапазона стилей в выводе PDF с использованием mpdf

Мне нужно стилизовать тег span, заключенный внутри тега p, для кавычек, чтобы добиться следующего при выводе PDF с использованием библиотеки mpdf:

Ожидаемый результат в формате 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 с использованием mpdf

Однако, когда я вижу PDF-файл, кавычки размещаются неправильно.

Тег диапазона стилей в выводе PDF с использованием mpdf

Способ 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

Любой ввод / помощь очень приветствуются.

html css position alignment mpdf

11.07.2018 13:00

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

642

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Можете попробовать добавить border-top или vertical-align со значением px? должен работать для встроенных элементов.

Обновлять

Я пробовал это с mpdf, и у меня это работает,

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

Это именно то, что я искал! Спасибо :)

— 11.07.2018 16:11

11.07.2018 15:40