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.(Arcadia Light Standard 50pt black-on-white with transparency)
http://img.photobucket.com/albums/v257/karto/fonttest.png
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:
- Fontfile (needs to be on server of course)
- Font size (in points)
- Font color
- Background color
- Transparency (Note that it defaults to off now - that can be a problem on very thin fonts)
- Caching
The action supports classes and predefined styles.
<?php
//H1
$font = 'InsigniaLTStd.otf';
$size = '24';
$color = 'CC0000';
$background = 'FFFFFF';
$class = 'underline';
?>
//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:
- Testing...
- Hook it into WikiEdit to get custom fontmenus (is that at all possible/plausible?) Added presets instead
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);
?>
/*
"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' => '‘'). 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 ;
}
?>
/*
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' => '‘'). 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