10

I'm doing some stylistic text inside of rounded divs, where the text bumps right up against the top of the container. I've been able to control almost all content, nested divs, images set as backgrounds, etc, and had them all clip successfully, but this one has been giving me serious grief.

Using the old-school image borders or cover-ups is not a solution as we have dynamic graphical backgrounds. We need a solution to actually clip the text.

This is mostly visible in Firefox 3.x and older versions of Chrome

Here's the sample code to play with:

http://jsfiddle.net/vfp3v/1/

div {
    -moz-border-radius: 45px;
    border-radius: 45px;
    background-color: #ccc;
    font-size: 100px;
    color: #777;
    line-height: 70%;
    overflow: hidden;
    width: 257px;
}

the jank:

enter image description here

Notice it's been fixed in the new Chrome and FireFox 4 - the shui:

enter image description here

Most of our site users are Firefox 3.6, so would love to be able to provide an elegant solution for them as well. Any help appreciated! Cheers

ioTus
  • 667
  • 6
  • 9

1 Answers1

5

This one works in FF 3.6: http://jsfiddle.net/vfp3v/15/

It has some drawbacks, as you can see in the second example (in FF 3.6) the clipped off border has a solid color, so if you are using some kind of background this might look ugly. Just take a look at it, it might fit your needs.

I just added a span:

<div><span></span>WXYZ</div>

and then positioned it over the text with a border in the same color as the background, and a displacement as big as the border:

div{
    position:relative;
    etc...
}
span{ 
    position:absolute; display:block; width:100%; height:100%;
    border:25px solid #fff; top:-25px; left:-25px;
    -moz-border-radius: 70px; border-radius: 70px; /* 45 radius + 25 border */       
}

edit: just tested this in chrome 10.0.6 (which has the clipping bug) and it worked!

In browsers that correctly support the border-radius the span (and it's border-color) isn't even visible because it is clipped off (overflow:hidden).

Willem
  • 5,364
  • 2
  • 23
  • 44
  • Interesting method, though not what we need. We have highly dynamic background images that need to show through, and rounded corners on all UI elements. – ioTus Apr 16 '11 at 20:50
  • That's indeed the only big drawback of this solution. With background-images I can't think of any good solution, I think you always end up with a method of covering the parts that should be hidden. Or just add enough padding so that clipping is never needed... – Willem Apr 17 '11 at 10:40
  • as a general bit of info our current partial "solution" is to have the text at an alpha transparency of 20%, so the text clipping is less noticeable but the high-contrast solid bg color pops the text out. Still not legitimate clipping/masking, but a step in the right direction – ioTus Apr 18 '11 at 21:46
  • this is one of those situations where you have to grit your teeth and wait for your users to catch up to technology. i'm in the same boat, and it sucks. – Winfield Trail Jul 11 '11 at 23:20