Dynamic Image Creation to replace Font Embedding

Written by Nilpo in Web Development | 1 Comment

One major caveat for most web developers is the font limitations you encounter on the web. Browsers can only display specific registered fonts because of the differences between browsers and platforms. There’s no way to bridge this gap and forcing visitors to download and install specialized fonts before viewing your site is not an acceptable solution. Now there’s a better way.

In the past, your only option was to resort to font embedding; but font embedding requires additional software to prepare your font packages, it is not widely supported, development on the technology has come to a crawl, and it is supported differently by the major browsers. That means one font package and code set for IE-compatible browsers and another for Firefox. It’s not supported by Opera at all!

Enter the need for another solution.

With broadband internet gaining popularity, web developers have moved over to images to fill the need for specialized fonts. Images are created with local fonts and displayed to the reader–a perfectly compatible solution, but not without it’s own shortcomings.

This means that images can only display predefined text. Unless, of course, there was a way to create dynamic images on the fly. And there is!

To do this, we’re going to start with a dynamically created HTML page. This will most likely be the product of PHP, but any page will work. Then, we’re going to add a little JavaScript to grab selected text and replace it with an image. Another PHP script works in the background to dynamically create the required images upon request.

To begin, you’re going to need your created page and two necessary files: the PHP and JavaScript. After uploading your font to your web server, download the PHP file here 1)heading.php was written by Stewart Rosenberger at A List Apart. You can also view his demo. and let’s get it set up.

The customizable section of the code looks like this:

$font_file  = 'font.ttf' ;
$font_size  = 50 ;
$font_color = '#000000' ;
$background_color = '#ffffff' ;
$transparent_background  = true ;
$cache_images = true ;
$cache_folder = 'cache' ;

The $font_file variable is a relative or absolute path to the font file you uploaded previously. $font_color and $background_color set the text foreground and background colors, respectively.

If you set $transparent_background to true, you can set the text over any background. With it set to false, the background color you specified will be used.

The next two options are performance enhancements. With $cache_images set to true, images will be cached for faster loading. $cache_folder is a relative or absolute path to this folder. Make sure that it exists on your server and has appropriate permission for writing.

Next, you need to upload replacement.js 2)Based on Peter-Paul Koch’s JavaScript Image Replacement (JIR). and test.png to your web server. Add the following lines to the head section of your HTML page where you would like to have the image replacement occur.

<script type="text/JavaScript" src="replacement.js"> </script>

The path to the JavaScript file must be absolute or relative from the current HTML file.

Now you need to customize the following section of the JavaScript file:

replaceSelector("h2","heading.php",true);
var testURL = "test.png" ;
 
var doNotPrintImages = false;
var printerCSS = "replacement-print.css";
 
var hideFlicker = false;
var hideFlickerCSS = "replacement-screen.css";
var hideFlickerTimeout = 1000;

The first line calls the replaceSelector function that actually does the magic. It accepts three parameters.

  1. A CSS selector that indicates an element to be replaced. This can be most any CSS selector including element tags, classes, or IDs.
  2. The absolute or relative location of the heading.php file you customized earlier.
  3. A boolean value that indicates whether or not word wrap should be enabled. With this value set to true, images will be created for each word in a heading rather than single images for the entire heading.

You can add additional references to the replaceSelector function for each set of elements that you would like to have replaced.

The next line is used to set the location of the transparent 1 x 1 pixel image. This image is used to test whether or not the script will function before stripping away the existing markup.

var testURL = "test.png" ;

The remaining section is used to control the behavior and presentation of the replacement. It simply points to two optional stylesheets replacement-print.css and replacement-screen.css.

The first section references the replacement-print.css stylesheet.

var doNotPrintImages = false;
var printerCSS = "replacement-print.css";

Most printers default to not print images. This means that printed versions of your page will not display your dynamic text. To workaround this we’ve done a bit of juggling.

Our text is not actually stripped. Instead, it’s rewritten as a span element with the “print-images” class. The images are then created and displayed with a “replacement” class. The “print-images” class visibility is then set to hidden so that the text is not displayed on-screen. These lines add a print style sheet reference that reverses the visibility of the two classes so that images are hidden and text is displayed in print versions.

The following stylesheet information is automatically added as a LINK reference anytime that the variable doNotPrintImages is set to true. Leaving it set to false will not implement the printer-specific style sheet.

span.print-text
{
    display: inline !important ;
}
 
img.replacement
{
    display: none ;
}

The second set of lines reference another style sheet. This one is used to fix a display quirk. Since the text cannot be replaced until the entire page is loaded, your visitors may see an apparent flicker as the text is briefly shown before being replaced.

var hideFlicker = false;
var hideFlickerCSS = "replacement-screen.css";
var hideFlickerTimeout = 1000;

Setting the hideFlicker value to true will implement the replacement-screen.css style sheet to negate the flicker. It uses the following code to set the text’s display to hidden. Since this style sheet is added dynamically when the document object is created, it works before the page is actually displayed. You will need to edit the style sheet to match the elements that you are replacing.

h2
{
    visibility: hidden ;
}

With all of the pieces in place, your text will be removed and replaced by dynamically created images. Since all of the work is done on the server side, anyone with a JavaScript enabled browser will be able to see your customized text. In order for this to work, your web server must support PHP version 4.3 or higher compiled with support for the GD graphics library 1.6 or higher. Check with your hosting provider if you are unsure.

You now have a completely viable cross-platform, cross-browser alternative to font embedding.

You may download all of the required files as a zip or tar.gz below.

replacement.zip
replacement.tar.gz

References   [ + ]

1. heading.php was written by Stewart Rosenberger at A List Apart. You can also view his demo.
2. Based on Peter-Paul Koch’s JavaScript Image Replacement (JIR).

Tags

Like the read? Share it!

1 Comment

Leave a Reply

Contact

Wanna say hello?
Drop us a line!

You'll find us here

1 Microsoft Way,
Redmond,
WA 98052, United States