View Full Version : Thumbnail Viewer vs. Lightbox caption font rendering

11-02-2009, 01:40 AM
1) Script Title: Lightbox image viewer 2.03a

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

3) Describe problem: Caption font rendering is jaggy

I first implemented Image Thumbnail Viewer on a site I'm designing: http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm
Got it working just fine.

Then I decided to go a little more sophisticated and implemented Lightbox 2.03a. I made a copy of the original web site in a different folder so I could go back to Thumbnail Viewer if I wanted - so I've got two versions going.

I got Lightbox working fine except the fonts in the captions are jagged compared to the fonts for Thumbnail Viewer. I've experimented some with the Lightbox CSS, but nothing seems to fix it.

The original lightbox.css has verdana and I changed to Times New Roman and upped to 12px instead of 10px. Caption font rendering in IE7 is awful. Much better in Firefox, but none of them beat the font rendering in the original Thumbnail viewer.

Here is a page using the Thumbnail Viewer: http://portraitartist.com/kaleidoscope/artists/mcullohs.htm
Caption font renders beautifully on the enlargement.

Here is the same page using Lightbox:
Check it out in IE (I have v7) and Firefox. Big difference between the two, but still, neither show the caption lettering as smooth as the Thumbnail Viewer.

Well, this is how I'm seeing it over here. Anyone have suggestions?

11-02-2009, 03:06 PM
This is somewhat monitor and display dependent. It's true that IE 7+ will sometimes lose 'clear type' anti-aliasing on text within a filtered element. But in this case I cannot see any meaningful difference. I often can though, so this case must not be too severe. However, as I say, this can be somewhat affected (as to how dramatic the difference appears to be) by the monitor and display resolution.

There's no easy fix. Presumably IE will sooner or later address this. It was fine in version 6 as long as the text had background, but since version 7, adding background no longer helps. Opera had a similar problem for awhile, but I believe they have resolved it. Some scripts and/or script libraries may take this into account and find ways of using filters without applying them to elements that could contain text (like instead of fading in text - fade out a solid colored cover of the text) or may use ways of removing the filter from the element once its transitional phase is complete.

To institute either of these strategies in a script like Lightbox could be complex. I'd just make sure you are using the latest version and hope for the best. Or use another script that doesn't do this. Or just live with it. Lightbox, at least the latest version, may have 'animations' disabled, this may fix this, but will make the opening of the lightbox less dramatic.