Sleightofhand
Universal PNG-Fix and Font-Replacement Addon for Redaxo
What is “Sleightofhand”?
Sleightofhand is a new take on font-replacement for the Content Management System REDAXO.
What is “font-replacement”?
REDAXO allows you to create websites with 100% control over your source-code and, as a result, is extremely flexible. So flexible, in fact, that many professional web-agencies use REDAXO to produce bespoke web-presences for their customers.
It is becomming increasingly more common that designs for REDAXO websites require the use of certain fonts that are not pre-installed on all computers. This is where font-replacement comes in; the fonts are automatically rendered as graphics and are then sent to the browser to be displayed. This by-passes the requirement that the font needs to be installed on the viewers computer.
If this is such a common problem, why aren’t there any pre-built scripts to take care of it all?
There are many image-replacement techniques available; PHP Replacement, SIFR, typography.js, cufón. There are even already some for REDAXO, including the excellent render_Headlines by Andreas Eberhard.
Many of these scripts are hard to integrate into an existing site, are slow to load, are complicated to use, do not print correctly, or rely 100% on JavaScript or Flash. render_Headlines is an exception- it works well and very quickly. One disadvantage though is that it has been built as a REDAXO Module with the sole intention to produce headings. It isn’t easy, for example, to use the script to replace the text in a navigation-menu. This is where sleightofhand comes in.
Sleightofhand attempts to improve on these techniques and to abstract-away some of the common problems/technical difficulties which continually crop up. It is not meant to be a replacement for these scripts, but simply aims to provide better integration with REDAXO in one easy-to-use package.
So, what can Sleightofhand do?
24-bit PNG images
Several image-replacement scripts take advantage of the PHP GD Module and the imagettftext() function to convert text into a graphic using a .ttf font. Almost all of these scripts produce anti-aliased 8-bit indexed gif/png images with 1-bit transparency. These 8-bit files need to be anti-aliased with a certain background colour in order to not look ragged around the edges.
This means the PHP-Script has to know about the background-colour the text is to be displayed on. If all your pages have a red background, this isn’t a problem. However; if your site is large with several sections, each section with a different background colour, it may be difficult to make your script generic and user-friendly enough to cope with all the different possibilities (especially if you intend to let customers loose on the site).
To solve this problem, there is the possibility of generating 24-bit PNG files with alpha transparency:
However, the quick ones among you will have already noted that our beloved Internet Explorer 6 does not correctly support 24-bit PNG files without the use of 3rd party ‘hacks’ which load the PNG through a proprietary CSS filter.
The PNG-Filter hacks are generally slow and unwieldly. A lot of them take a while to kick-in, slow down IE6 and also cause page flicker while the site is loading. Also, if you use the filter hacks on links, they sometimes become unclickable.
These drawbacks may be acceptable on smaller websites, but often aren’t faesible for more professional websites, where design is of the upmost importance. This often causes web-developers to search for alternative methods, such as those based on Adobe Flash or on font-metrics.
Sleightofhand generates 24-bit PNGs, but utilizes a little-known VML feature of IE6 to load and display them. The result; faster loading pages, and no grey flicker. The PNG fix is loaded dynamically using a REDAXO Extension Point and requires no extra work from the developer. The PNG script itself is self-contained and does not clash with existing JavaScript libraries such as jQuery, MooTools or Prototype.
Leading
Unlike many other image-replacement scripts, Sleightofhand allows you to control the line spacing of a generated font. This is great for customers who want almost pixel-perfect designs:
Prefixes, Suffixes, Mouseovers and Links
When you call the Sleightofhand text generation functions, a specially formed SPAN tag is returned which contains a link to the image. At this point, you can specify if the image should be linked, the colours for mouseover effects, and a code prefix and suffix.
For example, it is easily possible to return an image which is wrapped in an H6 tag, linked to google.com, with a colour-change on mouseover. The JavaScript to deal with the mouseovers is generated automatically – you do not need to do anything:
Universal usage
The sleightofhand functions can be used anywhere within your scripts. Just call the a561_sleightofhand() function to get the necessary HTML code. This means you can call sleightofhand from within other modules, templates or addons.
<?php
// example category-list module (simplified)
$cats = OOCategory::getRootCategories();
echo '<ul>';
foreach ($cats as $cat) {
echo '<li>';
echo a561_sleightofhand(array(
'text' => $cat->getValue('name'),
'font' => 'SharkSoftBites.ttf',
'link' => $cat->getUrl(),
'prefix' => '<h6>',
'suffix' => '</h6>',
'color' => array(166,151,0),
'mouseover' => array(255,0,0),
'size' => '100',
'spacing' => '1.6'
));
echo '</li>';
}
echo '</ul>';
?> Works with Javascript Libraries
The scripts for sleightofhand are self-contained. This means you can use it without breaking your existing modules.
You can also animate replaced graphics using the library of your choice. Yes. Also in IE6.
Go on- Click me. You know you want to.
Autocrop
Whitespace is automatically trimmed from sleightofhand generated graphics so that you can align them using CSS without problems. This can be a problem with other text-replacement scripts, which simply use the default whitespace that was defined when the font was created.
Wordwrap
You can now set a maximum number of characters per line. Sleightofhand will take care of the wordwraping for you.
ImageMagick
If your server has ImageMagick installed and your PHP installation allows you to use exec(), sleightofhand will use it to enable extra features. If you don’t know where imagemagick is installed, sleightofhand will try and find it for you.
Rotation
It is now possible to specify a degree of rotation along the X-Axis. This means you can replace text like this:
Caching
Many PHP Scripts that generate graphics do so using URL parameters:
e.g. text.php?font=arial.ttf&size=20&color=FF0000&bgcolor=000000
This is dangerous; a hacker could easily write a script to call up text.php with 1000000 different sizes. This can either crash your server or fill it up with garbage cache files.
Sleightofhand does not expose a configuration interface to the end-user. All files are generated and cached before the user even sees them and a direct link is produced which points straight to the cache file:
e.g. files/soh/soh-165f1a71d1a445984a317bee06e537e5.png
This means that your headlines are produced only ONCE. Following calls to your pages retrieve the cached copy.
Using an extension point, the files/soh/ cache is emptied when the REDAXO admin clicks “Clear Cache” (Redaxo > System > Clear Cache).
UTF-8 and special characters
Latin or UTF-8; if your font supports them, sleightofhand should be able to display them:
Browser Support
sleightofhand should work right out of the box in IE6, IE7, IE8, Firefox, Safari and Opera, on any REDAXO 4 website, regardless of which modules/addons you have installed and what you have done with your templates. (Tested with REDAXO 4.2, although it probably works with 4.0+ too).
Mouseover effects require JavaScript, but the PNGs will display without JavaScript turned on1.
1the PNG-Fix will not work in IE6 if JavaScript is off. IE7 and IE8 will still display correctly. I hate IE.
Universal PNG-Fix
Since a PNG-Fix is required to display the font-graphics correctly in IE6, and is always included via an extension point, I made it so that you can use the .soh CSS-class on other elements to make the fix work there too.
The fix works with inline IMG Tags, but should also work with background-images (according to the VML PNG-Fix Documentation, untested). It may even be possible to use the CSS background-repeat:; property.
<!-- sleightofhand disabled --> <img src="my-transparent-image.png" alt="My Logo"> <!-- sleightofhand enabled --> <img class="soh" src="my-transparent-image.png" alt="My Logo">
Getting Started
Alright, enough talk. Here’s how to get it:
- Download the latest version of sleightofhand here.
- Unpack the zip file and upload it to your REDAXO installation (/redaxo/include/addons Folder).
- Install and activate the addon from the REDAXO Backend.
- Upload your font files to /include/addons/sleightofhand/fonts/ (the fonts MUST be in .ttf format. .otf will not work, no matter how loud you scream. OSX-Fonts won’t work either. If you haven’t got your desired font in the correct format, use Fontforge to convert it to .ttf2)
- Install the example module (below) to see how to get started.
- If you get stuck, or find a bug, please post in the REDAXO Forum (I speak German and English).
2Fontforge is the most ugliest program in the world.
Example Module:
// Module Input
//-----------------------------------------------------------------
Überschrift:<br />
<textarea name="VALUE[1]">REX_VALUE[1]</textarea>
<select name="VALUE[2]" >
<?php
foreach (array("h1","h2","h3","h4","h5","h6") as $value) {
echo '<option value="'.$value.'" ';
if ( "REX_VALUE[2]"=="$value" ) {
echo 'selected="selected" ';
}
echo '>'.$value.'</option>';
}
?>
</select>
// Module Output
//-----------------------------------------------------------------
<?php
if ("REX_VALUE[1]"!="" && "REX_VALUE[2]"!="") {
if (OOAddon::isAvailable('sleightofhand')) {
echo a561_sleightofhand(array(
'text' => "REX_VALUE[1]",
'prefix' => '<REX_VALUE[2]>',
'suffix' => "</REX_VALUE[2]>",
'link' => 'http://bit.ly/sleightofhand-site',
'font' => 'Chinese_Ruler.ttf',
'color' => array(0,0,0),
'mouseover' => array(255,0,0),
'size' => '30',
'spacing' => '1.5'
));
}
}
?> SVN Version
Checkout
To check out the latest version, type the following into your terminal:
svn checkout http://svn.daveholloway.co.uk/sleightofhand/trunk sleightofhand
Export
To get the latest version, without all those pesky .svn files, use the following command:
svn export http://svn.daveholloway.co.uk/sleightofhand/trunk sleightofhand
Sending patches
If you want to fix a bug/make a change, checkout the latest version using the command above, make and test your changes, cd into your sleightofhand addon folder and then create a diff file:
svn diff > ~/mypatch.diff
This will create a file called mypatch.diff in your home directory. Send this to me via PM at the REDAXO Forum