Skip to content

Home

jheathco edited this page Sep 13, 2010 · 2 revisions
Clone this wiki locally

PNGText

PNGText is a Kohana 3 module allowing you to use whichever fonts you wish on your web site. Unlike cufon and other related scripts, PNGText does not send font data to the user’s browser – it generates the images on the server side based upon your CSS styles. It seamlessly integrates with jQuery and is ridiculously easy to use.

PNGText draws 24-bit transparent PNGs so they work well with backgrounds, and can even support rollovers/hovering. PNGText will also support caching of images based upon the styles and text used – if either is changed, the images will be refreshed automatically.

PNGText supports the following CSS styles:

  • font-size
  • color
  • width
  • line-height
  • text-align

Support is planned for text-shadow (although PHP has a bug preventing this for the time-being).

Installing PNGText

Checkout the project into your Kohana application’s modules folder under the name pngtext. Activate the module in your bootstrap.php file.

Configuring PNGText in Kohana

Configuration settings are in the config/pngtext.php file.

  • debug – Set to TRUE to display errors with PNGText as images (Use FALSE for production)
  • fonts – An array of font name => font file values that you will use on your site.

Place any supported font files (.ttf, .otf) that you wish to use in the fonts folder. The names of these files are what you use in the step above.

Configuring PNGText on your Site

PNGText requires jQuery to function. Add the following line to your section to activate PNGText:

<script language="javascript" id="pngtext" src="http://path/to/kohana/pngtext/pngtext.js"></script>

You MUST make sure to use the id=“pngtext” attribute in your script tag, otherwise it will not function.

In order to replace your text with PNGText, use the following:

<style type="text/css">
h2 { color: #fff; font-size: 10pt; line-height: 12pt; }
</style>
<script language="javascript">
$('h2').pngtext('cabnd');
</script>

Replace h2 with any jQuery selector you wish. cabnd should be replaced with the font name you specified in your configuration file.

Using PNGText with Hover

Hovering couldn’t be any easier than with PNGText. It supports only a change in color as of now (but fortunately this is likely the only style you’ll be modifying on a rollover – until text-shadow support is added).

<style type="text/css">
h2 { color: #fff; font-size: 10pt; line-height: 12pt; }
.hover-class { color: #000 }
</style>
<script language="javascript">
$('h2').pngtext('cabnd', 'hover-class');
</script>

The above will change the text color to black upon rollover.

Something went wrong with that request. Please try again.