Superimposing text on an image

[jhsachs]

I need to superimpose text on an image. I've tried two techniques, and neither one works all the time.

 

Technique #1 is to define a table with one cell. The text is in the cell; the image is the background for the cell, defined in CSS with the background-image property.

 

Technique #2 is to use the CSS position property to superimpose the second cell on the first. Roughly speaking, the HTML looks like this:

 

<div style="position:relative; width:100%">

   <table style="margin-left:auto; margin-right:auto">
      <tr>
         <td> <img src="..." /> </td>
      </tr>
   </table>

   <div style="position:absolute">
      <table style="margin-left:auto; margin-right:auto">
         <tr>
            <td> text goes here </td>
         </tr>
      </table>
   </div>
</div>

 

The problem with the first technique is that because it uses a background image, most browsers won't print the image unless the user sets a special option in page setup... an option that most users don't know exists.

 

The problem with the second technique is that the application has to convert the document to PDF, and the converter that I'm using (mPDF, see http://mpdf1.com/mpdf) doesn't understand the "position" property. Consequently it places the text after the image instead of on top of it.

 

My question: is there a way to superimpose text on an image without using a background image, so that browsers will print the image by default, and without using the position property, so that mPDF will produce correct output?

[trq]

You would be better off doing this server side using php or something.

[jhsachs]

The site is written in PHP, so that would be a natural approach, but you'll have to clarify what sort of server side solution you envision.

 

I originally planned to convert the document to a JPG, but we're using a shared server with restrictions on our usage that make it difficult or impossible to do so. That was for a different purpose, too, and it wouldn't be a viable means of delivering a printable document. Conversion to a pixel format would cause an unacceptable loss of quality.

[nogray]

You should reverse tech2

<div style="position:absolute">My text here</div>
<img src="my/image/source" />

[beta0x64]

I think he means an image manipulation library like imagick or gd

 

This might do what you want, don't quote me: http://www.php.net/manual/en/function.imagickdraw-annotation.php

 

You could save it in whatever format you desire to minimize the quality loss.