Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jun 2010
    Posts
    121
    Thanks
    0
    Thanked 3 Times in 3 Posts

    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?

    Thanks

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by pdiddles03 View Post
    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.
    Last edited by Rowsdower!; 10-05-2012 at 03:54 PM. Reason: beautification...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    I would rather directly work with line breaks and/or soft hyphens, assuming that the layout/content is pretty static.

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by VIPStephan View Post
    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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •