Drop-shadows text: CSS or graphic?

Question

I have an internal web app with an image at the top of the page, currently containing some english text with drop shadows. I now need to provide localized versions of this page for various languages. My main choices are:

• Have a different graphic per supported language, containing the localized text.
• Use CSS to position localized text over a plain image, with a complex CSS technique to get drop shadows in most current browsers.

Are there other options? This is for an educational environment, I don't get to control the browser used by the students.

I did try both removing the drop shadows from the graphic, and also moving the text into in a header in the HTML, but neither was appealing. People said it looked like a cheap knockoff of the current page, which wounds my pride.

Answer 1

Personally I'm a big fan of CSS techniques for visual effects like this. The big benefit is that you are offloading the processing of the effect to the client side, saving you bandwith and content creation time (custom text images for each locale is a big order!), and making the page download faster for the user.

The only reason to avoid it is if you absolutely MUST have the drop shadows on very old (IE5) browsers with next to no CSS support.

Edit: Just thought of something - I a few cases like this where I need a specific font or some exact text effect I've used PHP to render the text, with effects, to an image and cache it server side. That way you avoid the content creation process and gain wider browser support in exchange for bandwidth and server CPU time. It's your call if the tradeoff is acceptable.

Answer 2

Generate the images on request server-side for each language, complete with shadows. Cache them as needed.

If you can use Image Magick, you can refer to this tutorial for generating text + shadows...

Answer 3

Maintaining images with text can be a pain - even without localization, I'd avoid it.

Two choices that I would attempt before going with your options are:

• Looking for a free program that generates drop-shadow images that you can have your program utilize whenever it detects that new text is available for the title
• Using a shadow image that can be repeated as a background image underneath the text

If those don't work, I'd try the CSS, but test it in as many browsers as you can yourself before going live with it.

Answer 4

Well, Safari supports a proprietary CSS property for drop-shadows, but it won't work in other browsers. CSS3 will have drop-shadows, too (actually only one for boxes, but maybe it can be used for text, too, e.g. when the box has a transparent background).

But seeing that most browsers don't even have a 100% CSS2 support so far, I guess you need to go with one of your two options. Of course, there is a not so complex CSS trick to get a drop shadow:

Drop Shadows for Everyone

But they don't look as nice as a real shadow, since they are not blurred. Further you need to have the text twice in the HTML for these to work.

Answer 5

There's always the AJAX easy way, with jQuery you can pretty much do it with a couple of lines of code. Here's a link to a drop shadow plugin for jQuery

http://eyebulb.com/dropshadow/