Carl Camera

ViPR: Vine Type Inline Png Replacement

There's a new feature working its way toward the next release of Vine Type, and it's called ViPR.

ViPR, pronounced "viper," will allow Vine Type designers to specify a font, and several characteristics to use for article titles. ViPR can generate Portable Network Graphics (PNG) images of text on-the-fly, using no hard drive space whatsoever. You'll no longer be limited to standard fonts that are chosen more for their ubiquity than their aesthetics.

Not New - But Noteworthy

ViPR follows in the footsteps of several image replacement technologies such as Shaun Inman's Inman Flash Replacement (IFR,) Mike Davidson's Scalable Inline Flash Replacement (sIFR,) Todd Fahrner's Fahrner Image Replacement (FIR,) and Milan Negovan's .NET Image Replacement (IR) solutions.

So this is nothing new; the techniques have been developed, each solution with its strengths and weaknesses.


The ViPR solution is server-centric meaning that the image processing and text replacement is done by the content management system on the web server, not at the internet browser. This gives ViPR some advantages not found in all image replacement solutions mentioned:

  • Choice of image formats. ViPR was designed to generate PNG images, but will also provide the option of serving up Joint Photographic Experts Group (JPEG) images.
  • Degrades exceptionally well:
    1. with or without CSS turned on at the browser.
    2. With or without images turned on at the browser.
    3. With our without Javascript turned on at the browser. IE5 and IE6 will lose PNG transparency with Javascript turned off.
  • No third-party app (Flash) required on the client computer. ViPR serves up standard image formats renderend intrinsically by just about every internet browser on the planet.
  • Alt text is automatically generated so there are no ill effects on screen readers used by the visually impaired.
  • Automatic line wrapping. ViPR allows the designer to limit the width of the image and if the title is too long, ViPR will wrap the text automatically.
  • Transparency. ViPR serves up PNG images with transparent backgrounds, allowing page backgrounds to show through.

Font File Not Included

All you'll need is a TrueType or OpenType font file* to reap the benefits of ViPR technology. The font file is merely placed -- not installed -- on the web server. I'm just trying to make this as easy as possible for folks.

Vine Type allows ViPR to be defined on a per-template basis, and since Vine Type allows any number of templates on a website, you can have multiple heading styles if you wish.

By the way, the font currently being served up on this site is Concurso Italian.

* Oh, and Vine Type of course.

reopening comments in light of my comment at 456 Berea Street.


Well, that's quite slick! Me likey!

The dependance on Flash is what kept me from using sIFR. Virtually no exclusivity here...

Any serverside changes and/or programs required or is it all in the code?

Matt Waller 14 Feb 2006

Thanks, Matt!

The only change on the server is a new folder called fonts inside the vinetype folder. There's copyright terms on some fonts that require that internet visitors not be able to gain access to the font files themselves, so I require that the font file be placed outside the web space.

Other than that, there's a vinetype.config entry that's rather long indicating (not necessarily in this order and I'm still fooling around with all the options)

  • the template name
  • the font file name
  • the font style
  • the font color
  • the background color
  • the font size
  • the max width of the image
  • ...and more!

The measureString() calculations and the actual drawString() results sometimes differ, so I'm including a couple of clip values to allow for manual tweaking of the final image size. I don't see any other way around it since I'm seeing different results with different fonts.

But, to finally answer your question, just a font file and a config setting.

And of course I have to mention that upgrading to the new version of Vine Type will consist of replacing the vinetype.dll file and refreshing your browser.

Carl Camera 14 Feb 2006