Re: outline-radius

Hi all,

Any recommendations on what the next action item could be on this? Seems
we are all in agreement this needs work.

Thanks,
Paul

Am 13.03.12 17:33 schrieb "Brad Kemper" unter <brad.kemper@gmail.com>:

>
>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 Wednesday, 14 March 2012 17:10:51 UTC