Come posizionare correttamente il testo accanto alle immagini in PDF?

Question

Utilizzo la libreria PHP, Smarty e TCPDF per generare la copia PDF di un documento. Il documento contiene immagini di espressioni matematiche dall'editor WIRIS insieme al contenuto del testo.

Sto avendo un problema posizionando il testo proveniente accanto all'immagine espressione in modo corretto.

Ho provato ogni cosa in CSS float proprietà, ma non accadde nulla. Sto allegando la schermata di esattamente quello che voglio con questa mail.

Questo è il codice template Smarty per stampare la domanda e le relative opzioni:

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

Questo frammento di codice può contenere alcuni errori, come ho incollato a caso senza controllare il completamento del ciclo e le staffe, ma non è questo il problema qui.

L'unica parte importante da questo codice sono le linee per stampare il testo della domanda e richiesta IMMAGINE, se presente.

ho ricercato per la soluzione giusta, ma non ha potuto ottenere quella desiderata. Qualcuno mi può aiutare.

Screenshot

Answer 1

Trova questo codice funziona correttamente

$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); 

Answer 2

provare a utilizzare <br> codice che deve risolvere il problema

Answer 3

Sembra che tutto ciò che le informazioni che sono fuori allineamento viene da $qstn_ans.question_text, quindi non c'è davvero un problema con il codice sopra.

Vorrei suggerire il salvataggio di ogni "dichiarazione" nel testo di quella domanda in un paragrafo a parte. Per esempio.

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

Questo dovrebbe far sì che ciascuna "riga" del testo della domanda venga visualizzata separatamente senza urtare l'una con l'altra.

Answer 4

Sono d'accordo con Nerdwood sul fatto che questo non sembra un problema Smarty; Penso che sia solo un problema CSS. Lo img si estende in modo sufficientemente lungo da catturare il bordo sinistro della riga di testo successiva. È necessario capovolgere il testo in modo che possa spostarsi a sinistra. È possibile inserire una proprietà CSS su img come clear: right;

Penso che dovrebbe farlo. HTML

Answer 5

di TCPDF non è perfetto, così si dovrebbe usare width attributi in ogni <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} 
...