Convert Text to an Image

[danIT]

I need to convert some text in a table into an image:

Example:

I have the text "Achived" in a cell

I want to convert that to "trafficlightG.jpg"

I was hoping i could do something like this in css, hiding the text and using background-image, but it has a class used throught the site and i cannot amend the class otherwise it will effect areas that I dont want it to.

However the text "Achived" will only appear once, so if i could target the text somehow....

[Pashers]

Hi DanIT,

Where are you getting the results from? You using HTML, ASP, PHP, etc.?!

If it's going to be static I'd just hard code it in. If not then in asp you can do something like

<%
if wordVariable = "Archived" then
response.write "<img src='trafficLight.jpeg' alt='Archived' />"
else
response.write wordVariable
end if
%>

As far as I know, you can't do that type of thing in CSS (I may be wrong however). But if you could, then you have the issue of some browsers may not support it.

I know you could target the text if it's in a 'hidden' textbox using Javascript, then change the image depending on the word. However, I'd prefer the previous option and use ASP, PHP or something similar!

[dhicks]

I have the text "Achived" in a cell. I want to convert that to "trafficlightG.jpg"

Is there some reason why you can't change what's generated on the server? Can you add some Javascript to do it - just replace the cell's text contents with an IMG instead?

--
David Hicks

[CESIL]

If the page is dynamically generated with php/asp/jsp or similar then you could insert the text as a class name rather than the table cell contents.

<%
if wordVariable = "Archived" then
response.write "<td class='archived'></td>"
end if
%>

you can then control the image displayed via css

I use this method in house point tables to fill a cell with the appropriate colour.

[CESIL]

I just noticed you wrote there is already a class in there so in that case I would put a div in the cell with the appropriate css id

[Pashers]

CSS is not controlling which image is being shown, that's the job for ASP. CSS is only styling how the image looks. Not being petty, but shouldn't I get the credit as well?! cadjs pratically said what I said!?

[CESIL]

Actually css is controlling which image.

The tag name specifies which background image to display in the cell or div.

The backend code inserts the tag name based on the value stored in the variable.

A change to the css definition will change the image without changing the code.

If other images were required for other values then this would only require additional css definitions.

[Pashers]

Why would you want to use css to style the images visability? ASP will display the image or not include the image at all. You don't need to style the image's visability if you're using ASP. For example:
----------------
<table><tr><td>
<%
if wordVariable = "Archived" then
response.write "<img src='trafficLight.jpeg' alt='Archived' />"
else
response.write wordVariable
end if
%>
</td></tr></table>
----------------

Would display the image if the word is Archived. Whereas, if the word is not 'Archived' then it will not have the image at all but have the word which is stored in wordVariable. So you wouldn't need to style the image's visability.

Off course, you can still style it the image if you wish to <img class='Archived'...> and in the style sheet you may remove the image border.

[localzuk]

My guess as to why you'd not want to do it in ASP is that it allows you to split 'code' from 'design'. ie. A designer doesn't have to go delving into the code of an application in order to simply use an image.

[Pashers]

The code would be embedded within the HTML and to add/remove the css you'll still need to modify the code as much as adding removing the image!? Off course, if you don't want the image to be displayed, the browser would still have to upload the image wheter it's hidden or not.

[Friez]

You can't convert text to an image using raw HTML or CSS you will almost certainly need something like ASP or PHP, or if you're REALLY desperate then
Java(script) the latter is a seriously gross solution though.

Anyway, someones posted about ASP which I don't know much about. If you need a PHP solution here's what you should look up:

You will need GD set up on your PHP (Instructions here)

And to write text to images you will use the imagettftex function in PHP Syntax and Example code.

Here is their example code:

 <?php
// Set the content-type
header('Content-type: image/png');
 
// Create the image
$im = imagecreatetruecolor(400, 30);
 
// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 399, 29, $white);
 
// The text to draw
$text = 'Testing...';
// Replace path by your own font path
$font = 'arial.ttf';
 
// Add some shadow to the text
imagettftext($im, 20, 0, 11, 21, $grey, $font, $text);
 
// Add the text
imagettftext($im, 20, 0, 10, 20, $black, $font, $text);
 
// Using imagepng() results in clearer text compared with imagejpeg()
imagepng($im);
imagedestroy($im);
?>  

You can modify that slightly to create a re-usable class. For example if I do this:

ImageText.php

 <?php
// Set the content-type
header('Content-type: image/png');
 
// Create the image
$im = imagecreatetruecolor(400, 30);
 
// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 399, 29, $white);
 
// The text to draw
$text = $_GET['text'];
// Replace path by your own font path
$font = 'arial.ttf';
 
// Add some shadow to the text
imagettftext($im, 20, 0, 11, 21, $grey, $font, $text);
 
// Add the text
imagettftext($im, 20, 0, 10, 20, $black, $font, $text);
 
// Using imagepng() results in clearer text compared with imagejpeg()
imagepng($im);
imagedestroy($im);
?>  

I would be able to do this in html:

<img src="ImageText.php?text=HELLO!">

No prizes for guessing what the text says Nifty eh?
Tweak as necessary

Hope that helps!

Edit

Hmmm I might not fully understand the question re-reading it. The above is a solution to directly convert some text into an image that displays the said text. For hiding text in-line in the browser you should look into DHTML (Dynamic HTML) which DOES use Javascript, which is probably the only way you could do this if said text has to be written out to the browser in the first place (if you're using a preprocessor like PHP or ASP you should definitely process said text out in advance). Unlike CSS, DHTML will re-write the page once it has already been presented, thus removing the said text from the page (and replacing it with something else completely) rather than just hiding it with CSS.

[srochford]

Why would you want to use css to style the images visability? ASP will display the image or not include the image at all. You don't need to style the image's visability if you're using ASP. For example:

As Localzuk has said, I'd guess this is about trying to separate code from design.

Not sure what this is being used for, but if it's going to be visible to the public then you need to be concerned about accessibility. With css doing the work, you're making it easy to have (say) different style sheets for people with visual impairment who may just want text without the image. Much easier to just have a style sheet handling all of this stuff

[damienharrison]

Hi

I have found a solution for this utilising something called SIFR Mike Davidson - sIFR

another way is using typeface Typeface.js - A sIFR Alternative

Both provide good clean code and are accesable

Cheers

Damien