Hello!

I am using this module on my <h1> tags and it works fine (images are created and cached), but the text in the image looks a bit funky. It seems like some letters "overlap" or "cut off" parts of other letters. I'm using the default CHOPS.TTF font. The problem goes away if I apply "letter-spacing: 1px" to my <h1>'s, but then the letters are spaced WAY too far apart (more than 1px for sure).

This is therefore not a viable solution, but it leads me to believe that the problem lies in the way FLIR "kerns" letters..? Or perhaps it's just the font itself..? Seems strange since if you look at sites such as dafont.com, they use something similar to preview fonts with custom text, but I don't notice any problems there, even for chops.ttf.

I've attached a two-frame animated .gif to show what's happening. Frame one is just a screenshot, and frame two is pointing out the areas of concern, in case it's not immediately obvious.

I understand that this is just a port of FLIR, so I may post on their forums as well, but I wanted to start here because it seems like other people should be experiencing the same issue (though apparently not). I'm using default settings, default font, nothing fancy.

Thanks for any help!

CommentFileSizeAuthor
flir.gif7.09 KBroper.

Comments

roper.’s picture

roper. commented

Sorry to post again so soon, but I think I've narrowed the problem a bit. If I manually change the URL of the image, and change the background from "transparent" to "black" the image looks PERFECT! I assume that if I apply "background-color: #000" to my <h1> CSS, it will work fine.

The problem though, is that there is a background-image on the div CONTAINING the <h1> that is a simple gradient, which needs to display behind the generated image.

If there aren't any real solutions, I think I can make this work with some simple positioning changes, but I'd like to keep the background transparent if at all possible. Still open to suggestions.

Thanks.

roper.’s picture

roper. commented
Status: Active » Closed (fixed)

Scratch that!

It appears that this is a problem inherent to GD library. Optionally, you can use ImageMagick plugin instead which will fix the issue, but I think that requires PHP5 so I have to go tell my host to upgrade!

Ref: http://forums.mawhorter.net/viewtopic.php?id=278

Closing.