Menu
Carl Camera

ViPR Text With Alpha Transparency

This week's work was on finalizing the code for Vine Type Inline Png Replacement (ViPR.) ViPR now supports two additional features: alpha transparent text and text rotation. These features will be included in the next release of Vine Type

Alpha Transparent Text

You'll be able to specify a value from 0 to 100 for the opacity percent of the text being generated. Background colors and patterns will show through the text to the extent that you permit it.

Rotation

You'll be able to specify rotation of your text in degree increments. This is a little tricky - 0 to 90 will definately be supported, and -90 to 90 is a possibility, but the other angles are problematic -- but at those angles they aren't very readable either.

Tweaking Controls

In order to accomodate quirks that different fonts have when being rendered onto a bitmap, there are four "tweak" parameters that can optionally be entered.

  • The first two are delta X and delta Y coordinatess. If you want the text to move to the right by five pixels, indicate 5 as the delta X parameter. If you want the textlower by 5 pixels, in the same way put 5 in the delta Y parameter. Negative numbers also work.
  • Clip X and Clip Y will allow truncating the image size after rendering and transformation. Positive numbers reduce the size on the right and on the bottom. Negative numbers add additional space.

Alpha Transparency Font and Back

You'll be able to enter the color (any system color or hex value) for the background or font, plus enter an opacity number between zero and one hundred for either as well. Of course, alpha transparency is only honored when rendering PNG images, not JPEG images.

I was somewhat hoping that painting with opacity zero would "cut out" letters from the background, but it doesn't. If you know how to do this, let me know.

Config File Definition

It looks as if the vinetype.config entry for ViPR will have up to 14 variables in it, but it only requires two -- a template name and a font file name.

Once you have an entry, adjusting the text left or right, up or down, rotation angle, etc. is pretty easy.

Now On Display

I've added background ornaments to the articles on my blog and reduced the opacity of the text to 60% to demonstrate transparent text and 90 degree rotation.

In addition I have different ViPR definitions for my home page than the other pages, so the text that is rotated 90 degrees on the home page is displayed without rotation elsewhere.

Coming Soon

ViPR will be included in the next release of Vine Type. If you have suggestions for other features, please comment below or contact me via other means. Click on my name at the bottom of any Vine Type page to send me an email.

Comments

Good going, Carl! Looks very nice.

Milan Negovan 20 Feb 2006

Thanks, Milan. Your site was certainly an inspiration.

I've tried to leverage native GDI+ on the MS platform in a useful and easy-to-use manner. Once I was able to get PNGs rendered, I had to start experimenting with alpha transparency.

And rotation is a pretty straightforward matrix transformation, so I'm able to give Vine Type some bling with a modest amount of extra effort.

I have to thank you for my favorite method from this new endeavor: ColorTranslator.FromHtml(string) that takes anything, really -- from #900 to #e2f3ce to Turquoise and returns a Color object with RGB values. That was quite a timesaver method that I found in your code. Thanks!

Carl Camera 20 Feb 2006