Генерация TCPDF: изображение перетекает в следующий столбец, когда слишком высоко

Question

В настоящее время я нахожусь в процессе создания типа отчета в формате PDF, в котором несколько статей объединены в заданный макет.Несколько дней назад мне пришлось изменить структуру pdf, чтобы текст статьи был разделен на три отдельные колонки.

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

Способ создания Html-файла для PDF-файла довольно прост:

// add source to article
$htmlString  = '<p style="font-size: 17px;">' . $valVal['source'] . ' vom ' . $valVal['date'] . '</p>';

// add title to article
$htmlString .= '<p style="font-size: 22px; text-align: left;">' . $valVal['title'] . '</p>';

// Add subtitle to article
if ($valVal['subtitle'] != '' && $valVal['subtitle'] != null) {
    $htmlString .= '<p style="font-size: 13px; text-align: justify; padding: 0; margin: 0; font-weight: bold;">' . $valVal['subtitle'] . '</p>';
}

$this->pdf->writeHtml($htmlString . '<p><br></p>', true, false, false, false, '');
$htmlString = '';

$this->pdf->setEqualColumns(3, 57);  // KEY PART -  number of cols and width
$this->pdf->selectColumn(); // select proper column

// Add summary
if ($valVal['summary'] != '' && $valVal['summary'] != null) {
    $htmlString .= '<p style="font-size: 13px;">Zusammenfassung:</p>';
    $htmlString .= '<div class="article-summary" style="font-size: 13px; text-align: justify; padding-bottom: 0; margin-bottom: 0;">';

    // if there are image captions, style them
    if(preg_match("/(\<figcaption.*\>)(.*)(\<\/figcaption\>)/", $valVal['summary'])) {
        $valVal['summary'] = preg_replace("/(\<figcaption.*\>)(.*)(\<\/figcaption\>)/", '$1<div style="background-color: #ffffff; font-size: 9px;">$2</div>$3', $valVal['summary']);
        $valVal['summary'] = preg_replace("/<img([\w\W]+?)(\/|)>/", '<div style="text-align:center;">$0</div>', $valVal['summary']);
    }

    $htmlString .= $valVal['summary'];

    $htmlString .= '</div>';
}

// build html string for the article's text
$htmlString .= '<p style="font-size: 13px; text-align: justify;">';

// if there are image captions, style them
if(preg_match("/(\<figcaption.*\>)(.*)(\<\/figcaption\>)/", $valVal['excerpt'])) {
    $valVal['excerpt'] = preg_replace("/(\<figcaption.*\>)(.*)(\<\/figcaption\>)/", '$1<div style="background-color: #ffffff; font-size: 9px;">$2</div>$3', $valVal['excerpt']);
    $valVal['excerpt'] = preg_replace("/<img([\w\W]+?)(\/|)>/", '<div style="text-align:center;">$0</div>', $valVal['excerpt']);
}

$htmlString .= $valVal['excerpt'];
$htmlString .= '</p>';

$this->writeHyphenatedHtml($htmlString); // the function uses the php library "Syllable" and then inserts the text via "WriteHtml" - this is not the issue, I've tested without the hyphenation

У кого-нибудь возникла связанная проблема, и он знает, как я могу ее исправить?

Редактировать:сгенерированный html определенной части выглядит следующим образом - игнорируйте html-сущности, пожалуйста:

<p>&#8222;AC/DC
   bietet sich doch eigentlich fürs Klavier an&#8220;, kündigt Rüth im vollbesetzten Kammermusiksaal nach
   knapp 100 überraschenden Konzertminuten die letzte Zugabe an.
   &#8222;Oder Löwenzahn&#8220;
   ergänzt ihre Bühnenkollegin Ming mit
   koreanischen Wurzeln. Sie eröffnen
   mit Johann Sebastian Bachs
   &#8222;Toccata&#8220; und treiben
   sich gegenseitig an ihren Flügeln sitzend in den HardrockRhythmus der
   australischen Rockband hinein.
   &#8222;Thunderstruck&#8220; von
   AC/DC.
</p>
<figure id="attachment_620" style="width: 201px"
   class="wp-caption alignnone">
   <div
      style="text-align:center;"><img
      class="wp-image-620 size-full" src="
      http://127.0.0.1/_project/wp-content/uploads/2019/01/bild-2.jpg"
      alt="" width="201" height="245"
      /></div>
   <figcaption class="wp-caption-text">
      <div style="background-color: #ffffff; font-size: 9px;">Die beiden
         Musikerinnen nach der Show. (c)
         Spiegel online
      </div>
   </figcaption>
</figure>
<p> Die beiden Musikerinnen spielen im Sitzen, im Stehen und im Liegen. Sie zupfen die
   Saiten der beiden Flügel, sie benutzen sie als Percussions-Instrument
   oder einfach nur als Ablage für ihre
</p>

Answer 1

Это <div style="text-align:center;"> у вас есть обертывание ваших изображений, это проблема.Я предполагаю, что это здесь, чтобы обеспечить выравнивание по центру, когда у вас есть изображение, которое не охватывает всю ширину столбца.Изменение text-alignment не приводит к изменению значений, подаваемых на Image внутри, поэтому это некоторая комбинация текущего состояния макета / анализатора и обработки разрыва столбца.Отладка состояния TCPDF на данный момент немного выше моих возможностей.

Однако у меня есть обходной путь: поддержка таблиц в TCPDF немного более надежна, поэтому вместо использования div для выполнения выравнивания по центру используйтеодноклеточный table.То есть: <table width="100%"><tbody><tr><td align="center"><!--Image tag here--></td></tr></tbody></table>

Вот код форматирования изображения, который я использовал для получения вывода на снимке экрана ниже:

$valVal['excerpt'] = preg_replace("/<img([\w\W]+?)(\/|)>/", '<table width="100%"><tbody><tr><td align="center">$0</td></tr></tbody></table>', $valVal['excerpt']);
//I'm wrapping any image tag here. 
$valVal['excerpt'] = str_replace('<figcaption', '<div style="font-size: 9px;" ', $valVal['excerpt']);
$valVal['excerpt'] = str_replace('</figcaption', '</div', $valVal['excerpt']);
//figcaption not supported. Replacing to preserve proper text placement.

Примечание: TCPDF удаляет figcaption и figureот ввода HTML, так что я стал ленивым и просто заменил figcaption на divs.В ходе тестирования я обнаружил, что при выравнивании ваших изображений с таблицей ваши заголовки ДОЛЖНЫ БЫТЬ ОБОРОТЫ ПОДДЕРЖАННОЙ БЛОК-УРОВНЕМ , иначе текст заголовка не будет отображаться в столбце.