If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

text inside of a circle

I am working on a site for a client, they want their text on their home page to be in an oval shape. I thought maybe I could use a div with the border-radius in css. Problem with this is the text won't hold true to the shape of the div. Is there a way I can do this tha anyone knows of?

I am working on a site for a client, they want their text on their home page to be in an oval shape. I thought maybe I could use a div with the border-radius in css. Problem with this is the text won't hold true to the shape of the div. Is there a way I can do this tha anyone knows of?

Thanks

I am not aware of any "direct" way to do that...

But...

Getting imaginative, I would think that you could float some empty elements (of sizes necessary for your needs) both left and right within the container, and then let the text wrap iteslf in the remaining space.

It should be noted that this is sloppy coding practice. Empty elements are a bad thing and this is going to require a bunch of them.

Also, this solution is not completely "fluid," given its requirements. This is based on "em" measurements so it is flexible, but at certain font sizes the bottom line gets wrapped into a new line which stretches the oval out for another row of text, but leaves the "bumper" up on the previous line which means that the second-to-last row is squeezed a but when it doesn't need to be. Anyway, for a somewhat strictly controlled layout you might be able to get by with something like the above.

Last edited by Rowsdower!; 10-05-2012 at 04:54 PM.
Reason: beautification...

I would rather directly work with line breaks and/or soft hyphens, assuming that the layout/content is pretty static.

Soft hyphens won't break the line any better than standard wrapping does when it comes to staying within the visual bounds of the border-radius. They will just occasionally break a word into two pieces rather than sending the whole word to the next line.

But we are agreed with respect to the line breaks. That would be best in a perfectly controlled environment with static text. However, if font sizes are not held to a static "px" measurement and the user has increased their font sizes you will likely be in trouble. Likewise, if the client will have rotating or frequently updated information placed in the "oval" you will need something a bit more "client-proof" to avoid having them break their own layout.

The option presented in my sample page is crappy (I can't state that enough) but it has a small degree of insurance built into it, in that more text will work in it than will not (up to a certain pre-determined number of lines of text). I'd really like to see a CSS3 style to take care of this automatically but for now this is the best hack I could think of to try to fill the need.