Web Development

Ask something
Discussion Locked

Superimpose text over an image

0 helpful
4 replies

by maryweilage

Closed to new repliesThis discussion is closed. It stays readable, but it takes no new replies.

The Dec. 3 edition of the Design and Usability Tactics e-newsletter explains why you may want to consider superimposing text over an image using the CSS-styled text technique. Are you already using this technique? If not, do you think Michael Meadhra makes a good case for trying this method the next time this situation arises? Share your thoughts on this method.

If you aren't subscribed to the Design and Usability Tactics TechMail, visit our e-newsletter subcenter to subscribe to this free e-newsletter:
http://nl.com.com/MiniFormHandler?brand=builder&subs_channel=bldr_front_door&list_id=e614&;;tag=fb

* Please delete any extra spaces that appear when you paste this link into your browser.

4 replies

by alsopls

I have been following this method since I started using CSS. I read some of Meyer's (Eric?) work on the subject and have found this to be a super simple method of text over graphics.
Also, when updating a site, it is simple to change the text, while keeping the graphic, or changing the graphic while keeping the text.

by alexcohn

The big advantage of this method is that the quality of text rendering is not reduced by using compressed images. Sure, the flexibility is greatly improved, too.

The big disadvantage, Michael deliberately ignored, is the fact that quite often superimposed text is designed to "label" the image even if the latter is saved to disk or reused in another fashion. Alternatively, some designers choose server-generated text to use extravagant fonts or character sets, or to prevent text copy to clipboard.

Unfortunately, the CSS method does not scale automatically with graphics or text changes: the whole design should be manually tuned if the text becomes a bit longer, or if the image becomes shorter.

Finally, the method does not need the CSS: I've been using "graphical buttons" with text superimposed over a 3-d round-cornered JPEG with the help of tables.

by anandtirtha

The Css method is a good alternative to images for including the superimposed text. But, there is a limitation as far as presentation alignments and a programmer has to necessorily handle these issues.

This limitation, in certain cases, can be an advantage for the programmer since manual tweeking for alignemnt will allow customisation of presentation (look and feel aspects).

Generally a good option though.

by jlhiowa

Thanks, I found this useful. It's always good to learn a variety of ways to do things so that you can use the best method for each situation.

This discussion is closed to new replies.