text inside of a circle

pdiddles03 · 10-05-2012, 02:10 PM

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

Rowsdower! · 10-05-2012, 03:00 PM

Quote:

Originally Posted by pdiddles03

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.

Something like this (tested and working in IE9 and FF 7):

Code:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Oval Orifice</title>
<style type="text/css">
*{margin:0;padding:0;}
body{background-color:#222;font-size:16px;}
#oval{cursor:default;width:25em;margin:50px auto 0px;background-color:rgba(0,255,0,1.0);border-radius:20em;background-color:#444;color:#f4f4f4;border:2px solid #a4a4a4;}
#oval p{line-height:1.33em;font-size:0.75em;font-family:'verdana';font-weight:bold;text-align:center;}
.left,.right{height:0.96em;}
.left{float:left;}
.right{float:right;}
.upper_1,.lower_1{width:3em;}
.upper_2,.lower_2{width:0.8em;height:1em;}
.upper_3,.lower_3{width:0.2em;height:1.1em;}
.left.upper_2{clear:left;}
.left.upper_3{clear:left;}
.left.lower_2{clear:left;}
.left.lower_1{clear:left;}
#oval:hover div{background-color:rgba(255,255,0,0.5);}
</style>
<body>
<div id="oval">
  <div class="left upper_1"></div>
  <div class="right upper_1"></div>
  <div class="left upper_2"></div>
  <div class="right upper_2"></div>
  <div class="left upper_3"></div>
  <div class="right upper_3"></div>
  <div class="left lower_2"></div>
  <div class="right lower_2"></div>
  <div class="left lower_1"></div>
  <div class="right lower_1"></div>
  <p>This is some text within the oval. If all goes according to plan it should wrap within the shape of the oval since the floated elements take up the correct amount of space in the correct places... If I write more content here it stays in bounds at all times.</p>
</div>
<div style="clear:both;"></div>
</body>
</html>

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.

VIPStephan · 10-05-2012, 03:39 PM

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

Rowsdower! · 10-05-2012, 04:15 PM

Quote:

Originally Posted by VIPStephan

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.