Cách định vị văn bản bên cạnh hình ảnh chính xác trong PDF?

Question

Tôi đang sử dụng thư viện PHP, Smarty và TCPDF để tạo bản sao PDF của tài liệu. Tài liệu chứa hình ảnh biểu thức toán học từ trình soạn thảo WIRIS cùng với nội dung văn bản.

Tôi gặp sự cố khi định vị văn bản sắp tới bên cạnh hình ảnh biểu thức đúng cách.

Tôi đã thử mọi thứ trong CSS float thuộc tính, nhưng không có gì xảy ra. Tôi đính kèm ảnh chụp màn hình chính xác những gì tôi muốn với thư này.

Đây là mã template smarty để in các câu hỏi và các tùy chọn của nó:

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

Đoạn mã này có thể chứa một số lỗi, như tôi dán nó một cách ngẫu nhiên mà không kiểm tra vòng lặp và khung hoàn thành, nhưng đó không phải là vấn đề ở đây.

Phần quan trọng duy nhất từ ​​mã này là các dòng để in văn bản câu hỏi và hình ảnh câu hỏi nếu có.

Tôi đã nghiên cứu giải pháp đúng, nhưng không thể nhận được giải pháp mong muốn. Bất cứ ai có thể giúp tôi ra ngoài.

Screenshot

Answer 1

Tìm mã này hoạt động bình thường

$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

hãy thử sử dụng <br> mã mà sẽ giải quyết vấn đề của bạn

Answer 3

Nó có vẻ như tất cả các thông tin rằng đó là ra khỏi sự liên kết đến từ $qstn_ans.question_text, do đó, không có vấn đề gì với mã ở trên.

Tôi khuyên bạn nên lưu từng "tuyên bố" trong văn bản của câu hỏi đó trong một đoạn riêng biệt. Ví dụ.

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

Điều này sẽ làm cho mỗi "dòng" của văn bản câu hỏi hiển thị riêng biệt mà không đụng vào nhau.

Answer 4

Tôi đồng ý với Nerdwood rằng điều này không giống như vấn đề Smarty; Tôi nghĩ đó chỉ là vấn đề về CSS. img được kéo dài xuống đủ xa để bắt cạnh trái của dòng văn bản tiếp theo. Bạn cần phải nhấn văn bản xuống để nó có thể di chuyển sang trái. Bạn có thể đặt thuộc tính CSS trên img như clear: right;

Tôi nghĩ rằng nên làm điều đó. HTML

Answer 5

TCPDF là không hoàn hảo, do đó, bạn nên sử dụng width thuộc tính trong mỗi <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} 
...