Sponsors

Get the Code (hosted):

Need to integrate text2PNG Hosted Solution with your web application? Try our Fonts API for easier fonts selection.

Fonts API

Browser Support:

Currently we support all browsers that can display PNG transparency with the following limitation:
  • Opera: Opera removes custom fonts from the elements style, which cause the images to show in the standard font style. We only provide limited support for Opera.
  • Safari: Safari cannot render PNG with semi transparent that was generated by our system; therefore, semi transparent images wont render on Safari.
  • IE6 and lower: We need testers.
We've tested the script on IE7, Firefox, Safari (has a problem with semi-transparent images) and Opera on Windows and they worked as expected. If you find any bugs in other browsers or operating systems, please Report it now.

Including the Script:

You can include the text2PNG script by adding the script tags to the head section (between the <head> and </head> tags). If your website uses secure connection, replace the http to https 
<script type="text/javascript" language="javascript" src="http://www.text2png.com/text_script.js"></script>
<script type="text/javascript" language="javascript">
	text2png.onLoad = function(){
        // on of the replace functions below
    };
</script>
Replace http with https for secure pages.
The full script (unpacked) can be found at http://www.text2png.com/text_script_full.js
After you've added the script tags to your page, use on of the following replacement functions to replace your text to PNG images. Each of these functions take any number of variables and the PNG options (optional). - Examples

text2png.replace()

This function will take either the elements or the elements' id value. Each element html value (innerHTML) will be replaced by the PNG image. Note that this function will strip all the HTML tags and remove the child elements. Use this function to replace a specific elements only.

Example: (Hello World Example) 
Script:
text2png.onLoad = function(){
    text2png.replace('header'); // or text2png.replace(document.getElementById('header'));
};
HTML:
<div id="header">Hello World</div>

text2png.replaceTags()

This function works the same way as text2png.replace() except it replace all the elements with the given tag name. For example, you can use this function to replace all the <h1> and <h2> tags in the page.

Example: (Replace Tags Example) 
Script:
text2png.onLoad = function(){
    text2png.replaceTags('h1', 'h2');
};

text2png.replaceAll()

The replaceAll function is a safe an easy way to replace all the HTML child nodes of the parent elements. It skips any text nodes or elements that don't support innerHTML attribute. This function can be used to replace a navigation or a list of headlines.

Example: (Replace All Example) 
Script:
text2png.onLoad = function(){
    text2png.replaceAll('nav', document.getElementById('list'));
};
HTML:
<div id="nav">
    Menu:                         <!-- will NOT be changed -->
    <a href="#">Home</a>          <!-- will be changed -->
    <a href="#">Contact us</a>    <!-- will be changed -->
</div>
<div id="list">
    The following is a list of headlines:     <!-- will NOT be changed -->
    <div>First Headline</div>                 <!-- will be changed -->
    <div>Second Headline</div>                <!-- will be changed -->
</div>

Options:

The text2PNG script support different styles and options for each image. You can set most of the options using CSS rules for the HTML elements. However, some options must be set using the option variable.

The precedence of the options is as the following:
  • CSS rules
  • Options variable
  • Default values (as below)
You can set the options using a JavaScript object in the following syntax: 
var opt = {option:value,
           option:value,
           option:value,
           option:value};
Notice that the last option does NOT have a comma "," after it. This is important for your options to work in IE.

Most of the options are self explanatory, but here is a complete list with the description.
Option Description Default CSS Rule
color The text color, must be in a Hexadecimal format. Most likely will be set by your CSS style. #000000 color
background The background color, must be in a Hexadecimal format or null for transparent PNG. Most elements have a transparent background unless set by this options or CSS. null background-color
font The font family for the text (check our fonts page for supported fonts). If the font is not supported, Arial will be used. The first font in the CSS rule will be used. Arial font-family
size The font size in points (the script can convert pixel sizes in points automatically). If set in the options variable, use an integer value. 16 font-size
black If the font have a black variant (such as Arial - Arial Black), the black variant will be used. If not, the bold variant will be used. The value must be 0 or 1 0 N/A
bold Bold the font. Can be a CSS style or 0/1. 0 font-weight
italic Italics the font. Can be a CSS style or 0/1. 0 font-style
line_height Set the line height for multi line text blocks. null line-height
angle Set the text angle (clockwise), this option must be set in the options variable. If the angle is set to other than 0, the image won't be transparent. If the background color is missing, the script will try to located the parent element background color. 0 N/A
text_align Set the text alignment for multi line text blocks. Can be one of the following 'left', 'center', 'right' left text-align
text_decoration Set the text decoration. Can be one of the following values 'none', 'underline', 'line-through', 'overline' none text-decoration
opacity Set the text opacity from 100 to 0 (0 is transparent). Must be set using the options variable. 100 N/A
shadow_color If using a shadow on the text, this option will set the shadow color. Must be set using the options variable. #000000 N/A
shadow_distance Set the shadow distance. Must be set using the options variable. Set to 0 to remove the shadow. 0 N/A
shadow_blur The distance on where the shadow start fading. Must be set using the options variable. Set to 0 to create a hard line shadow shadow_distance N/A
shadow_strength The opacity of the shadow from 100 to 0 (0 for transparent shadow). Must be set using the options variable. 50 N/A
shadow_angle The angle of the shadow (between 0 to 360 clockwise). The angle is where the shadow will be placed, not where the light is coming from. Must be set using the options variable. 315 N/A

Examples:

The following are a few examples that illustrate how to use the text2PNG script. To view the code, right click on the window and select "View Source". 
Script:
text2png.onLoad = function(){
	text2png.replace('opacity_txt', {opacity:35});
    text2png.replace('multi_line_example' {font:'arial black', font-size:14, black:1});
};
HTML:
<div style="font-family:'Kunstler Script', arial; font-size:16pt; color:#000066;">
    Div text using Script Font
</div>
<span id="multi_line_example">
    Multi line example<br />
    the text lines are trimmed.<br />
    And it can handle special HTML characters like &copy;
</span>