如何在 PDF 中正确定位图像旁边的文本？

Posted 2023-02-16

【中文标题】如何在 PDF 中正确定位图像旁边的文本？

【英文标题】：How to position the text next to images properly in PDF?

【发布时间】：2013-03-22 06:10:24

【问题描述】：

我正在使用 php、Smarty 和 TCPDF 库来生成文档的 PDF 副本。 该文档包含来自 WIRIS 编辑器的数学表达式图像以及文本内容。

我在正确定位表情图像旁边的文本时遇到问题。

我尝试了 CSS float 属性中的所有内容，但没有任何反应。我正在附上我想要的这封邮件的屏幕截图。

这是打印问题及其选项的 smarty 模板代码：

foreach from=$question_data item=qstn_ans key=key
    <table border="0"  cellpadding="2" cellspacing="0">
        <tr>
            <td valign="top" >if $qstn_ans.question_directions$qstn_ans.question_directions<br /><b>Question $que_seq_no : </b>/if$qstn_ans.question_text</td>
        </tr>
        if $qstn_ans.question_file
        <tr>
            <td><img src="$ques_thum_image_path$qstn_ans.question_id_$qstn_ans.question_file" /></td>
        </tr>
        /if
        if $qstn_ans.question_has_sub_ques==0
            if $qstn_ans.answer
                foreach from=$qstn_ans.answer item=ans key=ans_no
                    <td valign="top" >
                        if $ans.answer_is_right==1assign var='correct_ans' value=$ans_no+1/if
                            <b>$ans_no+1.</b>&nbsp;&nbsp;if $ans.answer_text!=''$ans.answer_text/if
                            if $ans.answer_file!=''<img src="$ans_thumb_img_path$ans.answer_id_$ans.answer_file" />/if
                     </td>
                </tr>
                /foreach
        <tr>
            <td></td>
        </tr>
    </table>
/foreach

这段代码 sn-p 可能包含一些错误，因为我随机粘贴它而没有检查循环和括号是否完成，但这不是这里的问题。

此代码中唯一重要的部分是打印问题文本和问题图像（如果存在）的行。

我研究了正确的解决方案，但找不到想要的解决方案。谁能帮我吗。

Screenshot

【参考方案1】：

发现这段代码工作正常

$html = <<<EOD
<h1><img src="http://www.google.com/logos/2013/wangari_maathai_73rd_birthday-1400005-hp.jpg"  > Welcome to <a href="http://www.tcpdf.org" style="text-decoration:none;background-color:#CC0000;color:black;">&nbsp;<span style="color:black;">TC</span><span style="color:white;">PDF</span>&nbsp;</a>!</h1>
<i>This is the first example of TCPDF library.</i>
<p>This text <img src="http://www.google.com/logos/2013/wangari_maathai_73rd_birthday-1400005-hp.jpg"  > <br>is printed using the <i>writeHTMLCell()</i> method but you can also use: <i>Multicell(), writeHTML(), Write(), Cell() and Text()</i>.</p>
<p>Please check the source code documentation and other examples for further information.</p>
<p style="color:#CC0000;">TO IMPROVE AND EXPAND TCPDF I NEED YOUR SUPPORT, PLEASE <a href="http://sourceforge.net/donate/index.php?group_id=128076">MAKE A DONATION!</a></p>
EOD;

// Print text using writeHTMLCell()
$pdf->writeHTMLCell($w=0, $h=0, $x='', $y='', $html, $border=0, $ln=1, $fill=0, $reseth=true, $align='', $autopadding=true);

【参考方案2】：

似乎所有不对齐的信息都来自$qstn_ans.question_text，所以上面的代码没有问题。

我建议将该问题文本中的每个“陈述”保存在单独的段落中。例如

<p>Statement I: The variance of first n even natural numbers is <img src="?" /></p>
<p>Statement II: The sum of first n natural numbers is <img src="?" /></p>
<p>and the sum of squares of first n natural numbers is <img src="?" /></p>

这应该会导致问题文本的每一“行”单独显示而不会相互碰撞。

【参考方案3】：

我同意 Nerdwood 的观点，这看起来不像是 Smarty 问题；我认为这只是一个CSS问题。 img 向下延伸到足以捕捉下一行文本的左边缘。您需要将文本向下撞，以便它可以向左移动。您可以在 img 上放置一个 CSS 属性，例如 clear: right;

我认为应该这样做。

【讨论】：

如果这不起作用，您可以尝试 clearfix hack -- img:after... 等

【参考方案4】：

TCPPDF 的 HTML 并不完美，因此您应该在每个 <td> 中使用 width 属性：

...
<tr>
    <td valign="top"  >
        if $qstn_ans.question_directions$qstn_ans.question_directions<br /><b>Question $que_seq_no : </b>/if$qstn_ans.question_text
    </td>
</tr>
    if $qstn_ans.question_file
<tr>
    <td >
        <img src="$ques_thum_image_path$qstn_ans.question_id_$qstn_ans.question_file" />
    </td>
</tr>
    /if
...

【参考方案5】：

尝试使用<br> 代码来解决您的问题