I'm a passionate web developer and systems architect. I work as an independent consultant specializing in EPiServer and search.
About web development with ASP.NET and EPiServer, fatherhood and other adventures in my digital jungle
I was asked today to look into creating an ASP.NET HTTP handler that on the fly creates images with text in a specific font. The handler had to meet a few requirements:
Eager not to reinvent the wheel I set out to find a suitable open source component that met these demands. To my surprise that turned out to be easier said than done.
It might just be me being a really bad Google user (I did ace the final exam in a weird course called “Information retrieval on the Internet” in high school though!) but all I could find was a few blog posts about creating such handlers with some source code attached. Finally I decided to give dotIR by Milan Negovan a try despite the fact that the latest version was a beta released in 2004.
I was pleasantly surprised. After having upgraded the project from a VS 2003 project to a VS 2010 project and converted it from a web project to a class library with a handler that I could map in web.config it worked like a charm. It did need a few adjustments though. I changed it so that it generated PNG:s instead of GIF:s and supported transparency. Also, it doesn’t support caching the images which is something I will definitely add my self. Just got to decide if I want to cache them in memory or on disk first.
Happy that I’d found what I thought was a fairly simple solution to my task I tried it using an OpenType font and was a bit surprised to find that it didn’t work. The handler was unable to find the font even though it was installed on the server. Turns out the font I was trying to use was an OpenType font with an internal PostScript font (as opposed to an OpenType font with an internal TrueType format) and GDI+ only support OpenType fonts with internal TrueType format.
While there are workarounds for this we decided to use a program called FontXChange to convert the OpenType font that we wanted to use to TrueType instead of spending more time on implementing the workarounds in the handler. I might do that some other day though :)
I was a bit surprised to find that I couldn’t locate a more complete solution for generating images with text in them. If you know of another, better solution than the one that I found please let me know with a comment!
PS. For updates about new posts, sites I find useful and the occasional rant you can follow me on Twitter. You are also most welcome to subscribe to the RSS-feed.
This blog is built with EPiServer Community, EPiServer CMS, ASP.NET MVC and a bunch of other great products. The source code is available for download at the projects page, where you also can read more about this site and my other projects.
read more
Comments
Henrik Nystrom 1 years ago
At Dropit we used our own version of the http://www.amarantin.se/ webpack quite extensively.
It's quite focused on creating buttons, but has all the features to be used as you describe.
Johan Kronberg 1 years ago
If you just need the font for use with stuff that can be styled using CSS you should look into if
is an option. If the licensing issues for the font can be solved it's the best way.Oli 1 years ago
If licensing with @font-face is tricky, check out some of the commercial services that have sprung up like http://www.typekit.com
If you haven't already, also worth playing around with SIFR and Cufon. One is based on replacing elements with Flash to render a custom font, the other is based on drawing the text to a canvas element based on the font vector information.
These are a little less obtrusive and let you do things like control text size via CSS, then have your settings automatically translate into the custom rendered text.
Joel Abrahamsson 1 years ago
Thanks for the input guys! Unfortunately @font-face wasn't a viable option in this case and neither was javascript based solutions as we were going to use the font for more than a few headers :/
Amarantin webpack definetly seems like a good alternative to dotIR.
link of london 1 years ago
One is based on replacing elements with Flash to render a custom font, the other is based on drawing the text to a canvas element based on the font vector information.