Re: outline-radius

On Mar 12, 2012, at 4:44 PM, Boris Zbarsky wrote:

> On 3/12/12 6:26 PM, Brad Kemper wrote:
>> 
>> 
>> On Mar 12, 2012, at 4:05 PM, Boris Zbarsky<bzbarsky@MIT.EDU>  wrote:
>> 
>>> On 3/12/12 5:01 PM, Brad Kemper wrote:
>>>> On Mar 12, 2012, at 9:41 AM, Boris Zbarsky<bzbarsky@MIT.EDU>   wrote:
>>>> 
>>>>> On 3/12/12 11:26 AM, Brad Kemper wrote:
>>>>>> Can you give some examples of non-rectangular outlines
>>>>> 
>>>>> <span style="outline: 2px solid black">This is<br>some text that is longer on the second line<br>and has a third line</span>
>>>>> 
>>>>> Load that in Opera or any WebKit-based browser.  Gecko gets this wrong at the moment, sadly.
>>>> 
>>>> I see. I would expect that to look like the following does in webkit
>>> 
>>> Note that that's not how outline should really look in this situation, and not how it actually looks in WebKit....
>> 
>> Er? The code I included, when rendered in webkit, is how I think your code should really look in that situation, when there is also such a border-radius.
> 
> So you would expect horizontal black lines between the lines of text with outline, but only when border-radius is used?

Ah, I was assuming that those lines were due to the span height being less than the line height, as with this variant:

<span style="border-radius:.5em; line-height:150%; background:white; box-shadow:0 0  0 1px black">This is<br>some text that is longer on the second line<br>and has a third line</span>

But I could be wrong. I also included some code specifically for the case where the spans overlapped (to view in webkit):

On Mar 12, 2012, at 3:01 PM, Brad Kemper wrote:

> Or, if you want to see it with line boxes that overlap due to span padding or negative line-height, paste this into webkit:
> 
> <div style="position:relative; line-height:26px; font-size:24px;"><span style="border-radius:.6em; padding:3px; background:white;">This is<br>some text that is longer on the second line<br>and has a third line</span><div style="position:absolute; left:0; top:0; z-index:-1; "><span style="border-radius:.6em; padding:3px; background:white; box-shadow:0 0  0 1px black">This is<br>some text that is longer on the second line<br>and has a third line</span></div></div>



On Mar 12, 2012, at 4:44 PM, Boris Zbarsky wrote:
> Or are you just talking about the corner-rounding behavior (that is, round the start corners and end corners but no other corners)?

Actually, I kind of like end corners being round too, but I would hope to control that with 'box-decoration-break'. Since its initial value is "slice", then the square corners at the breaks do seem appropriate here.


P.S. BTW, when I say "view in webkit", that does not include iOS, where Safari is apparently still stuck with a pre-CR version of box-shadow that does not include spread.

Received on Tuesday, 13 March 2012 16:33:55 UTC