Как правильно разместить текст рядом с изображениями в формате PDF?

Я использую PHP, Smarty и TCPDF-библиотеку для создания PDF-копии документа. Документ содержит изображения математических выражений из редактора WIRIS вместе с текстовым контентом.

У меня проблема с правильной позицией текста рядом с изображением выражения.

Я пробовал все в свойствах CSS float, но ничего не произошло. Я прикрепляю снимок экрана точно, что хочу с этой почтой.

Это код шаблона smarty для печати вопроса и его параметров:

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

Этот фрагмент кода может содержать некоторые ошибки, поскольку я вставлял его случайным образом, не проверяя завершение цикла и скобок, но это не проблема.

Единственной важной частью этого кода являются строки для печати текста вопроса и изображения вопроса, если он присутствует.

Я искал правильное решение, но не смог получить желаемый. Может кто-нибудь мне помочь.

Снимок экрана

Ответы

Ответ 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);

Ответ 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 проходит достаточно далеко, чтобы поймать левый край следующей строки текста. Вам нужно поднять текст так, чтобы он мог перемещаться влево. Вы можете поместить свойство CSS в img как clear: right;

Я думаю, что он должен это сделать.

Ответ 4

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

Ответ 5

попробуйте использовать <br> код, который должен решить вашу проблему.