Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Radius DIV + P

5 views
Skip to first unread message

Andrew Poulos

unread,
Apr 12, 2012, 10:40:07 PM4/12/12
to
I have a bordered DIV which contains a P. The DIV also has a border
radius. The text in the P runs underneath/over the radiused DIV border.

Is there a way to get the text to stay clear of the radiused border as
it does from straight borders?

Andrew Poulos

dorayme

unread,
Apr 12, 2012, 10:52:03 PM4/12/12
to
In article <LcWdnfbEsv6TDxrS...@westnet.com.au>,
Does the text in this "stay clear":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Cheating</title>
<style type="text/css" media="screen">
div {
margin-left: 10%;
margin-right: 10%;
-moz-border-radius: 15px;
border-radius: 15px;
color: #000;
background: #f1f1f1;
padding: .2em .8em .5em .8em;
margin-top: 1em;
}
</style>
</head>
<body>
<div>
<p>Cras vel eros. Vivamus sed odio et orci tincidunt ornare.
Duis dui lectus, commodo ut, gravida id, ultricies quis, tellus.
Vestibulum blandit nibh eget turpis. Quisque mollis, lacus consectetur
eleifend convallis, diam augue blandit magna. Cras vel eros. Vivamus
sed odio et orci tincidunt ornare. Duis dui lectus, commodo ut,
gravida id, ultricies quis, tellus. Vestibulum blandit nibh eget
turpis. Quisque mollis, lacus consectetur eleifend convallis, diam
augue blandit magna. Cras vel eros. Vivamus sed odio et orci tincidunt
ornare. Duis dui lectus, commodo ut, gravida id, ultricies quis,
tellus. Vestibulum blandit nibh eget turpis. Quisque mollis, lacus
consectetur eleifend convallis, diam augue blandit magna.</p>
</div>
</body>
</html>

--
dorayme

Andrew Poulos

unread,
Apr 12, 2012, 11:20:51 PM4/12/12
to
Not if I increase the radius to 80px.

Andrew Poulos


Jonathan N. Little

unread,
Apr 12, 2012, 11:34:58 PM4/12/12
to
Then you will have to adjust the padding on the DIV. It is a consequence
of geometry... ;-)

div {
width: 20em;
margin: 1em;
padding: 0;
border-radius: 50%;
color: #000;
background: #ddd;
}



--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Andrew Poulos

unread,
Apr 13, 2012, 12:30:10 AM4/13/12
to
Doesn't that mean that the text won't follow the shape of the round
corner? That is, I'll basically be creating a rectangle within a rounded
rectangle.

I'm at a loss as to understand why it appears that a rounded border is
something that doesn't "cut off" the corners rather than just be window
dressing.

Andrew Poulos

Andrew Poulos

unread,
Apr 13, 2012, 3:23:29 AM4/13/12
to
In the spec it gives an example that appears to use padding to prevent
content overflowing corners:
<http://www.w3.org/TR/css3-background/#corner-clipping>

Andrew Poulos

dorayme

unread,
Apr 13, 2012, 4:16:24 AM4/13/12
to
In article <nbadnWXl_PVGNhrS...@westnet.com.au>,
Andrew Poulos <ap_...@hotmail.com> wrote:

> On 13/04/2012 1:34 PM, Jonathan N. Little wrote:
> > Andrew Poulos wrote:
> >> On 13/04/2012 12:52 PM, dorayme wrote:
> >>> In article<LcWdnfbEsv6TDxrS...@westnet.com.au>,
> >>> Andrew Poulos<ap_...@hotmail.com> wrote:
> >>>
> >>>> I have a bordered DIV which contains a P. The DIV also has a border
> >>>> radius. The text in the P runs underneath/over the radiused DIV border.
> >>>>
> >>>> Is there a way to get the text to stay clear of the radiused border as
> >>>> it does from straight borders?
> >>>
> >>> Does the text in this "stay clear":
> >>>
...
> >>> div {
> >>> -moz-border-radius: 15px;
> >>> border-radius: 15px;
> >>> color: #000;
> >>> background: #f1f1f1;
> >>> padding: .2em .8em .5em .8em;
> >>> }
...
> >>> <div>
> >>> <p>Cras vel eros. ...</p>
> >>> </div>
...
> >>
> >> Not if I increase the radius to 80px.
> >>
> >
> > Then you will have to adjust the padding on the DIV. It is a consequence
> > of geometry... ;-)
> >
> > div {
> > width: 20em;
> > margin: 1em;
> > padding: 0;
> > border-radius: 50%;
> > color: #000;
> > background: #ddd;
> > }
>
> Doesn't that mean that the text won't follow the shape of the round
> corner? That is, I'll basically be creating a rectangle within a rounded
> rectangle.
>

Basically, I would say, yes. Suppose the corners are so rounded that
the rectangle makes out like it is a frustrated circle. What exactly
should justified text - to dramatize for both sides - do? Follow, on
the inside, the contours? That would be neat (like is possible in
image programs). But I don't think it is so sophisticated in CSS3. As
Jonathan says, you have to make adjustments elsewhere.

You put it well, the text behaves as if it is in a rectangle proper.
The rounded corners are an enhancement that mimics the technique of
slapping bits of sector images in the corners on top of the basic
rectangle.

> I'm at a loss as to understand why it appears that a rounded border is
> something that doesn't "cut off" the corners rather than just be window
> dressing.
>

Perhaps too difficult to code for in browsers? Perhaps they were
thinking along the lines of the old techniques of images masking the
corners and that would be good enough for now. Imagine how tricky to
tell the text to follow the curves? The browser would need to
calculate just where to wrap to follow the curve down, different lines
of text having different widths to expand or contract into.

--
dorayme

Andrew Poulos

unread,
Apr 13, 2012, 7:32:56 AM4/13/12
to
On 13/04/2012 6:16 PM, dorayme wrote:
> In article<nbadnWXl_PVGNhrS...@westnet.com.au>,
Its a pity its not as sophisticated as it initially appears to be.

Anyhow what I've done, for DIVs with the same radius of every corner, is
to add padding that's equal to the size of the border radius divided by
3.75 (I use javascript to dynamically add the padding on load).

Thanks for the insight.

Andrew Poulos

Jonathan N. Little

unread,
Apr 13, 2012, 10:05:27 AM4/13/12
to
Overflow property, default is "visible". A similar thing confounds many
when the define a "box" DIV in pixels and we show them the mess when the
user has a font size larger than that they expected...

div {
width: 20em;
margin: 1em;
padding: 0;
border-radius: 50%;
color: #000;
background: #ddd;
overflow: hidden;

Jonathan N. Little

unread,
Apr 13, 2012, 10:13:33 AM4/13/12
to
Jonathan N. Little wrote:

> Overflow property, default is "visible". A similar thing confounds many
> when the define a "box" DIV in pixels and we show them the mess when the
> user has a font size larger than that they expected...


I guess I should have provided and example:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>10lbs in 5lb bag</title>

<style type="text/css">
div {
width: 150px;
height: 150px;
margin: 1em;
padding: 0;
color: #000;
background: #ddd;
}
</style>
</head>
<body>
<h1>10lbs in 5lb bag</h1>

<div>
<p>This_is_a_super_long_word_to_break_out_of_right_side.
Cras vel eros. Vivamus sed odio et orci tincidunt ornare.
Duis dui lectus, commodo ut, gravida id, ultricies quis, tellus.
Vestibulum blandit nibh eget turpis. Quisque mollis, lacus consectetur
eleifend convallis, diam augue blandit magna. Cras vel eros. Vivamus
sed odio et orci tincidunt ornare. Duis dui lectus, commodo ut,
gravida id, ultricies quis, tellus. Vestibulum blandit nibh eget
turpis. Quisque mollis, lacus consectetur eleifend convallis, diam
augue blandit magna. Cras vel eros. Vivamus sed odio et orci tincidunt
ornare. Duis dui lectus, commodo ut, gravida id, ultricies quis,
tellus. Vestibulum blandit nibh eget turpis. Quisque mollis, lacus
consectetur eleifend convallis, diam augue blandit magna.</p>
</div>

</body>
</html>



Thomas 'PointedEars' Lahn

unread,
Apr 13, 2012, 11:51:09 PM4/13/12
to
Andrew Poulos wrote:

> Anyhow what I've done, for DIVs with the same radius of every corner, is
> to add padding that's equal to the size of the border radius divided by
> 3.75 (I use javascript to dynamically add the padding on load).

What about users without "javascript"?


PointedEars
--
When all you know is jQuery, every problem looks $(olvable).

Ben C

unread,
Apr 15, 2012, 5:50:08 AM4/15/12
to
On 2012-04-13, dorayme <dor...@optusnet.com.au> wrote:
[...]
> Basically, I would say, yes. Suppose the corners are so rounded that
> the rectangle makes out like it is a frustrated circle. What exactly
> should justified text - to dramatize for both sides - do? Follow, on
> the inside, the contours? That would be neat (like is possible in
> image programs). But I don't think it is so sophisticated in CSS3. As
> Jonathan says, you have to make adjustments elsewhere.
>
> You put it well, the text behaves as if it is in a rectangle proper.
> The rounded corners are an enhancement that mimics the technique of
> slapping bits of sector images in the corners on top of the basic
> rectangle.

Yes, text is still laid out in rectangles as you have all found, and I
think that's actually what most people would want most of the time.

If you do want to justify text against a curved edge you can put a bunch
of floats in like those Eric Meyer "slantastic" demos.

Like this:

http://tidraso.co.uk/misc/circle.html

But what do you want doing with the six or so lines that overflow the
whole circle at the bottom? And what is your design for circular scroll
bars?

>> I'm at a loss as to understand why it appears that a rounded border is
>> something that doesn't "cut off" the corners rather than just be window
>> dressing.
>>
>
> Perhaps too difficult to code for in browsers? Perhaps they were
> thinking along the lines of the old techniques of images masking the
> corners and that would be good enough for now.

It wouldn't look nice-- I'd rather the first letter of the first line
overlapped the border a little bit than got indented.

> Imagine how tricky to tell the text to follow the curves? The browser
> would need to calculate just where to wrap to follow the curve down,
> different lines of text having different widths to expand or contract
> into.

It wouldn't be too hard, because browsers already have to do that to
avoid floats-- they have to reconsider how much width is available
before putting in each line.

dorayme

unread,
Apr 15, 2012, 8:19:29 AM4/15/12
to
In article <slrnjol6eg....@bowser.marioworld>,
Ben C <spam...@spam.eggs> wrote:

> On 2012-04-13, dorayme <dor...@optusnet.com.au> wrote:
> [...]
> > Basically, I would say, yes. Suppose the corners are so rounded that
> > the rectangle makes out like it is a frustrated circle. What exactly
> > should justified text - to dramatize for both sides - do? Follow, on
> > the inside, the contours? That would be neat (like is possible in
> > image programs). But I don't think it is so sophisticated in CSS3. As
> > Jonathan says, you have to make adjustments elsewhere.
> >
> > You put it well, the text behaves as if it is in a rectangle proper.
> > The rounded corners are an enhancement that mimics the technique of
> > slapping bits of sector images in the corners on top of the basic
> > rectangle.
>
> Yes, text is still laid out in rectangles as you have all found, and I
> think that's actually what most people would want most of the time.
>
> If you do want to justify text against a curved edge you can put a bunch
> of floats in like those Eric Meyer "slantastic" demos.
>
> Like this:
>
> http://tidraso.co.uk/misc/circle.html
>
> But what do you want doing with the six or so lines that overflow the
> whole circle at the bottom?

You really try not to have any?

> And what is your design for circular scroll
> bars?
>

Now funny you should ask, I was just in my workshop working on a mouse
with a little steering wheel gismo on the top, turning clockwise gets
the text to scroll within circles... the text at the top disappears
and text from the bottom comes up into view, all adjusting to the area
and needed wraps. Turning the wheel anti-clockwise, it goes the other
way. On trackpads you would use funny finger gestures (checking to see
no one was looking, of course).

The way to go with a regular mouse cursor would be a variation of what
happens when you add overflow: auto; to your div. It is, of course,
badly handled by browsers. The circle gets a right straight edge! I
mean, really! In a forthcoming z gen browser it will look more
elegant, the scroller will not interfere with the circle but just
neatly follow the curve on the right. Something like:

<http://dorayme.netweaver.com.au/justPics/curvy_scrollbar.jpg>

> >> I'm at a loss as to understand why it appears that a rounded border is
> >> something that doesn't "cut off" the corners rather than just be window
> >> dressing.
> >>
> >
> > Perhaps too difficult to code for in browsers? Perhaps they were
> > thinking along the lines of the old techniques of images masking the
> > corners and that would be good enough for now.
>
> It wouldn't look nice-- I'd rather the first letter of the first line
> overlapped the border a little bit than got indented.
>
> > Imagine how tricky to tell the text to follow the curves? The browser
> > would need to calculate just where to wrap to follow the curve down,
> > different lines of text having different widths to expand or contract
> > into.
>
> It wouldn't be too hard, because browsers already have to do that to
> avoid floats-- they have to reconsider how much width is available
> before putting in each line.

As I said, image programs do it easily enough, in Photoshop you just
draw the shape you want and you use the area text tool and click and
type away:

<http://dorayme.netweaver.com.au/aliceInTheRound.html>

I think if I wanted round boxes and text, I might well be tempted by
an image, including of the text to save a lot of trouble. Especially
for small notices and the like.

btw, CSS justified text rarely looks good anywhere, perhaps you might
agree? I mentioned it only to highlight the problem of trying to get
text to hug curves.

--
dorayme

Ben C

unread,
Apr 15, 2012, 8:32:06 AM4/15/12
to
On 2012-04-15, dorayme <dor...@optusnet.com.au> wrote:
[...]
> btw, CSS justified text rarely looks good anywhere, perhaps you might
> agree? I mentioned it only to highlight the problem of trying to get
> text to hug curves.

Yes it looks pretty bad. To do justification properly you have to change
letter spacing as well as word spacing, which I don't think browsers do,
and to judiciously break words with hyphens. TeX is pretty much the
reference for how to do this.

Andrew Poulos

unread,
Apr 15, 2012, 9:32:12 AM4/15/12
to
On 15/04/2012 10:19 PM, dorayme wrote:
>>> Imagine how tricky to tell the text to follow the curves? The browser
>>> would need to calculate just where to wrap to follow the curve down,
>>> different lines of text having different widths to expand or contract
>>> into.
>>
>> It wouldn't be too hard, because browsers already have to do that to
>> avoid floats-- they have to reconsider how much width is available
>> before putting in each line.
>
> As I said, image programs do it easily enough, in Photoshop you just
> draw the shape you want and you use the area text tool and click and
> type away:
>
> <http://dorayme.netweaver.com.au/aliceInTheRound.html>
>
> I think if I wanted round boxes and text, I might well be tempted by
> an image, including of the text to save a lot of trouble. Especially
> for small notices and the like.
>
> btw, CSS justified text rarely looks good anywhere, perhaps you might
> agree? I mentioned it only to highlight the problem of trying to get
> text to hug curves.

Though I now have a better understanding of how rounded rectangles work
its still very odd to me that content that's small enough to fit wholly
within a container overlaps the container's border. A border being
something that marks the extent of an area, and not something that is
itself within another area that forms the true extent of the area.

To give the option to round corners but to not have a "decent"
resolution to the issues of scrollbars, overflowing content... tends to
negate their usefulness with it my desire to use them.

Andrew Poulos

dorayme

unread,
Apr 15, 2012, 6:27:48 PM4/15/12
to
In article <bcidnTqj6956UBfS...@westnet.com.au>,
Andrew Poulos <ap_...@hotmail.com> wrote:

> On 15/04/2012 10:19 PM, dorayme wrote:
...
> > I think if I wanted round boxes and text, I might well be tempted by
> > an image, including of the text to save a lot of trouble. Especially
> > for small notices and the like.
> >
...
>
> Though I now have a better understanding of how rounded rectangles work
> its still very odd to me that content that's small enough to fit wholly
> within a container overlaps the container's border. A border being
> something that marks the extent of an area, and not something that is
> itself within another area that forms the true extent of the area.
>
> To give the option to round corners but to not have a "decent"
> resolution to the issues of scrollbars, overflowing content... tends to
> negate their usefulness with it my desire to use them.

Me too in many ways. But these are the facilities we have, and we
*can* make the best of them. We can even go to a lot of trouble to get
close to what we want with shapes and text using other CSS and HTML.

But back to an agreement with you, I second your disappointment. There
is something terribly superficial about the idea of rounding corners
of a rectangle to make it seem like it is another shape when under the
bonnet it is the same as it ever was, and behaves the same. When I see
a rounded rectangle, I see the wolf in a pretty bonnet besides Red
Riding Hood's bed.

--
dorayme

Andrew Poulos

unread,
Apr 15, 2012, 6:56:40 PM4/15/12
to
The doubly disappointing bit is that you only see the wolf after you've
spent a lot of time trying to work out why its not working "properly".

Andrew Poulos

dorayme

unread,
Apr 15, 2012, 8:44:02 PM4/15/12
to
In article <_fqdnWzUJtqvzxbS...@westnet.com.au>,
It is easier to bear by reflecting how *utterly disappointed* Little
Red Riding Hood would have been just after her "My, what big teeth you
have!" when she realised she was about to be eaten. Brrrrr! <g>

--
dorayme
0 new messages