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

时间:2013-04-01 06:42:45

标签: php css image smarty tcpdf

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

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

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

这是用于打印问题及其选项的智能模板代码:

{foreach from=$question_data item=qstn_ans key=key}
    <table border="0" width="100%" 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==1}{assign 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}

此代码段可能包含一些错误,因为我随机粘贴它而不检查循环和括号完成,但这不是问题。

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

我研究了正确的解决方案,但无法获得所需的解决方案。谁能帮我吗。

Screenshot

5 个答案:

答案 0 :(得分:1)

查找此代码正常工作

$html = <<<EOD
<h1><img src="http://www.google.com/logos/2013/wangari_maathai_73rd_birthday-1400005-hp.jpg" height="50px" width="150px"> 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" height="50px" width="150px"> <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);

答案 1 :(得分:1)

似乎所有不对齐的信息都来自$qstn_ans.question_text,因此上述代码并没有真正的问题。

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

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

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

答案 2 :(得分:1)

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

我认为应该这样做。

答案 3 :(得分:1)

TCPDF的HTML并不完美,因此您应该在每个width中使用<td>个属性:

...
<tr>
    <td valign="top" width="250" >
        {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 width="100">
        <img src="{$ques_thum_image_path}{$qstn_ans.question_id}_{$qstn_ans.question_file}" />
    </td>
</tr>
    {/if}
...

答案 4 :(得分:0)

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