Rendering text with a font on the server


Example render
(Arcadia Light Standard 50pt black-on-white with transparency)
http://img.photobucket.com/albums/v257/karto/fonttest.png
This action takes text and renders it with a font on the server.
The text rendering script is from A List Apart/Stewart Rosenberger - I just did some crude hacks to make it work as an action (my PHP skills are extremely limited).
There appears to be a bug with Opentype fonts not rendering special characters properly, but I don't know if the problem is with the script, GD or freetype.
Truetype isn't affected, so I suspect freetype is to blame.


An entry would look like
{{font text="Text" font="TimesNewRoman" size="24" color="000000" background="ffffff"}}

The rendering script has variables for:

The action supports classes and predefined styles.
<?php
//H1
$font = 'InsigniaLTStd.otf';
$size = '24';
$color = 'CC0000';
$background = 'FFFFFF';
$class = 'underline';
?>

It passes the image text as both the alt and title tags - I believe this will satisfy accesibility requirements.
It can render .ttf (Truetype) and .otf (Opentype) font files.
On an offnote - this is the first time I have done any PHP scripting, so if there are better ways of doing this, please let me know (it took me 2 hours figuring out how to pass stuff between the scripts :D ).

TODO:

The action - save as /actions/font.php
<?php
/*
    "font" action

    Parameters:
        text        - The text to convert, also used for alt and title attributes
        font        - The font to use
        size        - Fontsize in points
        color       - Font color without #
        background  - Background color without #
        presets     - Predefined settings - located in /actoins/fontpresets/
       
*/


// Get defaults
include ('fontpresets/default.php');
// Where is the font rendering script?
$renderscript = "/actions/fontpresets/fontrenderer.php";

if (is_array($vars))
{
    foreach ($vars as $param => $value)
    {
        // Was a preset provided? - Remember they are case-sensitive!
        if ($param == 'preset') {$preset=$this->htmlspecialchars_ent($vars['preset']);}
        if ($preset == 'H1') {include 'fontpresets/h1.php';}
        elseif ($preset == 'H2') {include 'fontpresets/h2.php';}
        // Uncomment/copy below line to add presets
        // elseif ($preset == 'H3') {include 'fontpresets/h3.php';}

        // Was any overrides provided?
        if ($param == 'font') {$font=$this->htmlspecialchars_ent($vars['font']);}
        if ($param == 'size') {$size=$this->htmlspecialchars_ent($vars['size']);}
        if ($param == 'color') {$color=$this->htmlspecialchars_ent($vars['color']);}
        if ($param == 'background') {$background=$this->htmlspecialchars_ent($vars['background']);}
        if ($param == 'class') {$class=$this->htmlspecialchars_ent($vars['class']);}
        // Get the text...
        if ($param == 'text') {$text=$this->htmlspecialchars_ent($vars['text']);}
    }
}

// Get the image...
$output = "<img class=".$class." src=\"".$renderscript."?text=".$text."&font=".$font."&size=".$size."&color=".$color."&background=".$background."\" alt=\"".$text."\" title=\"".$text."\" />";
$output = $this->ReturnSafeHTML($output);
print($output);

?>

The rendering script:
<?php
/*
    Dynamic Heading Generator
    By Stewart Rosenberger
    http://www.stewartspeak.com/headings/    

    This script generates PNG images of text, written in
    the font/size that you specify. These PNG images are passed
    back to the browser. Optionally, they can be cached for later use.
    If a cached image is found, a new image will not be generated,
    and the existing copy will be sent to the browser.

    Additional documentation on PHP's image handling capabilities can
    be found at http://www.php.net/image/    
*/


// Where is the font folder?
$font_folder  = 'W:\fonts\\' ;

// Get the settings
$font_file  = $font_folder . $_GET['font'] ;
$font_size  = $_GET['size'] ;
$font_color = $_GET['color'] ;
$background_color = $_GET['background'] ;

// These can not be set from the action at the moment.
// Keep $cache_images = false; while testing
$transparent_background  = true ;
$cache_images = false ;
$cache_folder = 'W:\cache' ;



/*
  ---------------------------------------------------------------------------
   For basic usage, you should not need to edit anything below this comment.
   If you need to further customize this script's abilities, make sure you
   are familiar with PHP and its image handling capabilities.
  ---------------------------------------------------------------------------
*/


$mime_type = 'image/png' ;
$extension = '.png' ;
$send_buffer_size = 4096 ;

// check for GD support
if(!function_exists('ImageCreate'))
    fatal_error('Error: Server does not support PHP image generation') ;

// clean up text
if(empty($_GET['text']))
    fatal_error('Error: No text specified.') ;
   
$text = $_GET['text'] ;
if(get_magic_quotes_gpc())
    $text = stripslashes($text) ;
$text = javascript_to_html($text) ;

// look for cached copy, send if it exists
$hash = md5(basename($font_file) . $font_size . $font_color .
            $background_color . $transparent_background . $text) ;
$cache_filename = $cache_folder . '/' . $hash . $extension ;
if($cache_images && ($file = @fopen($cache_filename,'rb')))
{
    header('Content-type: ' . $mime_type) ;
    while(!feof($file))
        print(($buffer = fread($file,$send_buffer_size))) ;
    fclose($file) ;
    exit ;
}

// check font availability
$font_found = is_readable($font_file) ;
if(!$font_found)
{
    fatal_error('Error: The server is missing the specified font.') ;
}

// create image
$background_rgb = hex_to_rgb($background_color) ;
$font_rgb = hex_to_rgb($font_color) ;
$dip = get_dip($font_file,$font_size) ;
$box = @ImageTTFBBox($font_size,0,$font_file,$text) ;
$image = @ImageCreate(abs($box[2]-$box[0]),abs($box[5]-$dip)) ;
if(!$image || !$box)
{
    fatal_error('Error: The server could not create this heading image.') ;
}

// allocate colors and draw text
$background_color = @ImageColorAllocate($image,$background_rgb['red'],
    $background_rgb['green'],$background_rgb['blue']) ;
$font_color = ImageColorAllocate($image,$font_rgb['red'],
    $font_rgb['green'],$font_rgb['blue']) ;  
ImageTTFText($image,$font_size,0,-$box[0],abs($box[5]-$box[3])-$box[1],
    $font_color,$font_file,$text) ;

// set transparency
if($transparent_background)
    ImageColorTransparent($image,$background_color) ;

header('Content-type: ' . $mime_type) ;
ImagePNG($image) ;

// save copy of image for cache
if($cache_images)
{
    @ImagePNG($image,$cache_filename) ;
}

ImageDestroy($image) ;
exit ;


/*
    try to determine the "dip" (pixels dropped below baseline) of this
    font for this size.
*/

function get_dip($font,$size)
{
    $test_chars = 'abcdefghijklmnopqrstuvwxyz' .
                  'ABCDEFGHIJKLMNOPQRSTUVWXYZ' .
                  '1234567890' .
                  '!@#$%^&*()\'"\\/;.,`~<>[]{}-+_-=' ;
    $box = @ImageTTFBBox($size,0,$font,$test_chars) ;
    return $box[3] ;
}


/*
    attempt to create an image containing the error message given.
    if this works, the image is sent to the browser. if not, an error
    is logged, and passed back to the browser as a 500 code instead.
*/

function fatal_error($message)
{
    // send an image
    if(function_exists('ImageCreate'))
    {
        $width = ImageFontWidth(5) * strlen($message) + 10 ;
        $height = ImageFontHeight(5) + 10 ;
        if($image = ImageCreate($width,$height))
        {
            $background = ImageColorAllocate($image,255,255,255) ;
            $text_color = ImageColorAllocate($image,0,0,0) ;
            ImageString($image,5,5,5,$message,$text_color) ;    
            header('Content-type: image/png') ;
            ImagePNG($image) ;
            ImageDestroy($image) ;
            exit ;
        }
    }

    // send 500 code
    header("HTTP/1.0 500 Internal Server Error") ;
    print($message) ;
    exit ;
}


/*
    decode an HTML hex-code into an array of R,G, and B values.
    accepts these formats: (case insensitive) #ffffff, ffffff, #fff, fff
*/
   
function hex_to_rgb($hex)
{
    // remove '#'
    if(substr($hex,0,1) == '#')
        $hex = substr($hex,1) ;

    // expand short form ('fff') color
    if(strlen($hex) == 3)
    {
        $hex = substr($hex,0,1) . substr($hex,0,1) .
               substr($hex,1,1) . substr($hex,1,1) .
               substr($hex,2,1) . substr($hex,2,1) ;
    }

    if(strlen($hex) != 6)
        fatal_error('Error: Invalid color "'.$hex.'"') ;

    // convert
    $rgb['red'] = hexdec(substr($hex,0,2)) ;
    $rgb['green'] = hexdec(substr($hex,2,2)) ;
    $rgb['blue'] = hexdec(substr($hex,4,2)) ;

    return $rgb ;
}


/*
    convert embedded, javascript unicode characters into embedded HTML
    entities. (e.g. '%u2018' => '&#8216;'). returns the converted string.
*/

function javascript_to_html($text)
{
    $matches = null ;
    preg_match_all('/%u([0-9A-F]{4})/i',$text,$matches) ;
    if(!empty($matches)) for($i=0;$i<sizeof($matches[0]);$i++)
        $text = str_replace($matches[0][$i],
                            '&#'.hexdec($matches[1][$i]).';',$text) ;

    return $text ;
}
?>



CategoryUserContributions
Comments
Comment by NilsLindenberg
2005-04-04 10:34:43
Nice idea. But i couldn't found anything about the license of the script you use. I think it would be good to ask the author about your usage.
Comment by OnkelJonas
2005-04-04 13:52:39
I have emailed him. His response was:

Hi Jonas,

You're welcome to use my script wherever you want. Thanks for the improvement, and thanks for letting me know!

- Stewart

Jonas wrote:
> Hi... and thanks for a great script!
>
> I've been adapting your script to integrate it into WikkaWiki.
> It is just a simple hack, but it makes it easier to use from within the wiki.
>
> Anyways - I posted both the script and the little I did here:
> http://wikka.jsnx.com/FontActionInfo
> I will of course remove it promptly if you wish, or I can add more exensive credits or something.
>
> Since you didn't put a license in there, I guessed you wouldn't mind this - sorry if I was wrong.
Comment by NilsLindenberg
2005-04-05 15:33:42
Thats good. Perhaps you should add a sentence to the rendering script. Something like "Used with kindly permission of the author" or something similar.
Comment by OnkelJonas
2005-04-05 15:35:17
Good idea. I'm a little busy this week, but I'll do it later (or someone else is welcome to do it).
Comment by DarTar
2005-12-18 11:16:50
Something that might also be relevant: http://www.mikeindustries.com/sifr/
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki