Re: Text within an image

by "Keith D Sellars" <Keith(at)webgraffix.com>

 Date:  Wed, 8 Oct 2003 08:27:53 -0400
 To:  "HWG Basics" <hwg-basics(at)hwg.org>
 References:  s8x1s5 riveraamd
  todo: View Thread, Original
The effect could also be accomplished, although somewhat cumbersomely, using
table rows and columns while simultaneously setting the font size.  HTML
really is not meant for this type of application - what I mean is that HTML
in its truest form concentrates more on content and not on presentation.
However, I'm pretty certain that you can accomplish the effect that you
desire by using the image of the circle, in this case, as a background image
of a table with the table's width and height set to approx. the same as the
circle's diameter.  Then using the necessary rows and transparent gif images
to the left and right of your text, you should be able to accomplish what
you're referring to.  Keep in mind, however, that since browsers tend to
render fonts differently depending upon the user's settings (and possibly
whether or not it is a PC or a MAC), you may not be able to achieve full
control of the rendered page, although with CSS you can achieve fairly
consistent results.

Good luck,
Keith D Sellars
WebGraffix
www.webgraffix.com
"Making the Internet Easy"

----- Original Message ----- 
From: "Tim Rivera" <lists(at)timrivera.com>
To: "HWG Basics" <hwg-basics(at)hwg.org>
Sent: Wednesday, October 08, 2003 1:40 AM
Subject: Re: Text within an image


> > I just saw a magazine article (paper) that had a silhouette-like
> > colored area in the shape of someone's head and within this head
> > area the text wrapped to fit inside.  Does anyone know how to
> get
> > this effect on a web page? I want the words to be text so I can
> > update it easily.  Thanks.
>
>
> Hello Beth,
>
> There currently is not a defined way to do this. However, you may
> be able to accomplish this effect in newer browsers using Eric
> Meyer's "ragged float" demonstration by slicing the image into
> several parts and floating some parts left, the other right. Put
> this in a box with a specified width, and the text should wrap
> nicely "inside" the image.
>
> http://www.meyerweb.com/eric/css/edge/raggedfloat/demo.html
>
>
> Tim
> ____________________________________________________________
> http://webdesign.meetup.com/     See you at the next meetup!
> http://css.meetup.com/
>
>
>
>

HTML: hwg-basics mailing list archives, maintained by Webmasters @ IWA

This page is part of a preserved archive of archives.hwg.org. The site is no longer active and its content is not maintained. For enquiries about this archive, write to archive(at)iwanet.org.